À la recherche d’un plugin permettant d’aller plus loin avec Divi ? Vous êtes au bon endroit ! Aujourd’hui on vous présente l’extension “Divi Essential” qui possède 63 modules avancés et un total de 500 layouts. Tout est très facile à personnaliser et à styliser car le plugin est parfaitement intégré à Divi. 

Pour couronner le tout, ces modules sont livrés avec des layouts et des effets incroyables sans que vous n’ayez rien à coder. 

Divi Essential c’est un peu “P.I.M.P my Divi” en quelque sorte. 

Nous allons passer en revue Divi Essential et vous verrez que chaque module vous offre d’innombrables options et que chaque layout est un plaisir pour les yeux. 

Prêt à accélérer votre processus de développement et de design ? On y va !

Introduction et Tarification de Divi Essential 

L’allié des développeurs et des designers

Divi Essential est vraiment un must-have pour tout utilisateur WordPress qui désire travailler vite et bien (oui ça existe avec Divi Essential). Avec plus de 60 modules et 500 layouts pour vos pages et vos sections, l’extension vous permet de créer des fonctionnalités avancées en quelques secondes, avec un design plutôt moderne. Par exemple, vous pourrez créer des galeries vraiment stylées, personnaliser vos textes et images. Il y aussi des modules qui permettent de lier votre site WordPress avec vos réseaux sociaux, afficher des reviews ou encore créer facilement des designs flottants : 

Ensuite, pour continuer d’illustrer, je vous mets deux spoilers sur le module “chronologie” et “tarification”. Divi Essential nous mâche une fois de plus le travail en nous proposant plusieurs designs. Il vous suffit simplement de télécharger celui que vous préférez pour votre timeline. Voici quelques exemples, totalement prêts à l’emploi : 

Combien coûte Divi Essential ?

Divi Essential propose trois plans pour “designer comme un pro” en reprenant leurs mots :

Deux plans à renouveler chaque année : 

• “Single” (49 USD ≈ 42 €) parfait pour un site WordPress, accès au 63 modules et aux 500 layouts, le support est existant mais basique. 
• “Unlimited” (79 USD ≈ 67 €) , idéal si vous avez plusieurs sites à gérer ou que vous êtes une agence web. Le nombre de sites sur lequel vous pouvez utiliser Divi Essential est illimité, vous avez accès à tous les modules et aux layouts. Et surtout… un accès prioritaire au support, ce qui est essentiel pour ne pas faire attendre vos clients si un problème technique apparaît. 

Un plan disponible à vie, sans renouvellement annuel :

•  Lifetime (199 USD ≈ 168 €) avec les mêmes avantages que le plan “unlimited” présenté ci-dessus. 

Vu tout ce qu’on peut faire et vu le nombre de modèles existants, le rapport qualité/prix est plutôt pas mal.

Installer et activer Divi Essential à l’aide de la license

Tout d’abord, assurez-vous d’avoir installé et activé le thème Divi sur votre site WordPress. Divi Essential a besoin de Divi pour fonctionner. 

1. Achetez l’extension sur le site officiel en choisissant le plan le plus adapté à votre projet. 

2. Renseignez vos données personnelles et payez avec votre carte bancaire. 

3. Vous recevrez deux emails : l’un contiendra vos identifiants de connexion, l’autre votre clé, un lien de téléchargement direct et la facture. 

4. Si vous préférez, connectez-vous à votre compte afin de télécharger l’extension et d’obtenir votre clé : 

5. Installez le plugin depuis  votre tableau de bord WordPress (Extensions → Ajouter→ Téléversez une extension) 
6. Allez à Divi Essential  → Divi Essential License, copiez votre clé d’activation, activez la licence et appuyez sur le bouton Enregistrer les modifications.

Vous êtes prêts ! 

Utiliser les modules de Divi Essential dans le Constructeur de page Divi

Bonne nouvelle, l’intégration des modules de Divi Essential avec les modules par défaut de Divi est automatique. Pour accéder aux nouveaux modules, la procédure est la même que pour les modules natifs de Divi : il vous suffit de lancer le builder, d’ajouter une section puis d’insérer un module. 

Si le module est de couleur bleu, alors c’est qu’il vient de Divi Essential comme dans l’exemple ci-dessous :

Qu’en est-il du design ? Peut-on styliser le module en utilisant les options intuitives de Divi ? La réponse est oui. Prenons l’exemple du module Avant/Après de Divi Essential. 

On retrouve bien l’interface intuitive de Divi avec des options de personnalisation encore plus avancées. En fait, Divi Essential utilise l’API développer de Divi, ce qui assure une bonne compatibilité entre les deux solutions.

La liste des modules est disponible dans le tableau de bord WordPress depuis le menu Divi Essential > Modules. Vous pouvez choisir de tous les activer, les désactiver, ou de choisir individuellement. 

La barre de recherche (en anglais) est très pratique pour accéder directement au module de votre choix :

Nous avons vu que les modules de Divi Essential s’intègrent bien au Divi builder, découvrons-les, ainsi que leurs layouts. 

Les 63 modules avancés, leurs fonctionnalités et leurs layouts

Il existe à ce jour plus de 60 modules différents et il faut savoir que Divi Essential ajoute régulièrement de nouveaux modules. La release de chaque module se fait en fonction de la demande des utilisateurs, vous pouvez d’ailleurs effectuer  une “feature request” depuis votre tableau de bord WordPress.  

Revenons à nos modules.

Chaque module vient avec plusieurs templates pré-conçus par Divi Essentials et ils ont tous un design vraiment sympa.

Liste des modules Divi Essential

Ces modules peuvent êtres catégorisés en 7 familles : 

1. Les modules créatifs – qui misent sur l’apparence et les effets appliqués sur votre contenu 
2. Les modules sliders – qui vous permettent de créer des galeries d’images, de logos ou de témoignages (et surtout de styliser toutes les parties du slider)
3. Les modules images – pour intégrer vos images de manière créative avec des effets lors du survol ou encore la loupe pour zoomer
4. Les modules de texte – pour booster le look de vos textes, titres et plus généralement améliorer la typographie de votre page
5. Les modules pour présenter votre équipe – parfait pour ajouter une touche humaine à votre business avec une photo et des liens vers leurs réseaux sociaux respectifs
6. Les modules réseaux sociaux – pour rendre votre site plus interactif, engager vos visiteurs et augmenter votre fan base. 
7. Les modules d’avis – afin de booster votre crédibilité grâce aux avis et évaluations laissés par vos clients

Explorons-les en détails. 

1. Les modules créatifs

Dans les modules créatifs, on retrouve : 

• Divi Floating Element – ajoutez facilement un effet de flottaison sur un élément de votre design (c’était notre GIF du début).
• Divi Timeline – créez votre chronologie rapidement avec photos, dates et icônes. 

• Divi Business hours – informez vos visiteurs en mettant en avant vos horaires d’ouverture et de fermeture

Exemple de design disponible pour les horaires d’ouverture – par Divi Essential 

• Divi Next Divider – les séparateurs d’images ou de textes : 

• Divi Promo Box – affichez facilement vos promotions sur votre eshop pour capter l’attention et pourquoi pas augmenter vos conversions. 

• Divi Step Flow – créez un flow personnalisé pour garder vos visiteurs orientés. Les layouts proposés par Divi Essentials sont vraiment bien faits : 

• Divi Lottie – téléchargez une icône animée, un titre, une description et un bouton (un peu comme un module de présentation) 

Créer une section animée avec le module Divi Lottie 

• Divi Hotspot – mettez en avant les éléments cliquables sur votre site avec du texte, des icônes et des étiquettes. Maison du monde le fait aussi : vous pouvez acheter le produit que vous voyez dans la photo globale grâce aux hotspots orientés e-commerce. 

• Divi Content Toggle – affichez le contenu en fonction de la décision de l’utilisateur. 

2. Les modules sliders 

Parmi les modules sliders, on a : 

• Divi Logo Carousel – affichez les logos de vos clients, partenaires, affiliés, et plus encore.

• Divi Carousel – créez des galeries photos vraiment originales qui peuvent prendre toute la page par exemple pour un design épuré. 

• Divi 3D Cube Slider – ajoutez un effet à vos transitions entre vos visuels.

• Divi Gallery Slider – mettez en avant vos photos avec l’effet masonry et d’autres options pour redimensionner chaque partie du slider. 

• Divi Testimonial Carrousel – améliorez la preuve sociale de votre business et personnaliser le contenu et layout des avis. 

3. Les modules images

• Divi Image Magnifier –  zoomer sur les images à l’aide d’une loupe. 

• Divi Accordion Image : ajoutez du contenu qui peut être révélé lorsque vous passez le curseur à certains endroits (animation au survol ou au clic)

• Divi Before and After – comparez une situation avant et après. 

• Divi Masonry – avec la barre de filtres pour afficher seulement une catégorie de contenu.

• Ultimate Image Effect – appliquez des effets aux images très facilement tels que zoom-in, zoom-out par exemple. 

• Divi Mega Image Effect – affichez du contenu à la place de l’image.

• Divi Circular Image Effect – affichez du nouveau contenu au survol dans des cercles.

• Minimal Image Hover Effect – affichez du texte et un effet spécial au survol.
  

• Image Hover Box Effect – choisissez un effet pour vos boites à image, au survol du curseur (ce qui ressemble au module précédent avec des effets plus poussés). 

• Image Icon Effect – ajoutez des icônes sur vos images au survol. 

• Image Scroll Effect – mettez en avant votre portfolio par exemple. Ce module permet de faire défiler plusieurs images avec un effet “scroll”.

• Divi Image Reveal – utilisez un flash de couleur animé pour révéler votre image, tout en simplicité. 

4. Les modules de textes 

• Divi Flip Box (Disponible aussi en 3D) – l’effet de retournement de vos modules par la droite, par la gauche, en diagonal et haut/bas. 

• Divi 3D Cube Slider – ajoutez la transition “cube” à votre galerie.

• Divi Text color Motion – permet à l’utilisateur d’animer le texte avec plusieurs couleurs sélectionnées et le tout, en mouvement.

• Divi Text Divider – plusieurs designs disponibles pour les séparateurs de pages. Niveau choix de designs ce n’est pas le module le plus réussi mais il fait quand même bien son job. 

• Divi Text Highlight – un de mes préférés – pour mettre en avant vos titres avec des effets soulignés, surbrillance, brush etc. 

• Divi Hover Highlight – ajoutez un effet surligneur, ou un soulignement par exemple sur le texte au survol.

• Divi Text Mask  – pratique pour appliquer un masque sur une photo. Les masques sont épatants et vous allez gagner du temps. 

• Divi Next Stroke – ajoutez facilement un effet de remplissage dans les titres principaux pour dynamiser la page. En bref, un effet “wow”. 

• Divi Text Stroke Motion – effet similaire au précédent avec un mouvement en plus sur les lettres.

• Divi Text Tilt Effect – inclinaison du texte et du contenu en 3D. 

• Divi Glitch Text – pour un effet “bug”.

• Divi Gradient Text – pour mettre un dégradé sur votre texte. Divi Essential propose aussi des effets intéressants qui colorent le texte en dégradé au survol. 

• Divi Text Animation – pour animer un peu votre page WordPress.  On retrouve les effets suivants : retournements, spirales, barre de progression, drop-in, écriture manuelle etc. 

• Divi Next Blurb – pour présenter vos “blurb” de textes et d’images de plusieurs manières. Chapeau au designer, tous les designs (+ de 30) font vraiment envie. Module idéal pour mettre en avant les services de votre business par exemple. 

• Divi Feature list – des listes préfabriquées avec plusieurs layouts vraiment bien pensés. 

• Divi Button – pour mettre des effets sur l’arrière-plan du bouton, changer les bordures, mettre des effets au survol et même insérer des images dans le bouton pour appeler à l’action.

• Divi Dual Button – pour créer deux boutons avec des effets afin d’attirer l’attention de vos visiteurs.

5. Les modules pour présenter votre équipe

• Team member overlay – pour ajouter des informations sur un membre de votre équipe au survol.

• Team Social Reveal – pour afficher les comptes des réseaux sociaux de votre équipe au survol. 

Survol au centre : on y voit les icônes des réseaux sociaux

• Divi Next Person – des layouts pour présenter simplement votre équipe d’une manière créative avec des photos et du texte. 

• Team Overlay Card – pour que votre équipe soit représentée avec des effets de superposition sur les images. 

• Creative team – quelques layouts en plus pour vous démarquer. Une très bonne base visuelle pour représenter votre équipe. 

6. Les modules réseaux sociaux

• Divi Facebook Share – permet au visiteur de partager votre contenu sur son compte personnel Facebook avec l’aide d’un bouton share. Le nombre de partages peut aussi être mentionné si besoin. 

• Divi Facebook Comment  – ajoutez un commentaire sur Facebook, depuis votre site.

• Divi Facebook Page – permet au visiteur de liker votre page Facebook depuis votre site. Plutôt pratique pour augmenter votre fan base. 

• Facebook Embedded Video – affichez une vidéo publiée depuis Facebook sur votre site WordPress. 

• Divi Embedded Comment – pour afficher les commentaires de Facebook sur votre site.

• Facebook Embedded Post – vos publications Facebook publiques intégrées à votre site. 

• Divi Twitter Timeline – pour mettre le feed de votre compte twitter sur votre site.

• Divi Twitter Tweet – pour intégrer un tweet en particulier et donner la possibilité de répondre directement depuis votre site.

•  Divi Twitter Button – permet à vos visiteurs de twitter un article directement depuis votre site. 

• Divi Twitter Follow – permet à vos visiteurs de vous suivre sur Twitter en un clic.

7. Les modules d’avis

• Divi Rating – un module de classement par étoiles que vous pouvez styliser facilement. 

• Divi Review –  plusieurs layouts pour mettre en avant les avis de vos clients : photo, étoiles et contenu. 

• Divi Testimonial Carrousel – la même fonctionnalité que Divi Review, mais avec plus de designs et la possibilité de faire défiler les avis dans une galerie. 

Plus de 500+ layouts disponibles : pour les modules et les pages individuelles de Divi Essential

Vous avez donc le meilleur des mondes : non seulement les 60+ modules offrent des fonctionnalités avancées, mais en plus, vous avez plusieurs propositions de layouts (500+). De plus, Divi Essential propose 6 starter layouts pour les pages individuelles : business et portfolio, voyage, agence de nettoyage, technologie, agence web et éducation/e-learning. 

Toutes les démos ont l’air plutôt “pixel-perfect” ce qui donne une bonne base pour le développement.

Envie de tester par vous même ? Vous pouvez cliquer sur “Live Demo” depuis le site de Divi Essential > Starter Layouts. 

Où trouver les layouts de Divi Essential ?

Divi Essential vous fait gagner un temps précieux grâce aux layouts et il y en a vraiment pour tous les goûts. Voyons où vous pouvez télécharger ces fameux layouts. 

1. Localiser les layouts pour les modules

Suivez ces 2 étapes pour les trouver : 

• Allez à diviessential.com et scrollez jusqu’à la section “Create Beautiful Website Like A Pro” :

• En-dessous de la section, vous verrez la liste de tous les modules. Sélectionnez simplement le module de votre choix. Pour notre exemple, nous choisissons “Divi Team Social Reveal” : 

• Faites défilez la page jusqu’en bas puis cliquez sur le bouton violet Download Layouts
  (Note : pour certains modules, le bouton  “Download Layouts” est situé sous chaque design, ce qui permet de télécharger seulement le design qui vous convient).

• Un fichier JSON contenant les layouts se télécharge automatiquement. 
• Nous avons nos layouts pour le module “Team social reveal”.

2. Localiser les layouts pour les pages individuelles

Les layouts pour les pages individuelles sont aussi situés sur le site officiel de Divi Essential, rubrique “Starter Layout”. 

Explorez les différentes live demo et sélectionnez votre préférée en cliquant sur le bouton violet “Download”. Vous obtenez à nouveau un fichier JSON, contenant le layout pour votre page.  Dans notre exemple nous choisissons la démo “Educare” :

La prochaine étape est de comprendre comment ces fichiers JSON peuvent être utilisés sur votre site WordPress. En d’autres termes, comment installer le layout choisi pour pouvoir le remplacer avec votre propre contenu. 

Importer les layouts Divi Essential sur son site WordPress 

1. Importer les layouts d’une page individuelle

Pour importer le layout des pages individuelles ou “single” page, vous n’avez pas besoin de passer par la bibliothèque Divi. En effet, l’importation peut se faire directement dans la page, via le builder. 

Important avant l’importation : téléchargez votre démo (format .JSON) via la section Starter Layouts depuis le site officiel de Divi Essential. (Se référer à la section précédente si vous n’arrivez pas à trouver les layouts pour pages individuelles).

• Créer une nouvelle page ou aller sur la page concernée construite avec le Divi builder. Si c’est une nouvelle page, sélectionner “Construire à partir de zéro”.

• Ouvrir le menu “portabilité” représenté par deux flèches et sélectionner l’onglet “Importer”. 

• Glissez-déposez le fichier JSON téléchargé précédemment (e-learning, educare dans notre exemple) puis validez en cliquant sur “Importer la mise en page Divi Builder”.

• Notre layout Divi Essential “e-learning” apparaît bien sur la page. On peut à présent remplacer le contenu par le nôtre ou modifier quelques effets si besoin. 

2. Importer les layouts des modules via la librairie Divi

Pour importer les layouts des modules, vous avez besoin de les importer d’abord dans la bibliothèque Divi. Voici comment procéder depuis votre tableau de bord WordPress :

• Aller à Divi → Bibliothèque Divi  (1)
• Ouvrir la section Import & Export (2)
• Glissez-déposez le fichier JSON de votre module
• Le layout est dans votre librairie, prêt à être utilisé (3)

• Ouvrez la page de votre choix et ajouter le module Divi Essential en question
• Choisissez le deuxième onglet “Télécharger le modèle”, notre layout “Team Social Reveal” est là : 

• Tous les designs proposés par Divi Essential dans la catégorie “Team Social Reveal” sont bien insérés sur notre page : 

• Il suffit juste de choisir notre préféré et d’y mettre notre contenu. 

Conclusion 

Divi Essential vous ouvre plus de portes vers la créativité et vous fait gagner du temps dans les phases de design et de conception ; l’extension offre 63 modules et plus de 500 layouts ! Avec ce large choix, vous trouverez forcément le layout et le style qui correspond à votre projet. 

Divi Essential est un peu le couteau suisse du design et il offre un large panel de fonctionnalités et d’effets sans que vous ayez à écrire la moindre ligne de code. 

Dans la même lignée, pensez aussi à consulter nos articles sur Divi Pixel et Divi Toolbox. Ce sont deux extensions Divi qui peuvent aussi accélerer considérablement votre processus de design et de développement.  

Divi Pixel vient avec 31 modules et 200 options de customisations qui permettent de personnaliser les en-têtes, les pieds de page, les pages de connexion, les boutons de retour en haut de page etc. 

Divi Toolbox est aussi une boite à outils intéressante pour personnaliser chaque partie de son site construit avec Divi : le header, le footer, le menu de navigation desktop et mobile, les pop-ups etc. 

Ces trois extensions sont complémentaires et elles peuvent vous aider à devenir un maître designer en peu de temps. Leurs promesses sont les mêmes : plus besoin d’utiliser de PHP ou de CSS, ces trois extensions font le travail pour vous. 

Et vous, utilisez-vous Divi Essential ? N’hésitez pas à partager vos commentaires avec nous. 

Partager