On va s’intéresser aujourd’hui au plugin gratuit Roi des thèmes enfants: Divi Children, qui est édité par Divi4u et traduit en français par Pierre. Celui-ci permet de créer des thèmes enfants pour Divi hautement personnalisable en quelques clics grâce à un système de Drag & Drop (ce qu’ils appellent le EZ-Builder) et bon nombre d’options disponibles.

Commencez déjà par télécharger le plugin sur leur site ici:

• Réglages
• Créez votre thème enfant
• Réglages généraux du thème
• En-tête
• Pied de page
• Articles
• Icônes de réseaux sociaux
• CSS personnalisé en direct
• Mode de sortie
• Conclusion

Réglages

• Créez un nouveau thème enfant pour Divi
• Changez la screenshot : mettez une image de description pour votre thème enfant
• Mettre à jour le thème enfant

On commence donc avec le 1er onglet:

Créez un nouveau thème enfant pour Divi

On va passer rapidement sur les différents champs présents ici :

• Nom du thème: le nom de votre thème enfant, généralement vous mettrez ici le nom du site
• URI du thème: l’adresse à laquelle on peut trouver votre thème. Vous mettrez souvent aussi l’adresse de votre site si vous ne proposez pas de thème enfant à la vente sur un autre site.
• Version: la version de votre thème. Elle a peut d’importance si vous n’êtes pas développeur (et même si vous l’êtes d’ailleurs 😉 ). Laissez 1.0 .
• Description: une description rapide de votre thème enfant
• Auteur: l’auteur du thème enfant. Vous mettrez souvent votre nom ici.
• URI de l’auteur: si vous avez un site pro, mettez le ici

Voila pour les options basiques de notre thème enfant. On va maintenant pouvoir le générer en cliquant sur Créer un thème-enfant pour Divi

Notre thème enfant est bien crée, cliquez maintenant sur Vous pouvez l’activer dans le gestionnaire de thèmes.

Rendez-vous maintenant dans l’onglet Apparence->Personnaliser . 9 nouveaux onglets sont disponibles :

On va passer sur chacun de ces onglets, en commençant par les…

Réglages généraux

Je ne vais pas décrire les deux 1ers onglets car le 1er permet de masquer certaines options, et le deuxième (Titres h1-h6) est maintenant une option native de Divi à l’exception qu’ici vous pouvez la configurer vos titres pour tout le site au lieu de le faire module par module. Nous ne l’utiliserons donc pas ici.

Paragraphes

Vous pouvez ici accéder à des paramètres globales de vos paragraphes.

On peut donc modifier la hauteur des lignes, marges internes et l’alignement de tous les paragraphes du site en même temps. Super pratique pour ne pas avoir à ouvrir chaque module et modifier à la main.

Listes

Ici vous avez toutes les options pour personnaliser vos listes. Je ne vous montre que pour les listes non ordonnées mais les options sont les mêmes pour les listes ordonnées. Il suffit de cliquer sur le bouton pour les afficher.

• Indention: cette option vous permet de décaler vos listes vers la droite
• hauteur de ligne: modifiez la hauteur de ligne de vos listes
• marge interne supérieur/inférieur: utilisez cette option pour aérer un peu vos listes
• définir une taille de police spécifique: pour modifier l’affichage de vos listes
• style de puce: choisissez entre un point, un carré ou un cercle

En-tête

Idem je ne reviendrais pas sur Masquer des sections.

Commençons directement avec…

En-tête principale (navigation horizontale)

Ce menu vous offre la possibilité de supprimer la ligne sous le menu, mais également l’ombre inférieure.

Vous pouvez également aumenter ou diminuer l’espace entre les items du menu ou encre ajouter une ligne sous le lien actif (comme le menu de Divi Community)

Barre supérieure

Vous pouvez ici simplement centrer ou inverser les infos de la barre de menu supérieure de Divi et choisir l’alignement du menu de la barre supérieure.

Pied de page

Pied de page principal

Vous aurez le choix ici entre utiliser les options natives de Divi ou celles de Divi Children. Elles sont identiques excepté que Divi Children propose une mise en page personnalisée pour le footer :

Vous avez ensuite les options suivantes:

Vous pouvez modifier les marges internes supérieures du footer, les marges inférieures des widgets et les marges inférieures internes du titre de vos widgets.

Vous pouvez également choisir la couleur des liens au survol du pied de page et si vous souhaitez afficher ou non les puces des différents items. Si oui, alors vous avez le choix entre 4 différentes puces pour styliser vos listes et vous pouvez définir leur couleur.

Barre inférieure

Ces options vous permettent de jouer sur les marges de la barre inférieure, d’inverser les icônes de réseaux sociaux et les crédits, de rendre ceux-ci plein écran ou encore de centrer les icônes et les crédits. Ils seront donc affichés sur deux lignes.

Crédits de pied de page

Beaucoup d’options disponibles ici :

Cet onglet vous permet de modifier les crédits (générés par Divi Children à la création du thème enfant), de choisir les séparateurs, d’ajouter l’année, de choisir la couleur des liens, l’épaisseur (graisse) des séparateurs ou encore la valeur des marges.

Barre latérale

La aussi beaucoup d’options:

Vous pouvez modifier la ligne de séparation de la sidebar, les marges, les couleurs des liens, la taille de la police, mettre en italique ou en majuscule ou encore modifiez l’aspect de vos listes à puces.

Articles

On a la possibilité ici de modifier la mise en page des articles et des métas :

On commence avec le …

Constructeur de mise en pages d’articles

Vous pouvez ici ré-arranger les éléments classiques des articles (images à la Une, titre,…) comme bon vous semble avec un simple drag&drop.

Vous pouvez également ajouter des éléments en cliquant sur Add new Element de l’article :

Une liste déroulante s’affiche pour vous proposer les différents éléments à rajouter à vos articles:

• shortcode
• image à la Une en parallax
• un bloc de code
• …

Éléments de méta-données

Un peu le même principe que pour les articles, vous pouvez mettre en forme et personnaliser complètement les métas :

Les choses interessantes ici sont la possibilité de pouvoir ajouter la date de dernière modification de l’article :

et de pouvoir éditer les textes précédents les méta-données. Par exemple:

Styles des méta-données

Vous avez la possibilité entre modifier les réglages standard de Divi ( le séparateur, les couleurs…):

Mais vous pouvez surtout utiliser la mise en page avec Divi Children qui vous permet de remplacer les textes des métas par des icônes:

Vous pourrez donc arriver à un résultat comme ceci:

Plutôt stylé non?

Passons maintenant aux…

Icônes de réseaux sociaux

Divi Children nous donne également la possibilité d’agir sur l’affichage des icônes de réseaux sociaux partout sur le site.

Voila ce qui est proposé:

Icônes de réseaux sociaux

Vous avez la possibilité d’ajouter tous les icônes de réseaux sociaux présent nativement dans Divi avec un simple drag&drop:

Cliquez simplement sur Add new Icône de réseau social et choisissez ensuite dans la liste celui que vous voulez ajouter:

Styles des icônes de réseaux sociaux de l’en-tête et du pied de page

Ici ce sont les mêmes options pour le header et le footer. Vous avez le choix d’afficher les icônes dans leur couleur originale et de modifier l’écart entre eux:

Vous pouvez voir un exemple dans le footer du site de démo sur playground.divi-community.fr :

Convaincu?

CSS personnalisés en direct

Je ne reviens pas sur cet item. C’est similaire au CSS additionnels présent dans Apparence->Personnaliser

Mode de sortie

Suivant si votre site est en développement ou production, vos modifications depuis le customizer ne s’afficheront pas forcément en direct. Par exemple lorsque j’ai testé le plugin ,j’étais en mode développement et j’avais donc les modifications en direct. J’ai cependant remarqué parfois des petits ralentissements des temps de chargement durant mes modifications. Le mode production est donc très utile si vous savez ce que vont donner vos changements.

Conclusion

Voila pour cet article plutôt long, cependant Divi Children offre vraiment beaucoup d’options et de réglages différents. Ne connaissant pas le plugin avant de l’avoir essayé, je ne peux que vous le conseiller.

Gratuit et offrant une possibilité de personnalisation très simple et poussée, je pense vraiment l’utiliser sur tous mes futurs projets avec Divi.

Pour le télécharger gratuitement, cliquez ici:

Partager