AK Elementor Studio
par Abanoub Khalil — Développeur WordPress & Webflow Senior
RÈGLE #1 — LA RÈGLE LA PLUS IMPORTANTE DE CETTE COMPÉTENCE
WIDGET HTML = BALISES <script> JAVASCRIPT UNIQUEMENT.
Le widget HTML a exactement une utilisation valide :
→ Intégrer une balise <script> pour un comportement JavaScript
C'est TOUT. Rien d'autre ne va jamais dans le widget HTML.
Pas d'en-têtes. Pas de texte. Pas de badges. Pas de liens de navigation.
Pas de cartes. Pas de mises en page. Pas de tarifs. Pas de chronologies.
Pas d'icônes. Pas de statistiques. Pas de contenu visuel.
Chaque élément visuel a un widget Elementor natif. Utilisez-le.
RÈGLE #2 — RÈGLES ABSOLUES DU JSON
1. PAS DE COMMENTAIRES — /* */ et // cassent l'analyse JSON
❌ { /* hero */ "id": "a1b2c3d4" } ✅ { "id": "a1b2c3d4" }
2. PAS DE VIRGULES DE FIN
❌ { "a": 1, "b": 2, } ✅ { "a": 1, "b": 2 }
3. IDS = HEXADÉCIMAL UNIQUE SUR 8 CARACTÈRES UNIQUEMENT
❌ "id": "hero_section" ✅ "id": "a1b2c3d4"
4. CHAQUE ÉLÉMENT DOIT AVOIR "elements": []
❌ { "widgetType": "heading", "settings": {} }
✅ { "widgetType": "heading", "settings": {}, "elements": [] }
5. RÈGLE isInner
Enfants directs de "content": [] → "isInner": false
Conteneurs imbriqués dans d'autres conteneurs → "isInner": true
Widgets (à l'intérieur de tout conteneur) → "isInner": false
6. COULEURS HEXADÉCIMALES UNIQUEMENT — jamais de noms de couleurs
❌ "background_color": "white" ✅ "background_color": "#FFFFFF"
ÉTAPE 0 — Entretien Préliminaire
Posez tout dans UN SEUL message. Ne sautez jamais.
👋 Détails rapides avant de commencer :
1. PLAN DU SITE — Pages ? (Je génère un .json par page)
2. VERSION D'ELEMENTOR — Gratuite ou Pro ?
Pro : Theme Builder en-tête/pied de page, CSS personnalisé, sticky, effets de défilement
Gratuite : en-tête/pied de page = sections régulières dans chaque page
3. TYPES DE CONTENU PERSONNALISÉS — Y a-t-il des CPT ?
(Services, Portfolio, Plugins, Équipe, Témoignages → Je générerai du JSON ACF)
4. FORMAT DE SORTIE
a) Fichiers .json individuels — importez un par un via Modèles → Modèles enregistrés (fonctionne toujours, Gratuit + Pro)
b) ZIP d'exportation natif Elementor — importez via Elementor → Outils → Importer un kit (aucun plugin supplémentaire nécessaire)
c) ZIP Template Kit Envato — nécessite le plugin "Template Kit Import" installé sur WordPress
d) Fichiers .json individuels + groupes de champs ACF
5. MARQUE — Codes couleur hexadécimaux + Polices Google ?
(Ou j'extrais du design)
ÉTAPE 1 — Détection de l'Entrée
| Entrée | Pipeline |
|---|---|
| HTML/CSS/JS | Pipeline Code |
| PNG/JPG/WebP/capture d'écran/maquette/Figma | Pipeline Visuel |
| Pipeline PDF | |
| Mots uniquement | Pipeline Description |
| JSON Elementor existant | Pipeline Édition |
| Mixte | Les deux pipelines, fusionnés |
RÉFÉRENCE COMPLÈTE DES WIDGETS — Widgets Natifs pour Chaque Élément
Texte et Nombres
| Élément | Widget |
|---|---|
| h1 / h2 / h3 / h4 / h5 / h6 | heading |
| Paragraphe / corps de texte | text-editor |
| Compteur animé (500+, 10K) | counter |
| Barre de progression / compétence | progress |
Actions
| Élément | Widget |
|---|---|
| Bouton / CTA / lien en tant que bouton | button |
| FAQ / lignes pliables | accordion |
| Navigation par onglets | tabs |
| Alerte / bannière d'information | alert |
Médias
| Élément | Widget |
|---|---|
| Photo / image | image |
| YouTube / Vimeo / vidéo | video |
| Grille d'images | image-gallery |
| Diaporama / carrousel d'images | image-carousel |
Cartes et Listes
| Élément | Widget |
|---|---|
| Icône + titre + description | icon-box |
| Liste à puces avec icônes | icon-list |
| Photo + titre + texte | image-box |
| Citation client | testimonial |
Aides à la Mise en Page
| Élément | Widget |
|---|---|
| Ligne horizontale / séparateur | divider |
| Espace vide vertical | spacer |
Utilitaires
| Élément | Widget |
|---|---|
| Icônes de réseaux sociaux | social-icons |
| Intégration de carte | google-maps |
| Code court de plugin/formulaire | shortcode |
RÉSOLUTION D'ÉLÉMENTS COMPLEXES SANS WIDGET HTML
Barre de Navigation
Structure : conteneur flex (ligne, espacement entre)
└── widget image ← logo
└── widget icon-list ← liens de navigation (définir icône sur "aucun", chaque élément = un lien de page)
OU plusieurs widgets button (taille : xs, style : lien/ghost, un par élément de navigation)
└── widget button ← bouton CTA
Badge / Pastille de Statut / Tag
Option A : widget button
texte : "TEMPS PLEIN", taille : "xs", border_radius : 100px
button_text_color : "#00D4C8", button_background_color : "rgba(0,212,200,0.1)"
pas de lien href (ou lien vers "#")
Option B : widget alert
type : "success" / "info" / "warning"
alert_title : "Développeur WordPress"
(style avec CSS personnalisé si Pro)
Chronologie de Carrière / Entrée d'Expérience Professionnelle
Structure : conteneur intérieur (colonne, bordure-gauche : 2px solide accent)
└── conteneur intérieur (ligne, écart : 8px) ← ligne date + statut
└── widget text-editor ← "OCT 2024 — PRÉSENT"
└── widget button (xs, pilule) ← "TEMPS PLEIN" badge
└── widget heading (h3/h4) ← "Développeur WordPress & Webflow Senior"
└── widget text-editor ← "InVitro Capital — Le Caire, Égypte"
└── widget text-editor ← paragraphe de description
└── conteneur intérieur (ligne, retour à la ligne) ← ligne de tags techniques
└── widget button (xs, ghost) ← "WordPress"
└── widget button (xs, ghost) ← "Webflow"
└── widget button (xs, ghost) ← "CMS"
Panneau d'Informations de Contact
Structure : conteneur stylisé (fond : #141628, border-radius : 12px, padding : 32px)
└── conteneur intérieur (ligne) par ligne d'info :
└── widget text-editor ← étiquette "LOCALISATION" (petit, atténué)
└── widget text-editor ← valeur "Le Caire, Égypte"
└── conteneur intérieur (ligne) par ligne cliquable :
└── widget text-editor ← étiquette "EMAIL"
└── widget button ← "[email protected]" (style : lien, href : mailto:)
└── widget alert ← statut "Actuellement disponible"
└── widget button ← CTA "Réserver un appel de découverte"
Barres de Profondeur de Compétence / Progression
Structure : conteneur (colonne)
└── widget text-editor ← titre "PROFONDEUR DE COMPÉTENCE"
└── par compétence : conteneur intérieur (ligne)
└── text-editor ← étiquette "WP"
└── widget progress ← pourcentage : 95, type : ligne, bar_color : accent
└── text-editor ← étiquette "Expert"
Carte de Prix
Structure : conteneur intérieur (colonne, fond : #141628, border-radius : 12px, padding : 40px)
└── widget text-editor ← étiquette du palier
└── widget heading (h2) ← prix "99$"
└── widget text-editor ← période "/mois"
└── widget divider
└── widget icon-list ← liste de fonctionnalités (icônes de coche)
└── widget button ← CTA "Commencer" (pleine largeur)
Carte de Témoignage
Utilisez le widget testimonial (gère tout nativement) :
image : URL de l'avatar, name : "Nom du client", title : "CEO, Entreprise"
content : "Texte de la citation ici"
OU mise en page personnalisée :
conteneur intérieur (colonne)
└── widget icon-list (1 élément, icône étoile × 5) ← évaluation par étoiles
└── widget text-editor ← texte de la citation
└── conteneur intérieur (ligne)
└── widget image (border-radius : 50%) ← avatar
└── conteneur intérieur (colonne)
└── widget heading (h5) ← nom
└── widget text-editor ← titre/entreprise
Nuage de Logo / Logos de Partenaires
Utilisez le widget image-carousel :
slides : [logo1, logo2, logo3, logo4, logo5]
slides_to_show : 5, autoplay : oui, navigation : aucun
image_size : medium
Structure de Colonne de Pied de Page
Colonne 1 (colonne de marque) :
└── widget image ← logo
└── widget text-editor ← slogan
└── widget social-icons ← LinkedIn, GitHub, Twitter
Colonnes 2-4 (colonnes de liens) :
└── widget heading (h5) ← "Liens rapides" / "Services" / "Contact"
└── widget icon-list ← liens (icône : aucun ou flèche, un par lien)
Barre inférieure :
└── conteneur (ligne, espacement entre)
└── text-editor ← "© 2025 Abanoub Khalil"
└── text-editor ← liens de confidentialité / mentions légales (balises <a> en ligne)
Pipeline Code
Étape 1 — Inventaire
Pour chaque élément : nommez-le, déclarez son widget natif, expliquez pourquoi. Si vous avez envisagé le widget HTML, appliquez d'abord l'auto-vérification JS uniquement.
Étape 2 — Attribution des Widgets
Zéro contenu visuel dans le widget HTML. Appliquez la Référence Complète des Widgets ci-dessus.
Étape 3 — Extraction CSS
Mappez CSS → paramètres Elementor (references/style-map.md). Variables CSS → résoudre en hexadécimal.
Étape 4 — Construction JSON
Section par section. Validez au fur et à mesure que vous écrivez.
Étape 5 — Sortie
Un .json par page. Pas de commentaires. Tous les ID sont des hexadécimaux uniques sur 8 caractères.
Pipeline Visuel
Phase 1 — Inventaire (de haut en bas)
NAVBAR :
Logo : [position / type : image ou texte]
Liens de navigation : [listez chacun] → éléments icon-list OU widgets button
Bouton(s) CTA : [texte / couleur hex]
Fond : [#HEX ou transparent]
HERO :
BG : [solide #HEX / dégradé #X→#Y Ndeg / superposition d'image / vidéo]
Mise en page : [centrée / texte-gauche+image-droite]
Hauteur minimale : [100vh / px fixe]
Éléments :
[badge ?] → widget alert ou widget button (xs, pilule)
[h1] → widget heading
[h3/sous-titre] → widget heading
[description] → widget text-editor
[boutons CTA] → widgets button
[image] → widget image
SECTION N :
Objectif : [fonctionnalités / statistiques / à propos / chronologie / panneau de contact / témoignages / CTA]
Mise en page : [1-col / 2-col / 3-col / 4-col]
Fond : [#HEX]
Par colonne : listez le widget natif pour chaque élément
PIED DE PAGE : [N colonnes, contenu par colonne]
Phase 2 — Couleurs
Extrayez l'hexadécimal pour : primaire, secondaire, accent, texte des titres, texte du corps, atténué, fond clair, fond foncé, fond de carte, bordure.
→ Table de référence complète dans references/visual-analysis.md
Phase 3 — Typographie
Police des titres, police du corps, police des étiquettes — famille, graisse, tailles bureau/tablette/mobile.
Phase 4 — Mappage de Mise en Page
Utilisez la grille de conteneurs dans references/section-patterns.md.
Phase 5 — Attribution des Widgets
Appliquez la Référence Complète des Widgets. Zéro widget HTML pour le contenu visuel.
Phase 6 — Espacement
Pad de section : 60-80px standard, 100-120px hero. Pad de carte : 24-32px. Écart : 20-30px.
Phase 7 — Résumé d'Analyse + JSON
## 🔍 Analyse Visuelle — [Page]
**Pages détectées :** [liste]
**Style :** [Sombre/Clair/Gras/Minimal]
| Jeton | Valeur |
|---|---|
| Primaire | #______ |
| Accent | #______ |
| Texte des titres | #______ |
| Texte du corps | #______ |
| Fond | #______ |
| Police des titres | Inter 700 |
**Plan des widgets :**
1. Navbar → image + icon-list + button
2. Hero → alert (badge) + heading + text-editor + button + image
3. Statistiques → N× widgets counter
4. Chronologie → N× [text-editor + button (badge) + heading + text-editor + ligne de button] par entrée
5. Panneau de contact → conteneur stylisé + lignes text-editor + liens button + alert + button
6. Pied de page → image + text-editor + social-icons + colonnes icon-list
**Widgets HTML utilisés :** [Listez UNIQUEMENT les utilisations JS <script>. Si aucun : "Aucun."]
**Hypothèses :** [listez toutes les approximations]
**⚠️ Après import :** remplacez les images de substitution, mettez à jour les liens de navigation
Pipeline PDF
PDF unique → Pipeline Visuel. Plusieurs pages → un template par page. Texte sélectionnable → extrayez la copie exacte.
Pipeline Description
Demandez le type de page. Appliquez la Référence des Widgets. Utilisez les valeurs par défaut : primaire #1A1A2E, accent #005AFF, police Inter.
Pipeline Édition
Analysez → localisez → modifiez → ré-émettez le JSON complet et valide → résumez.
Schémas de Base
Conteneur de Section
{
"id": "a1b2c3d4",
"elType": "container",
"isInner": false,
"settings": {
"content_width": "full",
"flex_direction": "column",
"flex_align_items": "center",
"flex_justify_content": "flex-start",
"flex_gap": { "unit": "px", "column": "30", "row": "30", "isLinked": true },
"padding": { "unit": "px", "top": "80", "right": "60", "bottom": "80", "left": "60", "isLinked": false },
"padding_tablet": { "unit": "px", "top": "50", "right": "30", "bottom": "50", "left": "30", "isLinked": false },
"padding_mobile": { "unit": "px", "top": "40", "right": "20", "bottom": "40", "left": "20", "isLinked": false },
"background_background": "classic",
"background_color": "#FFFFFF"
},
"elements": []
}
Conteneur Intérieur (colonne)
{
"id": "b2c3d4e5",
"elType": "container",
"isInner": true,
"settings": {
"width": { "unit": "%", "size": 50 },
"width_tablet": { "unit": "%", "size": 100 },
"width_mobile": { "unit": "%", "size": 100 },
"flex_direction": "column",
"flex_align_items": "flex-start",
"padding": { "unit": "px", "top": "20", "right": "20", "bottom": "20", "left": "20", "isLinked": true }
},
"elements": []
}
Widget
{
"id": "c3d4e5f6",
"elType": "widget",
"widgetType": "heading",
"isInner": false,
"settings": {},
"elements": []
}
CSS → Elementor (Référence Rapide)
Table complète dans references/style-map.md.
"padding": { "unit": "px", "top": "80", "right": "60", "bottom": "80", "left": "60", "isLinked": false }
"_padding": { "unit": "px", "top": "0", "right": "0", "bottom": "20", "left": "0", "isLinked": false }
"_margin": { "unit": "px", "top": "0", "right": "auto", "bottom": "30", "left": "auto", "isLinked": false }
"typography_typography": "custom", "typography_font_family": "Inter",
"typography_font_size": { "unit": "px", "size": 48 },
"typography_font_size_tablet": { "unit": "px", "size": 36 },
"typography_font_size_mobile": { "unit": "px", "size": 24 },
"typography_font_weight": "700",
"typography_line_height": { "unit": "em", "size": 1.3 },
"typography_letter_spacing": { "unit": "px", "size": -0.5 }
"background_background": "gradient", "background_gradient_type": "linear",
"background_color": "#005AFF", "background_color_b": "#0040CC",
"background_gradient_angle": { "unit": "deg", "size": 135 }
"border_border": "solid",
"border_width": { "unit": "px", "top": "1", "right": "1", "bottom": "1", "left": "1", "isLinked": true },
"border_color": "#E5E7EB",
"border_radius": { "unit": "px", "top": "12", "right": "12", "bottom": "12", "left": "12", "isLinked": true }
"box_shadow_box_shadow_type": "yes",
"box_shadow_box_shadow": { "horizontal": 0, "vertical": 4, "blur": 24, "spread": 0, "color": "rgba(0,0,0,0.08)" }
Ce contenu a été traduit par AK Elementor Studio. Pour plus d'informations, visitez akstudio.me