Commencer ici

Stylisme

Commençons par le style du modèle.

Couleurs

Le modèle Web3 X est construit à l'aide de Color Swatches, ce qui signifie que vous pouvez facilement modifier un échantillon de couleur pour qu'il soit mis à jour sur l'ensemble du site.

Pour ce faire, il vous suffit d'aller dans l'onglet Style dans la barre latérale droite, puis de faire défiler jusqu'à Couleurs dans la section Typographie, et si vous cliquez sur la couleur, vous pourrez voir tous les échantillons de couleurs et les modifier pour qu'ils soient mis à jour dans l'ensemble du site à n'importe quelle couleur nécessaire.

Polices de caractères

Le modèle Web3 X utilise une seule police de caractères pour l'ensemble du site, et elle est définie dans le sélecteur Body (All Pages), ce qui signifie que vous pouvez facilement mettre à jour la police de caractères sur l'ensemble du site en un seul clic.

Sur n'importe quelle page, il suffit de cliquer sur le sélecteur orange en haut à droite de l'onglet Style, puis de sélectionner Corps (Toutes les pages). Une fois cela fait, vous pouvez aller dans la section Typographie ci-dessous et changer la police pour n'importe quelle police correspondant à la marque de votre entreprise.

Si vous avez besoin d'une police personnalisée ou premium qui n'est pas disponible sur Webflow, vous pouvez toujours aller dans Paramètres du projet > Polices et vous serez en mesure de télécharger des polices personnalisées, ou de vous connecter à votre compte Adobe Fonts.

Graphiques et icônes

Certaines icônes ou graphiques du modèle sont des images/graphiques normales. Vous remarquerez donc que lors de la mise à jour de toutes les couleurs, celles-ci conserveront la couleur du modèle.

Cela est dû au fait que ces graphiques sont des images (PNG, JPG, SVG, etc.), donc la mise à jour du CSS (style) du Webflow ne les affectera pas. Si vous souhaitez réutiliser ces graphiques, vous pouvez toujours les télécharger et les modifier à l'aide de n'importe quel logiciel de conception (Photoshop, Illustrator, Sketch, Figma, etc.), ou télécharger directement vos propres images/graphiques qui correspondent à votre marque.

Pages statiques

Le contenu statique est tout le contenu qui n'est pas basé sur un CMS, ce qui signifie qu'il n'est pas dynamique (comme un article de blog, par exemple).

Vous pouvez facilement identifier tous ces contenus car ils apparaissent en gris dans le navigateur de la barre latérale gauche, et ils sont entourés d'une bordure bleue lorsque vous cliquez dessus ou que vous les survolez.

Si vous souhaitez modifier ce type de contenu, il vous suffit de double-cliquer dessus et vous pourrez le saisir directement à cet endroit.

Contenu dynamique (CMS)

Le contenu dynamique est tout le contenu qui est dynamique et qui sera généré automatiquement sur la base du contenu ajouté dans la section CMS dans la barre latérale gauche (juste en dessous de l'icône Pages).

Vous pouvez facilement identifier ces éléments car ils sont affichés en violet dans le navigateur de la barre latérale gauche et ils sont entourés d'une bordure violette lorsque vous cliquez dessus ou que vous les survolez.

Ce contenu doit être mis à jour directement dans la section CMS. Il est en effet très probable qu'il doive être mis à jour en permanence (par exemple, l'ajout d'un nouvel article de blog).

Par ailleurs, si vous souhaitez modifier une page complète générée automatiquement par le CMS (par exemple, un article de blog), vous trouverez cette page disponible pour modification au bas de toutes les pages dans la section Pages de la barre latérale gauche.

Produits (eCommerce)

Les produits ou le contenu du commerce électronique fonctionnent de la même manière que le contenu dynamique du CMS, mais ils se concentrent exclusivement sur les produits du commerce électronique.

Vous pouvez identifier le contenu eCommerce de la même manière que le contenu CMS, car il apparaît également en violet dans le navigateur de la barre latérale gauche, ainsi qu'avec une bordure violette lorsque vous cliquez dessus ou que vous le survolez.

Ce contenu doit être mis à jour directement dans l'onglet eCommerce de la barre latérale gauche. Il est en effet très probable qu'il doive être mis à jour en permanence (par exemple, modification du prix d'un produit ou ajout d'un stock supplémentaire).

Par ailleurs, si vous souhaitez modifier la page de commerce électronique générée automatiquement, vous trouverez cette page disponible pour modification presque au bas de toutes les pages, juste au-dessus des pages de collection du CMS.

Notes utiles

Outre les explications de base que nous avons données plus haut, nous vous proposons ici quelques conseils et astuces tirés des questions les plus fréquentes que nous recevons.

Interactions

Si vous souhaitez modifier l'interaction d'un modèle (par exemple, supprimer un effet d'apparence), vous pouvez facilement identifier les éléments qui ont des interactions, car ils ont une petite icône d'interaction (un petit tonnerre) dans le navigateur de la barre latérale gauche.

Si vous cliquez sur cette petite icône Interactions, vous ouvrirez l'onglet Interactions de la barre latérale droite pour cet élément, où vous pourrez modifier l'interaction.

Vue mobile ou tablette

Chaque fois que vous apportez une modification (par exemple, vous créez un nouveau design de section), il est conseillé d'aller dans votre fenêtre de navigation supérieure et de voir ce que cela donne sur tablette et sur mobile.

Si vous ne modifiez qu'une section du modèle avec du texte ou des images mis à jour et que vous n'effacez aucune classe du modèle, cela ne devrait pas être nécessaire. Cependant, si vous personnalisez le modèle plus en profondeur, modifiez des classes ou créez de nouvelles sections, il est toujours bon de modifier constamment vos vues pour mobiles et tablettes afin de s'assurer que tout est parfait.

Modifier le titre méta, la description et l'image vedette

Si vous souhaitez personnaliser le titre, la description et l'image qui s'affichent lorsque vous partagez votre site web sur n'importe quel site (Facebook, Twitter, etc.), vous pouvez facilement vous rendre dans la section Pages dans la barre latérale gauche, cliquer sur la petite icône Paramètres de la page que vous souhaitez personnaliser, et tous ces paramètres apparaîtront.

Veuillez noter qu'il est important de modifier ces données sur une base régulière.

Sauvegardes

Si quelque chose ne va pas, par exemple si vous n'aimez pas la direction que prend le site web, si vous avez supprimé certaines classes critiques qui étaient nécessaires pour que le modèle ait une belle apparence, ou si vous voulez simplement revenir à une version précédente pour une raison quelconque, vous pouvez toujours aller dans la section Sauvegardes.

Vous pouvez le trouver dans la section Paramètres dans la barre latérale gauche, et vous pouvez alors voir toutes les sauvegardes automatiques ou manuelles. La restauration de l'ancienne sauvegarde se fait d'un simple clic.