Tutoriel Webflow – Toutes les ressources indispensables pour démarrer en 2022

Table des matières

Quel est le bon tutoriel Webflow pour démarrer ? Vous souhaitez trouver des tutoriels Webflow pour progresser dans votre apprentissage de l’outil no code que s’arrachent les designers ? NoCode Station vous propose une série de plusieurs tutoriels afin de monter en compétence sur Webflow.

Le no code et Webflow vous intéresse ? Suivez le guide !

Pourquoi apprendre Webflow ?

Webflow est une plateforme no code qui vous permet de créer des sites web responsives rapidement et sans taper une seule ligne de code. 

Comme la plupart des plateformes no code, Webflow vous permet de réaliser des sites via une interface visuelle extrêmement bien pensée. Sur cette interface visuelle, vous retrouverez tous les éléments vous permettant de structurer votre site web. 

A gauche, vous retrouverez tous les éléments HTML qui vont vous permettre de créer votre site : section, container, heading, paragraph, image,… Vous aurez même la possibilité d’intégrer du code HTML si vous ne trouvez pas votre bonheur. On apprécie tout particulièrement la possibilité d’intégrer la fonction grid qui est extrêmement puissante et qui vous permettra de faire tous les positionnements que vous souhaitez.

Sur la droite, vous retrouverez un panneau avec toute la partie CSS et configuration globale de l’élément. Si vous désirez donner des propriétés CSS à vos éléments (positionnement, espacements, couleur, fonts, ombres…) c’est à cet endroit que cela va se passer. Ce qui est assez incroyable avec Webflow, c’est que vous allez gagner un temps fou dans la mise en place des différents éléments et ainsi que lors de la création « de leur apparence ». On notera également que la notion des class

Vous aurez également la possibilité de gérer la mise en place du responsive et des breakpoints de manière simple. Au départ d’un projet web, vous démarrez sur un projet desktop fixé à 1280px, puis tablette ainsi que mobile. Vous avez la possibilité d’ajouter un élément plus large sur le desktop (en moyenne on fixe les projets web à 1440px). En cliquant sur chaque élément vous pourrez définir les options d’affichage CSS que vous le souhaitez en fonction de chaque taille d’écran. Comme vous l’aurez bien compris, vous pouvez aller dans le détail de chaque breakpoint et définir l’affichage de votre choix. 

Un autre point fait la différence sur Webflow : les interactions. Une interaction est définit comme une la possibilité d’assigner un mouvement à un élément en fonction des actions de l’utilisateurs. Elle se paramètre directement dans le panneau de droite. Au niveau des interactions, vous pouvez imaginer des interactions au click, au scroll, au hover… Vous pouvez ensuite contrôler les rotations, les translations, les effets d’affichage (easing), le delay… Il suffit de regarder le hall of fame de Webflow pour se rendre compte que les possibilités sont infinies et peuvent mener à des interactions extrêmement complexes qui méritent une très bonne connaissance de la plateforme et de l’expérience. Votre goût pour le design fera également toute la différence sur la création des animations. N’hésitez pas à vous inspirer de ce que d’autres créateurs ont fait pour tester de nouvelles interactions. De très nombreux tutoriels webflow sont disponibles sur internet ainsi que la communauté pourra vous aider à créer vos interactions si vous avez des difficultés.

D’un point de vue des interactions vous pouvez même encore aller plus loin. En effet, à chaque page, vous avez la possibilité d’intégrer des scripts javascript (<script></script>) qui vous permettront de customiser encore plus loin vos interactions avec vos utilisateurs. Finalement si Webflow est bien une plateforme no code, il n’en demeure pas moins que les codeurs peuvent également s’y retrouver puisqu’ils ont la possibilité d’intégrer du code directement.

Webflow bénéficie également d’une partie CMS qui est très bien pensée. Vous pourrez définir des « Collections » qui vous aideront à construire des éléments dynamiques sur votre site web. C’est un outil idéal si vous souhaitez créer un blog.

Le SEO (Search Engine Optimization) – ou référencement naturel permet à votre site internet de se positionner de manière organique dans les résultats de recherche de Google. L’objectif étant bien évidemment de vous positionner dans les premiers résultats afin d’avoir un maximum de traffic et de leads sur votre site web. Dans le cas de Webflow, la construction, le temps de chargement et les différentes options présentes, vous permettront d’avoir un référencement optimal. Bien évidemment, cela ne fait pas tout et ça sera à vous de définir une stratégie SEO efficace et cohérente, mais sachez que faire le choix de Webflow sera un très bon choix pour votre référencement.

Webflow vous permet également de mettre en place du e-commerce. Ils ne sont pas encore aussi performants que Shopify et ne possèdent pas autant d’options, mais le choix du e-commerce est un axe très clair que développe Webflow. C’est actuellement un vrai challenger pour Shopify. En effet, ils visent le même type de clientèle et Webflow permet de développer des expériences clients qui sont  bien plus impressionnantes et personnalisables que Shopify. 

Comme beaucoup d’outils no code, Webflow bénéficie également d’une API et donc d’automatisations possibles. Des outils comme Zapier ou Integromat vous permettent d’automatiser un grand nombre de tâches sur votre site web. N’hésitez pas à les utiliser, ils vont vous faire gagner un temps fou dans la gestion de votre site web.  

Autre élément intéressant proposé par Webflow : l’export de code. En effet, après avoir designé une page sur Webflow, vous avez la possibilité de ne pas publier sur le site de Webfloww, mais bien d’exporter le code pour pouvoir le publier sur une autre plateforme (par exemple Gatsby, WordPress…). Webflow peut donc servir de constructeur de thèmes pour d’autres plateformes. 

Comme vous le constatez, les potentialités de Webflow pour créer un site internet sont extrêmement intéressantes et multiples. Elles plairont à la fois au designer qui trouvera dans l’outil un moyen d’expression fabuleux et au développeur un moyen efficace de gagner du temps dans ses développements. En tant que débutant, si vous ne savez pas coder, la prise en main pourra être un peu plus difficile, mais vraiment rien d’insurmontable. Après avoir appris certaines règles de HTML et de CSS, vous serez capable de vous lancer dans le grand bain de Webflow et de sortir des sites web incroyables. 

Et pour cela, NoCode Station vous propose une liste des meilleurs tutoriels pour bien démarrer l’apprentissage de Webflow.

Démarrer sur Webflow

Vous allez adorer débuter sur Webflow. Si de prime abord, vous ne connaissez rien aux sites internet, Webflow a tout pensé pour vous. En effet, la plateforme no code a mis en ligne une université dédiée à la création de site internet. Dans son université, gratuite de surcroît, vous allez retrouver toutes les techniques pour bien créer votre site internet avec Webflow. Vous serez guidé pas à pas.

Il vous faudra forcément un peu de temps pour assimiler certains concepts, mais rien d’insurmontable. Tout est bien évidemment en anglais (l’outil est américain), mais la présentation est extrêmement visuelle et si vous ne maîtrisez pas à 100% la langue de Shakespeare c’est n’est pas un frein pour comprendre le fonctionnement de l’outil.

Voici 9 vidéos ci-dessous que vous devez absolument avoir vu pour bien progresser sur l’outil.

Comment approfondir Webflow avec d’autres tutoriels ? 

Comme vous l’avez constaté, la sélection des tutoriels présentés plus haut, n’est qu’une infime partie des tutoriels que vous pourriez suivre pour commencer sur Webflow. Il existe bien d’autres tutoriels Webflow plus avancés pour pouvoir progresser dans le domaine. voici une sélection de 5 tutoriels que vous devriez regarder pour progresser sur Webflow.

5 tutoriels Webflow avancés que vous devriez réaliser 

Lorsque vous avez réalisés les tutoriels plus haut et suivi la Webflow University, il est temps d’aller plus loin et de de pousser la plateforme no code vers de nouvelles contrées. 

Comme nous vous le disions, la seule limite de Webflow semble être la créativité. Avant de vous lancer sur des projets plus conséquent, il peut être intéressant de suivre certains tutoriels Webflow plus avancés afin de pouvoir se perfectionner. Les tutoriels ci-dessous vous permettront d’aller plus loin dans votre apprentissage du no code et vous permettront de vendre ensuite des prestations Webflow de bien meilleures qualité et plus créatives ou de trouver un job no code

Que vous souhaitiez mettre en place des automatisations avec Webflow, un espace membre (membership), un site e-commerce ou encore des animations impressionnantes, suivez le guide ci-dessous pour devenir un expert webflow.k

Tutoriel Webflow – Comment créer une automatisation avec Zapier ?

Comment feriez-vous pour gagner du temps dans la gestion de votre site internet, de vos leads, de vos notifications, de tous les emails que vous devez envoyer,… ? En automatisant bien sûr !

Et pour automatiser vos process sur votre site webflow, le meilleur moyen est d’utiliser Zapier. Zapier est un outil web idéal qui va vous permettre d’utiliser la puissance des API pour vous faire gagner du temps  dans la gestion de votre Webflow. Vous pourriez par exemple automatiquement gérer des envois de mails à vos clients, rentrer vos leads dans une base de données comme Airtable ou un tableur comme Google Sheet, automatiser certains process en e-commerce, automatiser une page de téléchargement d’un livre blanc… Sur Zapier les possibilités pour vous faire gagner du temps sont extrêmement grandes et il y aura forcément des combinaisons que vous plairont et que vous devriez tester.

Bien évidemment tout cela se fera sans code !, 

Tutoriel Webflow – Comment créer un espace membre ? 

Pour beaucoup de projets communautaires (forums, formations en ligne…), un espace membre est bien souvent indispensable pour fédérer ses clients, étudiants… Il existe pas mal de solutions sur le marché pour créer des espaces membres, mais sachez que vous pouvez également en créer un avec Webflow.

Dans le tutoriel ci-contre, vous trouverez comment créer un espace membre de A à Z avec Webflow, couplé à Memberstack. Le petit plus, c’est que vous apprendrez également à vous servir de Airtable ainsi que de Zapier (que vous auriez bien évidemment vu dans le tutoriel précédent).

Le tutoriel est créé par un Youtuber nommé MackenzyChild dont on vous conseille de suivre la chaîne. C’est un tutoriel qui vous demandera un peu de temps de mis en place, mais tout est bien expliqué.

    •  

Comment créer un site e-commerce sous Webflow ? 

Avec Webflow vous avez également la possibilité de créer un site e-commerce qui vous permettre de vendre en ligne. Si Webflow n’est pas encore la plateforme no code la plus connu pour créer un site e-commerce (à la différence de Shopify), il n’en demeure pas moins que Webflow progresse fortement sur ce secteur et que vous pouvez sans aucun problème créer un site e-commerce avec Webflow.

Certes, vouus ne retrouverez pas autant de plugins que vous pourriez avoir avec Shopify ou Woocommerce, mais vous pourrez par contre proposer une expérience utilisateur de très grande qualité avec des visuels et des animations qui feront vraiment la différence et qui pourront par la même occasion augmenter vos ventes.

On ne peut que vous conseiller de tester !

Maîtriser les animations sous Webflow

Les animations sur Webflow sont un des très gros avantages de la plateforme no code. Alors qu’ils requièrent un trrès bon niveau en CSS ou en Javascript pour les réaliser lorsqu’on dévelppe un site de A à Z, ils ne demandent que quelques clics et une bonne dose de créative pour les créer avec Webflow.

Créer des animations, c’est donner à son site une vraie personnalité et touche qui poussera votre identité. C’est cette expérience utilisateur (UX) dont se souviendront vos clients. Comme tout, il faut savoir en user avec parcimonie, mais sachez les maîtrisez, c’est sur ce point que vous pourrez faire la différence.

Pour bien démarrer, voici ci-contre, un tutoriel Webflow sur les animations.

Comment intégrer du custom code sur Webflow ? 

Ce qui est vraiment génial avec Webflow c’est que vous n’êtes pas complètement bloqués avec la plateforme. En effet, vous avez la possbilité d’ajouter du custom code, c’est dire du code CSS ou Javascript que vous aurez vouus-même créé.

Une véritable aubaine si vous désirez améliorer l’expérience pour vos utilisateurs.

Pour mettre en place du custom code sur Webflow, suivez le tutoriel ci-contre qui vous donnera la manière de bien démarrer avec cette fonctionnalité.

Qu'est-ce que le no code ?

Vous ne savez pas ce que c'est que le no code ? Webflow vous intéresse, mais vous souhaitez découvrir d'autres plateforme no code ? Vous voulez devenir un expert sur le sujet ? Suivez notre guide complet sur le no code.

3 chaînes Youtube à suivre pour devenir un expert Webflow

Si on ne peut devenir un expert Webflow que par la pratique, il n’en demeure pas moins que de se nourrir et de s’inspirer des meilleures reste une excellente stratégie pour progresser.

Après avoir fait les tutoriels Webflow ci-dessus, vous devriez normalement déjà avoir pris un bon niveau sur Webflow. Tooutefois, votre apprentissage ne s’arrête pas et vouus pouvez continuer à vous former à Webflow en visionnant ces tutoriels ci-dessous. Il commence à exister beaucoup de contenu en ligne sur Webflow sur Youtube notamment. Il y a beaucoup de conten en anglais, mais du contenu en Français commence à arriver et la chaîne Youtube de NoCode Station est bien évidemment là pour vous aider à progresser. 

Voici 3 youtubers spécialistes de Webflow que nous vous conseillons de suivre pour progresser sur la plateforme no code. 

Cette section pourra être amenée à évoluer au fil du temps lorsque nous trouverons d’autres tutoriels Webflow intéressants à vous proposer.

Pixel Geek : la chaîne Youtube qui décrypte Webflow

C’est probablement la chaîne Youtube consacrée à Webflow qui est la plus prolifique. En effet, le youtuber Pixel Geek poste toutes les semaines (voire parfois tous les 2 jours) une vidéo Youtube consacrée à Webflow. Ce qui nous plaît le plus c’est qu’il est capable de traiter de sujets débutants sur Webflow et capable de proposer des tutoriels Webflow experts. Tout est vraiment traité pas à pas et sa chaîne est excellente pour progresser dans votre apprentissage de Webflow.

Il est très apprécié de la communauté no code et c’est assurément un des youtubers à suivre si vous êtes un passionné de Webflow.

Flux : le designer technique passionné de Webflow

Dans un autre registre, le youtuber Flux commence à avoir une belle renommée sur la plateforme de vidéos de Google. Connu à l’origine pour être un web designer de grande qualité et très inspirant il a su prendre le virage de no code avec Webflow en proposant des dizaines de tutoriels Webflow à ses abonnés.

On apprécie surtout ses vidéos de grande qualité (très  bien tournés) et également sa vision créative très importante lorsque vous vous mettez à Webflow. Chaque semaine, un nouveau contenu créatif autour de Webflow ou du web vous est proposé et on ne peut que vous conseiller de vous y abonner.

Mackenzie Child : le fondateur de Hatch, le bootstrap de Webflow

Mackenzie Child est déjà connu sur Youotube pour son talent créatif. Depuis quelques années, il s’est également pris de passion pour Webflow ce qui l’ amené à proposer un grand nombre de tutoriels complet sur sa chaîne pour aider la communauté no code à se mettre à Webflow. Plus haut dans cet article, nous vous proposons d’ailleurs un tutoriel Webflow et Memberstack réalisé par ses soins.

En 2020, le youtuber s’est fait remarqué puisqu’il a sorti Hatch, un bootstrap dédié à Webflow. L’idée de Hatch est que vous puissiez aller encore plus rapidement dans vos dévelopement sur Webflow avec des class qui sont déjà prédéfinis. L’utilisation d’un bootstrap lorsqu’on est sur Webflow est très discuté et débattu dans la communauté dev et no code, mais le youtuber a tout de même le mérite d’avoir travaillé sur le sujet.

On ne peut que vous inviter à vous abonner à sa chaîne pour suivre son actualité.

Vous voulez apprendre Bubble

Bubble vous intéresse, mais vous ne savez pas comment démarrer ? Suivez notre guide complet pour se former à Bubble.

FAQ : des questions supplémentaires sur Webflow

Comme vu plus haut, Webflow est une plateforme no code, c’est-à-dire que vous n’avez pas d’être développeur pour utiliser Webflow et créer des sites web responsives. 

Toutefois, ce n’est pas parce qu’il n’y a pas besoin de coder que vous ne pouvez pas utiliser du code sur la plateforme.

C’est une des grandes forces de Webflo. En effet, vous êtes capables d’intégrer du HTML (<html>), du CSS (<style>) et même du Javascript (<script>) dans chacune de vos pages. Parfois, les fonctionnalités proposées par Webflow ne seront pas suffisantes et vous devrez coder certains éléments. 

Pour se faire, on vous conseille vivement de connaître les bases du HTML, du CSS et du Javascript, cela vous servira beaucoup.

Comme nous vous le disons, Webflow vous donne la possibilité de créer un site e-commerce. Par conséquent, il est nécessaire d’installer un module de paiement afin que vos utilisateur puissent vous acheter vos produits.

A l’instar de ce que pratique beaucoup d’autres plateformes no code, comme Bubble, il est possible d’installer Stripe comme module de paiement sur votre site e-commerce Webflow.

Pour se faire, il n’existe pas de plugin déjà pré-réglé pour vous faciliter la vie. Néanmois, la documentation de Stripe est bien réalisée et vous devriez pouvoir arriver facilement à vous en sortir.

Airtable est un logiciel qui s’apparente à un mix entre une base de données et un tableur Excel. Avec Airtable vous êtes capable de créer une API et d’interagir avec vos différentes cellules. Airtable possède une API avec laquelle vous êtes capables de vous brancher.

 

Comme vous le verrez plus haut, Airtable est bien évidemment compatible avec Webflow. Il sera par exemple très utile pour stocker vos leads depuis un formulaire créé depuis Webflow. C’est vraiment simple à utiliser.

Integromat est quasiment l’équivalent de Zapier. La manière dont il est pensé est quelque peu différent, mais la philosophie de base reste. L’idée est d’automatiser tous les process et workflows possibles afin que vous puissiez gagner du temps.

Webflow est donc bien compatible avec Integromat et vous pouvez l’utiliser en complément de Zapier ou bien sur pour vos projets. 

VOUS SOUHAITEZ PLUS DE TUTORIELS SUR WEBFLOW ?

Abonnez-vous à notre newsletter hebdomadaire pour recevoir plus de tutoriels Webflow