Bibliothèque Divi : comment enregistrer, réutiliser et importer vos layouts

La Bibliothèque Divi (Divi Library) est l’un des atouts majeurs de Divi. Elle vous permet d’enregistrer des sections, lignes, modules ou mises en page complètes, de les réutiliser instantanément partout sur votre site, et de les partager entre sites via l’import/export. Résultat : vous gagnez un temps précieux, vous normalisez votre design et vous limitez les erreurs de mise en forme.

Qu’est-ce que la Bibliothèque Divi ?

C’est un espace centralisé où vous stockez vos éléments réutilisables : modules (bouton fixe, formulaire, bloc texte), lignes, sections et mises en page complètes. Chaque élément sauvegardé peut être classé, tagué et inséré à volonté sur de nouvelles pages. Au-delà du simple copier-coller, la Bibliothèque alimente votre design system : styles cohérents, composants répétés, variations prêtes à l’emploi.

Enregistrer un module, une section ou une page

Depuis l’éditeur (Visual Builder)

1. Passez en mode Visual Builder sur la page souhaitée ou directement depuis un modèle du Theme Builder de Divi.
   
2. Survolez l’élément (module/ligne/section) à sauvegarder → cliquez sur l’icône Enregistrer dans la Bibliothèque (disquette).
3. Donnez un nom explicite (ex. Section – Hero – Offre SaaS), et affectez une catégorie (ex. Héros, Formulaires, Footers).
4. Choisissez si l’élément doit être Global (voir explications ci-dessous) et validez.

Enregistrer une page entière

1. Dans la barre du bas du Visual Builder, cliquez sur l’icône Sauvegarder dans la bibliothèque.
   
2. Choisissez Enregistrer la mise en page actuelle dans la Bibliothèque.
3. Nommez-la clairement (ex. Accueil – Contact – V1) et, si besoin, ajoutez une description.

Global, Presets & Global Colors : comprendre les différences

• Élément Global : lorsque vous enregistrez un module/ligne/section en “Global”, toutes ses instances synchronisées se mettent à jour d’un coup. Idéal pour un bandeau d’alerte, un bloc témoignages standardisé, un footer de page (hors Theme Builder), etc.
• Presets (Styles prédéfinis de module) : vous définissez des styles par défaut pour un type de module (ex. tous les boutons). Quand vous insérez un nouveau bouton, il hérite du preset choisi. C’est l’outil de base d’un design system.
• Global Colors : palette connectée ; modifiez une couleur globale, toutes les occurrences liées se mettent à jour. Parfait pour gérer une charte ou changer d’identité visuelle sans tout refaire.

À retenir : un Élément Global synchronise un composant précis, les Presets synchronisent des styles à l’échelle des modules, et les Global Colors synchronisent la palette. Combinez-les pour un site facilement maintenable.

Réutiliser vos layouts depuis la Bibliothèque

1. Éditez la page cible avec le Visual Builder.
2. Cliquez sur Ajouter une nouvelle section → Ajouter depuis la Bibliothèque.
   
3. Insérez l’élément souhaité. Si c’est un Élément Global, vous verrez un encart indiquant sa nature synchronisée.
   

Bon réflexe : créez des variantes (V1, V2, V3) d’un même bloc pour tester des versions. Ne rendez globales que celles qui doivent rester identiques partout.

Organiser la Bibliothèque : nommage, catégories, recherche

• Nommage : adoptez une convention stable, par ex. [TYPE] – [Page/Zone] – [Usage] – [Version]. Ex. Section – Hero – Logiciel – V2.
• Catégories : regroupez par usage (Héros, Pricing, Témoignages, Formulaires, FAQ, Blog, Shop…).
• Descriptifs : précisez le contexte (largeur, fond, options, variantes recommandées).
• Nettoyage régulier : archivez/effacez les anciens layouts (V0, tests) pour éviter l’encombrement.
• Recherche : utilisez des préfixes pour retrouver vite (ex. [LP], [BLOG], [SHOP]).

Importer / exporter des layouts (.json) avec Portability

Divi propose une fonction Portability pour transférer vos modèles entre sites ou les sauvegarder grâce au format .json.

Exporter depuis la Bibliothèque

1. Allez dans Divi > Bibliothèque Divi.
2. Cliquez sur le bouton Importer/Exporter (icône flèches) en haut.
3. Onglet Exporter → choisissez Tout ou sélectionnez des éléments précis.
4. Validez : un fichier .json est généré.

Importer dans un autre site

1. Dans le back-office du site cible : Divi > Bibliothèque Divi → Importer/Exporter.
2. Onglet Importer → chargez votre .json → validez.
3. Vos layouts apparaissent, avec leurs catégories. Vous pouvez maintenant les insérer partout.

Exporter/Importer une page depuis l’éditeur

1. Dans le Visual Builder, ouvrez Portability.
2. Choisissez Exporter la mise en page (ou Importer pour récupérer un .json).
3. Idéal pour partager une landing complète avec un collègue ou dupliquer sur un autre domaine.

Tip : conservez une bibliothèque maîtresse (dépôt central) dans votre drive ou repo pour tracer les versions.

Cas d’usage concrets

Bien utilisée, la Bibliothèque Divi devient le cœur de votre design system. Elle vous permet d’enregistrer vos sections, lignes, modules et mises en page puis de les réinjecter partout, à l’identique ou en variante, sans repartir de zéro. Combinée aux Presets de modules et aux Global Colors, elle garantit une identité visuelle stable et des délais de production nettement plus courts, que ce soit pour un blog, une landing page ou une boutique WooCommerce.

Blog

• Sections Newsletter et Articles liés réutilisables en bas d’article.
• Bannière Catégorie standard avec titre dynamique + description.

Landing pages

• Pack de blocs : Hero, USP, Preuves, Pricing, FAQ, CTA final. Composez des LP en 15 minutes avec des briques testées.
• Déclinez une LP V1/V2 pour A/B testing (texte/images différents, structure identique).

WooCommerce

• Sections Arguments de réassurance (livraison, retours, avis) à insérer sur pages clés.
• Blocs Cross-sell/Upsell formatés et prêts, intégrables dans des gabarits.

Workflow d’équipe & versioning

• Convention de nommage partagée + fichier README décrivant l’usage de chaque bloc.
• Branche “Design System” : ne modifiez pas un Global en prod sans validation. Dupliquez-le, testez la V+1 sur une page brouillon, puis remplacez.
• Journal de versions : tenez un changelog pour savoir qui a modifié quoi et quand.
• Exports réguliers : gardez un backup .json daté de la Bibliothèque avant une mise à jour majeure.

Performance & SEO : bonnes pratiques

• Blocs légers : évitez les sliders/vidéos en arrière-plan dans les éléments globaux (impact sur tout le site).
• Images : formats modernes (WebP), tailles adaptées, lazy-loading.
• Hn cohérents : vos blocs réutilisables ne doivent pas générer plusieurs H1 par erreur.
• Accessibilité : contrastes, texte alternatif, focus clavier sur les formulaires.
• Nettoyage CSS : centralisez vos styles via Presets pour éviter des overrides à la main sur chaque bloc.

Erreurs fréquentes et comment les éviter

• Tout mettre en Global : gardez “Global” uniquement pour ce qui doit être identique partout. Sinon, créez des copies locales.
• Dupliquer des blocs lourds : un header/section vidéo enregistrés et réutilisés massivement nuisent à la vitesse.
• Oublier la mise à jour des Presets : si vos nouveaux modules ne reprennent pas le style, vérifiez le preset par défaut.
• Layouts orphelins : faites un ménage mensuel pour supprimer tests et brouillons.
• Écraser un Global par mégarde : travaillez sur un duplicata (V+1), puis remplacez.

Conclusion

Bien utilisée, la Bibliothèque Divi devient le cœur de votre design system : vous enregistrez vos sections, lignes, modules et pages une fois, puis vous les réutilisez partout, de façon cohérente et rapide. Combinée aux Presets de modules et aux Global Colors, elle garantit une identité visuelle stable, des pages plus propres et un gain de temps considérable, que ce soit pour un blog, des landing pages ou une boutique WooCommerce.

Pour en tirer le meilleur, adoptez une méthode : nommage clair, catégories utiles, éléments globaux seulement quand c’est nécessaire, exports réguliers en .json et tests sur brouillon avant mise en production. Cette discipline vous évite le chaos des duplications, accélère vos itérations et simplifie la maintenance au fil des mois.

• Standardisez vos blocs clés (Hero, Pricing, FAQ, CTA).
• Centralisez les styles avec Presets + Global Colors.
• Réservez le statut Global aux composants réellement universels.
• Organisez la bibliothèque (catégories, versions, nettoyage mensuel).
• Sauvegardez/partagez via Portability pour sécuriser et collaborer.

Envie d’aller plus loin ? Consultez notre catégorie dédiée à Divi, vous y trouverez des ressources afin de vous familiariser et de vous perfectionner avec ce puissant Theme Builder. Vous aurez alors un socle Divi rapide, cohérent et évolutif.