Si vous commencez à apprendre Webflow, ces quelques conseils vont certainement vous aider à partir sur de bonnes bases. Dans cet article, découvrez nos 5 conseils pour démarrer sur Webflow.
Webflow ne fonctionne pas comme Wix, Squarespace ou encore Wordpress. En effet, il est un peu plus complexe à prendre en main. Mais c'est ce qui va faire toute la différence ! Les autres CMS sont basés sur un système de sélection de modèles, où vous n'avez plus qu'à intégrer votre contenu et publier votre site. C'est simple, oui, mais la personnalisation de ces modèles est très limitée. Webflow, lui, permet de commencer d'une page blanche, pour avoir une réelle liberté de création. Mais il est aussi possible de créer son site depuis un modèle ou template, et de le personnaliser entièrement, sans avoir besoin d'écrire une seule ligne de code.
1 - Comprendre le HTML et CSS
Même si Webflow ne nécessite pas de connaissances en codage, il est important de comprendre HTML et CSS. Cela réduira certainement votre courbe d'apprentissage. Les sites créés sur Webflow sont construits à partir de blocs de construction HTML. Ces blocs de construction peuvent être des sections, divs, en-têtes, etc. Tous ces éléments sont stylisés à l'aide d'un éditeur visuel qui reprend le fonctionnement de CSS.
Voici quelques exemples pour comprendre le fonctionnement des blocs de construction HTML :
- Une div est un élément de niveau bloc, ce qui signifie qu'il commence toujours sur une nouvelle ligne et occupe toute la largeur disponible.
- La marge est l'espace autour d'un élément tandis que le padding est l'espace entre un élément et le contenu qu'il contient.
Ces deux exemples pourront vous aider à comprendre davantage la conception dans Webflow. Mais pour démarrer sur Webflow, nous vous conseillons aussi de suivre le cours d'introduction au HTML et au CSS de Webflow.
2 - Apprendre en dupliquant un projet
D'ailleurs, la Webflow University permet d'apprendre à démarrer sur Webflow, en dupliquant un projet et suivre toutes les étapes de conception.
Pour démarrer sur Webflow, vous pouvez donc dupliquer un modèle, directement depuis la galerie de templates Webflow. Vous trouverez des modèles gratuits ou payants, qui pourront vous servir comme point de départ de votre projet. Grâce à ça, vous pourrez comprendre comment ils ont été construits.
Vous pouvez aussi retrouver de nombreux templates dans le Webflow Showcase. Ce sont des projets duplicables, créés par la communauté Webflow. Vous pourrez dupliquer un modèle complet, ou seulement des composants et interactions, à intégrer à une partie de votre projet. Encore une fois, l'objectif sera de comprendre comment tous ces éléments ont été construits.
3 - Styles et classes
Lorsque vous glissez un élément dans votre projet, Webflow lui attribuera automatiquement une classe. Mais au fur et à mesure que votre projet avance, vous allez surement avoir du mal à vous y retrouver et vous verrez que vous aurez perdu beaucoup de temps.
Styles par défaut :
Lorsque vous commencez un nouveau projet, vous pouvez créer un guide de style. Vous pouvez y définir les typographies et tailles que vous voudrez utiliser pour vos paragraphes, titres, boutons, liens, etc.
Ainsi, vous pouvez commencer votre projet Webflow en définissant d'abord ces styles par défaut sur leurs balises HTML correspondantes. Grâce au guide de style vous n'aurez plus qu'à sélectionner vos styles par défaut directement dans le sélecteur (à droit de votre éditeur). Vous n'avez donc plus ressaisir manuellement les mêmes valeurs de style à chaque fois que vous ajoutez un titre ou un paragraphe.
D'une part, cela permet de garder exactement les mêmes styles pour tous vos éléments, et donc de limiter les erreurs. Mais aussi de gagner du temps.
Classes :
Vous l'aurez compris, les classes permettent de styliser chacun des éléments de votre projet. Une fois votre guide de style créé, vous pourrez toujours créer des variantes. Les classes vous permettront d'ajouter une nouvelle propriété pour un élément précis, afin d'y ajouter de nouvelles modifications. En ajoutant une classe à votre élément, cela n'aura aucun impact sur votre guide de style et donc les autres éléments de la même "famille".
4 - Créer et réutiliser des symboles
Maintenant que vous savez comment créer des classes pour gagner du temps, il est temps d'en savoir plus sur les symboles. Les symboles sont tout composant qui se répète tout au long de votre projet. Cela peut être des éléments comme des boutons, une barre de navigation, des sections hero, un pied de page.
Webflow définit deux types de symboles. Le premier type est constitué de symboles qui ont un contenu identique par instance, qui sont des symboles qui ont le même contenu et se répètent à l'identique, comme la barres de navigation et le pieds de page. Les modifier en un seul endroit les mettra à jour partout dans votre projet.
L'autre type est les symboles qui ont un contenu unique par instance, qui sont des symboles qui ont la même mise en page mais qui ont un contenu unique (texte, images ou vidéos). Cela peut aussi correspondre à des boutons, des sections hero, etc.
La création de ces symboles réutilisables peut réellement accélérer le développement de votre site web.
5 - Interactions et animations
Webflow permet de créer des interactions et animations très personnalisées. Vous pouvez aller très loin grâce à Webflow, encore une fois, sans jamais avoir à écrire une seule ligne de code !
Très facilement, vous pouvez créer des interactions sur le défilement, le clic, le survol, le chargement de la page, etc., ajouter des effets de parallax, et bien plus encore. Les possibilités sont infinies.
Vous pouvez créer vos animations dans After Effects et les ajouter simplement à votre site web grâce au Lottie. Il vous suffit d'ajouter un élément Lottie, et intégrer votre fichier JSON. Vous pouvez aussi ajouter un plugin pour gérer encore plus facilement vos animations. Webflow permet de gérer facilement vos interactions, et de gérer le type d'animation (en boucle, défilement, clic, etc.).
Si vous ne savez pas encore créer des animations avec After Effects, Lottie vous fournit de nombreuses animations, que vous pouvez télécharger gratuitement. La magie de Webflow va jusqu'au bout, vous pouvez modifier et personnaliser les couleurs de calques, directement depuis le designer.
Prêt à lancer votre site avec Octolio, votre agence Webflow ?
