Ak Elementor Studio

AK Elementor Studio

by Abanoub Khalil — Senior WordPress & Webflow Developer

---

RULE #1 — THE MOST IMPORTANT RULE IN THIS SKILL

HTML WIDGET = JAVASCRIPT  TAGS ONLY.

The html widget has exactly one valid use:
  → Embedding a  tag for JavaScript behavior

That is ALL. Nothing else ever goes in the html widget.
Not headings. Not text. Not badges. Not nav links.
Not cards. Not layouts. Not pricing. Not timelines.
Not icons. Not stats. Not ANY visual content.

Every visual element has a native Elementor widget. Use it.

---

RULE #2 — ABSOLUTE JSON RULES

1. NO COMMENTS — /* */ and // both break JSON parsing
   ❌ { /* hero */ "id": "a1b2c3d4" }    ✅ { "id": "a1b2c3d4" }

2. NO TRAILING COMMAS
   ❌ { "a": 1, "b": 2, }               ✅ { "a": 1, "b": 2 }

3. IDs = UNIQUE 8-CHAR HEX ONLY
   ❌ "id": "hero_section"              ✅ "id": "a1b2c3d4"

4. EVERY ELEMENT MUST HAVE "elements": []
   ❌ { "widgetType": "heading", "settings": {} }
   ✅ { "widgetType": "heading", "settings": {}, "elements": [] }

5. isInner RULE
   Direct children of "content": []        → "isInner": false
   Containers nested inside containers      → "isInner": true
   Widgets (inside any container)           → "isInner": false

6. HEX COLORS ONLY — never color names
   ❌ "background_color": "white"       ✅ "background_color": "#FFFFFF"

---

STEP 0 — Pre-Flight Interview

Ask all in ONE message. Never skip.

👋 Quick details before I start:

1. SITEMAP — Pages? (I generate one .json per page)

2. ELEMENTOR VERSION — Free or Pro?
   Pro: Theme Builder header/footer, custom CSS, sticky, scroll effects
   Free: header/footer = regular sections inside each page

3. CUSTOM POST TYPES — Any CPTs?
   (Services, Portfolio, Plugins, Team, Testimonials → I'll generate ACF JSON)

4. OUTPUT FORMAT
   a) Individual .json files — import one-by-one via Templates → Saved Templates (always works, Free + Pro)
   b) Elementor native export ZIP — import via Elementor → Tools → Import Kit (no extra plugin needed)
   c) Envato Template Kit ZIP — requires "Template Kit Import" plugin installed on WordPress
   d) Individual .json + ACF field group files

5. BRAND — Hex color codes + Google Fonts?
   (Or I extract from the design)

---

STEP 1 — Input Detection

| Input | Pipeline | |---|---| | HTML/CSS/JS | Code Pipeline | | PNG/JPG/WebP/screenshot/mockup/Figma | Visual Pipeline | | PDF | PDF Pipeline | | Words only | Description Pipeline | | Existing Elementor JSON | Edit Pipeline | | Mixed | Both pipelines, merged |

---

COMPLETE WIDGET REFERENCE — Native Widgets for Every Element

Text & Numbers

| Element | Widget | |---|---| | h1 / h2 / h3 / h4 / h5 / h6 | heading | | Paragraph / body text | text-editor | | Animated counter (500+, 10K) | counter | | Progress / skill bar | progress |

Actions

| Element | Widget | |---|---| | Button / CTA / link-as-button | button | | FAQ / collapsible rows | accordion | | Tab navigation | tabs | | Alert / info banner | alert |

Media

| Element | Widget | |---|---| | Photo / image | image | | YouTube / Vimeo / video | video | | Image grid | image-gallery | | Image slider / carousel | image-carousel |

Cards & Lists

| Element | Widget | |---|---| | Icon + title + description | icon-box | | Bulleted list with icons | icon-list | | Photo + title + text | image-box | | Customer quote | testimonial |

Layout Helpers

| Element | Widget | |---|---| | Horizontal line / separator | divider | | Vertical blank space | spacer |

Utilities

| Element | Widget | |---|---| | Social media icons | social-icons | | Map embed | google-maps | | Plugin/form shortcode | shortcode |

---

SOLVING COMPLEX ELEMENTS WITHOUT html WIDGET

Navigation Bar

Structure: flex container (row, space-between)
  └── image widget          ← logo
  └── icon-list widget      ← nav links (set icon to "none", each item = a page link)
      OR multiple button widgets (size: xs, style: link/ghost, one per nav item)
  └── button widget         ← CTA button

Badge / Status Pill / Tag

Option A: button widget
  text: "FULL-TIME", size: "xs", border_radius: 100px
  button_text_color: "#00D4C8", button_background_color: "rgba(0,212,200,0.1)"
  no link href (or link to "#")

Option B: alert widget
  type: "success" / "info" / "warning"
  alert_title: "WordPress Developer"
  (style with custom CSS if Pro)

Career Timeline / Work History Entry

Structure: inner container (column, border-left: 2px solid accent)
  └── inner container (row, gap: 8px)   ← date + status row
      └── text-editor widget            ← "OCT 2024 — PRESENT"
      └── button widget (xs, pill)      ← "FULL-TIME" badge
  └── heading widget (h3/h4)            ← "Senior WordPress & Webflow Developer"
  └── text-editor widget                ← "InVitro Capital — Cairo, Egypt"
  └── text-editor widget                ← description paragraph
  └── inner container (row, wrap)       ← tech tags row
      └── button widget (xs, ghost)     ← "WordPress"
      └── button widget (xs, ghost)     ← "Webflow"
      └── button widget (xs, ghost)     ← "CMS"

Contact Info Panel

Structure: styled container (background: #141628, border-radius: 12px, padding: 32px)
  └── inner container (row) per info row:
      └── text-editor widget    ← label "LOCATION" (small, muted)
      └── text-editor widget    ← value "Cairo, Egypt"
  └── inner container (row) per clickable row:
      └── text-editor widget    ← label "EMAIL"
      └── button widget         ← "hello@akstudio.me" (style: link, href: mailto:)
  └── alert widget              ← "Currently available" status
  └── button widget             ← "Book a discovery call" CTA

Skill Depth / Progress Bars

Structure: container (column)
  └── text-editor widget   ← "SKILL DEPTH" heading
  └── per skill: inner container (row)
      └── text-editor     ← "WP" label
      └── progress widget ← percent: 95, type: line, bar_color: accent
      └── text-editor     ← "Expert" label

Pricing Card

Structure: inner container (column, background: #141628, border-radius: 12px, padding: 40px)
  └── text-editor widget    ← plan tier label
  └── heading widget (h2)   ← "$99" price
  └── text-editor widget    ← "/month" period
  └── divider widget
  └── icon-list widget      ← feature list (checkmark icons)
  └── button widget         ← "Get Started" CTA (full width)

Testimonial Card

Use testimonial widget (handles everything natively):
  image: avatar URL, name: "Client Name", title: "CEO, Company"
  content: "Quote text here"

OR custom layout:
  inner container (column)
    └── icon-list widget (1 item, star icon × 5)  ← star rating
    └── text-editor widget                         ← quote text
    └── inner container (row)
        └── image widget (border-radius: 50%)      ← avatar
        └── inner container (column)
            └── heading widget (h5)                ← name
            └── text-editor widget                 ← title/company

Logo Cloud / Partner Logos

Use image-carousel widget:
  slides: [logo1, logo2, logo3, logo4, logo5]
  slides_to_show: 5, autoplay: yes, navigation: none
  image_size: medium

Footer Column Structure

Column 1 (brand col):
  └── image widget          ← logo
  └── text-editor widget    ← tagline
  └── social-icons widget   ← LinkedIn, GitHub, Twitter

Columns 2-4 (link cols):
  └── heading widget (h5)   ← "Quick Links" / "Services" / "Contact"
  └── icon-list widget      ← links (icon: none or arrow, one per link)

Bottom bar:
  └── container (row, space-between)
      └── text-editor       ← "© 2025 Abanoub Khalil"
      └── text-editor       ← privacy / terms links (inline  tags)

---

Code Pipeline

Step 1 — Inventory

For every element: name it, declare its native widget, explain why. If you considered html widget, apply the JS-only self-check first.

Step 2 — Widget Assignment

Zero visual content in html widget. Apply the Complete Widget Reference above.

Step 3 — CSS Extraction

Map CSS → Elementor settings (references/style-map.md). CSS variables → resolve to hex.

Step 4 — JSON Build

Section by section. Validate as you write.

Step 5 — Output

One .json per page. No comments. All IDs unique 8-char hex.

---

Visual Pipeline

Phase 1 — Inventory (top to bottom)

NAVBAR:
  Logo: [position / type: image or text]
  Nav links: [list each] → icon-list items OR button widgets
  CTA button(s): [text / color hex]
  Background: [#HEX or transparent]

HERO:
  BG: [solid #HEX / gradient #X→#Y Ndeg / image overlay / video]
  Layout: [centered / text-left+image-right]
  Min-height: [100vh / fixed px]
  Elements:
    [badge?] → alert widget or button widget (xs, pill)
    [h1] → heading widget
    [h3/subtitle] → heading widget
    [description] → text-editor widget
    [CTA buttons] → button widgets
    [image] → image widget

SECTION N:
  Purpose: [features / stats / about / timeline / contact panel / testimonials / CTA]
  Layout: [1-col / 2-col / 3-col / 4-col]
  Background: [#HEX]
  Per column: list native widget for each element

FOOTER: [N columns, content per column]

Phase 2 — Colors

Extract hex for: primary, secondary, accent, heading text, body text, muted, light bg, dark bg, card bg, border. → Full reference table in references/visual-analysis.md

Phase 3 — Typography

Heading font, body font, label font — family, weight, desktop/tablet/mobile sizes.

Phase 4 — Layout Mapping

Use container grid in references/section-patterns.md.

Phase 5 — Widget Assignment

Apply Complete Widget Reference. Zero html widgets for visual content.

Phase 6 — Spacing

Section pad: 60-80px standard, 100-120px hero. Card pad: 24-32px. Gap: 20-30px.

Phase 7 — Analysis Summary + JSON

## 🔍 Visual Analysis — [Page]

**Pages detected:** [list]
**Style:** [Dark/Light/Bold/Minimal]

| Token | Value |
|---|---|
| Primary | #______ |
| Accent | #______ |
| Heading text | #______ |
| Body text | #______ |
| Background | #______ |
| Heading font | Inter 700 |

**Widget map:**
1. Navbar → image + icon-list + button
2. Hero → alert (badge) + heading + text-editor + button + image
3. Stats → N× counter widgets
4. Timeline → N× [text-editor + button (badge) + heading + text-editor + button row] per entry
5. Contact panel → styled container + text-editor rows + button links + alert + button
6. Footer → image + text-editor + social-icons + icon-list columns

**html widgets used:** [List ONLY  JS uses. If none: "None."]

**Assumptions:** [list all approximations]
**⚠️ After import:** replace placeholder images, update nav links

---

PDF Pipeline

Single PDF → Visual Pipeline. Multi-page → one template per page. Selectable text → extract exact copy.

Description Pipeline

Ask page type. Apply Widget Reference. Use defaults: primary #1A1A2E, accent #005AFF, font Inter.

Edit Pipeline

Parse → locate → change → re-output full valid JSON → summarize.

---

Core Schemas

Section 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": []
}

Inner Container (column)

{
  "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 (Quick Reference)

Full table 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)" }

---

Responsive

"width": { "unit": "%", "size": 33 },
"width_tablet": { "unit": "%", "size": 50 },
"width_mobile": { "unit": "%", "size": 100 }

---

Multi-Page Output

1. One .json per page
2. Elementor Pro → header.json + footer.json (type: "header" / "footer")
3. Elementor Free → header/footer as regular container sections inside each page

---

✅ Import Methods — Tested & Verified

⚠️ CRITICAL: Three completely different ZIP formats exist. Using the wrong one causes "Couldn't use the .zip file" in Elementor's importer. Match the format to the method.

---

Method 1 — Individual .json per template (ALWAYS WORKS — Free + Pro)

Recommended default. No plugins required. Works on any Elementor version.

Steps:
  1. Elementor → Templates → Saved Templates → Import Templates (↑ icon)
  2. Upload one .json file at a time → Import Now
  3. Repeat for each page (global-styles first, then header/footer, then pages)
  4. Create a WordPress page → Edit with Elementor
     → folder icon (My Templates) → find template → Insert

Each .json file envelope format (single template):
{
  "version": "0.4",
  "title": "Page Name",
  "type": "page",          ← "page" | "header" | "footer" | "kit-styles"
  "content": [...],        ← the elements array from your page JSON
  "page_settings": {},
  "settings": {}
}

---

Method 2 — Elementor Native Export ZIP (no extra plugin needed)

Works via: Elementor → Tools → Import Kit
Does NOT require Template Kit Import plugin.
This is what Elementor exports natively when you use Tools → Export Kit.

⚠️ Do NOT confuse manifest.json with Envato's kit.json — they are different formats.

ZIP structure:
kit-export.zip
├── manifest.json                    ← required, exact format below
├── ak-header/
│   └── template.json
├── ak-footer/
│   └── template.json
├── ak-home/
│   └── template.json
└── ak-about/
    └── template.json                (one folder per template, folder name is arbitrary)

manifest.json format:
{
  "name": "Kit Name",
  "title": "Kit

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [abanoubkhaliil](https://github.com/abanoubkhaliil)
- **Source:** [abanoubkhaliil/Ak-Elementor-Studio](https://github.com/abanoubkhaliil/Ak-Elementor-Studio)
- **License:** MIT
- **Homepage:** https://akstudio.me

Install and usage instructions live in the source repository linked above.