Webflow : l'outil essentiel pour créer un site web professionnel sans ligne de code

Webflow est un outil de création de site internet en no-code qui permet aux utilisateurs de créer des sites web professionnels sans avoir à écrire une seule ligne de code. Il est devenu l'un des outils no-code les plus populaires au monde, avec plus de 3,5 millions d'utilisateurs. Il permet de concevoir de sites internet responsives et innovants. Il est donc idéal pour les personnes qui souhaitent créer un site web sans avoir de connaissances techniques en développement web.
Au fil des années, l'agence Easyweb s'est spécialisée dans l'utilisation de ce logiciel, c'est pourquoi aujourd'hui nous avons choisi de vous le présenter dans cet article.

Pourquoi Webflow ?

Webflow est un système de gestion de contenu (CMS) visuel qui permet aux utilisateurs de créer des sites web sans avoir à apprendre à coder en étant basé sur l'intelligence artificielle. L'outil (lancé en 2013 par Vlad Magdalin, Sergie Magdalin et Bryant Chou) est rapidement devenu populaire auprès des designers et des développeurs web qui recherchent un moyen simple et efficace de créer des sites web professionnels puisqu'il offre une variété de fonctionnalités qui le rendent attrayant pour les utilisateurs de tous niveaux de compétences. Ces fonctionnalités incluent :

• Une interface glisser-déposer intuitive
• Une grande bibliothèque de composants et de modèles
• Un système de mise en page responsive
• Un support pour le commerce électronique
• Un hébergement gratuit pour les sites web personnels

Grâce à cela, Webflow s'est démarqué de la concurrence, parce que oui, il existe aujourd'hui de nombreux CMS innovants en 2024, mais restons sur celui sans qui notre agence n'existerait pas. 🌞​

Comment utiliser Webflow ?

Webflow est un outil très intuitif et facile à utiliser. Il est composé de trois principales sections :

• Designer : Cette section permet de créer la mise en page et le design du site web,
• Code : Cette section permet de personnaliser le code HTML du site internet,
• CMS : Cette section permet de gérer le contenu du site web.

Nous allons maintenant vous aider à l'utiliser efficacement.

Créer un site internet avec Webflow

Choisir une mise en page

Webflow propose une large gamme de templates prêts à l'emploi qui peuvent être utilisés pour créer différents types de sites web. Ces templates sont conçus par des designers professionnels et peuvent être facilement personnalisés pour répondre à vos besoins.

Pour choisir un template, vous pouvez utiliser la barre de recherche ou les filtres pour trouver un template qui correspond à vos besoins. Une fois que vous avez trouvé un template qui vous plaît, vous pouvez le modifier pour le personnaliser.

Si vous souhaitez créer votre propre mise en page, vous pouvez utiliser l'éditeur de Webflow (intuitif pour les novices du webdesign) qui permettra de créer des mises en page complexes sans avoir à écrire une seule ligne de code.

Pour créer votre propre mise en page, vous pouvez utiliser les éléments suivants :

• Les sections : qui permettent de créer des blocs de contenu indépendants
• Les composants : qui sont des éléments prédéfinis qui peuvent être utilisés pour créer des mises en page complexes
• Les grilles : pour positionner des éléments de manière précise.

Ajouter des éléments

Une fois que vous avez créé la mise en page de votre site, vous pouvez ajouter des éléments de contenu.

Le texte

Le texte est utile pour un site autant qu'un moteur pour une voiture. Vous pouvez modifier la taille, la couleur, la police et la mise en forme du texte en fonction de vos attentes tout en réfléchissant au tunnel de conversion que vous souhaitez mettre en place.

Les images

Les images sont utilisés pour augmenter l'expérience utilisateur et plaire par ailleurs aux robots de Google. Vous pouvez modifier la taille, la position, la luminosité et le contraste des images que vous importer dans votre site internet. N'oubliez pas de les convertir en format Webp et de les compresser avant l'importation, puis de les décrire en inscrivant une balise alt pour chacune d'entre elles. Si vous rencontrez des difficultés pour cette dernières étape, voici un article qui vous présentera 2 méthodes pour trouver les attributs alt manquants de vos images web.

Les formulaires

Les formulaires sont utilisés pour collecter des données de visiteurs confirmés. Vous pouvez créer des formulaires pour collecter des adresses e-mail, des coordonnées ou bien des informations de commande. Cela vous permettra de convertir vos prospects en clients grâce à une prospection automatisée par exemple.

Les vidéos

Les vidéos sont utilisés pour ajouter du contenu qualitatif aux différentes pages de votre site internet. Vous pouvez importer des vidéos de YouTube, Vimeo ou de votre propre ordinateur facilement sur Webflow. Comme pour les images, n'oubliez pas de renseigner le contenu évoqué dans la vidéo sous forme de balise alt.

Personnaliser le style

Vous pouvez personnaliser le style de votre site en modifiant les couleurs, la police/la fonte ou encore les animations.

Les couleurs

Pour personnaliser les couleurs de votre site Webflow, vous pouvez utiliser les paramètres de couleur du panneau Style. Ces paramètres vous permettent de modifier les couleurs de base, les couleurs d'accent et les couleurs de contraste de votre site.

Couleur de base

Les couleurs de base sont les couleurs qui servent de base à votre site. Elles sont utilisées pour les éléments tels que l'arrière-plan, les titres et les polices.

Pour modifier les couleurs de base de votre site, cliquez sur Couleurs de base dans le panneau Style. Vous pouvez ensuite modifier les couleurs suivantes :

• Couleur de fond : La couleur de l'arrière-plan de votre site
• Couleur de texte : La couleur du texte de votre site
• Couleur de titre : La couleur des titres de votre site
• Couleur de lien : La couleur des liens hypertexte de votre site.

Couleur d'accent

Les couleurs d'accent sont utilisées pour attirer l'attention sur les éléments importants de votre site. On les retrouves dans des éléments tels que les boutons, les liens ou encore les éléments de navigation.

Pour modifier les couleurs d'accent de votre site, cliquez sur Couleurs d'accent dans le panneau Style. Vous pouvez ensuite modifier les couleurs suivantes :

• Couleur d'accent : La couleur principale des éléments d'accent de votre site
• Couleur d'accent secondaire : La couleur secondaire des éléments d'accent de votre site.

Couleur de contraste

Les couleurs de contraste sont utilisées pour créer un contraste entre différents éléments de votre site tels que les bordures, les ombres et les polices.

Les couleurs de contraste à modifier sont les suivantes :

• Couleur de contraste principale : La couleur principale des éléments de contraste de votre site
• Couleur d'accent secondaire : La couleur secondaire des éléments de contraste de votre site.

La fonte

Pour changer la fonte de votre site Webflow, vous pouvez, une nouvelle fois, utiliser les paramètres de police du panneau Style. Ces paramètres vous permettent de modifier la police, sa taille et le style des éléments textes de votre site.

Pour modifier la fonte de votre site, cliquez sur Polices dans le panneau Style. Vous pouvez ensuite modifier les paramètres suivants :

• Police de base : La police principale des éléments de votre site
• Police de titre : La police des titres de votre site. A noter qu'elle est souvent différente en fonction de la hiérarchie de vos pages (H1, H2, H3, ...)
• Police de bouton : La police des boutons de votre site.

Les animations

En effet, vous pouvez ajouter des animations à votre site pour le rendre plus attrayant et interactif. Pour ajouter des animations à votre site Webflow, vous pouvez utiliser les paramètres d'animation du panneau Style. Ces paramètres vous permettent d'ajouter des animations à des éléments individuels ou à l'ensemble de votre site.

Pour ajouter des animations à votre site, cliquez sur Animations. Vous pouvez ensuite modifier les paramètres suivants :

• L'effet d'animation que vous souhaitez appliquer à l'élément
• La durée de l'animation.

Publier son site

Une fois que vous avez terminé de créer votre site, vous pouvez le publier en ligne.

Pour publier votre site Webflow, vous devez suivre ces étapes :

1. Connectez-vous à votre compte Webflow
2. Cliquez sur le bouton "Publier" dans le coin supérieur droit de l'écran
3. Sélectionnez un plan d'hébergement après avoir pris connaissance de notre article sur les coûts de Webflow
4. Si vous avez déjà un domaine, connectez-le à votre site Webflow
5. Cliquez sur le bouton "Publier".

Si vous avez déjà un domaine, vous pouvez le connecter à votre site Webflow. Cela permettra à votre site Web d'être accessible à l'adresse de votre domaine.

Pour connecter votre domaine, vous devez suivre ces étapes :

1. Cliquez sur le bouton "Domaines" dans le menu de gauche.
2. Saisissez l'adresse de votre domaine.
3. Cliquez sur le bouton "Connecter".

Une fois que vous avez sélectionné un plan d'hébergement et connecté votre domaine, vous pouvez publier votre site Web en cliquant sur le bouton Publish.

Plans de tarification

Webflow propose trois plans de tarification :

• Solo : 16 €/mois
• Business : 35 €/mois
• Enterprise : sur devis

Le plan Solo est idéal pour les petites entreprises ou les particuliers qui souhaitent créer un site web simple. Il permet de créer un site internet avec une limite de 10 pages et 100 Go de stockage.

Le plan Business est destiné aux entreprises de taille moyenne ou aux indépendants qui souhaitent créer un site web plus complexe. Il permet de créer un site web avec une limite de 100 pages et 1 To de stockage.

Le plan Enterprise, quant à lui, est proposé aux grandes entreprises qui ont besoin de fonctionnalités et d'intégrations personnalisées.

Par ailleurs, le CMS Webflow vous facturera les frais de domaine et d'hébergement de votre site ou encore d'autres fonctionnalités supplémentaires si vous en nécessitez le besoin. C'est pourquoi, nous vous conseillons de lire notre article sur les coûts d'un site Webflow.

Des spécificités à la hauteur de votre projet

Site SaaS

Webflow est un outil très polyvalent qui peut être utilisé pour créer différents types de sites web, y compris des sites SaaS et e-commerce.

Pour créer un site SaaS avec Webflow, il faut penser à intégrer des pages de connexion, de profil, de paiement et de support ainsi que d'ajouter les fonctionnalités nécessaires à la gestion des utilisateurs tels que la facturation et le support.

Apprenez à créer votre premier site SaaS sur Webflow grâce à l'article ci-joint Webflow : Créer un site SaaS efficace.

Site E-commerce

Un site Webflow e-commerce à pour but de vendre, c'est pourquoi il est important d'ajouter les pages produits, le panier d'achat, les pages de paiement et de suivi et d'intégrer les fonctionnalités nécessaires au site web, telles que la gestion des stocks, des commandes ou encore les paiements.

Découvrez ici Comment créer un site e-commerce avec Webflow.

Templates

Webflow propose une large gamme de templates prêts à l'emploi qui peuvent être utilisés pour créer différents types de sites web. Ces templates (à l'image de la capture d'écran ci-dessous) sont conçus par des professionnels et peuvent être facilement personnalisés pour répondre à vos besoins.

Voici un peut de documentation supplémentaire pour apprendre quel templates choisir en fonction de vos attentes.

Intégrations

Webflow s'intègre à de nombreuses applications et services tiers, ce qui vous permet de créer des sites web plus complets et fonctionnels. Nous vous présentons ici notre selection des meilleures intégrations Webflow vous permettant d'améliorer le trafic que vous générez et donc, d'augmenter potentiellement vos leeds.

Conclusion

Webflow est un CMS puissant et polyvalent qui permet aux utilisateurs de créer des sites web professionnels et responsives sans avoir à écrire une seule ligne de code. Il est idéal pour les petites entreprises, les indépendants et les grandes entreprises qui souhaitent créer un site web efficace et à moindre coût.
Si vous n'êtes pas très familier avec Webflow, nous vous conseillons de vous entretenir avec une agence digitale spécialisée dans le no-code pour suivre les avancées de votre projet afin d'éviter des complications inutiles.