Commencez par ici

Coiffure

Commençons par la mise en page du modèle.

Couleurs

Le modèle « Property X » est conçu à l'aide de variables de couleur, ce qui signifie que vous pouvez facilement modifier un échantillon de couleur pour que la modification s'applique à l'ensemble du site.

Pour ce faire, il vous suffit d'accéder à l'onglet « Variables » dans la barre latérale de gauche, puis de faire défiler jusqu'à « Couleurs » ; en double-cliquant sur la couleur, vous pourrez la modifier afin qu'elle s'applique à l'ensemble du site, quelle que soit la couleur souhaitée.

Polices

Le modèle « Property Xtemplate »utilise une seule police pour l'ensemble du site, et celle-ci est configurée comme variable. Vous pouvez donc facilement mettre à jour la police sur l'ensemble du site en un seul clic.

Pour ce faire, il vous suffit d'aller dans l'onglet « Variables » dans la barre latérale gauche, puis de sélectionner la variable « Police principale » et de choisir la police qui correspond à l'identité visuelle de votre entreprise.

Si vous avez besoin d'une police personnalisée ou premium qui n'est pas disponible sur Webflow, vous pouvez à tout moment vous rendre dans « Paramètres du projet > Polices » pour y importer des polices personnalisées ou connecter votre compte Adobe Fonts.

Graphiques et icônes

Certaines icônes ou certains éléments graphiques du modèle sont des images/graphiques classiques ; vous remarquerez donc que, même après avoir mis à jour toutes les couleurs, ceux-ci conserveront la couleur du modèle.
‍
Cela s'explique par le fait que ces éléments graphiques sont des images (PNG, JPG, SVG, etc.) ; leur mise à jour via le CSS (style) de Webflow n'aura donc aucun effet sur eux. Si vous souhaitez réutiliser ces éléments graphiques, vous pouvez toujours les télécharger et les modifier à l'aide d'un logiciel de conception graphique (par exemple Photoshop, Illustrator, Sketch, Figma, etc.), ou importer directement vos propres images/éléments graphiques correspondant à votre identité visuelle.

Modification des pages

Il est maintenant temps de passer aux étapes suivantes pour modifier les pages de votre site web. En général, deux types de contenu sont modifiés, à savoir les suivants.

Pages statiques

Le contenu statique désigne l'ensemble du contenu qui ne repose pas 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 la barre de navigation latérale gauche et sont entourés d'une bordure bleue lorsque vous cliquez dessus ou que vous passez la souris dessus.

Si vous souhaitez modifier ce type de contenu, il vous suffit de double-cliquer dessus pour pouvoir saisir directement du texte à cet endroit.

Contenu dynamique (CMS)

Le « contenu dynamique » désigne l'ensemble des éléments dynamiques qui seront générés automatiquement en fonction du contenu ajouté dans la section CMS de la barre latérale gauche (juste en dessous de l'icône « Pages »).

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

Ce contenu doit être mis à jour directement dans la section CMS. Cela a pour but de vous faciliter au maximum la mise à jour, car il est très probable qu'il doive être mis à jour régulièrement (par exemple, pour ajouter un nouvel article de blog).

Par ailleurs, si vous souhaitez modifier une page CMS entièrement générée automatiquement (par exemple, un article de blog), vous trouverez cette page accessible en mode édition au bas de toutes les pages, dans la section « Pages » de la barre latérale gauche.

Produits (commerce en ligne)

Les produits ou le contenu e-commerce fonctionnent de manière similaire au contenu dynamique du CMS ; toutefois, celui-ci est exclusivement dédié aux produits e-commerce.

Vous pouvez identifier le contenu e-commerce de la même manière que le contenu du CMS, car il s'affiche également en violet dans le navigateur de la barre latérale gauche, et est entouré d'une bordure violette lorsque vous cliquez dessus ou que vous passez la souris dessus.

Ce contenu doit être mis à jour directement dans l'onglet « e-commerce » de la barre latérale gauche. Cette fonctionnalité a été conçue pour vous faciliter au maximum la mise à jour, car il est très probable que celle-ci doive être effectuée régulièrement (par exemple, pour modifier le prix d'un produit ou réapprovisionner un article).

Par ailleurs, si vous souhaitez modifier la page e-commerce du produit générée automatiquement, vous trouverez cette page accessible en mode édition presque tout en bas de toutes les pages, juste au-dessus des pages de collection du CMS.

Remarques utiles

Outre les explications générales que nous avons données ci-dessus, nous vous proposons ici quelques conseils et guides pratiques inspirés des questions qui nous sont le plus souvent posées.

Interactions

Si vous souhaitez modifier un modèle d'interaction (par exemple, supprimer un effet d'apparition), vous pouvez facilement identifier les éléments comportant des interactions, car ceux-ci sont signalés par une petite icône « Interactions » (un petit éclair) dans la barre latérale gauche « Navigateur ».

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

Affichage sur mobile ou tablette

Chaque fois que vous apportez une modification (par exemple, lorsque vous créez un nouveau design de section), il est recommandé d'accéder à la barre de navigation supérieure de Viewport pour vérifier le rendu sur tablette et sur mobile.

Si vous vous contentez de modifier une section du modèle en mettant à jour le texte ou les images sans supprimer aucune classe du modèle, cela ne devrait pas être nécessaire ; toutefois, si vous personnalisez davantage le modèle, modifiez des classes ou créez de nouvelles sections, il est toujours recommandé de vérifier régulièrement l'affichage sur mobile et sur tablette afin de vous assurer que tout s'affiche correctement.

Modification du titre méta, de la description et de l'image mise en avant

Si vous souhaitez personnaliser le titre, la description et l'image qui s'affichent lorsque vous partagez votre site web sur n'importe quelle plateforme (par exemple Facebook, Twitter, etc.), il vous suffit de vous rendre dans la section « Pages » de la barre latérale gauche, de cliquer sur la petite icône « Paramètres » de la page que vous souhaitez personnaliser, et tous ces paramètres s'afficheront.

Veuillez noter qu'il est important de modifier ce paramètre pour chaque page.

Sauvegardes

Si un problème survient, par exemple si le résultat ne vous convient pas, si vous avez supprimé des classes essentielles nécessaires à la mise en page du modèle, ou si vous souhaitez simplement revenir à une version antérieure pour quelque raison que ce soit, vous pouvez toujours vous rendre dans la section « Sauvegardes ».

Vous la trouverez dans la section « Paramètres » de la barre latérale gauche ; vous pourrez alors consulter toutes les sauvegardes automatiques ou manuelles. Il suffit d'un simple clic pour restaurer une ancienne sauvegarde.

Foire aux questions

Comment puis-je obtenir davantage d'icônes pour le modèle ?

Vous recherchez une collection d’icônes plus complète à utiliser dans ce modèle Webflow ? Découvrez nos polices d’icônes BRIX Templates et profitez d’une collection de plus de 100 icônes pour votre modèle.

Allez-vous publier un modèle pour X ?

Vous avez une idée de modèle Webflow que vous aimeriez voir se concrétiser ? Envoyez-nous votre idée de modèle Webflow et remportez un prix spécial si nous la sélectionnons.