Icon

RESSOURCE

Icon

Guide de prise en main de l'outil Framer

Guide de prise en main de l'outil Framer

Icon

1

Icon

Les bases pour se repérer

Avant de toucher quoi que ce soit, prenez quelques minutes pour comprendre l'environnement dans lequel vous allez travailler.

C'est le meilleur moyen d'éviter les erreurs et d'agir avec confiance.

À propos de Framer : un outil puissant, pensé pour vous

Votre site a été construit sur Framer, un outil de création de sites web professionnel utilisé par des agences et des développeurs dans le monde entier. Il permet aussi à ses utilisateurs de gérer leur contenu de façon autonome, sans jamais toucher au code.

C'est exactement ce positionnement qui en fait un bon choix pour un cabinet d'avocats : le design et la structure ont été pensés et configurés une bonne fois pour toutes. Vous intervenez uniquement sur le contenu, les textes, les images et les articles dans un espace dédié qui ne risque pas de casser votre site.

Les réglages essentiels à connaître

Depuis votre tableau de bord Framer, vous avez accès à un certain nombre de réglages. La grande majorité ne vous concerne pas et ne doit pas être modifiée. Voici ce que vous pouvez avoir besoin de consulter :

  • La publication : le bouton qui met en ligne vos modifications. Aucun changement n'est visible sur votre site tant que vous n'avez pas cliqué sur "Publish".

  • Le plan payant : Framer fonctionne sur abonnement mensuel ou annuel. Vous pouvez consulter votre plan actuel, la date de renouvellement et les limites associées depuis l'onglet Settings de votre projet.

  • Le nom de domaine : c'est ici qu'est connecté votre nom de domaine (votre-cabinet.fr). En cas de problème d'affichage du site, c'est l'un des premiers endroits à vérifier.

En cas de doute sur un réglage que vous ne reconnaissez pas : ne touchez pas et contactez votre prestataire. Certains paramètres techniques, s'ils sont modifiés, peuvent rendre votre site inaccessible.

Comprendre la structure de vos pages

Votre site n'est pas un seul grand bloc de contenu, il est composé de pages distinctes, chacune avec un rôle précis. Depuis le panneau de gauche de Framer, vous pouvez voir la liste de toutes vos pages.

En général, un site de cabinet d'avocats est structuré ainsi :

  • La page d'accueil : la vitrine principale, celle que voit un visiteur en arrivant sur votre site.

  • Les pages de services : une page dédiée par domaine d'intervention (droit du travail, droit de la famille, etc.).

  • La page blog : là où s'affichent automatiquement vos articles publiés.

  • La page contact : formulaire de prise de contact et informations pratiques.

Savoir où se trouve chaque contenu vous évite de modifier la mauvaise page et vous fait gagner un temps précieux.

Icon

2

Icon

Ajouter un article de blog

C'est l'action que vous ferez le plus souvent.

Bonne nouvelle : Framer dispose d'un système entièrement dédié à cela, qui vous permet d'ajouter des articles sans jamais toucher au design ou à la structure de votre site.

Accéder au CMS

Le CMS (Content Management System) est l'espace dans lequel sont stockés tous vos articles. C'est votre bibliothèque de contenus.

Pour y accéder :

  1. Ouvrez votre projet Framer.

  2. Dans le menu en haut à gauche, cliquez sur l'icône CMS.

Vous voyez apparaître la liste de tous vos articles existants, avec leur titre, leur statut (publié ou brouillon) et leur date.

Créer un nouvel article

Pour ajouter un nouvel article :

  1. Cliquez sur le bouton "+" ou "New item" en haut du tableau.

  2. Un formulaire s'ouvre avec plusieurs champs à remplir.

  3. Commencez par renseigner le titre de l'article — c'est le champ le plus important, il apparaîtra en H1 sur votre page.

  4. Renseignez la date de publication et ajoutez une image de couverture (la photo qui illustre l'article dans la liste du blog).

Ne cherchez pas à tout remplir d'un coup. Vous pouvez sauvegarder un brouillon à tout moment et revenir le compléter plus tard.

Rédiger et mettre en forme son contenu

Avant de vous lancer dans la rédaction, consultez la ressource dédiée. Cliquez ici : "Comment écrire un article juridique optimisé pour le référencement ?".

Elle vous explique en détail la logique des titres H1, H2, H3, la bonne longueur d'un article, le ton à adopter et la structure à suivre.

Ce guide-ci se concentre uniquement sur la partie technique : comment appliquer ces règles dans Framer.

Ce qu'il faut savoir côté mise en forme :

  • Le titre de votre article correspond au H1. C'est le champ "Titre" que vous avez renseigné à l'étape précédente. Vous n'avez pas à le recréer dans le corps de l'article, il est intégré automatiquement.

  • Les H2 sont vos grandes parties. Dans l'éditeur Framer, sélectionnez en surlignant votre texte puis choisissez "Heading 2" dans le menu déroulant de mise en forme.

  • Les H3 sont vos sous-parties, à l'intérieur d'un H2. Même manipulation, choisissez "Heading 3".

  • Le gras : sélectionnez le texte, puis Ctrl + B.

  • Les listes à puces : cliquez sur liste dans la barre d'outils
    .

Rappel essentiel : ne sautez jamais un niveau de titre. On passe de H1 à H2, jamais de H1 à H3 directement.

Les autres éléments à renseigner

En dehors du contenu, plusieurs champs sont à compléter avant de publier.


Le slug :

C'est la partie finale de l'URL de votre article. Framer le génère automatiquement depuis le titre, mais vérifiez deux choses : pas d'accents, pas d'apostrophes, pas de caractères spéciaux : ils font buguer l'URL. Un bon slug est court et contient votre mot-clé principal.

Exemple : durant-avocat.fr/publications/licenciement-abusif.

La courte description :

C'est votre méta description, le texte qui apparaît sous votre titre dans Google. 155 caractères maximum, rédigé comme une accroche. Elle doit donner envie de cliquer et doit inclure les mots clés de l'article pour le référencement.

La date de publication :

Renseignez la date du jour. Pensez à la mettre à jour lorsque vous actualisez un ancien article, c'est un signal positif pour Google.

Le temps de lecture :

Framer ne le calcule pas automatiquement. Règle simple : une minute pour 200 mots. Un article de 1 000 mots = "5 min de lecture".

L'illustration :

L'image de couverture de l'article. Format paysage, moins de 100 Ko et en lien avec le sujet de l'article.

Publier et vérifier l'article en ligne

Une fois tous les champs remplis :

  1. Cliquez sur "Publish" dans Framer pour mettre en ligne vos modifications.

  2. Attendez quelques secondes, puis ouvrez votre site dans un nouvel onglet ou rafraichissez la page.

  3. Naviguez jusqu'à la page blog et vérifiez que votre article apparaît bien dans la liste.

  4. Cliquez sur l'article et vérifiez son affichage complet : titre, texte, images, mise en forme.

  5. Passez en vue mobile (réduisez la fenêtre de votre navigateur ou utilisez l'outil développeur de Chrome) pour vérifier que l'article s'affiche correctement sur téléphone.

Si quelque chose ne s'affiche pas comme prévu, ne republiez pas plusieurs fois. Notez ce qui pose problème et contactez votre prestataire avec une capture d'écran.

Icon

3

Icon

Modifications mineures

En dehors de la publication d'articles, vous pouvez avoir besoin de mettre à jour certains éléments de votre site : un texte qui a changé, une photo à remplacer, un numéro de téléphone à corriger.


Voici comment procéder, sans risque.

Modifier un texte

Pour modifier un texte directement sur votre site :

  1. Depuis votre projet Framer, naviguez jusqu'à la page concernée dans le panneau de gauche.

  2. Double-cliquez sur le texte que vous souhaitez modifier.

  3. Modifiez uniquement le contenu, pas la mise en forme. Évitez de changer la taille, la couleur ou la police : ces éléments font partie du design et leur modification peut créer des incohérences visuelles sur l'ensemble du site.

  4. Une fois la modification faite, cliquez en dehors du bloc, puis cliquez sur "Publish" pour mettre en ligne.

Modifier une image

Pour remplacer une image existante :

  1. Cliquez une fois sur l'image pour la sélectionner.

  2. Dans le panneau de droite, vous verrez apparaître les propriétés de l'image. Cliquez sur la vignette de l'image pour l'ouvrir.

  3. Uploadez votre nouvelle image depuis votre ordinateur.


Avant d'uploader, compressez votre image sur TinyPNG. Une image trop lourde ralentit le chargement de votre page, ce que Google pénalise.

Autres modifications simples

Quelques cas concrets que vous pourrez rencontrer :

  • Mettre à jour un numéro de téléphone ou une adresse : procédez comme pour une modification de texte classique. Vérifiez que la modification est répercutée sur toutes les pages où cette information apparaît (souvent l'accueil, le pied de page et la page contact).

  • Modifier un lien : sélectionnez l'élément cliquable, puis dans le panneau de droite, recherchez le champ "Link" ou "URL" et mettez-le à jour.

  • Mettre à jour les mentions légales : même procédé. Les mentions légales doivent être actualisées dès qu'une information change (adresse, responsable de publication, hébergeur). C'est une obligation légale.

Mise en garde : attention aux modifications en cascade

Toute modification effectuée sur la version ordinateur de votre site peut impacter son affichage sur mobile. C'est l'un des pièges les plus fréquents sur Framer : on corrige un texte sur desktop et sans le savoir, on décale un bloc sur la version téléphone.

La règle à appliquer systématiquement : avant de cliquer sur "Publish", utilisez les boutons de prévisualisation de Framer pour vérifier l'affichage sur les deux versions. En cas de doute, ne publiez pas, contactez votre prestataire avec une capture d'écran de ce que vous souhaitez modifier.


En cas d'erreur, faîtes ctlr + z pour annuler la modification.