Le mode éditeur de Webflow ✏️

En plus du mode Designer qui vous permet comme son nom l’indique de construire et de mettre en forme votre site, Webflow vous donne également accès au mode Éditor.

C’est un avantage pour vous et vos clients, il permet de faire évoluer le contenu d'un site web sans aucune compétences particulières en webdesign. On vous explique comment il fonctionne dans cet article !

‍

‍

Présentation du mode éditeur

L’interface éditeur vous permet de mettre à jour le contenu de votre site facilement (texte et image) sans passer par l’interface designer.

Tout simplement ! 😎 👍

Et par ailleurs, avec cette interface, vous pouvez donner un accès à vos clients afin qu’ils puissent modifier le contenu de leur site sans que cela n’impacte le design existant.

‍

Vous avez 2 manières d’accéder au mode éditeur : par l’interface Webflow ou directement depuis votre site.

‍

Le mode éditeur depuis l’interface Webflow

L’interface éditeur est accessible depuis votre Dashboard Webflow où sont présents tous vos sites. Il vous faut d’abord cliquer sur les 3 petits points en bas à droite de votre site. Puis, il vous suffit de cliquer sur “Editor ✎” et vous aurez directement accès au mode éditeur.

‍

‍

Vous pouvez également accéder au mode éditeur depuis la page des réglages de votre site. Cette page “Site settings” se trouve également en cliquant sur les 3 petits points depuis le Dashboard, ensuite sur “Settings”. Vous aurez alors un bouton "Editor" en haut à droite (toujours avec un petit crayon), à côté du bouton "Designer".

‍

Enfin, vous pouvez vous rendre sur l’interface éditeur directement depuis le mode designer. Lorsque vous êtes sur l’interface designer, il vous suffit de cliquer sur le logo Webflow en haut à gauche, puis sur "Editor".

‍

Le mode éditeur depuis votre site

Il existe une autre manière d’accéder au mode éditeur, très utile notamment pour les éditeurs invités, qui n’ont évidemment pas accès à votre compte Webflow.

Pour cela, il vous suffit de vous rendre sur le site web en rajoutant “ /?edit ” à la fin de URL dans la barre de recherche.

Une fenêtre apparaîtra en bas de l’écran et il faudra alors vous connecter à votre compte Webflow pour accéder au mode éditeur.

Lorsque vous reviendrez sur le site, un petit onglet “Edit Site” s’affichera en bas, vous permettant de retourner directement sur le mode éditeur.

‍

‍

Important : Avant de pouvoir accéder au mode éditeur d’un site web, l’administrateur du site doit vous indiquer comme “Guest editor” dans la partie “Members” des réglages de votre site sur Webflow.

L’administrateur peut également gérer quels éléments il souhaite rendre modifiables depuis le mode Designer. Il faut pour cela sélectionner (ou non) la case “Collaborators can edit this element” depuis la partie “Editor Settings” dans les paramètres d’un élément.

‍‍

⚠️ Attention : pour pouvoir accéder au mode éditeur, vos invités devront configurer leur navigateur afin qu'il accepte les cookies de tous les tiers. Sinon, un message d’erreur sera affiché, notamment sur le navigateur Safari.

‍

Comment se présente l’Éditeur Webflow ?

Une fois sur le mode éditeur, une barre de navigation s’affiche en bas de votre site. Elle contient différents onglets : “pages”, “collections”, “forms”, etc.

‍

‍

• En cliquant sur “pages” vous avez accès à toutes les différentes pages de votre site (statiques et dynamiques). Vous pouvez afficher une certaine page et régler tous les paramètres de celle-ci. Vous pouvez également modifier la meta description, le title tag (SEO) en cliquant sur settings (bouton situé à droite de chaque page dans la liste).

‍

• En cliquant sur “collections” : vous avez accès à vos collections CMS ! Super merci, vous me direz ! 😅 En fait, pour vous la faire simple, c’est ici que vous allez pouvoir modifier le contenu existant et en publier du nouveau (blog, mettre à jour un menu, publier de nouveaux services etc...).

‍

Chaque changement effectué ne sera effectif qu’après avoir cliqué sur publier !

Pour cela, vous avez juste à cliquer sur le bouton “Publish” situé tout à droite de la barre d’outils.

‍

Lorsque vous effectuez des modifications directement depuis votre site, vous pouvez switcher entre le mode éditeur (comme expliquer plus haut) et le mode aperçu. Pour cela, il vous suffit de cliquer sur “View Site” au-dessus de la barre d’outils du mode éditeur pour avoir un aperçu de votre site en mode live. Cela vous permet de visualiser le rendu de vos modifications avant de les publier 😉

‍

Une fois vos modifications terminées (et publiées), vous avez simplement à cliquer sur “Back to live site” dans la barre d’outils pour sortir du mode éditeur et retourner sur votre site web.

‍

Modifier des éléments On-page

‍

Le mode éditeur fonctionne un peu comme un traitement de texte classique : vous pouvez modifier les éléments de votre page directement sur la page. Cela est très utile pour changer des titres ou des paragraphes facilement, sans avoir à se soucier du design.

Lorsque vous déplacez votre souris sur la page, vous pouvez visualiser les éléments modifiables et les sélectionner facilement.

Une icône de crayon apparaît à côté de chaque titre ou texte ainsi qu’un contour vous indiquant la partie sélectionnée. Vous n’avez alors qu’à cliquer sur l’élément que vous souhaitez pour le modifier.

Vous pouvez changer le texte, mais également la mise en forme d’un mot ou d’une phrase en le sélectionnant spécifiquement.

Pour les images, une icône d’image apparaît à côté vous indiquant qu’il est possible de les modifier. Vous pouvez alors simplement changer les images qui ont besoin d’être modifiées.

Enfin, à côté des boutons, une icône de réglage apparaît qui vous permet à la fois de modifier le texte du bouton, mais également le lien de celui-ci.

‍

‍

Modification de vos collections CMS

‍

Comme indiqué plus haut, dans la partie “Collections” de la barre d’outils, vous avez accès à toutes vos collections CMS. Cela vous donne la possibilité de modifier et de mettre à jour votre contenu facilement.

Lorsque vous cliquez sur une collection spécifique, vous aurez accès à un nouvel onglet contenant tous les sous-éléments de cette collection.

En cliquant sur un élément déjà existant, vous pourrez voir toutes les informations et les modifier.

Pour créer un nouvel élément, il vous suffit de cliquer sur le bouton vert “+ New (nom de la collection)” en haut à droite et ensuite de rédiger votre contenu.

Une fois vos modifications terminées, vous avez plusieurs possibilités qui vous permettent de ne pas forcément publier votre contenu tout de suite.

Vous pouvez créer un nouvel élément (”create”), sauvegarder un élément existant (”save” ou “save as draft”), ou annuler les changements effectués (”discard”). Dans ce cas, le contenu n’apparaîtra pas encore sur votre site.

Enfin, lorsque vous souhaitez publier, il vous suffit de sélectionner l’option “publish”.

Pour gérer le contenu de vos collections déjà existantes, vous pouvez utiliser le bouton “select” (à côté du bouton + New”). Cela vous permettra de supprimer, archiver ou mettre en brouillon les éléments que vous souhaitez, avec la possibilité d’en sélectionner plusieurs à la fois.

‍

‍

‍

‍