Commencer ici

Stylisme

Commençons par le style du modèle.

Couleurs

Le modèle Dataplus X est construit à l'aide de Color Swatches, ce qui signifie que vous pouvez facilement modifier un échantillon de couleur qui sera 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.

Polices de caractères

Le modèle Dataplus 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 certains 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.), de sorte que 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 une bordure violette apparaît lorsque vous cliquez dessus ou que vous la 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 est également affiché 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

En plus de l'explication de base que nous avons donnée ci-dessus, nous partageons ici quelques conseils et astuces qui sont issus des questions les plus courantes 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 ceux-ci 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 de modèle avec du texte ou des images mis à jour et que vous n'effacez aucune classe de modèle, cela ne devrait pas être nécessaire. Toutefois, 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 destination du site web, si vous avez supprimé certaines classes essentielles pour que le modèle soit beau, 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.