Commencez ici

Pour commencer

Merci d'avoir acheté le modèle Coin X. Dans ce bref guide, nous couvrons toutes les bases de l'édition des éléments de base (c'est-à-dire les couleurs, les polices, le contenu du CMS, etc.) du modèle Coin X Webflow.

Si vous n'êtes pas très familier avec Webflow, nous vous recommandons vivement de suivre le cours accéléré Webflow 101 de l'Université Webflow, car il vous enseignera toutes les bases pour être opérationnel.

Stylisme

Commençons par le style du modèle.

Couleurs

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

Modification des pages

Il est maintenant temps de passer aux étapes suivantes pour éditer les pages de votre site web. En général, il y a 2 types de contenu qui seront édités, qui sont les suivants.

Contenu statique

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 tous 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'apparition), 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 qu'elle 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.

Prise en charge du modèle Webflow de Coin X

Comme vous pouvez le voir ci-dessus, Coin X a été construit sur Webflow en utilisant les meilleures pratiques pour rendre très facile l'édition du modèle et sa personnalisation en fonction de vos besoins.

Toutefois, si vous rencontrez un problème, si vous avez besoin d'aide ou si vous souhaitez simplement nous saluer, n'hésitez pas à nous envoyer un courriel à l'adresse suivante [email protected]. - Nous serons heureux de vous aider.

Conception et développement sur mesure

D'un autre côté, si vous cherchez de l'aide pour construire une version unique et personnalisée de Coin X, ou simplement un site web étonnant conçu et développé à partir de zéro sur Webflow, n'hésitez pas à prendre contact avec notre agence de conception et de développement Webflow. L'équipe derrière le modèle Coin X Webflow peut vous aider.