Webflow : le guide complet pour créer un site pro

Photo de Merwan, freelance en growth marketing et marketing digital
Merwan
Oct 23, 2022
Webflow : le guide complet pour créer un site pro

Qu'est-ce que Webflow ?

Webflow devient massivement populaire. Il prend le contrôle de l'industrie du design/développement et domine le marché des outils no-code. Ilchange la vie de nombreux concepteurs et développeurs. Mais la chose un peu différente et plus difficile à propos de Webflow. C'est le fait que vous devez au moins connaître un peu le fonctionnement des sites web pour l'utiliser (mince, encore une courbe d'apprentissage).

Dans cet article, je vous livre tous les éléments importants de Webflow que j'ai appris et incorporés dans mon travail quotidien.

Mais ne vous inquiétez pas, ce guide n'est pas du tout technique, en fait, je ne peux pas écrire une seule ligne de code par moi-même. Considérez cela comme un retour complet d'une personne non technique ! Si vous l'avez pas déjà fait, je vous recommande en amont de lire mon article : Webflow : Le nouveau CMS pour un site complet et référencé qui détaille les avantages de la solution.

C'est quoi Webflow ?

Au cas où vous n'auriez jamais entendu parler de Webflow. Webflow est un outil de conception web visuel qui traduit vos décisions de conception en code propre et prêt pour la production. Conçu pour permettre aux concepteurs et aux développeurs et fondamentalement à n'importe qui de créer des sites web entièrement réactifs. J'ai d'ailleurs fait un article entier sur Webflow qui présente le CMS.

Gif de la solution Webflow

Webflow est utilisé pour une variété de types de sites web, de fonctionnalités et de pages telles que des landing page, les sites e-commerce, les blogs, les sites web B2B. Avoir la capacité de concevoir visuellement, de personnaliser le code, d'héberger des sites et de se présenter comme un CMS (système de gestion de contenu) traditionnel. Webflow est une plate-forme robuste qui a beaucoup à offrir.

Webflow University

L'énorme avantage de Webflow c'est sa plateforme d'apprentissage appelé Webflow University. Vous y trouverez des vidéos tutoriels pour prendre en main la solution et créer ce que vous souhaitez. C'est à partir de ce moment que je suis tombé amoureux de la solution. Les tutoriels sont toujours ludique et compréhensible. Ils sont courts (moins de 5 minutes) et sont agréables à suivre car ils sont drôles même s'il s'agit de codage technique. Et des supports pédagogiques magistralement créés autour de chaque partie de Webflow.

Remarque : j'ai personnellement tout appris avec ces vidéos.

Le Box Model : l'incontournable de Webflow

Cette règle CSS est l'un des petits défis auxquels vous serez confronté au début. En général, nous parlons de la compréhension du fonctionnement des sites web - étant donné que chaque bloc est composé de quelques propriétés qui le laissent placé sur le site web. La conception Webflow consiste à empiler des boîtes les unes sur les autres. C'est le même principe que sur des solutions graphique comme Figma ou Adobe XD. Dans les éditeurs graphiques, nous avons l'habitude de construire dans l'espace et de placer des éléments où nous voulons. Sur Webflow, vous empilez des blocs les uns sur les autres.

Si vous souhaitez en savoir plus, Webflow a une explication à ce sujet.

Mais assez de théorie. Regardons où nous passerons la plupart du temps.

Le concepteur - Plongez dans l'interface principale de Webflow


Image concepteur Webflow
01. Navigateur | 02+03. Pages et Paramètres SEO | 04. Médias | 05. Guide de style | 06. Paramètres éléments | 07. Interactions | 08. Appareils | 09. CMS/Collections |10+11. Paramètres du projet et éditeur (pages séparées)

Alors ça y est, c'est l'interface où nous allons créer tous les designs. Oui, cela ressemble un peu à une interface Photoshop. Il se passe évidemment BEAUCOUP de choses, alors regardons les parties les plus importantes pour vous.

1. Navigateur

Il s'agit de la structure de chaque page affichée comme un aperçu de tous les éléments tels que les divs, les images ou les blocs de texte. Vous pouvez y penser comme des calques dans Adobe XD ou Figma.

Image navigateur Webflow
Panneau Navigateur — Panneau affichant toute la hiérarchie de la page

2. Pages

Vous trouverez ici un aperçu de toutes vos pages et leurs détails dans le projet + possibilité de dupliquer ou d'ajouter de nouvelles pages et dossiers pour conserver la structure de votre travail. Remarque : les dossiers sont parfaits pour l'organisation, mais ils ajouteront "nom de dossier/" à votre URL, alors pensez-y lors de la planification de votre projet.

Image pages Webflow
Vue d'ensemble des pages — Emplacement pour ajouter une nouvelle page ou ajouter des dossiers pour donner à votre projet une meilleure structure

3. Paramètres de page et de référencement naturel (SEO)

Une fois le panneau Pages ouvert, survolez la page en question et cliquez sur l'icône des paramètres pour ajouter diverses balises SEO et tags. C'est aussi un endroit pour ajouter votre code personnalisé, dupliquer des pages ou les supprimer.

Image paramètres SEO Webflow
Survolez une page dans le panneau Pages cliquez sur les paramètres pour ouvrir le deuxième panneau

4. Médias (Assets)

C'est un endroit où vous pouvez voir tous vos médias utilisés dans votre projet (image, documents, etc.).

Image assets Webflow
Panneau des actifs, un endroit pour gérer toutes vos icônes et images

Avec une petite astuce (voir ci-dessous) pour modifier la balise ALT de votre image et renforcer votre SEO.

Image balise alt Webflow
Comment obtenir un lien vers un actif particulier (icône des paramètres - cliquez sur l'icône d'exportation ou cliquez avec le bouton droit pour copier l'URL)

5. Guide de style

Le panneau principal pour travailler avec vos éléments dans le projet. Ajoutez des marges, des couleurs ou des tailles de texte et positionnez-les correctement dans vos conceptions.

Dans le guide de style de la première section, vous trouverez également un champ pour Selector pour donner à votre élément la ou les classes CSS. Grâce à cela, vous pourrez styliser plusieurs éléments en même temps. Et la petite flèche il y a pour styliser les états de votre élément comme ce qui va se passer en survol, etc.

Image guide de style Webflow
Panneau de style - Tout le 1er onglet dans la barre latérale droite - Place pour styliser vos éléments

6. Paramètres des éléments

Deuxième onglet dans le panneau de droite, tous les paramètres d'un élément particulier. Des paramètres tels que l'endroit où le bouton particulier doit être lié, la manière dont certaines collections doivent filtrer les résultats, etc.

Image paramètres Webflow
Paramètres des éléments - dans ce cas, vous pouvez voir les paramètres d'un bouton particulier qui amènera l'utilisateur à une page de notre projet appelée Stages

7. Interactions

La partie avancée de Webflow est souvent décrite comme la magie Webflow la plus importante. Un endroit pour configurer toutes les animations et transitions sympas pour votre projet. Mais nous allons laisser cela pour l'instant. Vous n'en aurez pas forcément besoin pour vos premiers projets.

Image interactions Webflow
Onglet Interactions

8. Appareils

4 périphériques principaux et un nouveau panneau avec la résolution actuelle. Ce sont 4 onglets pour examiner l'apparence de votre site web sur différents appareils. C'est là que je vois la plus grande puissance de Webflow. Rappelez-vous les longues heures de création de chaque conception web pour tablette et pour mobile sur XD ou Figma. Avec Webflow, j'ai généralement fini de rendre l'ensemble du site réactif en 30 minutes à 3 heures maximum pour les sites compliqués.

Image équipement Webflow
Equipements - Ordinateur de bureau, tablette, paysage mobile, portrait mobile

Vérification de l'appareil (tailles). Une dernière chose, vous voyez le élément qui traîne ? C'est à vous de tester différents appareils et de vous assurer que votre site web est responsive sur chacun d'eux.

Image responsive design Webflow
Testez toujours votre site sur l'ensemble des viewports, pour éviter quelques surprises sur différents appareils.

9. CMS

C'est quelque chose d'un peu avancé mais super puissant, cela va vous faire gagner beaucoup de temps donc je pense qu'il est bon d'en être conscient. Webflow CMS fait partie de votre projet que vous pouvez utiliser pour remplir le contenu d'un élément appelé Liste de collection. Les collections sont quelque chose dans lequel vous mettez votre contenu pour laisser le contenu être géré par votre CMS et c'est là que tout votre jeu Webflow devient dynamique ! Vous allez pouvoir créer des articles de blog, des fiches produits, etc.

10. Paramètres du projet

Ne fait pas déjà partie de l'interface Designer, mais c'est un endroit avec tous les paramètres supplémentaires et des éléments tels que la favicon, paramètres de polices personnalisées, paramètres d'hébergement, etc.

Image paramètres projet Webflow
Vue principale des paramètres du projet

11. Éditeur

Et le dernier élément de toute la suite Webflow est l'éditeur, c'est une sorte de coulisses pour l'éditeur de votre site web. Rappelez-vous les fois où vous avez reçu un e-mail de votre client/rédacteur indiquant qu'il y avait 15 fautes de frappe dans la conception ou le site web en direct et des captures d'écran de ce qu'il fallait corriger ?

Eh bien, c'est fini maintenant. Avec l'accès de l'éditeur, n'importe qui peut modifier le contenu à tout moment. Ça fait peur, je sais. Mais ne vous inquiétez pas. Votre éditeur n'a qu'un accès en surface - les éditeurs ne peuvent pas ajouter d'éléments, mais uniquement modifier leur contenu. Avec l'accès éditeur, vous pouvez également inviter des personnes à contribuer des articles sur le site de votre entreprise, ou tout autre contenu.

Image éditeur Webflow
Interface séparée accessible via le logo dans le coin gauche du concepteur ou via /?edit=1 sur n'importe quel site en direct.

12. Actions de la barre supérieure

Annuler et rétablir, statut si votre projet est enregistré sur les serveurs Webflow, la 3ème section est l'une des plus importantes si vous souhaitez exporter votre code pour l'utiliser sur votre hébergement. La 4ème icône permet de partager votre projet via le Designer (pour du support ou toute sorte d'aide) et la 5ème est l'endroit où vous allez publier votre site !

Image barre d'action Webflow
Annuler Rétablir | Exportation de codes | Lien en lecture seule | Publication de votre projet !

Et c'est tout sur l'interface. Ensuite, nous couvrirons tous les éléments comme div ou bloc de liens à regarder pour réellement commencer à créer !

Panneau des éléments Webflow - Aperçu des éléments les plus importants et des petites astuces

Vous avez peut-être remarqué que nous n'avons pas couvert l'icône "+" dans la barre latérale gauche ! Alors, faisons-le maintenant avec le panneau Elements.

Image panneau des éléments Webflow

La première fois que vous lancez Webflow, vous trouverez une grande variété d'éléments, ce qui peut être un peu écrasant au début. Certains d'entre eux sont livrés avec des propriétés prédéfinies pour faciliter la courbe d'apprentissage, d'autres sont liés à des cas d'utilisation spécifiques. Examinons donc ensemble ceux qui sont le plus utilisés, pour vous aider à les parcourir et vraiment aborder les bases afin que vous puissiez explorer le reste plus tard dans le processus.

Div Block

Image div block Webflow

Élément de construction principal pour chaque projet. Le bloc div est en général un dossier (wrapper) que vous utiliserez pour regrouper et positionner vos éléments. Div avec les propriétés Flex deviendra rapidement votre meilleur ami. La structure de mise en page la plus courante ressemblerait à ceci.

Image wrapper Webflow


Remarque : Vous avez peut-être remarqué des éléments tels que Section, Container ou Columns, ils sont top pour commencer. Et n'hésitez pas à les utiliser - mais ce ne sont à mes yeux que des divs avec des propriétés prédéfinies que vous ne pouvez pas modifier. C'est peut-être bien pour commencer, mais à long terme, ce n'est peut-être pas la meilleure décision. En utilisant l'élément Container, vous êtes également tenu d'avoir toutes vos conceptions conçues dans une largeur de 940px.

Grid

Image concepteur Webflow

Div Block, Flex et Grid - La combinaison ultime et, à mon avis, les éléments/propriétés de construction les plus importants. La grille est un élément super puissant que vous devez ajouter à vos compétences. La grille est comme un maillage invisible qui protège votre contenu sur la page et autour des différentes fenêtres. La meilleure ressource ici serait ce guide universitaire  https://university.webflow.com/courses/grid.

Link Block

Image link block Webflow

Celui-ci fait exactement ce qu'il dit en liant tout ce qu'il contient soit à une URL, une page dans un projet, un e-mail, un téléphone ou en cliquant sur vous téléchargerez une pièce jointe. Le bloc de liens est idéal pour les boutons ou pour lier des blocs entiers de contenu. Semblable à ce qui est visible sur l'image.

Typography

Image typograhie Webflow

Titre, paragraphe, bloc de texte, lien de texte, tous ces éléments sont une autre partie principale de chaque projet, ils font exactement ce qu'ils représentent. La chose importante sur laquelle se concentrer ici est l'élément de texte enrichi. C'est un élément un peu avancé mais il sera très pratique lorsque vous créez des blogs ou tout type de pages dynamiques avec du contenu texte, visuel et extérieur au site (vidéos, podcast, etc.).


Bloc de formulaire

Image formulaire block Webflow

Principaux éléments du dossier Forms et le seul vraiment nécessaire. Le reste du dossier ne peut être ajouté qu'aux blocs de formulaire. Commencez donc toujours par faire glisser le bloc de formulaire et si vous avez besoin de plus d'éléments, vous savez où les trouver.

Webflow dans le plan d'hébergement de base ou le plan d'hébergement CMS propose 500 ou 1000 soumissions de formulaires/mois que vous aurez dans les paramètres de votre projet et qui peuvent être facilement exportées au format .csv. Vous pouvez également lier vos formulaires à un service comme Sendinblue pour collecter vos abonnements à la newsletter sans aucune agitation supplémentaire.

Navbar

Image barre de navigation Webflow

Une autre partie de tous les projets Webflow courants. Livré entièrement équipé avec toutes les propriétés nécessaires. Pendant les deux premiers mois, je ne savais même pas que cet élément existait. Donc, faire tout sur mesure était un peu un cauchemar. La barre de navigation est livrée avec 3 liens de navigation dans le menu de navigation, qui sont un dossier que vous utilisez ensuite sur des appareils plus petits pour glisser vers le bas en cliquant sur l'icône du menu.

L'icône de menu (visible par défaut sur la tablette et ci-dessous) est également personnalisable, ce qui est un défi pour la plupart des gens - l'astuce ici est la suivante : sélectionnez simplement l'icône et appuyez sur supprimer, puis placez votre icône de menu spéciale dans l'emballage du bouton de menu.

Onglets

Image ongle Webflow

Idéal pour des choses comme la tarification des paiements mensuels ou annuels ou pour afficher différentes vues d'ensemble des fonctionnalités.

Lightbox

Image lightbox Webflow

Pour gérer l'affichage d'aperçus en taille réelle des images de votre portefeuille ou des détails de vos produits e-commerce.

Slider

Image slider Webflow

Et le bon vieux slider. Un composant qui peut passer d'images à n'importe quel type de structure div pour convenir à des éléments tels que des témoignages de clients, etc.

Liste de collections (CMS)

Image liste de collections CMS Webflow

Les collections sont un moyen d'intégrer le contenu de votre CMS dans vos sites web. C'est un ensemble de 3 emballages chacun sur un niveau séparé. Dans un premier temps, vous devez toujours sélectionner la collection CMS que vous souhaitez connecter pour pouvoir commencer à travailler avec son élément 1. De cette façon, vous stylisez un élément et X d'entre eux sont stylisés en même temps. Considérez-le comme des symboles dans Adobe XD ou des composants dans Figma.

Intégration

Image intégration de code Webflow

Et enfin le dernier élément du panneau Éléments - Code intégré. En faisant glisser cet élément, vous serez accueilli avec un éditeur de code super simple pour insérer tout type de code personnalisé que vous souhaitez ajouter si vous savez comment écrire du code. Je l'utilise à titre personnel pour intégrer des données structurées.

Lancez votre premier projet avec Webflow

Ajouter des polices

Dans l'état par défaut, vous avez accès à quelques polices, mais en général, c'est généralement la première étape de chaque projet. Vous voulez correspondre à votre marque et pouvoir utiliser des polices que vous avez passées des heures à rechercher. Donc, comme vous le savez déjà, dirigez-vous vers le logo "W" - sélectionnez Paramètres du projet et polices.

Webflow est plutôt cool à propos de ce problème. Au début, vous avez accès directement à partir d'une liste déroulante à toutes les polices Google, c'est ce que j'utilise à titre personnel car bon pour le référencement. Si cela ne suffit pas, vous pouvez évidemment ajouter tous vos fichiers de polices .woff, .ttf ou .otf, puis les faire correspondre à une police et à ses poids . Ainsi, ils apparaissent alors correctement dans le Designer pour vous.

Image ajout font Webflow

Commencez par le Styleguide (Guide de style)

Ceci est facultatif mais je le trouve incroyablement utile. Lorsque je déplace des conceptions de Figma vers Webflow ou à tout moment lorsque je démarre un nouveau projet vierge. Je configure toujours une page supplémentaire appelée Styleguide et définit toutes les propriétés par défaut fournies avec chaque projet. Tous les en-têtes, liens, éléments de liste, etc. Cela me donne le peu de pouvoir que chaque fois que je fais glisser un élément dans le projet, il sera déjà comme je le veux.

Voici un excellent exemple de l'équipe Webflow avec une belle explication sur la façon de styliser "Tous les titres H1", etc. :

Image styleguide Webflow

Webflow et ses ressources

À présent, vous devriez être en mesure de commencer à assembler des éléments. Notre imagination est sans limite je ne suis pas en mesure de vous guider plus loin puisque je ne suis pas en mesure de savoir ce que vous rêvez de créer ! Mais j'ai quelques endroits et astuces supplémentaires pour vous aider à plonger davantage et à explorer les structures communes et à parcourir ou utiliser les projets créés par les héros de la communauté.

Mais, si vous vous sentez toujours comme si c'était trop ? Ou si vous voulez réellement utiliser quelque chose de pré-construit, voici où naviguer :

Modèles de démarrage

Une bonne façon de commencer à explorer des sites Webflow prêts à l'emploi et de créer des pages simples. En fait, je les ai également développés, alors n'hésitez pas à me contacter, au cas où vous auriez des questions. Sur cette note, il existe tout un marché de modèles avec quelques modèles gratuits que vous pouvez également saisir pour explorer.

Image galerie modèle de démarrage Webflow
Portefeuille, entreprise ou commerce électronique/magasin

Showcase

Pour voir ce qui est possible avec Webflow, vous pouvez explorer ce que d'autres construisent. Showcase est un endroit où d'autres créateurs peuvent afficher leur travail et parfois certains d'entre eux rendent ce travail disponible pour le clonage. Dans le langage Webflow, cela signifie que vous pouvez télécharger gratuitement l'intégralité de leur projet ou des parties sur votre compte. Il suffit de filtrer par "clonable" et de saisir des éléments à explorer. Appuyez sur tout ce n'est pas grave, vous ne cassez pas le site en direct !

Image showcase Webflow
Showcase filtré par Clonable / Most Liked - Lorsque vous êtes sur le détail, vous pouvez vérifier l'ensemble du projet via le lien Ouvrir dans Webflow. Une fois que vous êtes prêt à le mettre sur votre profil, cliquez sur Cloner le projet dans la barre supérieure !

Kits d'interface utilisateur

Une fois que vous aurez parcouru les pages Showcase pendant un certain temps, vous tomberez certainement sur un kit d'interface utilisateur. Webflow a ajouté la fonctionnalité de copier-coller entre les projets fin 2018 et des projets assez décents ont été créés ici par les membres de la communauté. Et puisque les projets sont sur Showcase, vous savez maintenant qu'ils sont probablement libres de cloner !

Un kit d'interface utilisateur, en général, est un ensemble de diverses sections généralement préparées avec seulement quelques éléments pour le garder agréable et cohérent. Ils vous aident rapidement et sans trop de tracas à diffuser vos idées, à créer des wireframes ou même un site web final.

Liens supplémentaires

Nous y sommes presque. Dans cette dernière partie, nous verrons où demander de l'aide et comment trouver un moyen de contourner le modèle de tarification Webflow pour la conception et l'hébergement !

Webflow propose un Forum. Un endroit pour poser des questions sur n'importe quel problème que vous rencontrez ou simplement parcourir des choses que d'autres personnes ont déjà résolues. Il existe de nombreux petits conseils intéressants, tels que des extraits de code Javascript personnalisé, pour créer des éléments plus avancés sur votre site Web. La communauté Webflow est incroyable et il y a toujours quelqu'un qui répondra à toutes vos questions.

Image forum Webflow

Mon dernier conseil pour vous est, comme toujours : lancez-vous simplement dans de nouveaux projets et apprenez au cours du processus de création ! Cela a toujours été pour moi le meilleur moyen d'apprendre de nouvelles choses. Merci d'avoir lu jusqu'au bout !

Si vous souhaitez obtenir des conseils sur la création de site web ou des informations précises sur Webflow, envoyez-moi un message. 😉

Pause ! Discutons de votre projet.

Envoyez-moi un message ou réservez en ligne un créneau de 30 minutes pour échanger.