Webflow Guide: Mastering the Editor and Designer in Webflow

Editor, designer ? Qui est qui ? Comment utiliser l'un ? Et l'autre ? 🤔

Dans ce guide, je vous propose de naviguer dans l'univers de Webflow, et d'explorer l'editor et le designer.

Plus qu'un guide théorique, il s'agit d'un guide mêlant théorie et pratique ! 🚀

Qu'est ce que Webflow ?

‍

Mon petit doigt me dit que vous connaissez déjà l'outil, mais un récapitulatif ne fait pas de mal.

‍

‍

Webflow est un outil no-code de conception de sites web qui permet de créer des sites internent sans coder. Les sites créés avec Webflow sont dotés de bonnes performances SEO et proposent un design unique, qui peut être réalisé au pixel près.

‍

Pour en savoir plus sur Webflow, j'ai de la lecture pour vous juste ici

‍

L'Editor de Webflow

Présentation de l'Editor

‍

L'editor permet de créer des modifications et d'accéder aux collections. Via l'editor, vous pouvez également publier de nouveaux articles de blog et travailler à plusieurs.

Pour se souvenir de son usage, retenez Editor pour éditer !

‍

Connexion et navigation

‍

Pour accéder à l'éditeur Webflow (c'est Editor en Français) , il vous suffit d'ajouter ?edit à l'url de votre site.

Une barre de connexion apparait en bas de votre écran, dans laquelle il vous faudra rentrer vos identifiants. Et ça y est ! Vous êtes connecté.

‍

‍

Une barre s'affiche alors en bas de page qui vous permettra de naviguer dans votre collection. Vous pourrez aussi naviguer normalement sur votre site et accéder à n'importe quel page pour éditer du texte, personnaliser les images et modifier les boutons.

‍

Comment éditer ses contenus via les pages statiques

‍

Ajouter ou supprimer du texte et des liens

‍

Il est possible de personnaliser n'importe quel texte de son site. On peut mettre certains mots en gras, en italique, ajouter du texte, en supprimer, ajouter des liens et les supprimer ...

Pour ce faire, rendez-vous directement sur la page que vous souhaitez modifier et cliquez sur le bloc de texte. Vous avez alors la possibilité de modifier directement les textes sur la page !

‍

Pour le personnaliser vous n'aurez qu'à le sélectionner : un petit menu s'affiche vous permettant de sélectionner vos options.

‍

‍

Pour ajouter un lien, cliquez sur le symbole correspondant et insérer votre url :

‍

‍

Pour permettre à l'utilisateur d'ouvrir le lien dans un nouvel onglet, cliquezsur lesymbole des paramètres et cochez la case "open in a new tab".

‍

Vous pouvez également retrouver les pages que vous souhaitez modifier dans les collections et les modifier depuis le CMS.

‍

Ajouter une image

‍

Pour changer une image depuis l'éditeur, là encore c'est facile 😊 Il vous suffit de survoler une image et de cliquer sur cette icône :

‍

‍

Il ne reste plus qu'à récupérer l'image que vous souhaitez sur votre ordinateur et voilà ! 👏

‍

Modifier les boutons

‍

Pour ce qui est des boutons, il est tout à fait possible de les personnaliser. Vous pouvez décider de renvoyer l'utilisateur vers un url externe, de le renvoyer vers une page du site, vers une section d'une page ou encore ajouter un numéro de téléphone.

‍

Bien entendu, vous pouvez également modifier le call-to-action de vos boutons pour qu'il convertisse mieux. Ici, on procède de la même manière que pour modifier un texte.

‍

Modifier les paramètres

Depuis la collection vous trouverez toutes les pages de votre site. Vous pourrez y faire autant de modifications que vous le souhaitez. Mais n'oubliez pas de sauvegarder et de cliquer sur "Publish" pour publier !

Comment créer ses contenus via les pages dynamiques

‍

Les collections et items de Webflow

Rendez vous dans les collections de votre site Webflow ! Elle se situent dans la barre qui apparait en bas de votre écran lorsque vous vous connectez à l'éditeur (comme je vous l'ai expliqué plus haut 😎).

Dans "collection", vous trouverez toutes vos collections. Logique, me direz-vous.  En fait, il s'agit d'une base de données.

‍

‍

Dans chaque collection, vous pourrez avoir plusieurs items.

‍

Si vous cliquez sur l'un des items, une page s'ouvre avec plusieurs champs. Vous pouvez alors éditer autant de champs que vous voulez.

‍

‍

‍

Prêtez une attention particulière à votre titre et pensez à personnaliser le slug ( la partie de l'url qui concerne la page) 😉 On aborde la question du SEO plus loin ...

‍

Les fonctionnalités du rich text

Arrivé sur cette page, vous trouverez un champ de texte.

Dans cet encart, vous pourrez :

• ajouter du texte
• ajouter des balises html pour vos titres et sous-titrres
• transformer du texte en citation
• ajouter des légendes à vos images
• souligner du texte
• mettre du texte en gras
• ajouter un lien
• ajouter des images
• ajouter des vidéos
• ajouter du code
• ajouter de la musique
• ajouter des bullet points
• ajouter des numéros

Pour cela, cliquez sur le "plus" qui s'affiche lorsque vous placez le curseur dans le champ pour taper du texte ou que vous sélectionnez du texte.

‍

‍

Publier la nouvelle page dynamique

‍

Tous ces efforts seront inutiles si vous ne publiez pas vos nouveaux contenus sur votre site 🤭

‍

Pour publier, rendez-vous en haut à droite de votre page, sur "Save". Ouvrez le menu déroulant en cliquant sur le triangle à côté de "Save" et cliquer sur "Publish".

Vous devez l'avoir remarqué, mais d'autres options vous sont proposées comme "Save as draft" pour sauvegarder en tant que brouillon par exemple. Choisissez l'option qui vous convient 🙂

‍

Maitriser son SEO avec l'editor Webflow

‍

Optimiser l'url

Direction les collections du mode éditeur. Sélectionnez la collection de votre choix et créez un nouvel item : une fois que vous avez appuyé sur le bouton " + New ", vous atterrissez sur une page. Les premiers champs concernent le titre, puis le slug. Pour optimiser l'url, très simple, supprimez tous les mots superflus dans le champ du slug.

‍

Structure des titres

Au niveau du rich text, pour plaire aux algorithme de Google, vous devrez structurer votre texte en ajoutant des titres H2, H3, H4 ...

Vous pourrez également mettre les mots-clés importants en gras.

‍

S'aider d'un outil SEO

Pour rédiger le contenu de votre texte, je vous conseille d'utiliser Dokey, un outil SEO. Il vous donne une analyse détaillée pour une requête. Vous y trouverez les mots clés à utiliser pour être bien référencé, leur importance et leur occurrence.

‍

Optimiser une image pour le SEO

‍

On télécharge, on importe directement dans Squoosh

On compresse son image au format webp.

Retour sur l'éditeur, on clique sur image et on ajoute une balise Alt pour expliquer à Google ce que l'image contient.

‍

‍

Open graph et meta données

‍

L'open graph est l'image que l'on voit quand on partage un lien. Ne négligez pas cette étape, ajoutez une image 😝

Renseignez la balise Alt-text, la meta title et la meta description.

‍

‍

Je vous fais un rappel 👇

Meta title : c'est le titre de la page qui apparait sur Google. Il ne doit pas contenir plus de 60 caractères.

Meta description : c'est la description de votre page qui apparait sur Google. La règle est de 145 caractères maximum.

‍

Le designer de Webflow

‍

Présentation du designer de Webflow

Le designer de

Créer un nouveau projet

On commence facile 😎 Connectez-vous à votre compte Webflow et créez un nouveau projet en cliquant sur le bouton "New Project" en haut à droite de l'écran.

Ajouter des éléments à la page

Sur votre page, vous pouvez ajouter des textes, des images, des vidéos, des formulaires et bien plus encore ! Voici comment ajouter des éléments à votre page :

• Sélectionnez votre page : une fois que vous êtes dans le designer, sélectionnez la page sur laquelle vous souhaitez ajouter des éléments en cliquant sur le nom de la page dans le panneau "Navigator".

• Ouvrez le panneau "Add" : pour ajouter des éléments, ouvrez le panneau "Add" situé à gauche de l'écran. Ce panneau affiche les différents types d'éléments que vous pouvez ajouter à votre page.

• Ajoutez des éléments : dans le panneau "Add", cliquez sur l'élément que vous souhaitez ajouter à votre page, par exemple "Text" pour ajouter du texte, "Image" pour ajouter une image, ou "Form" pour ajouter un formulaire. Une fois que vous avez sélectionné l'élément, il apparaîtra sur votre page.

• Personnalisez l'élément : une fois que vous avez ajouté un élément à votre page, vous pouvez le personnaliser en utilisant le panneau "Style" situé à droite de l'écran. Le panneau "Style" vous permet de modifier les propriétés de l'élément, telles que la couleur, la taille, la police, la position et bien plus encore.

• Ajoutez d'autres éléments : répétez les étapes 4 et 5 pour ajouter d'autres éléments à votre page. Vous pouvez ajouter autant d'éléments que nécessaire pour créer la mise en page de votre choix.

‍

‍

Au final, l'ajout d'éléments à votre page est facile et intuitif. Une fois que vous avez ajouté des éléments, vous pouvez les personnaliser en utilisant le panneau "Style" pour créer un design unique, avec un effet wahou  🤩

Personnaliser les éléments

Je vous montre à présent les étapes pour personnaliser les éléments ajoutés à votre page 👇

• Sélectionnez l'élément : pour personnaliser un élément, cliquez dessus pour le sélectionner. Une fois que vous avez sélectionné l'élément, vous verrez apparaître un cadre bleu autour de celui-ci, ainsi que des options dans le panneau "Style" situé à droite de l'écran.
• Utilisez le panneau "Style" : le panneau "Style" vous permet de modifier les propriétés de l'élément sélectionné, telles que la couleur, la taille, la police, la position et bien plus encore. Vous pouvez utiliser les options du panneau "Style" pour personnaliser l'apparence de l'élément.
• Modifiez les propriétés : pour modifier une propriété, cliquez sur l'option correspondante dans le panneau "Style". Par exemple, pour modifier la couleur de fond d'un élément, cliquez sur l'option "Background color" et sélectionnez une nouvelle couleur dans la palette de couleurs.
• Utilisez les valeurs par défaut ou personnalisez : les options du panneau "Style" vous permettent de personnaliser chaque propriété en utilisant des valeurs par défaut ou en saisissant des valeurs personnalisées. Par exemple, vous pouvez modifier la taille de la police en utilisant les options de taille par défaut ou en saisissant une valeur personnalisée.
• Ajustez les marges : le panneau "Style" vous permet également d'ajuster les marges et les espacements entre les éléments. Pour modifier les marges, cliquez sur l'option "Margin" et sélectionnez les valeurs de marge appropriées.
• Prévisualisez les modifications : une fois que vous avez personnalisé l'élément, vous pouvez prévisualiser les modifications en utilisant le bouton "Preview" situé en haut à droite de l'écran. Cela vous permet de voir à quoi ressemblera l'élément une fois que vous aurez publié votre site.

Modifier d'autres éléments

Vous pouvez faire différentes modifications facilement :

• Modifier un texte en double cliquant dessus
• Supprimer un texte ou élément en cliquant sur la touche "delete"
• Modifier un lien en modifiant les paramètre de l'élément (2e onglet sur le menu de droite)
• Changer une image en l'ajoutant au préalable dans l'onglet "asset" à gauche. Puis en double cliquant directement dans le designer sur l'image à modifier.

Une fois toutes vos modifications effectuées, pensez bien à publier vos mis à jour en cliquant sur "Publish" et en sélectionnant les domaines de votre choix.

Ajouter des pages

‍

Le panneau "Pages" de Webflow permet aux utilisateurs d'ajouter de nouvelles pages à leur site .Voici comment ajouter des pages à votre site via le designer:

1. Accédez au panneau "Pages" : pour accéder au panneau "Pages", cliquez sur l'icône "Pages" dans la barre latérale gauche de l'interface Webflow.
2. Ajoutez une nouvelle page : dans le panneau "Pages", cliquez sur le bouton "Add page" en haut à droite de l'écran pour ajouter une nouvelle page à votre siteVous pouvez choisir parmi plusieurs modèles de pages, tels que "About Us" ou "Contact", ou créer votre propre page à partir de zéro.
3. Personnalisez la page : une fois que vous avez ajouté une nouvelle page, vous pouvez personnaliser son contenu en utilisant le designer de Webflow. Vous pouvez ajouter des éléments tels que des images, des vidéos, des formulaires et bien plus encore.
4. Créez un lien vers la nouvelle page : pour créer un lien vers la nouvelle page à partir d'une autre page de votre site  sélectionnez le texte ou l'élément qui doit être cliquable pour accéder à la nouvelle page, puis cliquez sur le bouton "Link" dans le panneau "Style". Dans la boîte de dialogue qui s'ouvre, sélectionnez la nouvelle page dans la liste des pages disponibles.

‍

Modifier des pages dans le designer

Certains éléments comme les "tabs" ou "slider" ont été implémenté nativement sur Webflow.

Pour accéder aux différentes vues, il vous suffit de vous rendre dans le 2e onglet "paramètre" du menu de droite.

‍

Vous pouvez ainsi accéder aux différentes vues tout en restant dans l'espace designer. Vous pouvez également accéder à d'autres paramètres comme le type de transition, le temps de transition.

Par exemple, il est possible de faire défiler automatiquement les slides d'un slider.

Organiser les éléments

Le panneau "Navigator" de Webflow est un outil puissant qui permet aux utilisateurs d'organiser les éléments de leur page. Pour bien organiser vos éléments, voici un petit tuto :

1. Accédez au panneau "Navigator" : pour accéder au panneau "Navigator", cliquez sur l'icône "Navigator" dans la barre latérale gauche de l'interface Webflow.
2. Identifiez les éléments sur la page : dans le panneau "Navigator", vous verrez tous les éléments de votre page, y compris les éléments qui ne sont pas visibles sur la page. Vous pouvez cliquer sur chaque élément pour le sélectionner sur la page.
3. Déplacez les éléments : pour déplacer un élément sur la page, sélectionnez-le dans le panneau "Navigator" et faites-le glisser vers l'emplacement souhaité. Vous pouvez également utiliser les flèches de déplacement pour déplacer un élément d'un pixel à la fois.
4. Modifiez la hiérarchie des éléments : en utilisant le panneau "Navigator", vous pouvez également modifier la hiérarchie des éléments sur votre page. Par exemple, si vous avez une image qui se trouve en arrière-plan d'un texte, vous pouvez utiliser le panneau "Navigator" pour déplacer l'image vers l'arrière-plan. Pour cela, sélectionnez l'image dans le panneau "Navigator", faites-la glisser en dessous du texte, et elle sera placée en arrière-plan.

Ajouter des interactions

‍

Cette fois-ci, voici comment ajouter des interactions à votre site Webflow :

1. Accédez au panneau "Interactions" : pour accéder au panneau "Interactions", cliquez sur l'icône "Interactions" dans la barre latérale gauche de l'interface Webflow.
2. Ajoutez une nouvelle interaction : dans le panneau "Interactions", cliquez sur le bouton "New Interaction" en haut à droite de l'écran pour ajouter une nouvelle interaction. Vous pouvez choisir parmi plusieurs types d'interactions, tels que "Scroll" ou "Click", ou créer votre propre interaction à partir de zéro.
3. Personnalisez l'interaction : une fois que vous avez ajouté une nouvelle interaction, vous pouvez personnaliser son contenu en utilisant le designer. Vous pouvez ajouter des animations, des transitions et des déclencheurs pour donner vie à votre site web. Par exemple, vous pouvez créer une animation pour faire apparaître un texte lorsqu'un utilisateur fait défiler la page.
4. Prévisualisez l'interaction : pour prévisualiser l'interaction, cliquez sur le bouton "Preview" dans le panneau "Interactions". Cela vous permettra de voir l'interaction en action et de la modifier si nécessaire.
5. Appliquez l'interaction à votre site : une fois que vous êtes satisfait de votre interaction, vous pouvez l'appliquer à votre site en cliquant sur le bouton "Apply" dans le panneau "Interactions". Cela ajoutera l'interaction à votre site et vous pourrez la voir en direct sur votre site.

‍

Gérer les formulaires depuis le designer

Les formulaires sont un élément assez spécial, implémenté directement nativement sur Webflow.

Un cliquant sur le 2e onglet paramètre sur le menu de droite vous pouvez afficher certains paramètres :

‍

‍

• Montrer lorsque le formulaire est rempli (ou s'il n'a pas pu s'envoyer) → La possibilité pour vous de modifier les textes en conséquence
• Les redirections d'URL, le type d'action etc.. (on ne vous conseille pas de toucher à cela)

‍

‍

Vous pouvez ensuite sélectionner chaque champ et modifier les paramètres de chaque entrée.

• Modifier le placeholder (texte qui apparait tant qu'aucun texte n'est inséré)
• Le nom du champ
• Indiquer de quel type d'entrée il s'agit (texte, mail, mot de passe, téléphone etc..)
• Indiquer si le champ est obligatoire ou non

‍

A noter que pour modifier le texte du bouton, il vous faudra passer par les paramètres de cet élément bouton.

Propriétés des pages

Vous pouvez apporter certains réglages aux pages (notamment le slug, ou les metas données, l'aperçu du site, le titre sur google etc..)

‍

To do this, simply go to the left menu, to the page tab and then click on the cogs of the chosen page.

Hide a Section

To hide a section, simply go to the tree (navigator on the left menu) and select the element or section that you want to hide temporarily.

Then, you will have to click on the crossed out eye (In the right menu > style tab > Layout property) to make it disappear.

Here is an example with the Hero 👇 section

‍

‍

Remember to note the initial layout because you will have to go the opposite way to make the hidden section reappear:

‍

‍

‍

Preview and publish

Once you've finished designing your site, it's important to preview it before publishing it. Here's how:

1. Preview your website: click on the “Preview” button at the top right of the screen. This will allow you to see your website as it will appear to visitors. You can also preview each page individually by clicking on the “Preview” icon in the “Pages” panel.
2. Verify the website: be sure to check your website carefully during the preview to make sure everything is working properly and that the content is well formatted.
3. Publish your website: once you are happy with your website, you can publish it by clicking on the “Publish” button at the top right of the screen. This will take your website from the development version to the published version.
4. Configure publishing settings: before publishing your website, you can configure publishing settings such as domain, subdomain, and SEO settings using the “Publish Settings” panel.
5. Follow them updates : Once your site is published, you can follow the updates using the Webflow “Site Updates” panel. You can see the changes made to your website and save them as a backup.

What if I made a mistake?

Don't worry, it also happens to the best 😛

First, you can try to go back by clicking on the arrows:

‍

‍

‍

If this does not work you can activate an old backup and restore a previous version of your site (just click on the 3 small dots of the backup in question).

‍

‍

Bonus: Webflow University, take control of your site

‍

I'll let you put the finishing touches to this guide 😎 All you have to do is put all these tips into practice!

‍

And if you want to go further in learning Webflow, I'll give you an appointment right here: How to take control of Webflow's site.

‍