Dans cet article, découvrez comment utiliser les Canvases de Divi 5 pour construire un Preset Playground : un espace dédié à la création, au test et à l’organisation de vos préréglages de design avant de les appliquer à votre site WordPress. Cette approche améliore la cohérence visuelle et accélère votre workflow de design sans affecter vos pages en production.

Qu’est-ce qu’un Preset Playground dans Divi 5 ?

Les préréglages (Presets) permettent de sauvegarder des styles réutilisables (couleurs, typographie, espacement, etc.) dans Divi 5, et de les appliquer partout sur votre site. Un Preset Playground est un canvas détaché, c’est-à-dire un espace de travail isolé dans le Visual Builder, où vous pouvez tester et affiner des préréglages en contexte avant de les déployer sur vos pages actives.

Pourquoi créer un Preset Playground ?

• Testez vos idées de design dans un contexte réaliste, sans affecter votre site public.
• Comparez plusieurs variations côte à côte pour choisir la meilleure version.
• Documentez vos décisions et construisez une bibliothèque de styles cohérente.
• Conservez vos pages live propres, tout en élaborant votre système de design dans un espace sécurisé.

Les bases : qu’est-ce qu’un canvas dans Divi 5 ?

Un canvas est un espace de construction de pages dans le Visual Builder. Chaque page possède un Main Canvas qui représente le contenu visible en front-end. Les canvases détachés sont des zones de travail invisibles au public, idéales pour développer et tester des styles, des modules ou des composants complets avant de les appliquer à votre site.

Les canvases peuvent être :

• Locaux : rattachés à une seule page.
• Globaux : disponibles partout sur le site.

Mise en place d’un Preset Playground

1. Créer un nouveau canvas

• Ouvrez n’importe quelle page dans le Visual Builder Divi.
• Dans la barre d’outils, sélectionnez Ajouter un canvas.
• Donnez-lui un nom explicite comme Preset Playground ou Testing.
• Choisissez s’il doit être local ou global (le local suffit pour un espace de test).
• Enregistrez et basculez vers ce canvas dédié.

2. Construire vos premiers exemples de préréglages

Ajoutez des sections et modules courants (texte, boutons, images) à votre Playground pour tester différents styles :

• Créez d’abord des Option Group Presets (styles modulaires comme couleurs, bordures, typographie).
• Ensuite, regroupez ces options dans des Element Presets (styles complets pour modules).
• Utilisez également variables de design (couleurs globales, tailles, marges) pour un système cohérent.

3. Organiser votre espace de test (optionnel)

Pour accélérer votre workflow :

• Classez vos préréglages par type (boutons, typographies, images).
• Ajoutez des étiquettes ou des notes pour comprendre vos choix de design.
• Transformez votre Playground en référence ou documentation interne pour vous ou votre équipe.

Intégrer vos préréglages dans votre workflow

Une fois vos préréglages finalisés dans le Preset Playground :

1. Appliquez-les directement aux modules de vos pages live.
2. Retournez dans le Playground chaque fois que vous voulez créer de nouveaux styles ou explorer des alternatives.
3. Vos modifications restent isolées jusqu’à ce que vous décidiez de les utiliser sur le site.

Pourquoi utiliser ce système ?

Le Preset Playground vous donne :

• une méthode structurée de conception visuelle,
• plus de flexibilité pour tester sans risques,
• et un processus efficace pour maintenir l’uniformité du design sur l’ensemble de votre site Divi 5.