Atomic Design et Theme Divi, créer un Design Systems pour son site WordPress

1 juin 2021
Le thème Wordpress Divi propose une panoplie de dispositifs facilitant la mise en place d'un Design Systems pour son site internet : presets Divi, composants globaux, bibliothèque de mise en page ou encore theme builder. Toutes ces fonctionnalités tendent vers la notion de design modulaire.

Styleguide

APPROCHE "ATOMIC DESIGN" AVEC DIVI

Le design modulaire ou "atomic design" permet de créer des Design Systems à partir d'entités plus simples : atome, molécules, organismes, template et pages.

À l’image des molécules chimiques et des atomes, les éléments de l’interface d'un site internet doivent être évolutifs. L'utilisation d'un Design Systems permet aux concepteurs de site internet comme O'Aka de construire des interfaces utilisateurs cohérentes et adaptées aux besoins des internautes tout en permettant une grande flexibilité de mises en page pour les administrateurs du site internet.

L'Agence web O'Aka revient pour vous sur les dispositifs de Divi utilisées lors de la réalisation du site internet de SCAN Center pour déployer un Design Systems prêt à l'emploi.

La solution

Le Theme Divi permet-il de créer un design systems ?

La réponse à cette question est oui ! On peut créer un Design Systems avec Divi et c'est d'ailleurs ce que nous allons découvrir dans cet article. Nous allons faire un focus sur les différentes fonctionnalités de Divi qui permettent de construire une boîte à outils graphique et fonctionnelle pour son site internet WordPress.

la personnalisation des composants Divi

La richesse des composants d'un page builder comme Divi, Elementor, Beaver ou encore Thrive Architect, est l'un des piliers majeurs de son succès ! L'éditeur natif du CMS WordPress a également évolué en ce sens en 2018 avec l'arrivée de Gutenberg. Le page builder Divi propose nativement plus de 50 composants assez variés.

Qu'est-ce qu'un composant exactement ? Les composants sont des éléments uniques permettant de mettre en page un ensemble de contenus (diaporama photos, témoignage, CTA, etc.). Chaque composant, appelé aussi module ou bloc, est constitué de sous-entités (onglet Contenu dans Divi) comme par exemple un titre, un texte, une icone ou encore un bouton d'action. Certaines de ces sous-entités sont obligatoires et d'autres facultatifs. Le style du composant est généralement personnalisable au travers du Visual Builder de Divi (onglet Style dans Divi).

capture d'écran du visuel buider Divi

Personnalisation de la couleur de l'icône à son survol, pour un composant "Résumé" (en bleu) dans le Visual Builder de Divi

Dans l'approche "Atomic Design", le composant Divi est une molécule.

Les composants permettent donc de mettre en page des contenus et d'être personnalisés au travers de styles. C'est pratique mais limité. Comment peut-on harmoniser les styles d'une instance à l'autre d'un même module ? Divi propose une fonction de copier-coller des styles d'un module sur un autre mais cela doit se faire module par module. La fonction pour étendre un style sur toute une page peut également être utile mais quand vient l'heure de faire une modification sur toutes les instances d'un même module sur tout le site, l'intervention peut vite devenir chronophage.

Faciliter les mises à jour avec les presets de Divi

Un preset par défaut est automatiquement appliqué sur chaque module. Les presets sont des configurations de styles de module sauvegardées dans le système. Deux avantages indéniables à l'utilisation des presets Divi :

  • Les presets Divi permettent de rapidement appliquer un style prédéfini à un module.
  • Divi permet de modifier un preset à tout instant et de répercuter automatiquement la modification effectuée sur tous les modules qui appliquent ce preset.

Il est très facile d'ajouter un preset supplémentaire pour un même module. On peut donc créer des variantes graphiques pour un même module et maitriser l'intégralité de sa mise en page.

capture vidéo des presets Divi

Démonstration du changement de preset Divi sur un module Bouton dans le site internet de SCAN Center

À noter que les presets sont surchargeables une fois appliqués à un module. Cela signifie que l'on peut se servir du style du preset comme base de référence (modifiable à souhait) mais appliquer une modification spécifique comme par exemple un fond de couleur différente ou une marge.

Sauvegarde des compositions essentielles dans la bibliothèque Divi

Le page builder Divi nécessite de respecter une architecture qui lui est propre (pour faire simple) :

  • une page qui utilise le Visual Builder de Divi contient une ou plusieurs sections ;
  • une section Divi contient une ou plusieurs lignes ;
  • une ligne Divi contient une ou plusieurs colonnes ;
  • une colonne Divi contient un ou plusieurs modules ;

La bibliothèque Divi permet de sauvegarder une composition, c'est-à-dire l'intégralité d'une section, d'une ligne ou d'une colonne... et de tous les éléments qu'elle contient (exemple : un ensemble de lignes, colonnes, modules, textes, images, liens, etc.). Ainsi, une copie d'une composition de la bibliothèque peut être chargée (puis modifiée) dans n'importe quelle autre page qui utilise le Visual Builder de Divi. Pratique pour définir des compositions de mise en page et les réutiliser à l'infini.

Divi fait encore plus fort en proposant de définir des éléments globaux dans la bibliothèque Divi. C'est à dire que toutes les instances générées depuis l'élément de référence ne sont plus modifiables individuellement mais héritent automatiquement des modifications réalisées dans l'élément global de la bibliothèque Divi : très pratique pour mettre un encart promotionnel à différents endroits d'un site !

Dans l'approche "Atomic Design", un élément de la bibliothèque Divi est donc un organisme.

Bibliothèque Divi et capture d'écran du guide de styles O'Aka

Ajout d'une section Divi en provenance de la bibliothèque sur le site internet SCAN Center

Construire le guide de styles qui illustre le design systems

Nous vous recommandons vivement de créer une page "Guide de styles" ou "Styleguide" réservée à l'équipe en charge de l'administration du site. L'intérêt est de regrouper en un seul endroit tous les composants de la bibliothèque. Vous pourrez également y présenter toutes les variantes stylistiques d'un même module en présentant tous les presets sauvegardés dans le système.

Même si le maintien à jour de cette page peut prendre un peu de temps, ce guide de styles digital facilite grandement la sélection de la bonne composition ou du bon preset. Plus terre-à-terre encore, il permet plus facilement de retrouver le nom associé à une composition dans la bibliothèque Divi. Pratique quand vous avez beaucoup d'éléments dans la bibliothèque qui devient alors moins lisible.

Création des gabarits de page avec le theme Builder Divi

Enfin, pour uniformiser la structure des pages d'un même type de contenus, le Theme Builder de Divi permet de combiner les "molécules" (composants et presets Divi) et les "organismes" (compositions de la bibliothèque Divi) du Design Systems pour mettre en place des "templates" comme ils sont appelés dans l'approche "Atomic Design".

Ces "templates" sont des modèles de mises page différents selon leurs types : pages éditoriales, articles, témoignages, listings, etc. Leur avantage est qu'ils permettent de garder la main sur le style graphique global du site et offrent la possibilité de les faire évoluer en un seul et même endroit.

Styleguides WordPress et presets des composants Divi

Extrait du styleguide Divi du site SCAN Center

Bien se faire accompagner dans la création de son design Systems

Il peut être assez compliqué de savoir comment structure les pages d'un site WordPress et définir quels fonctionnalités de Divi utiliser pour garder une plus grande flexibilité dans l'administration de son site internet développé avec le thème graphique Divi.

L'agence web O'Aka est experte du thème Divi et peut vous accompagner dans la réalisation de votre site internet WordPress. Nous conseillons nos clients et élaborons avec eux la meilleure stratégie digitale en fonction de ses besoins et de ses moyens. N'hésitez pas à prendre contact avec nous.

 À propos de l'auteur

Portrait de Yoann PIERRE souriant avec une barbe et des lunettes

Yoann PIERRE

Tout d’abord chef de projet digital, puis responsable d'une équipe de développement web, Yoann a fait ses premières armes dans une agence eCommerce strasbourgeoise. En quête de nouveaux challenges, c'est en 2020 qu'il fonde l'agence O'Aka.
Lien d'affiliation avec Elegant Themes
Publicité pour le thème Wordpress Divi
Méthodologie Agile et projets digitaux

Méthodologie Agile et projets digitaux

Qu’est que la méthodologie Agile et qu’est ce qui fait son succès d’aujourd’hui ? Devez-vous réaliser votre prochain projet digital en méthode Agile SCRUM ou rester sur une méthodologie plus classique ? O’Aka vous fait une présentation macroscopique de cette méthodologie et tente de vous répondre.

Vendre sur Internet avec Shopify

Vendre sur Internet avec Shopify

Shopify est une des solutions les plus populaires pour vendre sur internet. Découvrons ensemble ce qui fait le succès de cette solution et les points à clarifier avant de se lancer dans l’aventure de l’eCommerce.

L’écosystème de WordPress

L’écosystème de WordPress

O’Aka vous présente les différentes couches techniques qui constituent votre site internet Wordpress : socle CMS, plugins, thème graphique, etc. Décryptons tout cela ensemble dans cette keynote qui ne vous prendra que quelques minutes à lire !

WordPress, le CMS en 2020

WordPress, le CMS en 2020

Wordpress est un CMS très populaire sur le web et est utilisé par l’agence O’Aka pour réaliser des sites internet. Découvrons ensemble les chiffres-clés de ce CMS en 2020.

Thématiques associées :

Le A Coeur blanc et transparent de la marque Alsace

O'Aka, Implantée au coeur de l'Alsace

Pin It on Pinterest