Badge Webflow Award Winner 2023

Comment utiliser le mode éditeur de Webflow ?

Publié le 
23/11/2021
Modifié le 
27/3/2023
Temps de lecture : 5 min
Ecran avec interface éditeur de webflow et icone Webflow bleue
Écrit par
Thomas Labonne avec un T-shirt Digidop

Thomas Labonne

Co-fondateur

Travaillez en équipe pour faire évoluer le contenu de votre site web grâce au mode éditeur de Webflow. Ce mode vous permet de modifier des textes et images, d'ajouter de nouveaux articles de blogs facilement et rapidement. Un mode accessible même sans compétences en webdesign.

Points clés à retenir

Webflow est un outil nocode de webdesigner. Conçu avec des fonctionnalités de “glisser-déposer”, cet outil de conception de site web peut à première vu sembler simple d’utilisation. Mais une fois les mains dedans, on prend vite conscience que cet outil nocode demande de véritables compétences en webdesign sur Webflow. Il serait bien dommage de passer à coté de cet outils en raison de sa complexité, car il offre de nombreux avantages, en terme de liberté du design, de respect des bonnes pratiques SEO, de capacité à faire évoluer un site, de son CMS parfaitement conçu pour un data management efficace ou encore de sa capacité à travailler en équipe grâce au mode éditeur.

Heureusement, contrairement à Wordpress, Webflow à optimisé l'accessibilité de son outil en créant un outil no code intuitif et facile à prendre en main : le mode éditeur.

Qu’est-ce que le mode éditeur dans Webflow ?

Le mode éditeur de Webflow est un outil conçu pour optimiser le content management d’un site web. Il permet de faire évoluer le contenu d’un site web sans aucune compétences particulières en webdesign. Pas de dashboard complexe, avec des fonctionnalités avancées, le mode éditeur se limite à une interface simple et intuitive.

Vous pouvez facilement créer et modifier des textes, images, liens de vos pages statiques, mais aussi créer du nouveaux contenu en quelques minutes grâce aux pages dynamiques de votre CMS. Vous pourrez donner plusieurs accès éditeurs aux membres de votre équipe et ainsi optimiser le contenu votre site Webflow.

Interface du mode éditeur de Webflow
Interface éditeur

Les avantages du mode éditeur Webflow

Interface simplifiée

Il ne requière aucune compétence particulières en webdesign. Il est donc très simple à prendre en main et n’importe quel membre de votre équipe pourra ainsi participer à l’évolution du site web.

Fonctionnalités essentielles

Ce mode regroupe uniquement les fonctionnalités de content management. Vous pourrez ainsi ajouter, supprimer ou modifier des textes, images, articles de blogs, etc.

Conformité SEO

Chaque éditeur aura accès aux fonctionnalités SEO essentielles. Il pourra donc correctement baliser le site web en ajoutant des title et meta description à une page, en optimisant l’URL, en ajoutant un open graph, etc.

Accès aux données

Vous retrouverez dans le mode éditeur toutes les pages de votre siteweb, quels soient statiques ou dynamiques. Vous aurez un accès direct aux données issues de vos différents formulaires web pour ne jamais passer à coté d’une demande de contact. Un historique de travail vous permet de voir toutes les dernières modifications, quand elles ont été faites et par quel membre de votre équipe.

Accessibilité

Le mode éditeur est facilement accessible depuis de votre site web. Pas besoin de se connecter à une interface Webflow, vous aurez simplement à rajouter /?edit après l’URL de n’importe quelle page de votre site web.

Sécurisé

Les webdesigner n’ont pas à s’inquiéter, on ne peut rien casser avec le mode éditeur ! 🥵 Contrairement à Wordpress, un éditeur Webflow ne pourra pas impacter la structure de votre page en déplaçant ou supprimant des sections, créant des problèmes de responsive, etc.

Comment créer un compte éditeur dans Webflow ?

Pour créer un nouveau compte éditeur Webflow vous devrez demander à votre webdesigner d’ajouter votre mail en tant qu’éditeur dans les paramètres de votre projet (voir section “comment ajouter ou supprimer des éditeurs Webflow”). Vous recevrez alors un mail de Webflow avec un URL de redirection pour créer votre nouveau compte. Rentrez les informations “prénom”, “nom”, “mail” (par défaut), “mot de passe”, puis créez votre nouveaux compte. La page de votre site web Webflow va se charger à nouveau, en vous donnant accès à la barre de fonctionnalités éditeur en bas de votre écran. Vous pourrez ainsi accéder à toutes les pages et données de votre site web Webflow. Votre curseur se transforme en stylo et vous permet de changer des textes, images et liens directement sur les pages web de votre site Webflow.

💡 Pour pouvoir obtenir un accès éditeur à votre site web Webflow vous devez au moins souscrire à l'offre CMS. Pour plus d'informations sur les prix et fonctionnalités fonctionnalités Webflow, rendez-vous sur le Pricing Plan Webflow.

Comment modifier le contenu d’une page statique avec le mode éditeur ?

Les pages statiques sont des pages uniques, que vous ne pourrez pas dupliquer à l’aide du mode éditeur. Vous pourrez en revanche modifier leur contenu en changeant les textes, images, liens internes, liens externes, etc. Vous pourrez donc même participer au design du site web. Vous pouvez accéder aux pages statiques de votre dite en cliquant sur l’onglet “Pages” à gauche de la barre éditeur Webflow.

Comment modifier le contenu d’une page dynamique avec le mode éditeur ?

Dans le mode éditeur, vous aurez accès à toutes les pages, sections et données dynamiques de votre site web. Il sera donc très facile de créer de nouvelles pages ou sections dynamiques comme des articles de blog ou des offres d’emploie dans votre site Webflow. Vous aurez accès à ce contenu dynamique directement dans l’onglet “Collections” de la barre éditeur Webflow. Chaque collection regroupe plusieurs pages ou sections dynamiques. Vous pourrez les éditer ou en ajouter de nouvelles en quelques clics.

Comment optimiser le SEO d’une page statique Webflow ?

SEO settings - Le mode éditeur vous permet d’optimiser les paramètres SEO de toutes vos pages statiques. Vous pourrez ainsi optimiser le slug de vos URL, ajouter un title, une meta description, un thumbnail, pour améliorer l’aperçu de vos pages sur les moteurs de recherche.

Open Graph Settings - Vous pourrez aussi ajouter un open graph afin d’améliorer l’aperçu de vos pages lorsque vous les partage sur les réseaux. Le mode éditeur vous permet de personnaliser les title, description et images de chaque open graph.

Site Search Settings - Si vous avez une barre de recherche dans votre site web Webflow, vous avez la possibilité d’améliorer l’aperçu de chacune de vos pages dans ces recherches.

Comment optimiser le SEO d’une page dynamique Webflow ?

Les pages dynamiques sont directement paramétrées par votre webdesigner, et vous n’avez qu’à remplir des champs prédéfinis. Ainsi pour optimiser vos nouveaux articles de blogs, vous pourrez facilement optimiser votre SEO : personnaliser votre slug d’URL, ajouter des balises Title et Meta descriptions, ajouter un open graph, ajouter des attributs Alt à vos images, appliquer une structure de Heading dans le corps de votre texte, etc. Vous aurez accès à ces paramètres SEO directement dans vos pages dynamiques. Si ces paramètres ne sont pas accessibles, demander à votre développeur de les ajouter.

Comment ajouter ou supprimer des éditeurs Webflow ?

Ajouter de nouveaux comptes éditeurs dans Webflow c’est simple, mais pas faisable avec le compte éditeur lui-même malheureusement. Vous devrez donc vous connecter à votre projet Webflow en mode développeur >settings > editor. Une fois dans les paramètres éditeurs du projet vous pourrez facilement ajouter ou supprimer de nouveaux comptes éditeurs Webflow.

Ai-je un accès éditeur Webflow avec un site Digidop ?

Oui ! Chez Digidop nous encourageons l'utilisation du mode éditeur. Nous avons conscience de la complexité du designer de Webflow, c'est pourquoi les sites web que nous créons sont pensés avec un maximum de sections dynamiques. L'objectif est d'améliorer l'accessibilité du site auprès de nos clients. Plus autonomes, ils peuvent utiliser leur site sans code, en créant de nouvelles pages, en faisant évoluer le design, en modifiant le contenu de certaines sections, en aillant un visuel sur les données issues des formulaires de contact, etc. Nous cherchons à vous rendre un maximum indépendant pour les taches quotidiennes liées à votre site.

Quelques exemples de ce que permet de faire le mode éditeur sans code :

  • Créer un nouvel article de blog
  • Créer une nouvelle offre d'emploie
  • Ajouter un nouveau membre de l'équipe
  • Créer un nouveaux podcast
  • Ajouter et modifier des textes images
  • Ajouter et modifier des vidéos
  • Optimiser le SEO de vos pages
  • Ajouter de nouveaux avis clients

Nouvelle formation Webflow Editeur 2023

Retrouvez notre nouvelle formation gratuite sur le mode éditeur de Webflow au format "hors-série" sur la Digidop Académie

Formation Webflow Editeur 2023
projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop