Comment utiliser Divi sur WordPress : guide complet

Introduction

Divi est l'un des thèmes WordPress les plus populaires et puissants disponibles aujourd'hui. Conçu pour offrir une grande flexibilité et une personnalisation avancée, Divi permet aux utilisateurs de créer des sites web professionnels sans écrire une seule ligne de code. Grâce à son constructeur visuel en glisser-déposer, ses nombreux modules et ses milliers de mises en page prêtes à l’emploi, il s’adapte aussi bien aux débutants qu’aux utilisateurs avancés.

Dans cet article, nous vous guiderons pas à pas pour utiliser et optimiser Divi sur WordPress. Nous verrons comment installer Divi, activer votre licence, créer vos premières pages, exploiter les modèles et modules, améliorer la performance et l’expérience utilisateur, tout en respectant les bonnes pratiques techniques et éditoriales. Si vous souhaitez améliorer la visibilité de votre site tout en offrant une expérience utilisateur fluide et moderne, ce guide complet est fait pour vous.

Concepts clés

Qu'est-ce que Divi ?

Divi est un thème WordPress premium développé par Elegant Themes. Il s’accompagne du constructeur de pages Divi Builder, qui fonctionne en glisser-déposer directement en front-end, c’est-à-dire que vous voyez vos modifications en temps réel pendant que vous éditez votre page. Divi n’est pas seulement un thème : c’est un véritable écosystème comprenant un constructeur de thème (Theme Builder), un système de design global, des options avancées de personnalisation et une vaste bibliothèque de mises en page.

Divi existe à la fois sous forme de thème complet et de plugin (Divi Builder). Vous pouvez donc :

• utiliser le thème Divi comme base de votre site ;
• ou installer le plugin Divi Builder sur un autre thème compatible, si vous préférez conserver un thème existant.

Caractéristiques principales de Divi

• Générateur de pages visuel : créez vos pages en glisser-déposer, directement sur l’interface visible par l’utilisateur, sans coder.
• Bibliothèque de modules : plus d’une centaine de modules (texte, image, galerie, formulaire, bouton, slider, témoignages, boutique, blog, etc.) pour façonner vos pages avec précision.
• Modèles prêts à l’emploi : plus de deux mille mises en page complètes (layouts) prêtes à importer pour différents secteurs d’activité (blog, e‑commerce, restaurant, agences, freelance, etc.).
• Theme Builder : création de modèles pour l’en-tête, le pied de page, les articles de blog, les pages d’archives, les pages produits, le 404, etc., toujours avec le constructeur visuel.
• Responsive design : chaque élément peut être ajusté pour ordinateur, tablette et mobile, avec des options spécifiques par type d’appareil.
• Options globales : palettes de couleurs globales, styles globaux, presets, bibliothèques de sections et modules réutilisables pour garder une identité visuelle cohérente sur tout le site.
• Compatibilité WordPress moderne : Divi 5 et versions ultérieures sont compatibles avec les versions récentes de WordPress et coexistent avec l’éditeur Gutenberg, sans le remplacer.
• Performance améliorée : chargement conditionnel des assets, optimisation du CSS, mise en cache intégrée et compatibilité avec les principaux plugins de cache.

Licence et tarification Divi

Divi est fourni via une licence Elegant Themes qui donne accès au thème Divi, au plugin Divi Builder, ainsi qu’à d’autres produits de la suite (comme Extra, Bloom, Monarch, etc.). Deux formules sont disponibles :

• Licence annuelle : paiement annuel avec accès complet tant que l’abonnement est actif.
• Licence à vie : paiement unique, accès à vie aux mises à jour et au support, pour un nombre illimité de sites.

Il n’existe pas de version gratuite complète de Divi, mais vous pouvez tester le produit grâce à une garantie de remboursement pendant une période définie. La licence couvre un nombre illimité de sites, ce qui est particulièrement intéressant pour les agences et les freelances.

Divi et Gutenberg : comment ça fonctionne ?

Divi est totalement compatible avec les versions modernes de WordPress et avec l’éditeur de blocs Gutenberg. Divi ne remplace pas Gutenberg, il fonctionne en parallèle :

• vous pouvez créer certaines pages avec Gutenberg et d’autres avec Divi ;
• sur chaque page ou article, vous pouvez choisir d’utiliser le Divi Builder à la place de l’éditeur natif ;
• les deux systèmes cohabitent, ce qui vous offre une grande flexibilité dans l’édition de vos contenus.

Installer et configurer Divi sur WordPress

Étape 1 : Préparer votre site WordPress

Avant d’installer Divi, vous devez disposer d’un site WordPress fonctionnel, installé sur un hébergement compatible. Assurez-vous que :

• votre version de WordPress est à jour ;
• votre hébergement respecte les prérequis techniques recommandés (version PHP récente, mémoire suffisante, HTTPS activé, etc.) ;
• vous utilisez un nom de domaine propre, de préférence en HTTPS.

Étape 2 : Télécharger Divi depuis votre compte Elegant Themes

Après avoir souscrit une licence Elegant Themes, connectez-vous à votre espace membre et téléchargez le fichier ZIP du thème Divi. Conservez également vos identifiants (nom d’utilisateur et clé API) qui serviront à activer les mises à jour automatiques sur votre site.

Étape 3 : Installer le thème Divi

Pour installer Divi sur WordPress :

• connectez-vous au tableau de bord WordPress ;
• allez dans Apparence > Thèmes ;
• cliquez sur Ajouter un thème, puis sur Téléverser un thème ;
• importez le fichier ZIP de Divi et lancez l’installation ;
• une fois l’installation terminée, cliquez sur Activer.

Étape 4 : Activer votre licence et les mises à jour

Pour recevoir les mises à jour et le support, vous devez lier Divi à votre compte Elegant Themes :

• dans le tableau de bord, allez dans Divi > Options du thème ;
• ouvrez l’onglet dédié à la mise à jour ou à l’activation du produit ;
• saisissez votre identifiant Elegant Themes et votre clé API ;
• enregistrez les changements.

Une fois cette étape terminée, Divi pourra se mettre à jour directement depuis votre interface WordPress, comme n’importe quel autre thème ou plugin.

Découvrir l’interface de Divi

Comprendre la structure : sections, lignes, modules

Le Divi Builder repose sur une structure simple et logique :

• Sections : ce sont les blocs de base qui découpent votre page en grandes zones horizontales (par exemple : en-tête de la page, section services, section témoignages, pied de page, etc.).
• Lignes et colonnes : à l’intérieur d’une section, vous ajoutez des lignes qui peuvent comporter une ou plusieurs colonnes. La mise en page en colonnes permet de disposer plusieurs éléments côte à côte.
• Modules : ce sont les éléments de contenu (texte, image, galerie, formulaire, vidéo, bouton, témoignage, curseur, compte à rebours, etc.) que vous insérez à l’intérieur des colonnes.

En maîtrisant ce trio sections / lignes / modules, vous êtes capable de construire quasiment n’importe quelle mise en page avec Divi.

Le constructeur visuel (Visual Builder)

Le constructeur visuel de Divi s’active directement depuis le front-end :

• ouvrez la page que vous souhaitez modifier ;
• cliquez sur le bouton Activer le Visual Builder en haut de la page (si vous êtes connecté à WordPress) ;
• vous pouvez alors cliquer sur les différents éléments pour les modifier, déplacer les modules, ajuster les marges, changer les couleurs, etc., tout en voyant instantanément le rendu.

Chaque module, ligne ou section possède un panneau de paramètres complet, avec trois onglets principaux :

• Contenu : texte, images, liens, médias, boutons, etc.
• Design : typographie, couleurs, tailles, bordures, ombres, arrondis, alignements, espacements, etc.
• Avancé : classes CSS, ID, animations, conditions d’affichage, filtres, attributs responsives détaillés, etc.

Créer votre première page avec Divi

Pour créer une nouvelle page avec Divi :

• allez dans Pages > Ajouter dans le tableau de bord WordPress ;
• donnez un titre à votre page (par exemple « Accueil » ou « Services ») ;
• enregistrez la page, puis cliquez sur le bouton pour utiliser le Divi Builder ;
• choisissez ensuite si vous souhaitez :

• partir de zéro ;
• charger une mise en page préconçue ;
• ou utiliser un outil d’aide à la création intégré à Divi, si vous y avez accès.

Utiliser les modèles et la bibliothèque Divi

Importer une mise en page préconçue

Divi propose plus de deux mille modèles (layouts) prêts à l’emploi, organisés en packs pour différents secteurs :

• blogs ;
• sites vitrines ;
• restaurants ;
• agences et freelances ;
• coachs, formateurs, écoles ;
• e‑commerce, boutiques en ligne ;
• et bien d’autres niches.

Pour utiliser ces modèles :

• activez le Visual Builder sur la page ;
• cliquez sur le bouton pour charger une mise en page à partir de la bibliothèque ;
• parcourez les packs, filtrez par catégorie ou par type de page ;
• prévisualisez les modèles, puis importez celui de votre choix ;
• personnalisez le texte, les images, les couleurs et les modules selon vos besoins.

Sauvegarder vos propres sections et modèles

Pour gagner du temps et garder une cohérence graphique, Divi permet d’enregistrer :

• des sections réutilisables (par exemple une section « appel à l’action ») ;
• des lignes ou des modules avec un style particulier ;
• des modèles de pages complets (layouts personnalisés).

Ces éléments sont stockés dans la Bibliothèque Divi et peuvent être réutilisés sur n’importe quelle page de votre site. Vous pouvez également définir des éléments « globaux » : toute modification apportée à un élément global se répercutera automatiquement sur toutes les pages où il est utilisé, ce qui est idéal pour gérer des blocs récurrents (bandeaux, mentions, promotions, etc.).

Créer des modèles de site avec le Theme Builder

Le Theme Builder vous permet de définir la structure globale de votre site :

• en-têtes (headers) personnalisés ;
• pieds de page (footers) ;
• modèles de page d’article ;
• modèles de catégories, archives, pages de recherche ;
• modèles pour des types de contenus personnalisés (CPT).

Pour y accéder, rendez-vous dans Divi > Theme Builder. Vous pouvez créer un modèle global qui s’applique à tout le site, ou définir des modèles spécifiques pour certaines catégories, pages ou types de contenus. Là encore, l’édition se fait avec le constructeur visuel, ce qui rend la personnalisation très intuitive.

Bonnes pratiques de contenu avec Divi

Optimiser le contenu éditorial

La qualité du contenu reste un pilier central pour la réussite de votre site, même avec un thème avancé comme Divi :

• Rédigez du contenu unique et pertinent : évitez le contenu dupliqué. Proposez des textes originaux qui apportent une réelle valeur à vos visiteurs, en répondant à leurs questions et à leurs problèmes.
• Utilisez des titres et sous-titres clairs : structurez vos pages avec des balises H1, H2, H3… pour faciliter la lecture et l’interprétation par les moteurs de recherche.
• Intégrez des médias de qualité : images optimisées, vidéos pertinentes, infographies, captures d’écran, qui enrichissent le propos sans alourdir excessivement le temps de chargement.
• Rédigez pour l’utilisateur : gardez un ton clair, pédagogique et orienté vers les besoins réels de votre audience.

Améliorer la structure de vos pages

Divi vous permet de structurer vos pages de façon très visuelle. Pour tirer parti de cette flexibilité :

• Organisez vos sections logiquement : commencez par une zone de présentation claire (above the fold), enchaînez avec vos arguments, vos services, vos preuves (témoignages, logos clients, résultats), puis vos appels à l’action.
• Utilisez des colonnes avec modération : sur mobile, trop de colonnes peuvent devenir difficiles à lire. Divi offre des options responsives pour adapter le nombre de colonnes selon l’appareil.
• Soignez vos URL : privilégiez des permaliens descriptifs, courts et compréhensibles, en cohérence avec le titre de la page.
• Créez un menu de navigation logique : dans Apparence > Menus, organisez vos pages principales, puis vos sous-pages. Divi s’intègre ensuite à ce menu pour l’affichage dans l’en-tête.

Créer du contenu de qualité sur la durée

Pour que votre site reste performant et utile :

• Publiez régulièrement : même quelques articles ou mises à jour par mois peuvent améliorer la fraîcheur de votre site.
• Optimisez vos textes : utilisez des expressions clés naturelles dans vos titres, intertitres et paragraphes, sans sur-optimisation.
• Mettez à jour vos pages importantes : rafraîchissez chaque année (ou plus souvent) vos pages stratégiques : page d’accueil, services, tarifs, à propos, etc.
• Linkez vos contenus entre eux : insérez des liens internes cohérents pour aider vos visiteurs à approfondir un sujet et pour renforcer la structure de votre site.

Performance et optimisation technique avec Divi

Optimiser la vitesse de chargement

Divi intègre des fonctions d’optimisation, mais vous pouvez aller plus loin :

• Images optimisées : compressez vos images avant de les envoyer, utilisez des formats modernes lorsque c’est possible et activez le chargement différé (lazy load) si votre configuration le permet.
• Modules nécessaires uniquement : évitez de multiplier les effets visuels inutiles (animations excessives, carrousels multiples) qui peuvent ralentir le site.
• Cache et minification : associez Divi à un bon plugin de cache pour minifier le CSS et le JavaScript, activer la mise en cache des pages et, si possible, un CDN.
• Tests réguliers : analysez vos pages avec des outils comme PageSpeed Insights ou des tests de performance pour identifier les points à optimiser.

Gérer les polices et les couleurs

Divi permet de définir des palettes de couleurs globales et des styles typographiques globaux. Pour une meilleure cohérence et performance :

• limitez-vous à quelques couleurs principales et complémentaires ;
• utilisez 1 à 2 polices principales pour tout le site ;
• enregistrez vos styles fréquents comme presets globaux afin de ne pas avoir à tout reconfigurer à chaque fois.

Compatibilité mobile et responsive design

Divi offre des contrôles détaillés pour chaque appareil (ordinateur, tablette, mobile) :

• réglez séparément les tailles de police, les marges, les hauteurs de section pour les écrans plus petits ;
• masquez certains éléments trop lourds ou non essentiels sur mobile ;
• testez systématiquement vos pages sur plusieurs tailles d’écran avant de les publier.

Utiliser Divi avec d’autres plugins WordPress

Plugins de formulaires, SEO et e‑commerce

Divi s’intègre bien avec de nombreux plugins populaires :

• Formulaires : Divi propose son propre module de formulaire de contact, mais fonctionne aussi avec des plugins dédiés si vous avez des besoins avancés.
• SEO : vous pouvez utiliser un plugin SEO reconnu pour gérer les balises titres, meta descriptions, sitemaps XML, données structurées, etc., en complément de la structure propre de vos pages Divi.
• E‑commerce : Divi est compatible avec WooCommerce. Il inclut des modules spécifiques pour afficher produits, catégories, panier, etc., et permet de personnaliser les templates produits via le Theme Builder.

Bonnes pratiques de compatibilité

Pour maintenir un site stable et performant :

• évitez de multiplier les plugins qui dupliquent les mêmes fonctionnalités que Divi ;
• mettez régulièrement à jour WordPress, Divi et vos plugins ;
• testez les nouvelles extensions sur un site de préproduction avant de les déployer en production, si possible ;
• effectuez des sauvegardes complètes avant chaque mise à jour majeure.

FAQ : questions fréquentes sur l’utilisation de Divi

Divi est-il adapté aux débutants ?

Oui. Le constructeur visuel, les modèles prêts à l’emploi et l’interface en glisser-déposer rendent Divi particulièrement accessible. Un débutant peut créer un site professionnel en partant d’un layout existant, puis en remplaçant simplement les textes et les images, sans toucher au code.

Peut-on utiliser Divi sur plusieurs sites ?

La licence Elegant Themes permet d’installer Divi sur un nombre illimité de sites. C’est un avantage majeur pour les agences, freelances ou toute personne gérant plusieurs projets web.

Divi remplace-t-il Gutenberg ?

Non. Divi fonctionne en parallèle de l’éditeur Gutenberg. Pour chaque page ou article, vous pouvez choisir d’utiliser l’éditeur natif de WordPress ou le Divi Builder. Les deux outils coexistent, ce qui vous laisse la liberté de choisir l’éditeur le plus adapté à chaque type de contenu.

Divi est-il performant pour le référencement naturel ?

Divi est conçu pour être compatible avec les bonnes pratiques techniques : code propre, compatibilité mobile, intégration facile avec des plugins SEO, contrôle de la structure des titres et des balises. La performance finale dépendra toutefois de la qualité de votre contenu, de l’optimisation de vos médias, de votre architecture de site et de votre hébergement. Bien utilisé, Divi peut servir de base solide pour un site bien positionné.

Peut-on personnaliser Divi sans coder ?

Oui. Toutes les principales personnalisations (mise en page, couleurs, typographie, marges, animations, etc.) sont accessibles via des interfaces graphiques. Le code (CSS ou JavaScript) n’est nécessaire que pour des besoins très spécifiques ou des personnalisations avancées.

Que faire si un module ou une mise en page ne me convient pas ?

Vous pouvez :

• modifier le style du module dans l’onglet Design ;
• remplacer le module par un autre plus adapté ;
• enregistrer votre propre configuration comme preset pour la réutiliser ailleurs ;
• partir d’une page vierge et construire votre propre mise en page à partir de sections et de lignes personnalisées.

Aller plus loin avec Divi

Créer un design système cohérent

Pour un site professionnel, il est recommandé de définir dès le départ :

• une palette de couleurs principales et secondaires ;
• une hiérarchie typographique (titres, sous-titres, paragraphes, boutons) ;
• un style de boutons récurrent (formes, couleurs, effets au survol) ;
• des espacements standards entre sections et blocs.

Divi permet d’enregistrer ces choix dans les options globales et de les appliquer sous forme de presets à tous vos modules, ce qui garantit une identité visuelle homogène et un gain de temps considérable sur la durée.

Utiliser les conditions d’affichage et options avancées

Divi propose des options avancées pour aller plus loin dans la personnalisation :

• conditions d’affichage de certaines sections selon la page, la catégorie ou le rôle utilisateur ;
• animations d’entrée et d’interaction ;
• effets de défilement (parallaxe, sticky, transformations au scroll) ;
• ajout de classes et d’ID CSS pour des ajustements très ciblés.

Ces fonctions doivent être utilisées avec mesure : l’objectif est d’améliorer l’expérience utilisateur, pas de surcharger la page.

Maintenir votre site Divi sur le long terme

Pour garder un site Divi performant et sécurisé :

• mettez régulièrement à jour WordPress, Divi et vos plugins ;
• supprimez les extensions inutilisées ;
• réalisez des sauvegardes complètes (fichiers + base de données) à intervalles réguliers ;
• vérifiez ponctuellement l’affichage de votre site sur différents appareils et navigateurs ;
• rafraîchissez le design et le contenu lorsque cela est nécessaire pour rester en phase avec vos objectifs et votre image de marque.

Conclusion

Divi est un écosystème complet pour créer et gérer des sites WordPress modernes, esthétiques et performants. En combinant son constructeur visuel, ses nombreux modules, ses milliers de modèles prêts à l’emploi et ses options avancées de personnalisation, vous disposez de tout le nécessaire pour concevoir un site sur mesure, sans compétences techniques poussées. En appliquant les bonnes pratiques décrites dans ce guide – structure claire, contenu de qualité, optimisation des performances et mise à jour régulière – vous pourrez tirer pleinement parti de Divi et offrir à vos visiteurs une expérience à la hauteur de vos ambitions.