Divi Builder WordPress : Tutoriel complet, de l’installation à la mise en ligne

Divi Builder est l’un des constructeurs de pages WordPress les plus populaires, développé par Elegant Themes. ✨Il permet aux utilisateurs de créer des sites web visuellement, sans coder, grâce à une interface intuitive en glisser-déposer.⚡ Pourquoi choisir Divi plutôt qu’un autre page builder ? 🤔 Sa simplicité, sa flexibilité et sa bibliothèque de layouts prêts à l’emploi en font un outil incontournable, surtout pour les débutants et les professionnels du web.🎉

👇 Dans ce guide complet, nous allons vous accompagner de l’installation de Divi Builder jusqu’à la mise en ligne de votre site, en passant par sa personnalisation et son optimisation SEO.

Objectif

L’objectif de cet article est de vous guider pas à pas dans l’utilisation de Divi Builder, l’un des meilleurs constructeurs de pages WordPress. 🚀 Que vous soyez débutant ou professionnel, vous apprendrez à installer, configurer et personnaliser votre site avec Divi. 💡 Nous verrons aussi comment optimiser les performances, intégrer WooCommerce et réussir la mise en ligne de votre projet. ✅ À la fin de ce tutoriel, vous serez capable de créer un site web moderne, fluide et bien référencé ! 🔥

Prérequis

• Avant de suivre ce tutoriel, assurez-vous d’avoir respecté ces conditions :
• Un hébergement WordPress (comme WP Starter).
• Un nom de domaine pour votre site.
• Une licence Divi achetée sur Elegant Themes .
• Un site WordPress installé et accessible. Si vous n’en avez pas encore, suivez notre Tuto WordPress : Guide complet étape par étape
• Quelques notions de base en WordPress (facultatif mais utile).

Avec ces éléments prêts, vous pourrez suivre ce guide et créer un site web professionnel avec Divi Builder !

Une solution clés en main pour créer un site WordPress ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Présentation du page builder Divi Builder WordPress

Divi Builder est un plugin WordPress développé par Elegant Themes, une entreprise spécialisée dans la création de thèmes et d’extensions pour WordPress depuis 2008. Depuis son lancement, Divi a révolutionné la conception de sites web grâce à son approche visuelle et intuitive.

Avec son éditeur en glisser-déposer (Drag & Drop), il permet aux utilisateurs de concevoir des pages sans avoir à écrire une seule ligne de code. Son succès repose également sur ses nombreuses fonctionnalités :

• Une bibliothèque de layouts contenant des centaines de modèles prêts à l’emploi.
• Une personnalisation avancée pour modifier les polices, couleurs, animations et effets visuels.
• Une compatibilité parfaite avec WooCommerce, idéale pour créer des boutiques en ligne.

Comment se positionne Divi face à ses concurrents comme Elementor et Oxygen ? Contrairement à Elementor, qui propose une version gratuite, Divi est un outil premium nécessitant un abonnement à Elegant Themes. Cependant, il est souvent perçu comme plus intuitif et fluide, notamment pour les débutants.

Face à Oxygen, qui cible plutôt les développeurs avancés, Divi se distingue par une approche plus accessible et une meilleure gestion du responsive design.

Installer et configurer Divi Builder

Acheter et télécharger Divi sur le site Elegant Themes

Pour utiliser Divi Builder, il faut d’abord acheter une licence sur le site officiel d’Elegant Themes. Deux options sont disponibles :

• Licence annuelle : 89 $/an, incluant mises à jour et support technique.
• Licence à vie : 249 $ en paiement unique, idéale pour une utilisation illimitée.

Une fois que l’achat est effectué, téléchargez Divi Builder en format ZIP depuis votre compte Elegant Themes.

Installer Divi sur WordPress manuellement

L’installation de Divi Builder est rapide et simple :

• Connectez-vous à votre tableau de bord WordPress.
• Allez dans la section « Extensions > Ajouter une extension« .

• Cliquez sur le bouton « Téléverser une extension »

• Cliquez sur le bouton « Choisir un fichier » et sélectionnez le fichier Divi-Builder.zip.

• Installez et activez le plugin. Pour plus des détails, consultez notre tuto : Comment installer un plugin WordPress ?

Installer facilement Divi sur WordPress avec l’hébergeur LWS

Si vous êtes client chez LWS, l’installation est encore plus rapide. LWS offre une installation automatique et gratuite de Divi Builder avec ses hébergements WordPress :

• Sélectionnez une offre comme WP Starter (ou supérieure).
• Lors de l’installation de WordPress, cochez Divi Builder dans l’Auto-Installeur.

• Une fois que l’installation est terminée, Divi est déjà activé et prêt à l’emploi.

Cette méthode évite les installations manuelles et garantit un hébergement optimisé pour Divi Builder.

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

Activer et configurer Divi

Avant de créer votre site, il faut activer Divi Builder :

• Allez dans la section « Divi > Options du thème« .

• Entrez votre clé API Elegant Themes pour recevoir les mises à jour.

Ensuite, effectuez la configuration initiale :

• Choix du thème : utilisez Divi ou un autre thème compatible.
• Paramètres généraux : couleurs, typographies et espacement.

• Préférences de l’éditeur : mode WYSIWYG, animations et raccourcis.

Premiers pas avec Divi Builder

Une fois que Divi est activé, accédez à l’éditeur visuel en créant une nouvelle page :

• Allez dans la section « Pages > Ajouter une page« .

• Cliquez sur le bouton « Use the Divi Builder« .

• Choisissez un layout préconçu ou commencez avec une page vierge.

Découverte de l’interface de Divi Builder

Présentation de l’éditeur visuel (WYSIWYG)

L’un des plus grands atouts de Divi Builder est son éditeur visuel WYSIWYG (What You See Is What You Get), qui permet de construire des pages en temps réel directement depuis l’interface front-end. Contrairement à l’éditeur classique de WordPress, où les modifications sont visibles uniquement après enregistrement, Divi offre une expérience fluide et intuitive, idéale pour les débutants comme pour les professionnels du web.

Avec Divi, vous pouvez ajouter, modifier ou supprimer des sections, des colonnes et des modules directement sur la page, en voyant instantanément le rendu final.

Explication des principales fonctionnalités

• Glisser-déposer (Drag & Drop) : Divi Builder fonctionne entièrement en glisser-déposer, ce qui signifie que vous pouvez réorganiser les éléments en un simple mouvement de souris, sans toucher au code.

• Édition en ligne (Inline Editing) : il est possible de modifier directement le texte dans l’éditeur, sans ouvrir de fenêtres supplémentaires. Cliquez simplement sur une section de texte et commencez à écrire.

• Responsive Editing : Divi intègre un mode édition responsive qui permet d’afficher et d’ajuster la mise en page selon les appareils (ordinateur, tablette, mobile). Chaque élément peut être personnalisé individuellement pour un affichage optimal sur chaque type d’écran.

• Global Styles et Global Elements : avec les styles globaux, vous pouvez appliquer une même conception à plusieurs éléments et les modifier en un seul clic. Cela est particulièrement utile pour les boutons, polices et couleurs, garantissant une cohérence visuelle sur l’ensemble du site.

Différence entre l’éditeur backend et frontend

Divi Builder offre deux modes d’édition :

• L’éditeur backend (Wireframe Mode) : un mode schématique qui permet de structurer la page sous forme de blocs. Il est particulièrement utile pour organiser des mises en page complexes.

• L’éditeur frontend (Visual Builder) : l’interface principale où l’on peut voir en temps réel les modifications apportées. Ce mode est privilégié pour son aspect intuitif et rapide.

Gestion des sections, lignes et modules

Dans Divi Builder, chaque page est composée de trois niveaux d’éléments :

• Les sections (bleues) : ce sont les plus grandes divisions d’une page. Elles permettent d’organiser le contenu en grandes zones.
• Les lignes (vertes) : elles se placent à l’intérieur des sections et servent à définir la structure en colonnes.
• Les modules (gris) : ce sont les éléments de contenu tels que textes, images, vidéos, boutons, formulaires et bien d’autres.

Créer et personnaliser des pages avec Divi Builder

Ajout et modification de sections, colonnes et modules

Avec Divi Builder, la création d’une page web repose sur une structure en sections, lignes et modules. Pour ajouter une nouvelle section :

• Cliquez sur le bouton « + » et sélectionnez « Section normale », « Section spéciale » ou « Section plein écran ».
• Ajoutez ensuite une ligne, en choisissant une disposition avec une ou plusieurs colonnes.

• Insérez des modules (texte, image, vidéo, bouton, formulaire, etc.

Chaque élément peut être déplacé, dupliqué ou supprimé grâce à l’interface drag & drop.

Besoin d’un hébergeur pour votre site ?

LWS vous conseille sa formule d’hébergement web en promotion à -25% (offre à partir de 1,49€ par mois au lieu de 1,99 €). Non seulement les performances sont au rendez-vous mais vous profitez d’un support exceptionnel.

Découvrir l’offre

Personnalisation avancée des styles

L’un des points forts de Divi Builder est la personnalisation avancée des styles :

• Typographie : choisissez parmi plus de 900 polices Google, ajustez la taille, l’espacement et le style.
• Couleurs : définissez des palettes personnalisées pour harmoniser votre site.

• Effets visuels : ajoutez des animations, des ombres, des effets de survol et des filtres CSS sans coder.

Pour modifier l’apparence d’un élément, cliquez sur l’icône en forme de rouage et accédez aux options de conception.

Utilisation des layouts prédéfinis et des bibliothèques Divi

Divi Builder propose une bibliothèque de plus de 200 layouts prêts à l’emploi, idéaux pour ceux qui souhaitent gagner du temps. Ces modèles sont classés par catégorie :

• Business
• E-commerce
• Portfolio
• Blog

Pour utiliser un layout prédéfini :

• Cliquez sur le bouton « Load from Library ».

• Sélectionnez un modèle dans la bibliothèque.

• Cliquez sur le bouton « Use this layout »
• Personnalisez les textes, images et couleurs selon vos besoins.

Vous pouvez également enregistrer vos propres designs dans la bibliothèque Divi pour les réutiliser sur d’autres pages.

Création de modèles réutilisables

Si vous concevez plusieurs pages avec une structure similaire, Divi Builder permet d’enregistrer des modèles réutilisables. Pour cela :

• Sélectionnez une section, ligne ou module.
• Cliquez sur « Enregistrer dans la bibliothèque ».
• Donnez un nom à votre modèle et réutilisez-le sur d’autres pages en quelques clics.

Intégrer Divi avec WooCommerce et d’autres plugins

Mise en place d’une boutique WooCommerce avec Divi

Divi Builder est entièrement compatible avec WooCommerce, le plugin e-commerce le plus populaire sur WordPress. Grâce à cette intégration, vous pouvez créer une boutique en ligne professionnelle, sans toucher au code.

Installation de WooCommerce

• Allez dans la section « Extensions > Ajouter une extension » et recherchez WooCommerce.
• Installez et activez le plugin.

• Suivez l’assistant de configuration pour définir votre devise, mode de paiement et options d’expédition.

Création des pages essentielles

WooCommerce génère automatiquement les pages de base :

• Boutique : affiche les produits.
• Panier : permet aux clients de voir et modifier leur commande.
• Commande : formulaire de paiement.
• Mon compte : espace client.

Personnalisation avec Divi

Divi Builder offre des modules WooCommerce dédiés pour personnaliser votre boutique :

• Boutique : affiche une liste de produits avec filtres.
• Produit : met en avant un article spécifique.
• Panier et Commande : permet de styliser ces pages.

Pour modifier l’apparence, ajoutez un module WooCommerce dans Divi et personnalisez le style, les couleurs et l’agencement.

Besoin d'un hébergement web au meilleur prix ?

LWS vous conseille sa formule d’hébergement en promotion à -25% (offre à partir de 1,49€ par mois au lieu de 1,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Compatibilité de Divi Builder avec les plugins WordPress courants

Divi Builder fonctionne avec la majorité des plugins SEO, sécurité et marketing. Voici quelques exemples d’intégrations utiles :

SEO : optimiser la visibilité de votre site

• Yoast SEO : pour gérer les titres, méta-descriptions et sitemaps.
• Rank Math : alternative performante avec des options avancées.

Sécurité et sauvegarde

• Wordfence : protège votre site contre les attaques.
• UpdraftPlus : pour automatiser les sauvegardes et restaurations.

Formulaires et marketing

• Contact Form 7 : permet d’ajouter un formulaire de contact.
• Bloom (Elegant Themes) : plugin natif pour la capture d’e-mails et la création de pop-ups.

Intégration de Divi avec Gutenberg et l’éditeur classique

Bien que Divi Builder soit un éditeur visuel, il est compatible avec Gutenberg, l’éditeur natif de WordPress.

Utiliser Divi avec Gutenberg

• Ajoutez un bloc Divi dans une page Gutenberg pour intégrer une mise en page créée avec Divi.
• Basculez facilement entre les deux éditeurs sans perdre vos modifications.

Comparaison avec l’éditeur Gutenberg

• Gutenberg est plus moderne que l’éditeur classique mais reste moins flexible que Divi Builder.
• Divi offre une expérience plus fluide et plus visuelle pour créer des pages complexes.

Optimisation SEO et performances

Optimisation du temps de chargement et du code CSS

Un site rapide améliore non seulement l’expérience utilisateur, mais aussi son référencement naturel (SEO). Divi Builder, bien que puissant, peut alourdir votre site si certaines optimisations ne sont pas mises en place.

Astuces pour améliorer la vitesse :

• Activer le système de cache avec un plugin comme WP Rocket ou LiteSpeed Cache.
• Optimiser les images avec Smush ou Imagify pour réduire leur poids sans perte de qualité.
• Minifier le CSS et le JavaScript via les options intégrées de Divi.
• Utiliser un hébergement performant, comme LWS, pour garantir une bonne vitesse de chargement.

Nettoyer le code inutile

• Désactiver les modules Divi non utilisés pour alléger les fichiers CSS et JavaScript.
• Activer l’option « Critical CSS » dans les paramètres Divi pour prioriser l’affichage du contenu principal.

Bonnes pratiques SEO avec Divi

Un site bien structuré est essentiel pour un bon référencement naturel. Divi Builder facilite l’optimisation avec :

• Une gestion des balises Hn (H1, H2, H3…) pour une hiérarchisation correcte des contenus.
• L’ajout facile des balises ALT sur les images pour le SEO.
• Un maillage interne optimisé, en insérant des liens entre vos pages pour une meilleure navigation.

Test du responsive design et corrections

Divi Builder offre un aperçu en mode mobile et tablette. Vérifiez que :

• Les textes et images ne débordent pas.
• Les boutons et liens sont bien cliquables.
• Les performances restent optimales sur mobile.

Avec ces optimisations, votre site sera rapide, bien référencé et parfaitement responsive.

Besoin d'un nom de domaine au meilleur prix ?

LWS vous conseille ses packs nom de domaine tout inclus à partir de 0,99€ par an. Vous obtenez un domaine au choix (.fr .com .net .site .tech .shop .boutique .xyz…) mais aussi des adresses email personnalisées (mail@votredomaine.fr) et un certificat SSL.

Découvrir l'offre

Mettre en ligne un site Divi Builder

Préparation avant publication : tests de compatibilité et corrections

Avant de mettre votre site en ligne, assurez-vous qu’il est fonctionnel et optimisé :

• Testez toutes les pages pour vérifier l’affichage et la navigation.
• Contrôlez les liens internes et externes pour éviter les erreurs 404.
• Vérifiez la compatibilité avec les navigateurs (Chrome, Firefox, Edge, Safari).
• Analysez la vitesse de chargement avec Google PageSpeed Insights.

Sauvegarde et migration du site si nécessaire

Avant la mise en ligne, il est recommandé de réaliser une sauvegarde complète. Pour cela, utilisez un plugin comme UpdraftPlus ou All-in-One WP Migration.

Si vous souhaitez transférer votre site vers un autre hébergeur :

• Faites une exportation de la base de données et des fichiers.
• Utilisez un outil comme Duplicator pour simplifier le processus.
• Vérifiez après migration que tout fonctionne correctement.

Optimisations finales pour un site rapide et fluide

Une fois le site publié, voici quelques actions pour garantir ses performances :

• Activer un CDN (Cloudflare) pour une meilleure distribution des contenus.
• Limiter le nombre de plugins inutiles pour éviter de ralentir WordPress.
• Mettre à jour régulièrement WordPress, Divi et les extensions pour renforcer la sécurité et améliorer la compatibilité.

Divi Builder et LWS

Installation facile et gratuite avec LWS

L’un des avantages de LWS est son installation simplifiée de Divi Builder. En choisissant un hébergement WordPress chez LWS, vous pouvez installer Divi en un seul clic via l’Auto-Installeur intégré.

Comment procéder ?

• Choisissez une offre d’hébergement comme WP Starter.

• Lors de l’installation de WordPress, sélectionnez Divi Builder dans la liste des extensions préinstallées.

• Une fois l’installation terminée, Divi est déjà activé et prêt à être utilisé.

Avec cette solution, vous gagnez du temps et évitez les étapes techniques d’installation manuelle.

Hébergement optimisé pour WordPress

LWS propose un hébergement performant spécialement conçu pour WordPress et Divi Builder :

• Serveurs optimisés pour un chargement rapide des pages.
• Stockage SSD pour de meilleures performances.
• Certificat SSL gratuit pour sécuriser le site.

Avis et conclusion

Divi Builder est un page builder puissant et intuitif, idéal pour créer un site WordPress sans coder. 🔱Il se distingue par : une interface visuelle fluide en glisser-déposer, une bibliothèque de layouts riche et variée et Une compatibilité totale avec WooCommerce et WordPress. ✨ En revanche, il peut être lourd en ressources si mal optimisé et nécessite une licence payante.🎉

💬 Avez-vous testé Divi Builder ? Partagez votre expérience en commentaire !