Divi Essential, le plugin tout-en-un pour booster le design de votre site

À 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. 

aperçu général des modules de Divi Essential

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. 


divi essential effet écriture en live
L’un des effets de Divi Essential (et vous verrez que la liste est longue)

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 : 

effet de floating design divi essential
Exemple de “floating design” par Divi Essential 


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 : 


module chronologie pour divi
Module chronologie
tarification au mois ou à l'année
Possibilité de créer des tarification mensuelles / annuelles avec la toggle bar 

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. 
  1. Renseignez vos données personnelles et payez avec votre carte bancaire. 
  1. 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. 
email de confirmation
  1. Si vous préférez, connectez-vous à votre compte afin de télécharger l’extension et d’obtenir votre clé : 
télécharger le plugin divi essential
  1. Installez le plugin depuis  votre tableau de bord WordPress (Extensions → Ajouter→ Téléversez une extension
  2. Allez à Divi Essential  → Divi Essential License, copiez votre clé d’activation, activez la licence et appuyez sur le bouton Enregistrer les modifications.
telecharger divi essential depuis le compte personnel

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 :


reconnaître les modules de divi essential
Exemples de modules de Divi Essential intégrés au Divi builder

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. 

module avant apres avec divi

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.

onglet style divi essential
Styliser les modules de Divi Essential avec le Divi Builder

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 :


Selection des modules de Divi Essential
Section des modules de Divi Essential (activer/désactiver)

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 sur divi essential
Liste des modules Divi Essential


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. 

Tips pour choisir votre layout : Si vous cliquez sur chaque module de Divi Essential, vous pouvez voir plusieurs designs pour un même module.
  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. 
chronologie divi essential
Exemple de design disponible pour la chronologie/timeline – par Divi Essential 

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


séparateurs de page divi essential
Exemple de design disponible pour les séparateurs  – par Divi Essential 
  • Divi Promo Box – affichez facilement vos promotions sur votre eshop pour capter l’attention et pourquoi pas augmenter vos conversions. 


promo box divi essential
  • 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 : 
créer un flow en plusieurs étapes avec divi essential
Flow personnalisé avec images – remplacez simplement avec votre contenu


un exemple de flow en plusieurs étapes
Un autre flow avec icônes, étiquettes et contenu texte 
  • 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 

Section animée avec divi essential
  • 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. 


hotspot divi essential
  • Divi Content Toggle – affichez le contenu en fonction de la décision de l’utilisateur. 
creer une tarification mensuelle divi essential
Module Content Toggle utilisé sur des tableaux de prix mensuels ou annuels 


  1. Les modules sliders 

Parmi les modules sliders, on a : 

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


  • Divi Carousel – créez des galeries photos vraiment originales qui peuvent prendre toute la page par exemple pour un design épuré. 
carrousel image en plein ecran divi essential
  • Divi 3D Cube Slider – ajoutez un effet à vos transitions entre vos visuels.


effet cube 3D divi essential
Effet cube 3D pour passer d’une image à l’autre

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


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


design de galerie divi essential
  1. Les modules images
  • Divi Image Magnifier –  zoomer sur les images à l’aide d’une loupe. 
zoom sur produit divi essential
Exemple : zoom sur un produit en particulier avec le curseur

  • 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 accordion image divi essential
  • Divi Before and After – comparez une situation avant et après. 
module avant apres divi essential
  • Divi Masonry – avec la barre de filtres pour afficher seulement une catégorie de contenu.
masonry barre de filtres divi essential
  • 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.
mega image effet sur divi essential
  • Divi Circular Image Effect – affichez du nouveau contenu au survol dans des cercles.
effet circulaire divi essential
  • Minimal Image Hover Effect – affichez du texte et un effet spécial au survol.
hover effect divi essential
  • 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. 
hover icon effect
  • Image Scroll Effect – mettez en avant votre portfolio par exemple. Ce module permet de faire défiler plusieurs images avec un effet “scroll”.
image reveal divi essential
  • Divi Image Reveal – utilisez un flash de couleur animé pour révéler votre image, tout en simplicité. 
  1. 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. 
exemple de module flip box - divi essential
  • Divi 3D Cube Slider – ajoutez la transition “cube” à votre galerie.
exemple de designdivi 3D cube slider - divi essential
  • Divi Text color Motion – permet à l’utilisateur d’animer le texte avec plusieurs couleurs sélectionnées et le tout, en mouvement.
text color motion divi essential
  • 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. 
text divider divi essential
  • Divi Text Highlight – un de mes préférés – pour mettre en avant vos titres avec des effets soulignés, surbrillance, brush etc. 
text highlights divi essential
essential
  • Divi Hover Highlight – ajoutez un effet surligneur, ou un soulignement par exemple sur le texte au survol.
hover highlight divi essential
  • Divi Text Mask  – pratique pour appliquer un masque sur une photo. Les masques sont épatants et vous allez gagner du temps. 
masquer le texte divi module
  • Divi Next Stroke – ajoutez facilement un effet de remplissage dans les titres principaux pour dynamiser la page. En bref, un effet “wow”. 
Divi Stroke divi essential
  • Divi Text Stroke Motion – effet similaire au précédent avec un mouvement en plus sur les lettres.
Divi Stroke in motion divi essential
  • Divi Text Tilt Effect – inclinaison du texte et du contenu en 3D. 
le tilt effect module pour divi
  • Divi Glitch Text – pour un effet “bug”.
glitch text divi essential
  • 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. 
gradient dégradé text module divi essential
  • 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. 
text animation écriture en live module
  • 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 next blurb
  • Divi Feature list – des listes préfabriquées avec plusieurs layouts vraiment bien pensés. 
divi essential list
  • 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.
dibi button divi essential


  • Divi Dual Button – pour créer deux boutons avec des effets afin d’attirer l’attention de vos visiteurs.
Divi dual button divi essential
  1. Les modules pour présenter votre équipe
  • Team member overlay – pour ajouter des informations sur un membre de votre équipe au survol.


team member overlay divi essential
  • 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

team social reveal reseaux sociaux divi essential
  • Divi Next Person – des layouts pour présenter simplement votre équipe d’une manière créative avec des photos et du texte. 
next person divi essential
  • Team Overlay Card – pour que votre équipe soit représentée avec des effets de superposition sur les images. 
team overlay card divi essential
  • Creative team – quelques layouts en plus pour vous démarquer. Une très bonne base visuelle pour représenter votre équipe. 
creative team divi essential
  1. 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. 
box count share count reseaux sociaux divi essential
  • Divi Facebook Comment  – ajoutez un commentaire sur Facebook, depuis votre site.
divi facebook comments
  • Divi Facebook Page – permet au visiteur de liker votre page Facebook depuis votre site. Plutôt pratique pour augmenter votre fan base. 
Divi Facebook page
  • Facebook Embedded Video – affichez une vidéo publiée depuis Facebook sur votre site WordPress. 
Facebook embedded video
  • Divi Embedded Comment – pour afficher les commentaires de Facebook sur votre site.
Divi embedded content
  • Facebook Embedded Post – vos publications Facebook publiques intégrées à votre site. 
Facebook embeded post
  • Divi Twitter Timeline – pour mettre le feed de votre compte twitter sur votre site.
divi twitter timeline divi essential
  • Divi Twitter Tweet – pour intégrer un tweet en particulier et donner la possibilité de répondre directement depuis votre site.
divi tweet divi essential
  •  Divi Twitter Button – permet à vos visiteurs de twitter un article directement depuis votre site. 
bouton twitter divi essential
  • Divi Twitter Follow – permet à vos visiteurs de vous suivre sur Twitter en un clic.
Divi Twitter follow divi essential
  1. Les modules d’avis
  • Divi Rating – un module de classement par étoiles que vous pouvez styliser facilement. 
etoile de classement divi essential
  • Divi Review –  plusieurs layouts pour mettre en avant les avis de vos clients : photo, étoiles et contenu. 
les reviews et avis divi essential
  • 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. 
divi essential carrousel d'avis et témoignages

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. 

layout pour page individuelles divi essential
Exemple de design proposé pour les pages individuelles

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. 

📖 Il faut bien faire la distinction entre les layouts pour les modules (plus de 500) et les layouts pour les pages individuelles (seulement 6).

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” : 
Cherchez les modules sur divi essential
  • 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).
bouton télécharger layout divi essential
  • Un fichier JSON contenant les layouts se télécharge automatiquement. 
  • Nous avons nos layouts pour le module “Team social reveal”.
  1. 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”. 

les pages individuelles divi essential


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

layout importé divi essential

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”.
importer la layout divi essential
  • Ouvrir le menu “portabilité” représenté par deux flèches et sélectionner l’onglet “Importer”. 
importer le fichier JSON divi essential
  • 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”.
importer educare dans WordPress divi essential
  • 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. 
layout importé divi essential
  1. 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)
Importer les modules dans la bibliothèque Divi
  • 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à : 
telecharger le modele dans la bibliotheque divi essential
  • Tous les designs proposés par Divi Essential dans la catégorie “Team Social Reveal” sont bien insérés sur notre page : 
design insérés depuis la librairie
  • 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 pixel - liste des modules
Divi Pixel – Liste des modules

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. 

Divi Toolbox - liste des fonctionnalités
Divi Toolbox – Aperçu des fonctionnalités

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. 

Summary
Article Name
Divi Essentials, le plugin tout-en-un pour booster facilement le design de votre site WordPress
Author