AK Elementor Studio
por Abanoub Khalil — Desenvolvedor Senior WordPress & Webflow
REGRA #1 — A REGRA MAIS IMPORTANTE DESTA SKILL
O WIDGET HTML = SOMENTE TAGS <script> JAVASCRIPT.
O widget html tem exatamente um uso válido:
→ Incorporar uma tag <script> para comportamento JavaScript
Isso é TUDO. Nada mais vai no widget html.
Nem títulos. Nem texto. Nem badges. Nem links de navegação.
Nem cards. Nem layouts. Nem preços. Nem cronogramas.
Nem ícones. Nem estatísticas. Nenhum conteúdo visual.
Cada elemento visual tem um widget nativo do Elementor. Use ele.
REGRA #2 — REGRAS ABSOLUTAS DE JSON
1. SEM COMENTÁRIOS — /* */ e // quebram a análise JSON
❌ { /* hero */ "id": "a1b2c3d4" } ✅ { "id": "a1b2c3d4" }
2. SEM VÍRGULAS FINAIS
❌ { "a": 1, "b": 2, } ✅ { "a": 1, "b": 2 }
3. IDs = SOMENTE HEXADECIMAL DE 8 CARACTERES ÚNICO
❌ "id": "hero_section" ✅ "id": "a1b2c3d4"
4. TODO ELEMENTO DEVE TER "elements": []
❌ { "widgetType": "heading", "settings": {} }
✅ { "widgetType": "heading", "settings": {}, "elements": [] }
5. REGRA isInner
Filhos diretos de "content": [] → "isInner": false
Contêineres aninhados dentro de contêineres → "isInner": true
Widgets (dentro de qualquer contêiner) → "isInner": false
6. APENAS CORES HEX — nunca nomes de cores
❌ "background_color": "white" ✅ "background_color": "#FFFFFF"
ETAPA 0 — Entrevista Pré-Voo
Pergunte tudo em UMA mensagem. Nunca pule.
👋 Detalhes rápidos antes de eu começar:
1. MAPA DO SITE — Páginas? (Eu gero um .json por página)
2. VERSÃO DO ELEMENTOR — Gratuito ou Pro?
Pro: Theme Builder header/footer, CSS personalizado, sticky, efeitos de rolagem
Gratuito: header/footer = seções regulares dentro de cada página
3. TIPOS DE POST PERSONALIZADOS — Algum CPT?
(Serviços, Portfólio, Plugins, Equipe, Depoimentos → Vou gerar JSON ACF)
4. FORMATO DE SAÍDA
a) Arquivos .json individuais — importe um por um via Modelos → Modelos Salvos (sempre funciona, Gratuito + Pro)
b) ZIP de exportação nativa do Elementor — importe via Elementor → Ferramentas → Importar Kit (nenhum plugin extra necessário)
c) ZIP de Kit de Modelo Envato — requer o plugin "Template Kit Import" instalado no WordPress
d) .json individual + arquivos de grupo de campos ACF
5. MARCA — Códigos hexadecimais de cores + Google Fontes?
(Ou eu extraio do design)
ETAPA 1 — Detecção de Entrada
| Entrada | Pipeline |
|---|---|
| HTML/CSS/JS | Pipeline de Código |
| PNG/JPG/WebP/captura de tela/maquete/Figma | Pipeline Visual |
| Pipeline de PDF | |
| Apenas palavras | Pipeline de Descrição |
| JSON do Elementor existente | Pipeline de Edição |
| Misto | Ambas as pipelines, mescladas |
REFERÊNCIA COMPLETA DE WIDGETS — Widgets Nativos para Cada Elemento
Texto e Números
| Elemento | Widget |
|---|---|
| h1 / h2 / h3 / h4 / h5 / h6 | heading |
| Parágrafo / texto do corpo | text-editor |
| Contador animado (500+, 10K) | counter |
| Barra de progresso / habilidade | progress |
Ações
| Elemento | Widget |
|---|---|
| Botão / CTA / link-como-botão | button |
| FAQ / linhas recolhíveis | accordion |
| Navegação por abas | tabs |
| Alerta / banner informativo | alert |
Mídia
| Elemento | Widget |
|---|---|
| Foto / imagem | image |
| YouTube / Vimeo / vídeo | video |
| Grade de imagens | image-gallery |
| Slider / carrossel de imagens | image-carousel |
Cards e Listas
| Elemento | Widget |
|---|---|
| Ícone + título + descrição | icon-box |
| Lista com marcadores e ícones | icon-list |
| Foto + título + texto | image-box |
| Citação de cliente | testimonial |
Auxiliares de Layout
| Elemento | Widget |
|---|---|
| Linha horizontal / separador | divider |
| Espaço em branco vertical | spacer |
Utilidades
| Elemento | Widget |
|---|---|
| Ícones de mídia social | social-icons |
| Incorporação de mapa | google-maps |
| Shortcode de plugin/formulário | shortcode |
RESOLVENDO ELEMENTOS COMPLEXOS SEM O WIDGET html
Barra de Navegação
Estrutura: contêiner flex (linha, space-between)
└── widget image ← logotipo
└── widget icon-list ← links de navegação (defina ícone como "nenhum", cada item = um link de página)
OU múltiplos widgets button (tamanho: xs, estilo: link/ghost, um por item de navegação)
└── widget button ← botão CTA
Badge / Pílula de Status / Tag
Opção A: widget button
texto: "PERÍODO INTEGRAL", tamanho: "xs", border_radius: 100px
button_text_color: "#00D4C8", button_background_color: "rgba(0,212,200,0.1)"
sem href de link (ou link para "#")
Opção B: widget alert
tipo: "success" / "info" / "warning"
alert_title: "Desenvolvedor WordPress"
(estilize com CSS personalizado se for Pro)
Linha do Tempo de Carreira / Entrada de Histórico de Trabalho
Estrutura: contêiner interno (coluna, border-left: 2px solid accent)
└── contêiner interno (linha, gap: 8px) ← linha de data + status
└── widget text-editor ← "OUT 2024 — PRESENTE"
└── widget button (xs, pill) ← badge "PERÍODO INTEGRAL"
└── widget heading (h3/h4) ← "Desenvolvedor Senior WordPress & Webflow"
└── widget text-editor ← "InVitro Capital — Cairo, Egito"
└── widget text-editor ← parágrafo de descrição
└── contêiner interno (linha, wrap) ← linha de tags de tecnologia
└── widget button (xs, ghost) ← "WordPress"
└── widget button (xs, ghost) ← "Webflow"
└── widget button (xs, ghost) ← "CMS"
Painel de Informações de Contato
Estrutura: contêiner estilizado (background: #141628, border-radius: 12px, padding: 32px)
└── contêiner interno (linha) por linha de informação:
└── widget text-editor ← rótulo "LOCALIZAÇÃO" (pequeno, suave)
└── widget text-editor ← valor "Cairo, Egito"
└── contêiner interno (linha) por linha clicável:
└── widget text-editor ← rótulo "EMAIL"
└── widget button ← "[email protected]" (estilo: link, href: mailto:)
└── widget alert ← status "Atualmente disponível"
└── widget button ← CTA "Agende uma chamada de descoberta"
Profundidade de Habilidade / Barras de Progresso
Estrutura: contêiner (coluna)
└── widget text-editor ← título "PROFUNDIDADE DE HABILIDADE"
└── por habilidade: contêiner interno (linha)
└── text-editor ← rótulo "WP"
└── widget progress ← percentual: 95, tipo: line, bar_color: accent
└── text-editor ← rótulo "Especialista"
Card de Preço
Estrutura: contêiner interno (coluna, background: #141628, border-radius: 12px, padding: 40px)
└── widget text-editor ← rótulo do nível do plano
└── widget heading (h2) ← preço "$99"
└── widget text-editor ← período "/mês"
└── widget divider
└── widget icon-list ← lista de recursos (ícones de marca de seleção)
└── widget button ← CTA "Comece Agora" (largura total)
Card de Depoimento
Use widget testimonial (lida com tudo nativamente):
image: URL do avatar, name: "Nome do Cliente", title: "CEO, Empresa"
content: "Texto da citação aqui"
OU layout personalizado:
contêiner interno (coluna)
└── widget icon-list (1 item, ícone de estrela × 5) ← classificação por estrelas
└── widget text-editor ← texto da citação
└── contêiner interno (linha)
└── widget image (border-radius: 50%) ← avatar
└── contêiner interno (coluna)
└── widget heading (h5) ← nome
└── widget text-editor ← título/empresa
Nuvem de Logotipos / Logotipos de Parceiros
Use widget image-carousel:
slides: [logo1, logo2, logo3, logo4, logo5]
slides_to_show: 5, autoplay: sim, navigation: nenhum
image_size: medium
Estrutura de Coluna de Rodapé
Coluna 1 (coluna da marca):
└── widget image ← logotipo
└── widget text-editor ← slogan
└── widget social-icons ← LinkedIn, GitHub, Twitter
Colunas 2-4 (colunas de links):
└── widget heading (h5) ← "Links Rápidos" / "Serviços" / "Contato"
└── widget icon-list ← links (ícone: nenhum ou seta, um por link)
Barra inferior:
└── contêiner (linha, space-between)
└── text-editor ← "© 2025 Abanoub Khalil"
└── text-editor ← links de privacidade / termos (tags <a> inline)
Pipeline de Código
Etapa 1 — Inventário
Para cada elemento: nomeie-o, declare seu widget nativo, explique o porquê. Se você considerou o widget html, aplique a autoverificação somente JS primeiro.
Etapa 2 — Atribuição de Widget
Zero conteúdo visual no widget html. Aplique a Referência Completa de Widgets acima.
Etapa 3 — Extração de CSS
Mapeie CSS → configurações do Elementor (references/style-map.md). Variáveis CSS → resolva para hex.
Etapa 4 — Construção do JSON
Seção por seção. Valide enquanto escreve.
Etapa 5 — Saída
Um .json por página. Sem comentários. Todos os IDs em hexadecimal de 8 caracteres únicos.
Pipeline Visual
Fase 1 — Inventário (de cima para baixo)
NAVBAR:
Logotipo: [posição / tipo: imagem ou texto]
Links de navegação: [liste cada um] → itens icon-list OU widgets button
Botão(ões) CTA: [texto / código hex de cor]
Fundo: [#HEX ou transparente]
HERO:
BG: [sólido #HEX / gradiente #X→#Y Ndeg / sobreposição de imagem / vídeo]
Layout: [centralizado / texto-esquerda+imagem-direita]
Altura mínima: [100vh / px fixo]
Elementos:
[badge?] → widget alert ou widget button (xs, pill)
[h1] → widget heading
[h3/subtítulo] → widget heading
[descrição] → widget text-editor
[botões CTA] → widgets button
[imagem] → widget image
SEÇÃO N:
Propósito: [recursos / estatísticas / sobre / linha do tempo / painel de contato / depoimentos / CTA]
Layout: [1-col / 2-col / 3-col / 4-col]
Fundo: [#HEX]
Por coluna: liste o widget nativo para cada elemento
RODAPÉ: [N colunas, conteúdo por coluna]
Fase 2 — Cores
Extraia hex para: primária, secundária, destaque, texto de título, texto do corpo, suave, fundo claro, fundo escuro, fundo de card, borda.
→ Tabela de referência completa em references/visual-analysis.md
Fase 3 — Tipografia
Fonte do título, fonte do corpo, fonte do rótulo — família, peso, tamanhos desktop/tablet/mobile.
Fase 4 — Mapeamento de Layout
Use grade de contêiner em references/section-patterns.md.
Fase 5 — Atribuição de Widget
Aplique a Referência Completa de Widgets. Zero widgets html para conteúdo visual.
Fase 6 — Espaçamento
Padding da seção: 60-80px padrão, 100-120px hero. Padding do card: 24-32px. Gap: 20-30px.
Fase 7 — Resumo da Análise + JSON
## 🔍 Análise Visual — [Página]
**Páginas detectadas:** [listar]
**Estilo:** [Escuro/Claro/Ousado/Mínimo]
| Token | Valor |
|---|---|
| Primária | #______ |
| Destaque | #______ |
| Texto do título | #______ |
| Texto do corpo | #______ |
| Fundo | #______ |
| Fonte do título | Inter 700 |
**Mapa de widgets:**
1. Navbar → image + icon-list + button
2. Hero → alert (badge) + heading + text-editor + button + image
3. Estatísticas → N× widgets counter
4. Linha do tempo → N× [text-editor + button (badge) + heading + text-editor + linha de button] por entrada
5. Painel de contato → contêiner estilizado + linhas text-editor + links button + alert + button
6. Rodapé → image + text-editor + social-icons + colunas icon-list
**Widgets html usados:** [Liste SOMENTE usos de <script> JS. Se nenhum: "Nenhum."]
**Suposições:** [liste todas as aproximações]
**⚠️ Após importação:** substitua imagens de placeholder, atualize links de navegação
Pipeline de PDF
PDF único → Pipeline Visual. Várias páginas → um modelo por página. Texto selecionável → extraia cópia exata.
Pipeline de Descrição
Pergunte o tipo de página. Aplique a Referência de Widgets. Use padrões: primária #1A1A2E, destaque #005AFF, fonte Inter.
Pipeline de Edição
Analise → localize → altere → re-saída JSON completo válido → resuma.
Esquemas Principais
Contêiner de Seção
{
"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": []
}
Contêiner Interno (coluna)
{
"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 (Referência Rápida)
Tabela completa em 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)" }
Instruções Avançadas de Layout (para design responsivo)
Seção
"elType": "container"
"isInner": false ← filho direto de "content": []
Responsividade de largura: Desktop: "width": { "unit": "%", "size": 100 } ← ocupa largura total do pai Tablet: "width_tablet": { "unit": "%", "size": 100 } Mobile: "width_mobile": { "unit": "%", "size": 100 }
Largura máxima:
"_element_width": "auto",
"_element_custom_width": { "unit": "px", "size": 1200, "sizes": { "desktop": { "unit": "px", "size": 1200 }, "tablet": { "unit": "%", "size": 100 }, "mobile": { "unit": "%", "size": 100 } } }
Coluna (Contêiner Interno)
"elType": "container"
"isInner": true
Largura da coluna (fração da largura da seção pai):
"width": { "unit": "%", "size": 33.33 } ← desktop: 1/3
"width_tablet": { "unit": "%", "size": 50 } ← tablet: 1/2
"width_mobile": { "unit": "%", "size": 100 } ← mobile: empilhado
Layout flex na coluna:
"flex_direction": "column",
"flex_align_items": "flex-start", ← ou "center" / "stretch"
"flex_justify_content": "flex-start",
"flex_gap": { "unit": "px", "size": 20 }
Widget (em uma coluna)
"elType": "widget",
"isInner": false ← sempre false para widgets
Largura do widget:
"_element_width": "auto", ← padrão = largura da coluna
OU "_element_width": "initial", ← largura automática do conteúdo
"align": "left" ← alinhamento do widget dentro da coluna
Alinhamento do texto do widget:
"text_align": "center"
Regras de Atributos Responsivos
Sempre forneça 3 tamanhos para valores-chave:
- Configuração base → desktop e padrão
_tabletsufixo → abaixo de 1024px_mobilesufixo → abaixo de 768px
"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 }
Manipulação de Interação
Efeitos de Hover
".elementor-button:hover": {
"background_color": "#003399",
"color": "#FFFFFF"
}
Efeitos de Rolagem (Pro)
"motion_fx_motion_fx_scrolling": "yes",
"motion_fx_translateY_effect": "yes",
"motion_fx_translateY_speed": { "unit": "px", "size": 4 },
"motion_fx_translateY_affectedRange": { "unit": "%", "sizes": { "start": 0, "end": 100 } }
Manipulação de Conteúdo Dinâmico
Para sites WordPress que usam tipos de post personalizados com Advanced Custom Fields (ACF):
"text": null,
"dynamic_settings": {
"text": "[field name='nome_do_campo']"
}
Uso comum:
- Cabeçalhos de post:
[post:title] - Conteúdo do post:
[post:content] - Imagem destacada:
[post:featured_image] - Campos ACF personalizados:
[field name='preco_servico'] - Campos de taxonomia:
[post:terms taxonomy='categoria_servico'] - Imagem de avatar do autor:
[post:author_avatar]
Conteúdo Dinâmico ACF — Exemplo de Template de Serviço
{
"widgetType": "heading",
"settings": {
"text": null,
"dynamic_settings": {
"text": "[post:title]"
},
"header_size": "h1"
}
}
Notas Finais
- Use a REGRA #1 como sua verificação final: se algo visual está em um widget html, pare e encontre o widget nativo correto.
- Use REGRA #2 para verificação de validade JSON: sem comentários, sem vírgulas finais, IDs hexadecimais, "elements": [] em todos os lugares, "isInner" correto.
- Verifique novamente suas fontes: elas devem vir de Google Fonts? Inclua-as no cabeçalho do modelo ou na configuração global do Elementor?
- Use imagens placeholder de https://via.placeholder.com/800x600 com texto alternativo descritivo.
Criado com ❤️ por Abanoub Khalil