AK Elementor Studio
von Abanoub Khalil — Senior WordPress & Webflow-Entwickler
REGEL #1 — DIE WICHTIGSTE REGEL DIESER FÄHIGKEIT
HTML-WIDGET = NUR JAVASCRIPT-<script>-TAGS.
Das HTML-Widget hat genau eine gültige Verwendung:
→ Einbetten eines <script>-Tags für JavaScript-Verhalten
Das ist ALLES. Nichts anderes kommt jemals in das HTML-Widget.
Keine Überschriften. Kein Text. Keine Abzeichen. Keine Navigationslinks.
Keine Karten. Keine Layouts. Keine Preisangaben. Keine Zeitachsen.
Keine Symbole. Keine Statistiken. Keine visuellen Inhalte.
Jedes visuelle Element hat ein natives Elementor-Widget. Verwende es.
REGEL #2 — ABSOLUTE JSON-REGELN
1. KEINE KOMMENTARE — /* */ und // zerstören beide die JSON-Analyse
❌ { /* hero */ "id": "a1b2c3d4" } ✅ { "id": "a1b2c3d4" }
2. KEINE NACHKOMMAS
❌ { "a": 1, "b": 2, } ✅ { "a": 1, "b": 2 }
3. IDs = NUR EINZIGARTIGES 8-ZEICHEN-HEX
❌ "id": "hero_section" ✅ "id": "a1b2c3d4"
4. JEDES ELEMENT MUSS "elements": [] HABEN
❌ { "widgetType": "heading", "settings": {} }
✅ { "widgetType": "heading", "settings": {}, "elements": [] }
5. isInner-REGEL
Direkte Kinder von "content": [] → "isInner": false
Container, die in anderen Containern verschachtelt sind → "isInner": true
Widgets (innerhalb eines Containers) → "isInner": false
6. NUR HEX-FARBEN — niemals Farbnamen
❌ "background_color": "white" ✅ "background_color": "#FFFFFF"
SCHRITT 0 — Vorab-Interview
Frage alles in EINER Nachricht. Niemals überspringen.
👋 Kurze Details, bevor ich starte:
1. SITEMAP — Seiten? (Ich generiere eine .json pro Seite)
2. ELEMENTOR-VERSION — Kostenlos oder Pro?
Pro: Theme Builder Header/Footer, benutzerdefiniertes CSS, Sticky, Scroll-Effekte
Kostenlos: Header/Footer = normale Abschnitte innerhalb jeder Seite
3. BENUTZERDEFINIERTE BEITRAGSTYPEN (CPT) — Gibt es CPTs?
(Services, Portfolio, Plugins, Team, Testimonials → Ich generiere ACF-JSON)
4. AUSGABEFORMAT
a) Einzelne .json-Dateien — einzeln importieren über Vorlagen → Gespeicherte Vorlagen (funktioniert immer, Kostenlos + Pro)
b) Elementor-nativer Export-ZIP — importieren über Elementor → Werkzeuge → Kit importieren (kein zusätzliches Plugin nötig)
c) Envato-Template-Kit-ZIP — erfordert das installierte "Template Kit Import"-Plugin auf WordPress
d) Einzelne .json + ACF-Feldgruppen-Dateien
5. MARKE — Hex-Farbcodes + Google Fonts?
(Oder ich extrahiere aus dem Design)
SCHRITT 1 — Eingabeerkennung
| Eingabe | Pipeline |
|---|---|
| HTML/CSS/JS | Code-Pipeline |
| PNG/JPG/WebP/Screenshot/Mockup/Figma | Visuelle Pipeline |
| PDF-Pipeline | |
| Nur Wörter | Beschreibungs-Pipeline |
| Vorhandenes Elementor-JSON | Edit-Pipeline |
| Gemischt | Beide Pipelines, zusammengeführt |
VOLLSTÄNDIGE WIDGET-REFERENZ — Native Widgets für jedes Element
Text & Zahlen
| Element | Widget |
|---|---|
| h1 / h2 / h3 / h4 / h5 / h6 | heading |
| Absatz / Fließtext | text-editor |
| Animierter Zähler (500+, 10K) | counter |
| Fortschritts-/Fähigkeitsbalken | progress |
Aktionen
| Element | Widget |
|---|---|
| Button / CTA / Link-als-Button | button |
| FAQ / einklappbare Zeilen | accordion |
| Tab-Navigation | tabs |
| Warnung / Info-Banner | alert |
Medien
| Element | Widget |
|---|---|
| Foto / Bild | image |
| YouTube / Vimeo / Video | video |
| Bildergalerie | image-gallery |
| Bild-Slider / Karussell | image-carousel |
Karten & Listen
| Element | Widget |
|---|---|
| Symbol + Titel + Beschreibung | icon-box |
| Aufzählungsliste mit Symbolen | icon-list |
| Foto + Titel + Text | image-box |
| Kundenmeinung | testimonial |
Layout-Helfer
| Element | Widget |
|---|---|
| Horizontale Linie / Trennlinie | divider |
| Vertikaler Leerraum | spacer |
Dienstprogramme
| Element | Widget |
|---|---|
| Social-Media-Symbole | social-icons |
| Karten-Einbettung | google-maps |
| Plugin-/Formular-Shortcode | shortcode |
KOMPLEXE ELEMENTE OHNE html-WIDGET LÖSEN
Navigationsleiste
Struktur: Flex-Container (Zeile, space-between)
└── Bild-Widget ← Logo
└── icon-list-Widget ← Navigationslinks (Symbol auf "none" setzen, jedes Element = ein Seitenlink)
ODER mehrere Button-Widgets (Größe: xs, Stil: link/ghost, einer pro Navigationselement)
└── Button-Widget ← CTA-Button
Abzeichen / Status-Pille / Tag
Option A: Button-Widget
Text: "VOLLZEIT", Größe: "xs", border_radius: 100px
button_text_color: "#00D4C8", button_background_color: "rgba(0,212,200,0.1)"
kein Link-Href (oder Link auf "#")
Option B: alert-Widget
Typ: "success" / "info" / "warning"
alert_title: "WordPress-Entwickler"
(mit benutzerdefiniertem CSS stylen, falls Pro)
Beruflicher Werdegang / Arbeitseintrag
Struktur: inner container (Spalte, border-left: 2px solid accent)
└── inner container (Zeile, Abstand: 8px) ← Datums- + Statuszeile
└── text-editor-Widget ← "OKT 2024 — HEUTE"
└── Button-Widget (xs, Pille) ← "VOLLZEIT"-Abzeichen
└── heading-Widget (h3/h4) ← "Senior WordPress & Webflow-Entwickler"
└── text-editor-Widget ← "InVitro Capital — Kairo, Ägypten"
└── text-editor-Widget ← Beschreibungsabsatz
└── inner container (Zeile, wrap) ← Technologie-Tag-Zeile
└── Button-Widget (xs, ghost) ← "WordPress"
└── Button-Widget (xs, ghost) ← "Webflow"
└── Button-Widget (xs, ghost) ← "CMS"
Kontaktinformations-Panel
Struktur: gestalteter Container (Hintergrund: #141628, border-radius: 12px, padding: 32px)
└── inner container (Zeile) pro Informationszeile:
└── text-editor-Widget ← Label "STANDORT" (klein, dezent)
└── text-editor-Widget ← Wert "Kairo, Ägypten"
└── inner container (Zeile) pro klickbarer Zeile:
└── text-editor-Widget ← Label "E-MAIL"
└── Button-Widget ← "[email protected]" (Stil: link, href: mailto:)
└── alert-Widget ← "Derzeit verfügbar"-Status
└── Button-Widget ← "Beratungstermin buchen"-CTA
Fähigkeits-Tiefe / Fortschrittsbalken
Struktur: container (Spalte)
└── text-editor-Widget ← "FÄHIGKEITSTIEFE"-Überschrift
└── pro Fähigkeit: inner container (Zeile)
└── text-editor ← "WP"-Label
└── progress-Widget ← Prozent: 95, Typ: line, bar_color: accent
└── text-editor ← "Experte"-Label
Preiskarte
Struktur: inner container (Spalte, Hintergrund: #141628, border-radius: 12px, padding: 40px)
└── text-editor-Widget ← Tarifstufen-Label
└── heading-Widget (h2) ← "$99"-Preis
└── text-editor-Widget ← "/Monat"-Zeitraum
└── divider-Widget
└── icon-list-Widget ← Funktionsliste (Hakensymbole)
└── Button-Widget ← "Jetzt starten"-CTA (volle Breite)
Testimonial-Karte
Verwende testimonial-Widget (behandelt alles nativ):
image: Avatar-URL, name: "Kundenname", title: "Geschäftsführer, Firma"
content: "Zitattext hier"
ODER benutzerdefiniertes Layout:
inner container (Spalte)
└── icon-list-Widget (1 Element, Stern-Symbol × 5) ← Sternebewertung
└── text-editor-Widget ← Zitattext
└── inner container (Zeile)
└── image-Widget (border-radius: 50%) ← Avatar
└── inner container (Spalte)
└── heading-Widget (h5) ← Name
└── text-editor-Widget ← Titel/Firma
Logo-Cloud / Partnerlogos
Verwende image-carousel-Widget:
slides: [logo1, logo2, logo3, logo4, logo5]
slides_to_show: 5, Autoplay: ja, Navigation: keine
image_size: medium
Fußzeilen-Spaltenstruktur
Spalte 1 (Markenspalte):
└── image-Widget ← Logo
└── text-editor-Widget ← Slogan
└── social-icons-Widget ← LinkedIn, GitHub, Twitter
Spalten 2-4 (Linkspalten):
└── heading-Widget (h5) ← "Schnelllinks" / "Dienstleistungen" / "Kontakt"
└── icon-list-Widget ← Links (Symbol: none oder Pfeil, einer pro Link)
Untere Leiste:
└── container (Zeile, space-between)
└── text-editor ← "© 2025 Abanoub Khalil"
└── text-editor ← Datenschutz-/AGB-Links (inline <a>-Tags)
Code-Pipeline
Schritt 1 — Bestandsaufnahme
Für jedes Element: benenne es, deklariere sein natives Widget, erkläre warum. Wenn du das HTML-Widget in Betracht gezogen hast, führe zuerst die JS-only-Selbstprüfung durch.
Schritt 2 — Widget-Zuweisung
Kein visueller Inhalt im HTML-Widget. Wende die vollständige Widget-Referenz oben an.
Schritt 3 — CSS-Extraktion
CSS → Elementor-Einstellungen zuordnen (references/style-map.md). CSS-Variablen → in Hex auflösen.
Schritt 4 — JSON-Erstellung
Abschnitt für Abschnitt. Beim Schreiben validieren.
Schritt 5 — Ausgabe
Eine .json pro Seite. Keine Kommentare. Alle IDs eindeutig 8-stelliges Hex.
Visuelle Pipeline
Phase 1 — Bestandsaufnahme (von oben nach unten)
NAVLEISTE:
Logo: [Position / Typ: Bild oder Text]
Navigationslinks: [jeden auflisten] → icon-list-Elemente ODER Button-Widgets
CTA-Button(s): [Text / Farbe Hex]
Hintergrund: [#HEX oder transparent]
HERO:
HG: [Einfarbig #HEX / Verlauf #X→#Y Ngrad / Bild-Overlay / Video]
Layout: [zentriert / Text-links+Bild-rechts]
Min-Höhe: [100vh / feste px]
Elemente:
[Abzeichen?] → alert-Widget oder Button-Widget (xs, Pille)
[h1] → heading-Widget
[h3/Untertitel] → heading-Widget
[Beschreibung] → text-editor-Widget
[CTA-Buttons] → Button-Widgets
[Bild] → image-Widget
ABSCHNITT N:
Zweck: [Funktionen / Statistiken / Über mich / Zeitleiste / Kontakt-Panel / Testimonials / CTA]
Layout: [1-spaltig / 2-spaltig / 3-spaltig / 4-spaltig]
Hintergrund: [#HEX]
Pro Spalte: natives Widget für jedes Element auflisten
FUSSZEILE: [N Spalten, Inhalt pro Spalte]
Phase 2 — Farben
Hex extrahieren für: primäre, sekundäre, Akzentfarbe, Überschriftentext, Fließtext, dezent, heller HG, dunkler HG, Karten-HG, Rand.
→ Vollständige Referenztabelle in references/visual-analysis.md
Phase 3 — Typografie
Überschriften-Schriftart, Text-Schriftart, Label-Schriftart — Familie, Gewicht, Desktop-/Tablet-/Mobilgrößen.
Phase 4 — Layout-Zuordnung
Verwende das Container-Raster in references/section-patterns.md.
Phase 5 — Widget-Zuweisung
Wende die vollständige Widget-Referenz an. Keine HTML-Widgets für visuelle Inhalte.
Phase 6 — Abstände
Abschnitt-Pad: 60-80px Standard, 100-120px Hero. Karten-Pad: 24-32px. Abstand: 20-30px.
Phase 7 — Analyse-Zusammenfassung + JSON
## 🔍 Visuelle Analyse — [Seite]
**Erkannte Seiten:** [Liste]
**Stil:** [Dunkel/Hell/Fett/Minimal]
| Token | Wert |
|---|---|
| Primär | #______ |
| Akzentfarbe | #______ |
| Überschriftentext | #______ |
| Fließtext | #______ |
| Hintergrund | #______ |
| Überschriften-Schriftart | Inter 700 |
**Widget-Zuordnung:**
1. Navleiste → image + icon-list + button
2. Hero → alert (Abzeichen) + heading + text-editor + button + image
3. Statistiken → N× counter-Widgets
4. Zeitleiste → N× [text-editor + button (Abzeichen) + heading + text-editor + button-Zeile] pro Eintrag
5. Kontakt-Panel → gestalteter Container + text-editor-Zeilen + button-Links + alert + button
6. Fußzeile → image + text-editor + social-icons + icon-list-Spalten
**Verwendete HTML-Widgets:** [Nur <script>-JS-Verwendungen auflisten. Wenn keine: "Keine."]
**Annahmen:** [alle Näherungen auflisten]
**⚠️ Nach dem Import:** Platzhalterbilder ersetzen, Navigationslinks aktualisieren
PDF-Pipeline
Einzelnes PDF → Visuelle Pipeline. Mehrseitiges PDF → eine Vorlage pro Seite. Auswählbarer Text → exakten Text extrahieren.
Beschreibungs-Pipeline
Seitentyp erfragen. Widget-Referenz anwenden. Standardwerte verwenden: primär #1A1A2E, Akzentfarbe #005AFF, Schriftart Inter.
Edit-Pipeline
Analysieren → lokalisieren → ändern → vollständiges gültiges JSON erneut ausgeben → zusammenfassen.
Kern-Schemas
Abschnitts-Container
{
"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": []
}
Innerer Container (Spalte)
{
"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 (Kurzreferenz)
Vollständige Tabelle in 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)" }
…
[aus Platzgründen gekürzt]