fbpx

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:

Si vous souhaitez vous rendre dans une partie en particulier de cet article:
Une fois celui-ci en votre possession, rendez-vous dans Extensions->Ajouter. Cliquez ensuite sur Mettre une extension en ligne en haut de la page, sélectionnez l’archive contenant Divi Children et cliquez sur Installer. Vous n’avez maintenant plus qu’à activer l’extension et on peut commencer.

 

Réglages

 

Pour accéder aux réglages, il faut maintenant se rendre dans Apparence->Divi Children
Nous voila sur la page d’accueil de l’extension :
homepage divi children
Trois onglets s’offre à nous :
  • 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

theme enfant divi valide

 

 

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 :

 

nouveaux onglets divi children

 

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

Réglages généraux

 

réglages généraux div children

 

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

 

paragraphes divi children

 

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

 

listes divi children

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

 

entete divi children

 

Idem je ne reviendrais pas sur Masquer des sections.

Commençons directement avec…

En-tête principale (navigation horizontale)

 

entete principale divi children

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

 

barre superieure div children

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.

 

footer divi children

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 :

 

mise en page footer divi children

Vous avez ensuite les options suivantes:

 

options footer divi children

 

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

 

barre inferieure divi children

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 :

 

barre inferieur de pied de page

 

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:

 

Barre latérale Divi Children

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 :

 

articles divi children

 

On commence avec le …

Constructeur de mise en pages d’articles

 

constructeurs articles divi children

 

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 :

 

constructeurs articles divi children

 

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 :

 

metas articles divi children

 

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

 

ajouts metas divi children

 

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

 

modifier textes metas divi children

Styles des méta-données

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

 

styles metas divi

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:

 

icones metas divi children

 

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

 

icones articles divi

 

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é:

 

icones reseaux sociaux divi children

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:

 

reseaux sociaux divi children

 

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

 

ajout reseaux sociaux divi children

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:

 

couleur icones reseaux sociaux

 

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

 

footer divi community

 

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.

 

mode de sortie divi children

 

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: