Webflow template - Comment ça marche ?

Créer son site est aujourd'hui possible pour toutes les personnes qui n'ont pas de compétences en développement. Tout le monde peut réussir en quelques clics à créer un joli site grâce aux templates. De nombreux templates Webflow existent pour créer un site design, ergonomique et fonctionnel. Ces modèles de sites déjà préconçus vous aideront dans la création de votre site et vous évitent de partir de zéro.

Néanmoins, l'utilisation d'un template nécessite des modifications. Il faut vous l'approprier et le personnaliser pour qu'il vous ressemble.

Alors, si vous souhaitez savoir comment vous approprier un maximum votre template, suivez nos 4 étapes.

Qu'est-ce qu'un template de site web :

Un template est un modèle préconçu de site internet où

Étape 1 : Sélectionner son template

Commencez par sélectionner votre template. Vous avez une multitude de choix sur Webflow, on vous laisse les découvrir :

Le template est là pour vous simplifier la vie. Sélectionnez celui qui correspond le plus à vos envies. Cependant, ne vous fiez pas à certains détails comme aux couleurs du site ou de la typographie. Ce sont des choses que vous pourrez modifier par la suite. Jugez-le pour sa praticité et pour les éléments déjà intégrés pour éviter de perdre du temps à en ajouter.

‍

Étape 2 : Modifier la page "style guide"

Comme expliqué précédemment, le template choisit n'est certainement pas conforme à votre charte graphique. Mais, cela ne pose aucun problème étant donné le fait que vous pouvez modifier tout le style de votre template.

• Il vous suffit d'aller dans la page "style guide" (Ce n'est pas une page que vos visiteurs verront).

Vous pouvez voir que vous avez accès à toutes les couleurs, les polices et les formes de votre site web. Tout est modifiable. Cette feuille de style reprend chaque élément de votre site. Ainsi, si vous changez la couleur du H2 présent dans cette fiche, tout vos H2 seront modifiés sur toutes vos pages.

1 - Modifier les couleurs

En utilisant un template, les couleurs prédéfinies ne seront pas conformes aux vôtres. Pour les modifier, c'est très simple grâce à cette page "style guide" :

• Toutes les couleurs de votre template sont renseignées et définies dans votre page "style guide". Sélectionnez-en une pour la modifier ;
• Allez dans "backgrounds" ;
• Entrez la couleur de votre choix.

2 - Modifier la police des titres et sous-titres

Pour modifier la police de vos titres et sous-titres, c'est tout aussi simple :

• Sélectionnez le titre que vous souhaitez modifier ;
• Allez dans la section "typography" ;
• Vous avez accès à la taille, la police de caractère, ainsi que sa couleur.

3 - Modifier la police et la taille des textes

Pour modifier vos textes, vous l'aurez compris, c'est la même chose. Sélectionnez-les et amusez-vous à modifier leur police et leur couleur.

4 - Modifier les boutons

N'oubliez pas de customiser vos boutons. Il s'agit d'un élément très important de votre website, car il est gage de conversion.

Sans calls-to-action à votre image, ils ne seront que peu impactants. Choisissez donc avec précaution leur couleur pour que vos visiteurs y prêtent attention.

‍

‍

5 - Modifier les formulaires

L'avantage de la page "style guide" est que vous pouvez en modifier les formulaires.

Si vous n'aimez pas les espaces par défaut, la police, le cadre, vous pouvez tout changer.

Modifiez les espaces dans "spacing".

6 - Modifier les modèles de rich text

Les rich text sont des éditeurs de contenus longs. Ils sont très utiles pour un article de blog ou une description produit. Vous pouvez faire de nombreuses choses avec, comme en modifier seulement les éléments à l'intérieur sans en impacter le reste que vous allez découvrir juste après. Vous pouvez aussi y ajouter des images, des vidéos et des citations en appuyant sur entrer ou modifier les titres.

Ajouter les images, vidéos et citations :

• Pour cela cliquez sur "+" sur votre gauche ;
• Sélectionnez l'élément "rich text" ;
• Faites-le glisser à l'endroit où vous le souhaitiez ;
• Placez votre curseur après un paragraphe (par exemple) et appuyez sur entrer ;
• Vous avez plusieurs possibilités qui s'offrent à vous : ajoutez une image, une vidéo, une citation, du code, des bullets points ou une liste.

Personnaliser les éléments du rich text :

‍Le rich text vous permet de modifier par exemple, uniquement le titre, le sous-titre, les paragraphes compris dans le rich text, sans en influencer le reste des éléments. En lui attribuant une classe spécifique, seul votre rich text sera personnalisé :

• Ajoutez une classe à votre riche text en le sélectionnant ;
• Sélectionnez l'élément à modifier comme un paragraphe de votre rich text et cliquez sur le "+" (nest selector inside of).

Grâce à cette méthode, si vous modifiez vos paragraphes dans votre rich text, aucun autre paragraphe en dehors de cet élément ne sera modifié.

7 - Vérifier les modifications

Attention, ce n'est pas parce que vous venez de tout modifier sur votre page "style guide" que vous pouvez passer à la rédaction de vos textes.

Vous devez vérifier sur chacune de vos pages (à propos, shopping, commande si vous avez un site e-commerce) que tout fonctionne. Parfois, dans la composition de votre template, vos modifications apportées auront besoin de réajustement sur chacune des pages de votre site.

Prenez le temps de le faire.

Étape 3 : modifier le menu

Réajustez votre menu. Logiquement, vous devriez vous en rendre compte lors des vérifications s'il n'a pas était modifié au préalable. Modifier son menu est une étape à part entière, car vous ne pouvez le modifier dans votre "style guide". Alors, pensez-y.

Pour cela :

• Allez dans la page d'accueil où se trouve votre menu, ou sur n'importe quelles autres pages ;
• Double-cliquez dessus ;
• Modifiez les onglets, écrivez ce que vous souhaitez à la place ;
• Modifiez sa couleur ou mettez-le fond en transparence.
• Modifiez l'image présente pour ajouter votre logo.

En suivant ces 5 étapes, vous pourrez faire de votre template, un template unique et à votre image. Utilisez correctement la page "style guide" pour modifier chacun de vos éléments et pour gagner un temps précieux.

N'oubliez surtout pas de vérifier chacune de vos pages une fois que le design est fait. Vous n'avez plus qu'à écrire vos textes.

Nos 5 templates Webflow préférés :

Maintenant que vous savez comment vous servir des templates Webflow, nous allons vous partager nos 5 templates préférés. Retrouvez parmi notre sélection, des templates gratuits et payants pour tous types de website.

Le template Pompeo

Pourquoi nous l'aimons ?

• Simple et épuré comprenant tous les éléments nécessaires à votre site e-commerce ;
• Ses différentes sections vous permettent de détailler ce que vous faites, qui vous êtes et que sont vos produits. Cela vous permet de détailler votre force et vos arguments différenciants ;
• Des sections pour mettre en avant vos valeurs ;
• Une section "ready to shopping" pour rediriger le consommateur vers vos produits de ventes.
• La présence de son formulaire de contact.

Vous pouvez ajouter vos valeurs facilement.

Une section pour rediriger vos visiteurs vers l'espace vente.

Le template Delia

Pourquoi nous l'aimons ?

• Il est moderne : ce qui permet d'y ajouter seulement l'essentiel ;
• Un design minimaliste pour un côté professionnel ;
• Des animations présentes lors du scroll des pages pour montrer l'implication de l'entreprise face à son identité ;
• La présence des éléments de type FAQ, formulaire, blog ;
• Une section pour détailler vos différentes offres ou fonctionnalités de votre produit.

Le template Aero

Pourquoi nous l'aimons ?

• Un template conçu spécialement pour les blogs mettant en avant les articles récents ;
• Une disposition des articles non surchargée à la différence de nombreux blogs illisibles ;
• La présence d'un formulaire de contact, FAQ, formulaire de newsletter ;
• Des interactions qui rendent le site vivant.

Son prix est de 49$.

Le template Fidelity

Pourquoi nous l'aimons ?

• Un template simple pour un côté professionnel ;
• Une section pour les preuves sociales ;
• De nombreux éléments disponibles : formulaire ; FAQ ; blog ; boutons ;
• Des animations présentes et ses symboles réutilisables.

Son prix est de 49$.