Les Design Settings Showit : configure ton identité visuelle une fois, applique-la partout
Dans ce guide, je vous montre ce qui va vous faire gagner un temps considérable dans la création -et surtout dans l’évolution de votre site Showit : les Design Settings.
C’est le panneau où vous définissez vos couleurs, polices et boutons une seule fois.
Après ? Chaque nouvel élément que vous créez s’aligne automatiquement sur votre branding. Et quand vous voulez changer une couleur sur tout le site, vous le faites en un clic au lieu de retoucher chaque page une par une.
C’est la première chose à configurer. Avant de construire quoi que ce soit.
Où trouver les Design Settings
Dans l’éditeur Showit, cliquez sur l’icône Design Settings en haut à gauche de l’interface.
Vous y trouverez quatre onglets : Brand Colors, Type Styles, Fonts, Buttons.
Brand Colors – tes couleurs de marque
C’est ici que vous définissiez votre palette. Showit vous donne 8 emplacements de couleurs à personnaliser vos couleurs principales, secondaires, le blanc, le noir, les nuances.
Une fois définies, ces 8 couleurs apparaissent directement dans le panneau de propriétés à droite, chaque fois que vous personnalisez un texte, une forme ou un fond. Vous cliquez, vous choisissez dans votre palette.
Pour changer une couleur :
- Cliquez sur la couleur dans la colonne de gauche
- Utilisez le sélecteur de couleur, entre votre code hexadécimal, ou utilisez la pipette pour capturer une couleur depuis l’extérieur de l’app
- Prévisualisez en temps réel sur les pages de votre site avant de sauvegarder
<aside> 💡 💡 Depuis cet écran, vous pouvez sélectionner différentes pages et faire défiler pour voir l’impact de vos couleurs sur l’ensemble du site avant de valider.
</aside>
Type Styles – tes styles de texte
C’est la section où vous définissez l’apparence par défaut de chaque type de texte, pour desktop et mobile séparément.
Les quatre catégories disponibles :
- Title – le titre principal d’une page ou d’une section
- Header – les titres de section
- Subheading – les sous-titres
- Paragraph – le corps de texte
Pour chaque catégorie, vous pouvez configurer : couleur, police, taille, interlignage, espacement des lettres, casse, marge inférieure et alignement.
Vous pouvez aussi personnaliser le style des liens inline : couleur, format, couleur au survol.
<aside> 💡 🗒️ Si vous avez un blog Showit : les Type Styles s’appliquent directement au contenu de vos articles WordPress. Les H2, H3 et paragraphes que vous rédigez dans WordPress prendront automatiquement le style défini ici. Ce n’est pas le cas pour les titres et éléments que vous avez designez manuellement dans l’interface Showit . Ceux-là ont leur propre style indépendant mais tout le corps de texte de vos articles, lui, suit ces réglages. C’est une bonne raison de soigner ces styles dès le départ.
</aside>
<aside> 💡 📖 Vous voulez aller plus loin sur les typographies ? J’ai écrit un guide complet pour bien choisir et configurer vos polices dans Showit : Typographies Showit – le guide complet pour commencer
</aside>
Global Styles
Tout en bas de l’onglet Type Styles, vous trouverez les Global Styles. C’est là que vous définissez la couleur de fond par défaut de toutes vos nouvelles pages et canvas. Chaque fois que vous créez une nouvelle section vierge, elle démarre automatiquement avec cette couleur.
Fonts – tes polices
L’onglet Fonts est l’endroit où vous ajoutez les polices que vous voulez utiliser sur votre site. Sans ça, elles ne seront pas disponibles dans le reste des Design Settings.
Deux options :
- Google Fonts – des milliers de polices gratuites accessibles directement
- Custom Fonts – vous uploadez vos propres fichiers de polices
<aside> 💡 ⚠️ L’ordre compte : commencez toujours par ajouter vos polices ici avant de les assigner dans les Type Styles.
</aside>
Buttons – le style de tes boutons
L’onglet Buttons vous permet de définir le style par défaut de tous vos boutons : couleur de fond, couleur du texte, arrondi des coins, bordure, taille, espacement. Chaque fois que vous ajouterez un nouveau bouton sur une page, il prendra automatiquement ces réglages.
<aside> 💡 📖 Vous voulez aller plus loin sur les boutons ? J’ai écrit un guide complet pour créer des boutons professionnels et cohérents avec votre branding : Boutons Showit – le guide complet
</aside>
Sync ou Split – desktop et mobile indépendants
Par défaut, les réglages de Type Styles s’appliquent à la fois sur desktop et mobile. Mais vous pouvez dissocier les deux si besoin – par exemple pour avoir une taille de titre différente selon l’écran.
Comment séparer les réglages :
- Dans Type Styles, survole le paramètre que vous voulez dissocier
- Cliquez sur les trois points à droite
- Sélectionnez « Split Mobile & Desktop »
- Deux icônes apparaissent – desktop et mobile – et vous pouvez modifier chacune indépendamment
Pour resynchroniser : clique sur l’icône et choisis « Merge ».
<aside> 💡 ⚠️ Si vous mergez depuis l’icône desktop, c’est la version desktop qui s’applique. Si vous mergez depuis l’icône mobile, c’est l’inverse. Faites attention à quelle version vous voulez conserver.
</aside>
Les bonnes pratiques à adopter dès le départ
Configurer les Design Settings, c’est bien. Les utiliser correctement au quotidien, c’est ce qui fait vraiment la différence.
Utilisez toujours les Brand Colors – pas les couleurs personnalisées
Quand vous sélectionnez un élément dans Showit, vous voyez deux types de couleurs dans le panneau de droite : vos Brand Colors et une option de couleur personnalisée. La tentation, c’est de cliquer sur « personnalisée » pour aller plus vite.
Ne le faites pas.
Si vous utilisez une couleur personnalisée et que vous décidez demain de changer votre couleur principale, vous devrez modifier chaque élément manuellement. Si vous avez utilisé votre Brand Color partout, vous changez la couleur en un seul endroit dans les Design Settings et tout le site se met à jour instantanément.
Assignez des Type Styles – ne surchargez pas chaque élément manuellement
Quand vous ajoutez un texte sur une page, ne changez pas sa police ou sa taille directement dans le panneau de propriétés. Assignez lui plutot un style existant (Title, Header, Subheading, Paragraph).
Comme ça, si vous voulez faire évoluer l’identité visuelle de votre site – nouvelle police, nouvelle taille vous modifiez une seule fois dans les Design Settings, et tout s’actualise.
L’ordre pour démarrer
Les Design Settings, c’est la première étape avant de construire ou personnaliser votre site.
- Fonts – ajoute vos polices en premier
- Brand Colors – entrez vos 8 couleurs de marque
- Type Styles – assignez vos polices et couleurs à chaque niveau de texte
- Buttons – configurez le style par défaut de vos boutons
Une fois ces quatre onglets remplis, vous construirez votre site dans un cadre cohérent. Et vous gagnez un temps considérable à chaque modification future.