Divi 5 Skill

Compétence Divi 5

Construire des mises en page Divi 5 sous forme de markup valide pour le builder. La compétence est modulaire : ce fichier redirige vers des fichiers de référence ciblés — lisez uniquement ceux dont la tâche a besoin.

🚦 Processus OBLIGATOIRE pour créer une page (ne PAS sauter)

Créer une page est un processus à étapes contrôlées et multiples. Ne passez pas directement au markup ou n'appelez pas divi_create_page / POST /pages.

▸ ATTENDRE signifie : terminez votre message et attendez la réponse réelle de l'utilisateur. Ne posez PAS de questions pour y répondre vous-même, et ne passez PAS à l'étape suivante dans le même tour. Demandez → arrêtez → laissez l'utilisateur répondre → puis continuez. C'est l'erreur n°1 que les modèles commettent ici — vous devez vraiment faire une pause.

1. ▸ ATTENDRE — Mode de connexion. Demandez : site en direct (Divi Connect) ou JSON uniquement ? Si en direct, obtenez l'URL du site + la clé API et appelez /design-system pour charger les tokens réels. (Ignorer si évident d'après le contexte.)
2. ▸ ATTENDRE — Découverte (presque toujours requise). Posez un ensemble ciblé de questions groupées — objectif/offre, public, sections clés, marque/ton, contenu indispensable, CTA principal (~4 à 6, chacune avec une valeur par défaut raisonnable), puis STOP et attendez. Un brief court ou générique ne suffit pas pour ignorer cette étape — par exemple « crée une page pour un mentor d'entreprise » ne vous apprend rien sur l'offre, le public, les sections ou le CTA, donc vous DEVEZ demander d'abord, pas deviner. Ignorer la découverte uniquement si l'utilisateur a fourni des exigences vraiment détaillées OU a explicitement dit « vas-y / construis-la ».
3. ▸ ATTENDRE — Plan de page + approbation. Présentez un Plan de Page concis (intention → narration → plan des sections → quels tokens du système de design correspondent à quoi) et une auto-critique d'une ligne. Demandez explicitement à l'utilisateur d'approuver ou de modifier le plan, et STOP. Ne générez PAS de markup et ne créez PAS la page tant qu'il n'a pas approuvé. S'il donne son retour, révisez, re-présentez, et redemandez — itérez jusqu'à approbation.
4. Construction. Uniquement après approbation : générez le markup (en utilisant les tokens réels), puis créez la page (mode direct) et retournez l'URL. Après la création, l'utilisateur peut encore demander des modifications — appliquez-les (éditez/re-créez) et re-confirmez.

C'est la valeur essentielle de la compétence — le plan est la réflexion ; le markup n'est qu'une transcription. Méthode complète : DIVI5-DESIGN-PROCESS.md (lisez-le). La SEULE dérogation : l'utilisateur dit explicitement « construis-la / vas-y » — alors procédez avec les hypothèses énoncées, en montrant d'abord un plan de deux lignes.

Fichiers de référence à lire pendant la construction

• Toujours : DIVI5-BASE.md (règles/validation) + DIVI5-DESIGN-PROCESS.md (le flux ci-dessus).
• Publication en direct : DIVI5-CONNECT.md (tokens du système de design, créer une page).
• Modules/stylesheet : les fichiers de fonctionnalités dans le tableau ci-dessous.
• Générez le markup avec les tokens de design réels ; validez avec BASE avant de créer.

⚠️ Règles CRITIQUES pour le markup des blocs (provoquent des pages BLANCHES silencieusement)

Lisez-les même si vous ne lisez rien d'autre. Le validateur côté serveur de Divi Connect rejette les pages qui enfreignent les règles 1 à 3, donc les respecter évite un appel échoué.

1. Ne JAMAIS encapsuler les attributs de module dans attrs. Le JSON après un nom de bloc est l'objet d'attributs — mettez title/content/module/builderVersion au niveau supérieur. ❌ <!-- wp:divi/heading {"attrs":{"title":{...}}} /--> → rend la page VIDE ✅ <!-- wp:divi/heading {"title":{...},"builderVersion": "5.11.1"} /--> (attrs n'est qu'une clé dans les définitions de presets — jamais dans les blocs de modules.)

2. La clé de contenu divi/text est exactement content — jamais body ou text. ❌ "body":{...} ou "text":{...} → rend la page VIDE ✅ "content":{"innerContent":{"desktop":{"value":"<p>Bonjour.</p>"}}} (body existe uniquement comme groupe de style bodyFont.)

3. Le HTML dans une valeur value est passé BRUT (<p>, <strong>) — ne l'échappez jamais. ❌ "value":"<p>Bonjour.</p>" ✅ "value":"<p>Bonjour.</p>" Écrivez également la typographie non-ASCII sous forme d'entités HTML numériques (tiret cadratin —, guillemets courbes ’/“/”), OU utilisez du ASCII simple (-, guillemets droits). Le connecteur claude.ai corrompt les caractères multi-octets bruts, et une échappement JSON \uXXXX survit au transport textuellement, donc le visiteur le lit littéralement.

4. Chaque module nécessite "builderVersion": "5.11.1". Les modules auto-fermants se terminent par /> (fermeture courte). Enveloppez toute la page avec <!-- wp:divi/placeholder --> ... <!-- /wp:divi/placeholder -->.

Détails complets + tous les autres pièges : lisez DIVI5-BASE.md.

⚠️ Lorsqu'il est connecté à un site en direct (Divi Connect / MCP)

Après avoir appelé divi_get_design_system, vous DEVEZ construire avec ses tokens :

• Utilisez la chaîne token exacte (le $variable(...)$ complet) pour TOUTE couleur ET TOUTE taille — tailles de police, espacement, padding/margin, gaps, radius — pas seulement les couleurs. Ne codez pas en dur une valeur quand un token correspondant existe (les titres sont l'offenseur n°1 — ne codez jamais les tailles de titre en dur).
• N'inventez jamais d'ID gvid-/gcid-. Utilisez uniquement les ID retournés par /design-system (pas de gcid-primary, gcid-heading, gvid-h1, etc. sauf si cet ID exact a été retourné). Les ID inventés ne rendent rien.
• Faites correspondre par label (par ex. H1 Desktop, Section Gap). Codez en dur uniquement quand aucun token n'existe. Détail : DIVI5-CONNECT.md §3.

Fichiers de référence

Fichier	Quand le lire
DIVI5-BASE.md	Toujours — règles principales, imbrication, validation, erreurs fréquentes
DIVI5-DESIGN-PROCESS.md	Toujours — questions de découverte + planification de page avant le JSON
DIVI5-CONNECT.md	Publication en direct via le plugin Divi Connect (lire le système de design, créer des pages, gérer les tokens)
DIVI5-WORDPRESS.md	Création de pages par programmation via API REST / WP-CLI
DIVI5-LAYOUT.md	Structure de page (section/ligne/colonne/groupe), mise en page Grille, mise en page globale
DIVI5-STYLING.md	Arrière-plans, dégradés + variables de dégradé, espacement, bordure, typographie, effets de texte, rapport hauteur/largeur, cadrage, variables, pseudo-classes
DIVI5-MODULES-CONTENT.md	titre, texte, bouton, image, blurb, CTA, témoignage, équipe, icône, séparateur, code, en-tête-pleine-largeur, svg, timeline, fil d'Ariane
DIVI5-MODULES-INTERACTIVE.md	accordéon, bascule, onglets, formulaire de contact, inscription, menu déroulant, formulaire de contact 7, interactions
DIVI5-MODULES-MEDIA.md	vidéo, galerie, curseur, curseur vidéo, lottie, audio, image-avant-après
DIVI5-MODULES-DATA.md	compteurs, tableaux de prix, réseaux sociaux, table des matières, flux Instagram
DIVI5-MODULES-DYNAMIC.md	blog, portfolio, modules d'articles, menu, recherche, connexion, barre latérale, commentaires, carte, Loop Builder
DIVI5-MODULES-WOOCOMMERCE.md	boutique, produit unique, modules panier et paiement
DIVI5-PRESETS.md	Presets globaux — format de stockage, chemins de clés attrs, endpoint REST, assistants
DIVI5-PATTERNS.md	Modèles de mise en page réels + assistants de génération Python
DIVI5-COVERAGE.md	Ce qui est confirmé, vérifié par source, et non testé

Combinaisons typiques

Commencez toujours par BASE + DESIGN-PROCESS.

• Page d'atterrissage (JSON uniquement) : BASE + DESIGN-PROCESS + LAYOUT + STYLING + MODULES-CONTENT + PATTERNS
• Construire et publier en direct (Divi Connect) : + CONNECT
• Importer via API REST / WP-CLI : + WORDPRESS
• Sections interactives : + MODULES-INTERACTIVE
• Média/vidéo : + MODULES-MEDIA
• Tarifs / compteurs : + MODULES-DATA
• Blog / portfolio / Theme Builder : + MODULES-DYNAMIC
• Boutique WooCommerce : + MODULES-WOOCOMMERCE

Version

V0.6.9 — Version du Builder 5.11.1 (suit la ligne Divi 5.11.x). Le tampon builderVersion sur le markup généré doit correspondre à la version Divi de votre site ("5.11.1" sur les installations actuelles ; les valeurs plus anciennes s'importent encore via la rétrocompatibilité). 🆕 v0.6.9 fait de la taille des polices d'un design une question, pas une supposition — un PDF vectoriel exporté depuis Figma, ou une capture d'écran dont l'utilisateur donne la largeur du canevas, porte des tailles de police exactes, donc l'échelle de référence gagne un quatrième échelon et une porte de taille de police : demandez une fois, puis passez size_policy exact | snap | presets à divi_build_page et indiquez quelle politique a été utilisée. Voir DIVI5-CONNECT §« Faire correspondre une référence ». 🆕 v0.6.8 couvre quatre nouveaux modules de Divi 5.11 — divi/charts, divi/gravity-forms, divi/imagely-gallery, divi/payment-button — et son contrôle natif backdrop-filter, qui remplace la solution de contournement CSS personnalisée enseignée par les versions antérieures de cette compétence. Voir DIVI5-BASE §0. 🚨 v0.6.7 a corrigé une erreur de point de rupture qui faisait que le style mobile ne faisait silencieusement rien : phoneWide est désactivé par défaut et n'émet aucun CSS — utilisez phone. Voir DIVI5-BASE §6. La v0.6.6 est une version de correction (même schéma 5.9.0). Elle corrige deux règles qui étaient erronées dans toutes les copies téléchargées à la version 0.6.5 ou antérieure, qui échouent silencieusement : text-transform vient uniquement de capitalization (l'ancienne style:["uppercase"] se stocke proprement mais n'émet rien), et htmlAttributes prend le point de rupture en position la plus externe — htmlAttributes.desktop.value.{id, class}, pas htmlAttributes.id.desktop.value, qui ne rend aucun id du tout, donc les ancres #anchor dans la page ne mènent nulle part. Elle fixe également l'échappement du texte enrichi en un seul endroit (HTML brut, jamais pré-échappé) et documente le contrôle natif Sizing → Alignment (module.decoration.sizing.{bp}.value.alignSelf), qui remplace l'ancien chemin de preset sizing.alignment. Ajoute DESIGN-PROCESS §11b (polissage post-construction) et §8c (heuristiques de page d'atterrissage), CONNECT §5 (faire correspondre une référence), PRESETS §1b (le modèle de preset à quatre niveaux), et une section Adobe Typekit / polices non-Divi (STYLING). La v0.6.5 a été livrée uniquement dans le bundle du plugin Divi Connect — jamais en tant que version de dépôt ou téléchargement — donc ses notes sont intégrées ici : le contenu de texte enrichi est documenté comme HTML brut car une échappement JSON \uXXXX survit au transport MCP textuellement (l'ancien guide mettait du \u003cp\u003e littéral sur la page), et la typographie non-ASCII utilise des entités HTML numériques (—) pour la même raison. La v0.6.4 est une version de documentation/patrons (même schéma 5.9.0) : elle documente la bibliothèque de patrons de sections de Divi Connect — 28 patrons de sections prêts à l'emploi, principalement natifs (hero, tarifs, témoignages, FAQ, timeline, galerie, comparaison, et plus) ainsi que l'outil de découverte divi_list_patterns et les primitives de fidélité divi_build_page (superpositions d'images d'arrière-plan, badges, inclinaison, polices variables). La v0.6.3 a ajouté l'Éditeur de Grille de Divi 5.9.0 (gridOffsetRules ; LAYOUT §5b) et une section « éviter les clichés de design IA ». La v0.6.0 a ajouté le module Tooltip + le lot Advanced Text Styling. Voir DIVI5-COVERAGE.md pour ce qui est testé par rendu réel vs vérifié par source.