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 ! 🚀
Mon petit doigt me dit que vous connaissez déjà l'outil, mais un récapitulatif ne fait pas de mal.
.gif)
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
{{cta-1}}
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 !
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.
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.
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à ! 👏
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.
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 !
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 ...
Arrivé sur cette page, vous trouverez un champ de texte.
Dans cet encart, vous pourrez :
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.
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 🙂
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.
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.
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.
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.
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
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.
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 :
.png)
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 🤩
Je vous montre à présent les étapes pour personnaliser les éléments ajoutés à votre page 👇
Vous pouvez faire différentes modifications facilement :
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.
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:
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.
.png)
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.
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 :
Cette fois-ci, voici comment ajouter des interactions à votre site Webflow :
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 :
.png)
Vous pouvez ensuite sélectionner chaque champ et modifier les paramètres de chaque entrée.
.png)
A noter que pour modifier le texte du bouton, il vous faudra passer par les paramètres de cet élément bouton.
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..)
.png)
Pour cela il vous suffit d'aller dans le menu de gauche, à l'onglet page et puis de cliquer sur les rouages de la page choisie.
Pour cacher une section, il vous suffira de vous rendre dans l'arborescence (navigator sur le menu de gauche) et de sélectionner l'élement ou section que vous souhaitez cacher temporairement.
Ensuite, vous devrez cliquer sur l'oeil barré (Dans le menu de droite > onglet style > propriété Layout) pour le faire disparaitre.
Voici un exemple avec la section Hero 👇
Pensez bien à noter la mise en page initiale car il vous faudra faire le chemin inverse pour faire ré- apparaitre la section cachée :
Une fois que vous avez terminé la conception de votre site, il est important de le prévisualiser avant de le publier. Voici comment :
Pas d'inquiétude, ça arrive aussi aux meilleurs 😛
Vous pouvez tout d'abord essayer de revenir en arrière en cliquant sur les flèches :
Si cela ne fonctionne pas vous pouvez activer une ancienne backup et rétablir une version précédente de votre site (il suffit de cliquer sur les 3 petits points de la backup en question).
.png)
Je vous laisse mettre le point final à ce guide 😎 Il ne vous reste plus qu'à mettre tous ces conseils en pratique !
Et si vous voulez aller plus loin dans votre apprentissage de Webflow, je vous donne rendez-vous juste ici : Comment prendre en main site 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 ! 🚀
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
{{cta-1}}
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 !
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.
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.
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à ! 👏
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.
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 !
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 ...
Arrivé sur cette page, vous trouverez un champ de texte.
Dans cet encart, vous pourrez :
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.
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 🙂
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.
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.
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.
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.
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
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.
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 :
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 🤩
Je vous montre à présent les étapes pour personnaliser les éléments ajoutés à votre page 👇
Vous pouvez faire différentes modifications facilement :
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.
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:
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.
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 :
Cette fois-ci, voici comment ajouter des interactions à votre site Webflow :
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 :
Vous pouvez ensuite sélectionner chaque champ et modifier les paramètres de chaque entrée.
A noter que pour modifier le texte du bouton, il vous faudra passer par les paramètres de cet élément bouton.
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..)
Pour cela il vous suffit d'aller dans le menu de gauche, à l'onglet page et puis de cliquer sur les rouages de la page choisie.
Pour cacher une section, il vous suffira de vous rendre dans l'arborescence (navigator sur le menu de gauche) et de sélectionner l'élement ou section que vous souhaitez cacher temporairement.
Ensuite, vous devrez cliquer sur l'oeil barré (Dans le menu de droite > onglet style > propriété Layout) pour le faire disparaitre.
Voici un exemple avec la section Hero 👇
Pensez bien à noter la mise en page initiale car il vous faudra faire le chemin inverse pour faire ré- apparaitre la section cachée :
Une fois que vous avez terminé la conception de votre site, il est important de le prévisualiser avant de le publier. Voici comment :
Pas d'inquiétude, ça arrive aussi aux meilleurs 😛
Vous pouvez tout d'abord essayer de revenir en arrière en cliquant sur les flèches :
Si cela ne fonctionne pas vous pouvez activer une ancienne backup et rétablir une version précédente de votre site (il suffit de cliquer sur les 3 petits points de la backup en question).
Je vous laisse mettre le point final à ce guide 😎 Il ne vous reste plus qu'à mettre tous ces conseils en pratique !
Et si vous voulez aller plus loin dans votre apprentissage de Webflow, je vous donne rendez-vous juste ici : Comment prendre en main site Webflow.
