Comment créer un thème Divi Enfant

Il existe des milliers (c'est vrai, des milliers !) de thèmes WordPress parmi lesquels vous pouvez choisir lors de la création d'un site. Cependant, la plupart des concepteurs de sites Web trouvent que même si les thèmes WordPress constituent un bon point de départ, ils souhaitent davantage de personnalisation, et la création d'un thème enfant est un excellent moyen d'y parvenir.

Les thèmes enfants s'appuient sur les thèmes parents et vous permettent d'ajouter ou de supprimer votre propre code. Si vous souhaitez véritablement personnaliser votre site WordPress, utiliser des thèmes enfants est la meilleure solution et Divi est l'un des meilleurs choix.

La principale raison pour laquelle les créatifs créent un thème enfant Divi est que lorsque le thème parent est mis à jour, rien ne se brise sur votre site. Créer un thème enfant depuis Divi agit essentiellement comme un filet de sécurité, toujours là pour attraper votre site avant qu'il ne casse ! Mais je prends de l'avance, alors commençons par les bases.

Dans cet article, je couvrirai :

• Qu’est-ce que Divi et quelles sont les fonctionnalités ?
• Comment créer un thème enfant Divi (+ un téléchargement enfant gratuit !)
• Comment tester si votre thème enfant Divi fonctionne

Allons-y.

Qu’est-ce que Divi et quelles sont les fonctionnalités ?

Divi est un thème WordPress d'Elegant Themes qui vous permet de créer vos pages en utilisant différents éléments structurels à partir de zéro. Cela signifie que vous avez un contrôle total sur tout ce qui se trouve sur les sites que vous créez grâce à son éditeur visuel supérieur.

Il est également livré avec des centaines de designs prédéfinis, donc si vous n'avez pas d'expérience dans la création et la personnalisation de thèmes, ne vous inquiétez pas ! Que vous soyez débutant cherchant à personnaliser votre premier site ou développeur chevronné, Divi vous donne les outils nécessaires pour donner vie à vos idées.

Divi dispose de deux interfaces de création : l'éditeur visuel sur le front-end de WordPress et le constructeur back-end. Sur l'éditeur visuel, la création de sites pour les clients est 10 fois plus facile, plus rapide et plus agréable, car vous pouvez modifier sur la page elle-même et voir vos modifications en direct. En back-end, vous modifiez la représentation basée sur des blocs à l'intérieur de la publication. Cependant, vous pouvez toujours ajouter de nouveaux modules et faire essentiellement tout comme vous le feriez dans l'éditeur visuel. Il est également facile de rebondir entre les éditeurs, selon vos préférences.

Divi dispose également de trois éléments structurels principaux que vous pouvez utiliser tels quels ou personnaliser selon vos spécifications exactes : sections, lignes et modules.

Sections : Ce sont les plus gros éléments de base du constructeur Divi. Vous pouvez les considérer comme des blocs empilés horizontaux qui peuvent regrouper votre contenu en zones visuellement reconnaissables. Tout ce que vous construisez commence par une section.

Lignes : les lignes sont les différentes dispositions de colonnes qui peuvent être placées à l’intérieur des sections. Ils ont divers paramètres accessibles en cliquant sur l'icône des paramètres en haut à gauche de la ligne et peuvent être utilisés pour augmenter considérablement la variété des mises en page construites avec Divi Builder puisqu'ils créent la structure dans laquelle sont hébergés vos modules.

Modules : les modules contiennent différents éléments de contenu tels que des images, du contenu, des curseurs, des galeries, des formulaires de contact, des CTA, des blogs, des formulaires, des témoignages, etc. Vous pouvez choisir parmi plus de 40 modules, puis les personnaliser comme vous le souhaitez.

Maintenant que vous comprenez un peu mieux Divi, voyons comment créer un thème enfant.

Comment créer un thème Divi Enfant

Avant de commencer à personnaliser les choses, vous devez vous assurer que Divi est installé et activé. Il y a deux façons d'aborder cela:

Option 1 : Utilisez Flywheel + Divi pour une installation rapide et facile.

Option 2: La méthode manuelle (suivez ces deux étapes)

Étape 1 : Inscrivez-vous et téléchargez Divi ici. Une fois que vous avez créé un compte et connecté, vous serez redirigé vers la zone membres et vous dirigerez vers le côté gauche pour trouver l'onglet « Téléchargements ». Trouvez Divi et cliquez sur « Télécharger ». Cela envoie un téléchargement de Divi dans un fichier zip dans votre dossier Téléchargements.

Étape 2 : Il est temps de vous connecter à votre site WordPress. Accédez à Apparence > Thèmes. Cliquez sur Ajouter un nouveau ou Ajouter un nouveau thème sur le côté droit. Cliquez sur le bouton « Télécharger le thème » en haut à gauche. Choisissez le fichier et recherchez ce fichier zip Divi. Remarque : conservez-le dans un fichier zip (ne décompressez pas). Cliquez sur Installer. Une fois l'installation terminée, cliquez sur « Activer » et il est installé et activé sur votre site ! ?

Maintenant, vous êtes prêt à créer un thème enfant Divi ! Il existe trois manières principales de créer un thème enfant Divi : télécharger un thème enfant gratuit, utiliser un plugin, ou le coder manuellement.

Option 1 : Télécharger un fichier de thème Divi Child gratuit

L’un des moyens les plus rapides (et les plus simples !) de créer un thème enfant est de télécharger ce thème enfant Divi gratuit. Il contient tout le nécessaire pour commencer, ainsi que de la place pour que vous puissiez le personnaliser à votre guise ! Téléchargez votre thème enfant Divi gratuit ci-dessous.

Une fois téléchargé, installez Divi, activez-le, et le tour est joué ! C'est aussi simple que ça. Si vous préférez une manière différente de créer un thème enfant Divi, vous pouvez toujours essayer un plugin.

Option 2 : Créer un thème Divi Child en utilisant un plugin

Il existe un certain nombre de plugins disponibles pour vous aider à créer un thème enfant Divi. Voici quelques-uns de mes favoris personnels :

• Divi Enfants
• Configurateur de thème enfant
• Créateur de thème enfant par Orbisius

Divi Enfants

Divi Children est un plugin gratuit spécialement développé pour les utilisateurs de Divi. Il fait automatiquement le travail à votre place, vous pouvez donc vous concentrer uniquement sur le côté créatif ! Chaque thème enfant créé par Divi Children est livré avec de nombreuses fonctionnalités de personnalisation via WP Customizer. Découvrez comment installer ce plugin ici.

Configurateur de thème enfant

Ce plugin a été conçu pour les utilisateurs de WordPress qui souhaitent pouvoir personnaliser directement les feuilles de style des thèmes enfants. Avec ce plugin, vous pouvez facilement identifier et remplacer les attributs CSS exacts que vous souhaitez personnaliser et l'analyseur analyse le thème rendu et configure automatiquement votre thème enfant. Apprenez-en plus sur ce plugin et comment l’installer ici.

Créateur de thème enfant par Orbisius

Ce plugin vous permet de créer rapidement des thèmes enfants à partir de n'importe quel thème que vous avez actuellement installé sur votre site. Avec ce plugin, vous pouvez créer un nombre illimité de thèmes enfants à partir de votre thème parent afin que les options soient infinies. Il comporte deux éditeurs et vous pouvez sélectionner des extraits d'un thème et les coller dans un autre. Parlez de personnalisation ! En savoir plus sur l’installation de ce plugin ici.

Enfin, si un plugin n’est pas fait pour vous, il y a toujours la possibilité de créer un thème enfant Divi manuellement !

Option 3 : Créer manuellement un thème Divi Child

Si vous êtes un développeur WordPress ou si vous aimez simplement les bons défis, c'est un excellent moyen pour vous de créer un thème enfant Divi.

Étape 1 : Créez le fichier style.CSS

Comme vous le savez probablement, le fichier style.css sert à indiquer à WordPress les détails de votre thème enfant et peut être utilisé pour ajouter du CSS personnalisé ! Pour cela, créez un dossier sur votre ordinateur et donnez-lui un nom (quelque chose qui vous permet de savoir que c'est pour un thème enfant Divi). À partir de là, créez un fichier dans ce dossier et nommez-le style.css.

Remarque : assurez-vous de disposer d'un outil d'édition de texte ou de code, sinon il sera difficile de nommer ce fichier !

Étape 2 : Ajoutez ceci au fichier style.css :

 /*
 Nom du thème : Thème Divi Enfant
 URI du thème : https://www.elegantthemes.com/gallery/divi/
 Description : Thème Enfant pour Divi
 Auteur : Votre nom
 URI de l'auteur : https://getflywheel.com/
 Modèle : Divi
 Version : 1.0.0
*/

Le nom du thème, l'URI du thème, la description, l'auteur, l'URI de l'auteur et la version sont tous modifiables. Conservez le nom du modèle tel quel ! Pour plus de personnalisation (et pour vous assurer que votre thème enfant Divi fonctionne), ajoutez n'importe quel CSS personnalisé ici.

Étape 3 : Créez le fichier function.php

Créez un autre fichier dans le dossier que vous avez déjà créé et nommez-le function.php

Ensuite, ajoutez ce code à votre nouveau fichier et ajoutez toutes les fonctions personnalisées que vous souhaitez sous la dernière ligne :

 <?php
fonction divi__child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

Étape 4 : Créer une capture d'écran

Il s'agit d'une étape importante afin que votre site n'ait pas d'espace vide là où l'image devrait se trouver sur la page des thèmes WordPress, donc prendre une capture d'écran rapide est une étape clé ici ! Une fois que vous avez pris votre capture d'écran, continuez et assurez-vous que les dimensions sont de 880 x 660 pixels, qu'il s'agit d'un .png ou d'un .jpeg (ça marche !) et que le nom est [screenshot.png] ou [screenshot.jpeg]. Ensuite, vous ajouterez votre image de capture d’écran au dossier principal.

Étape 5 : Compressez le dossier et téléchargez-le

Enfin, compressez le dossier dans un fichier zip et téléchargez-le sur WordPress ! Vous irez dans Apparence > Thèmes > Télécharger , puis cliquez sur Activer.

Voilà ! Vous avez créé avec succès un thème enfant Divi et vous êtes prêt à le personnaliser selon vos envies.

Comment tester si votre thème Divi Child fonctionne

Afin de tester si votre thème enfant fonctionne correctement, ajoutez du CSS dans le fichier style.css de votre thème enfant et enregistrez vos modifications. Vous devriez voir ces changements sur le site en direct et c'est ainsi que vous saurez que cela fonctionne !

Remarque : Vous devrez peut-être ouvrir votre page dans un navigateur privé au cas où elle serait mise en cache.

N'oubliez pas : vous ne devez jamais apporter de modifications à votre site en ligne au cas où vous casseriez quelque chose ! Utilisez Local, une application de développement local gratuite pour pouvoir arrêter de déboguer les environnements locaux et passer plus de temps à lancer de magnifiques sites WordPress. Apprenez-en davantage sur Local ici.

Conclusion

La personnalisation est l'un des meilleurs aspects de la création de sites à l'aide de WordPress et même si les thèmes sont d'excellents points de départ, il est agréable d'avoir des thèmes enfants, comme Divi, à votre disposition.

Téléchargement gratuit du thème enfant Divi

L’un des moyens les plus rapides (et les plus simples !) de créer un thème enfant est de télécharger ce thème enfant Divi gratuit. Il contient tout le nécessaire pour commencer, ainsi que de la place pour que vous puissiez le personnaliser à votre guise ! Téléchargez votre thème enfant Divi gratuit ci-dessous.