Configurer les Design Settings sur Showit

Partager

Si tu veux que ton site soit visuellement cohérent d’un bout à l’autre, les Design Settings sont ton meilleur allié. C’est là que tu définis une fois pour toutes tes couleurs, tes typographies et tes boutons, et que tout s’applique automatiquement sur l’ensemble de ton site.

On fait le tour complet.

Accéder aux Design Settings

Dans le Site Panel à gauche, clique sur le Site puis sur Design Settings. Une fenêtre s’ouvre avec 4 onglets : Brand Colors, Type Styles, Fonts et Buttons.

Brand Colors : tes couleurs de marque

L’onglet Brand Colors te permet de définir jusqu’à 8 couleurs de marque. Ces couleurs seront ensuite accessibles en un clic dans le Properties Panel chaque fois que tu personnaliseras un texte, une forme ou une icône.

Pour modifier une couleur : clique dessus dans la colonne de gauche, puis choisis ta couleur via le color picker, en entrant un code hex, ou en utilisant la pipette pour capturer une couleur précise.

Tu peux prévisualiser l’impact de tes changements en temps réel sur n’importe quelle page de ton site avant de sauvegarder.

💡 Configure tes couleurs de marque en tout premier, avant même de commencer à créer du contenu. Ça te fera gagner un temps fou ensuite.

Type Styles : tes styles de texte

L’onglet Type Styles te permet de définir l’apparence par défaut de chaque niveau de texte : Title, Header, Subheading et Paragraph, pour le desktop et le mobile indépendamment.

Pour chaque style, tu peux configurer la couleur, la police, la taille, la hauteur de ligne, l’espacement des lettres, la casse, la marge basse et l’alignement. Tu peux aussi définir l’apparence des liens inline (couleur, format, état hover).

Chaque fois que tu insèreras un nouveau texte sur ton canvas, il utilisera automatiquement ces réglages. C’est ce qui garantit la cohérence visuelle de ton site sans avoir à tout reconfigurer à chaque fois.

Showit applique automatiquement les balises HTML (h1, h2, h3, p…) en fonction des Type Styles que tu utilises. C’est important pour le SEO : configure bien tes styles et utilise-les de façon cohérente.

Global Styles

Tout en bas de l’onglet Type Styles, tu trouveras les Global Styles. Ça te permet de définir la couleur de fond par défaut des nouvelles pages et canvases. Pratique pour éviter de le reconfigurer à chaque fois que tu crées un nouveau canvas.

Splitter les réglages Desktop et Mobile

Comme pour le reste sur Showit, tu peux séparer les réglages de typographie entre desktop et mobile. Survole le réglage que tu veux modifier indépendamment (taille, couleur…) et clique sur les trois points pour choisir Split Mobile & Desktop.

Pratique par exemple pour avoir une taille de titre plus grande sur desktop que sur mobile, sans toucher à l’un quand tu modifies l’autre. Tu peux re-synchroniser les deux à tout moment avec Merge.

Fonts : tes polices

L’onglet Fonts te permet d’ajouter des polices à ton design : Google Fonts directement depuis la plateforme, ou polices personnalisées au format WOFF si tu as des polices spécifiques à ta charte graphique.

Les polices que tu ajoutes ici deviennent disponibles dans tous tes réglages de texte.

💡 Télécharge tes polices personnalisées en format WOFF via la Media Library avant de les configurer dans les Fonts. C’est le format requis par Showit.

Buttons : tes boutons par défaut

L’onglet Buttons te permet de définir le style par défaut de tes boutons : couleur de fond, couleur du texte, bordures, coins arrondis, taille, typographie… Chaque nouveau bouton que tu ajouteras sur ton site utilisera ces réglages comme point de départ, que tu pourras ensuite affiner page par page.

En résumé

Les Design Settings, c’est la base de ton identité visuelle sur Showit. Configure-les soigneusement au début de ton projet, et ton site sera cohérent sans effort tout au long de la création.

MAILLAGE INTERNE

Configurer les Site Settings sur Showit

Comprendre le Site Panel de Showit

Créer avec Showit — tous les tutoriels en français