Commencez ici

Pour commencer

Merci d'avoir acheté le modèle Startuper X. Dans ce guide bref, nous couvrons tous les éléments de base sur la façon de modifier les éléments de base (c'est-à-dire les couleurs, les polices, le contenu CMS, etc) du modèle Startuper 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, qui vous apprendra toutes les bases pour être opérationnel.

‍

Styling

Commençons par le style du modèle.

Couleurs

Le modèle Startuper X est conçu à l'aide de nuanciers de couleurs, ce qui signifie que vous pouvez facilement modifier un nuancier de couleurs pour le mettre à jour sur l'ensemble du site.

Pour ce faire, il vous suffit d'accéder à l'onglet Style dans la barre latérale droite, puis de faire défiler l'écran jusqu'à Couleurs dans la section Typographie. Si vous cliquez sur la couleur, vous pourrez voir tous les échantillons de couleur et les modifier pour qu'ils soient mis à jour sur l'ensemble du site dans la couleur de votre choix.

Polices de caractères

Le modèle Startuper X utilise une seule et même police pour l'ensemble du site. Elle est configurée dans le sélecteur Body (All Pages), ce qui signifie que vous pouvez facilement mettre à jour la police 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 ceci fait, vous pouvez vous rendre dans la section Typographie ci-dessous et changer la police de caractères pour qu'elle corresponde à 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 connecter votre compte Adobe Fonts.

Graphiques et icônes

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

Cela se produit parce que ces graphiques sont des images (PNG, JPG, SVG, etc.), et 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 d'un logiciel de conception (Photoshop, Illustrator, Sketch, Figma, etc.) ou télécharger directement vos propres images/graphiques correspondant à votre marque.

Modifier les pages

Il est maintenant temps de passer aux étapes suivantes pour modifier 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 tout ce contenu parce qu'il apparaît en gris dans le navigateur de la barre latérale gauche et qu'il est entouré d'une bordure bleue lorsque vous cliquez dessus ou que vous le survolez.

Si vous souhaitez modifier ce type de contenu, il vous suffit de double-cliquer dessus, et vous pourrez directement taper à 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 tout cela parce qu'il est affiché en violet dans le navigateur de la barre latérale gauche et qu'il affiche une bordure violette lorsque vous cliquez dessus ou que vous le survolez.

Ce contenu doit être mis à jour directement dans la section CMS. Cela vous permet de le mettre à jour très facilement, car il est très probable qu'il doive être constamment mis à jour (par exemple, en ajoutant un nouvel article de blog).

En outre, 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 la 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 sont exclusivement destinés aux produits du commerce électronique.

Vous pouvez identifier le contenu du commerce électronique de la même manière que le contenu du 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 le cliquez ou le survolez.

Ce contenu doit être mis à jour directement dans l'onglet eCommerce de la barre latérale gauche. Cela vous permet de le mettre à jour très facilement, car il est très probable qu'il doive être constamment mis à jour (par exemple, pour modifier le prix d'un produit ou ajouter du stock).

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

Notes utiles

En plus de l'explication de base que nous vous avons donnée ci-dessus, nous vous présentons ici quelques conseils et astuces qui proviennent des questions les plus courantes que nous recevons.

Interactions

Si vous souhaitez modifier l'interaction d'un modèle (c'est-à-dire 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, si vous créez une nouvelle conception de section), il est bon d'accéder à la navigation supérieure de votre fenêtre d'affichage et de voir comment elle se présente sur tablette et sur mobile.

Si vous ne modifiez qu'une section du modèle en mettant à jour le texte ou les images et que vous n'effacez aucune classe du 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 sur mobile et tablette pour vous assurer que tout est parfait.

Modification du titre méta, de la description et de 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 (par exemple Facebook, Twitter, etc.), vous pouvez facilement vous rendre dans la section Pages de 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 hebdomadaire.

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 soit agréable à regarder, ou si vous voulez simplement revenir à une version précédente pour une raison quelconque, vous pouvez toujours vous rendre dans la section Sauvegardes.

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

Support du modèle Webflow de Startuper X

Comme vous avez pu le voir ci-dessus, Startuper X a été construit sur Webflow en utilisant les meilleures pratiques pour qu'il soit très facile pour vous de modifier le modèle et de le personnaliser selon vos besoins.

‍

Toutefois, si vous rencontrez un problème, si vous avez besoin d'aide ou si vous voulez simplement dire bonjour, n'hésitez pas à nous envoyer un courriel à startuperx@brixtemplates.com - Nous serons heureux de vous aider.

Conception et développement sur mesure

D'autre part, si vous cherchez de l'aide pour construire une version unique et personnalisée de Startuper X, ou simplement un site Web étonnant conçu et développé à partir de zéro sur Webflow, n'hésitez pas à entrer en contact avec notre agence de conception et de développement Webflow. La formidable équipe derrière Startuper X Webflow Template peut vous aider.