🤨 Introduction : qu’est-ce qu’un Design System ?
Un Design System est l’ensemble des aspects graphiques autour duquel vous construisez votre site Web. Il se doit de respecter votre charte graphique pour refléter l’identité de votre marque. Pensez aux grandes marques comme Google, Nike, Apple ou même Spotify. Elles ont toutes une identité de marque unique et s’efforcent d’utiliser un design cohérent sur l’ensemble de leurs canaux de communication, dont, bien évidement, leur site web.
Voyons maintenant comment intégrer le Design System de votre marque au sein de votre site Web à l’aide de l’écosystème Elementor. N’hésitez pas à aller lire notre article sur tout ce qu’il faut savoir pour bien débuter sur WordPress.
🆕 Etape 1 : Ajouter des typographies personnalisées
Elementor embarque nativement la fameuse bibliothèque de police Google Font, mais pour les besoins de votre client et pour respecter une charte graphique, vous aurez surement besoin d’importer une police personnalisée.
Il existe plusieurs façons de faire, en passant directement par Elementor en version PRO ou bien par WordPress avec un peu de code CSS.
Rendez-vous dans votre backoffice WordPress dans la section Elementor de votre menu, puis “Polices personnalisées”
On peut constater qu’il existe différents formats de fichier pour notre nouvelle police d’écriture.
- WOFF : est le format le recommandé car il est pris en charge par tous les navigateurs modernes.
- WOFF2 : possède une meilleure compression, donc mieux optimisé. Attention il peut cependant être incompatible avec des navigateurs plus anciens.
- TTF : format standard.
- SVG : format vectoriel, plus optimisé et très léger, mais attention aux compatibilités mobiles.
- EOT : format pour Internet Explorer mais obsolète. Utile uniquement en cas de fallback sur de très vieux navigateurs.
Une fois importée, renseignez la valeur “Graisse” et “Style” si besoin et ajouter toutes vos déclinaisons avec le bouton “Ajouter une variante” si vous avez des variations italiques ou bien en gras de cette typographie.
🤌 Et voilà ! Il ne vous reste plus qu’à publier la police et elle sera désormais disponible dans vos widgets textes et kit par défaut Elementor. C’est aussi simple que ça !
Pour utiliser cette typo custom au sein de notre Design System, nous allons ensuite nous retrouver sur les “Réglages du site” Elementor, accessibles en survolant “Modifier avec Elementor” sur votre barre d’administrateur.
✒️ Etape 2 : Définir les typographies globales du site
Nous allons maintenant nous intéresser à l‘onglet “Polices globales”
Pour vous faciliter la prévisualisation de vos typos globales, Elementor a récemment intégré une option de prévisualisation du guide de style, cela vous permettra de voir d’un coup d’œil le rendu de vos typos globales.
Un fois cette option activée, vous pouvez entrer dans le vif du sujet et commencer à définir les polices globales de votre site. Vous retrouverez ici 4 “Polices système” définies par défaut, vous pouvez commencer par les modifier selon votre besoin. Pour cela nous retrouvons le comportement standard d’Elementor, vous n’avez qu’à cliquer sur l’icône de modification et choisir votre webfont dans le menu déroulant sous l’onglet “Polices personnalisées”. N’oubliez pas de définir ses propriété de graisse, de taille (coucou em/rem), la hauteur de ligne, les variations de styles, etc…
⚠️ Pensez bien à établir vos différentes variations en mode responsive afin de ne pas vous retrouver avec des typographies non adaptées au device !
Une fois vos différentes typos intégrées et modifiées vous devriez retrouver une vue d’ensemble de vos polices qui pourrait ressembler à ceci :
Vous remarquerez la possibilité de créer des styles supplémentaires en cliquant sur le bouton “+ Ajouter un style”. Vous pourrez définir un ensemble de polices complémentaires (pour vos liens, vos CTAs, ou d’autres blocs de votre site…), pratique non 😉 ?
Dernier point sur les typos : vous pouvez pousser votre personnalisation dans l’onglet “Typographie” (toujours dans les “Réglages du site”)
Ici le principe est à peu près le même que pour nos polices globales: vous pouvez personnaliser les polices selon les balises HTML (liens, H1, H2, etc…). Cela vous donne la possibilité de leur attribuer les polices globales précédemment crées ou bien de définir des styles propres qui viendront s’appliquer automatiquement en fonction de vos balises.
En bonus vous pouvez même leur attribuer une couleur par défaut 🤗
Une parfaite transition pour le prochain point qui va concerner la définition des couleurs globales de votre site.
🎨 Etape 3 : Définir les couleurs globales du site
Elementor propose, en complément des customisations de polices globales, un module de personnalisation des couleurs globales de votre site web.
Pour l’utiliser, rendez vous dans l’onglet “Couleurs globales” des réglages du site.
Nous retrouverons ici une interface similaire à celle précédemment abordée, qui va vous permettre de définir très facilement les couleurs présentes dans votre projet.
Une fois mises en place, vous aurez la possibilité, à l’instar de notre système typographique, de visualiser l’ensemble des couleurs de votre site grâce à la “Prévisualisation du guide de style”. En complément des couleurs système, vous pouvez ajouter des couleurs personnalisées qui seront ensuite utilisables dans tous vos onglets de style de vos widgets Elementor.
💥 Pro-tips : si vous avez oublié de créer une couleur globale lors de l’intégration du projet, vous pouvez ajouter directement une couleur définie aux couleurs globales en cliquant sur le symbole “+” du sélecteur de couleur Elementor (au sein du Builder).
Notez bien que cet ajout “à la volée”, fonctionne également pour les polices. Cela vous permet d’ajouter rapidement un style que vous avez créé dans le Builder au système global.
🔎 Etape 4 : Les éléments globaux du site
Le module de “Réglages du site” d’Elementor vous donnera aussi la possibilité de modifier à la racine certains widgets du Builder.
Ces trois différents onglets vous permettront de styliser l’aspect “Par défaut” des widgets “Boutons” ,“Images” et “Formulaire” présents dans le constructeur. Cela signifie que vous n’aurez plus à les styliser individuellement à chaque ajout au site. Néanmoins vous aurez toujours la possibilité d’écraser ce style par défaut via Elementor si un élément doit être différent (ex: un CTA au style inversé, une image avec un masque, etc…).
💥 Pro-tips : une fois tout vos styles définis, rendez vous sur votre Dashboard WordPress, dans l’onglet Elementor → Réglages, puis cochez les deux cases qui désactivent les couleurs et les styles par défaut. Cela va permettre à Elementor d’hériter directement de vos styles préalablement créés.
✅ Conclusion : Le Design System dans Elementor un outil pratique et puissant !
Créer et customiser votre Design System directement dans Elementor est une bonne pratique car elle permet d’être plus efficace dans l’intégration de votre projet web.
En effet, malgré un investissement en temps lors de la création de celui-ci, votre gain de productivité lors de la création via le Builder sera non négligeable. N’hésitez pas à faire appel à une agence web pour vous accompagner. Outre ce gain d’efficacité, cela vous permettra aussi de modifier en quelques clics la totalité de vos éléments héritant de vos styles globaux. Votre client change d’avis sur le style de la typographie des titrages ? Pas de soucis, le changement de la police globale va s’appliquer à tous les éléments qui l’utilisent. La couleur de la charte graphique évolue ? Un jeu d’enfant grâce aux couleurs globales 😉
Vous l’aurez compris, chez Vingt Deux nous plébiscitons la puissance et la scalabilité d’Elementor pour la création d’un Design System personnalisé.
