claude-plugins/wordpress/skills/elementor-v4-visual-editor/SKILL.md

name, description, layer

name	description	layer
elementor-v4-visual-editor	Guia do editor visual Elementor Pro V4 (painel General/Style/Interactions, Class Manager, Variables Manager, breakpoints, animações nativas) para quem constrói/ajusta layouts na interface gráfica, distinto de emcp-page-building (que cobre a mesma versão via chamadas MCP/API). Usar quando "elementor v4 painel", "flexbox widget elementor", "class manager elementor", "variables manager elementor", "dark mode elementor", "interactions tab", "breakpoints elementor v4", "posiciona elementos no elementor", "porque é que o gap não aparece elementor".	wiki

/elementor-v4-visual-editor — Editor Visual Elementor Pro V4

Fonte: adaptado de jainshwetank/elementor-pro-designer-skill (MIT), traduzido e cruzado com os achados ao vivo de emcp-page-building. Termos de campos do painel mantidos em inglês (é a língua real da interface Elementor, mesmo em sites PT-PT) — só a prosa é PT-PT.

Distinção de âmbito: esta skill descreve o que aparece no painel visual (o que um humano vê e clica no editor Elementor, ou o que descreves a alguém a operar o editor). emcp-page-building descreve a camada MCP/API (chamadas add-flexbox/update-element/settings JSON) para o mesmo Elementor 4.x. Os nomes de campo do painel abaixo mapeiam directamente para chaves de settings das tools MCP — ex. painel "Layout > Direction: Column" ≈ settings.flex_direction: "column" em add-flexbox; ver emcp-page-building para a forma exacta de cada chave verificada ao vivo.

Referências detalhadas:

• references/painel.md — referência completa de tabs/widgets/campos, Variables Manager, Class Manager.
• references/padroes.md — padrões de layout reutilizáveis com instruções de painel completas.
• references/troubleshooting.md — problemas comuns e correcções.

V4 vs V3 — o que mudou

V4 é uma alteração disruptiva do V3 em várias áreas. Nunca sugerir padrões V3 num site V4.

Área	V3	V4
Widget de layout primário	Container	Flexbox (atómico)
Widget de layout secundário	Inner Container	Div block (atómico)
Tabs do painel	Content / Style / Advanced	General / Style / Interactions — sem tab Advanced
Sistema de classes	Limitado	Class Manager — classes globais reutilizáveis com 4 estados
Design tokens	Não nativo	Variables Manager — CSS custom properties
Interactions	Básico	Nativo por elemento, empilhável, disparado por scroll
Tipografia	Widget Text Editor	Paragraph (atómico) substitui Text Editor

Crítico: se te apanhares a escrever "tab Advanced" ou "widget Container" — pára. São V3. Em V4: tab Style, widget Flexbox, tab Interactions.

Perguntas a fazer primeiro

1. Há um theme switcher dark/light? Se sim → todas as cores têm de usar variáveis CSS (valores fixos no painel não respondem ao toggle). Se não → cores directas no painel são aceitáveis.
2. Já existe um sistema de classes/variáveis, ou vamos construir um? Se existente → pedir nomes de variáveis e convenções de classe antes de criar novas. Se de raiz → ver references/painel.md para convenções de nomeação recomendadas.

Hierarquia de decisão

Antes de sugerir QUALQUER implementação, seguir esta ordem:

1. Uma classe existente resolve? Empilhar (t-h2 + is-accent).
2. Uma definição do tab Style resolve? Usar como valor LOCAL.
3. Uma variável CSS resolve? Referenciar via variable picker (ícone ƒ).
4. Precisa de uma classe global nova? Criar no Class Manager.
5. Precisa de uma variável nova? Criar no Variables Manager.
6. Precisa mesmo de Custom Code? Parar e repensar — quase sempre há solução panel-first.
7. Se Custom Code for mesmo inevitável: criar um snippet nomeado separado. Nunca acrescentar ao snippet de Design Tokens.

Classe global vs local: propriedade reutilizada em vários elementos → classe global. Uso único → local.

Erros comuns de IA no Elementor V4

• ❌ Referenciar o tab Advanced — não existe em V4. Propriedades vivem em General/Style/Interactions. O campo Custom CSS existe no fundo do tab Style mas deve ficar sempre vazio.
• ❌ Sugerir CSS inline/custom por widget — classes primeiro, definições de painel depois. Custom CSS por widget contorna o sistema de classes.
• ❌ Confundir Flexbox com Container — Container é o widget V3. Em V4 usar Flexbox (Atomic Elements).
• ❌ Hardcodar cores hex com theme switcher activo — têm de ser variáveis CSS, senão não respondem ao dark mode.
• ❌ Usar alturas fixas para layout — usar Flex child > Flex Size: custom (grow: 1) para preencher espaço disponível.
• ❌ Usar margens nos filhos para espaçamento uniforme — usar Gap no Flexbox pai; margens só para espaçamento irregular específico.
• ❌ Sugerir position: absolute para problemas de layout — quase sempre resolvível com Flex child settings; absolute é último recurso.
• ❌ Assumir que Laptop é breakpoint por omissão — V4 vem com 3: Desktop, Tablet (1024px), Phone (767px). Laptop (1366px) é breakpoint custom, não vem por omissão.
• ❌ Assumir que todos os widgets começam sem padding — alguns widgets V4 têm padding por omissão de 10px; definir explicitamente a 0 se não for pretendido.

Formato de instrução (para guiar um humano no editor)

Dar sempre instruções pela ordem dos tabs: General → Style → Interactions. Nunca descrever CSS — descrever nomes de campo do painel e valores.

WIDGET: Flexbox
NAME: "Hero Content"          (nome a escrever no campo de label do painel Structure)

GENERAL TAB:
  HTML Tag: Section
  ID: hero-content             [só se necessário para JS ou anchor links]

STYLE TAB:
  Classes: l-stack              ← CLASSE GLOBAL

  Layout:
    Display: Flex               ← vem da classe l-stack
    Direction: Column           ← vem da classe l-stack
    Justify: Center              ← LOCAL
    Align: Center                ← LOCAL
    Gap, Row: var(--spacing_md) ← LOCAL, usar o variable picker (ƒ)
  Spacing:
    Padding Top/Bottom: var(--spacing_xl) ← LOCAL
  Size:
    Height: 90vh                 ← LOCAL

INTERACTIONS TAB:
  1: Page load / Fade In / 750ms / delay 0ms

Legenda: ← CLASSE GLOBAL (definida pela classe, não sobrepor localmente) · ← LOCAL (definido directamente para este elemento) · ← NOVA CLASSE [nome] (criar no Class Manager primeiro) · "usar variable picker" (clicar no ícone ƒ, nunca escrever hex à mão).

Arquitectura de camadas

Page
└── Flexbox "Section Wrap"            ← mais externo, sempre Flexbox
    ├── Flexbox "Section Content"     ← container de layout primário
    │   ├── Flexbox "Group A"
    │   │   ├── Heading "..."
    │   │   └── Paragraph "..."
    │   └── Flexbox "Group B"
    │       └── Image "..."
    └── Div block "Transition"        ← decorativo, não estrutural

Regras: secção mais externa = sempre Flexbox (nunca Div block) · limite de nesting = 4 níveis · distribuição de espaço = Flex child > Flex Size (grow), nunca alturas fixas · espaçamento uniforme = gaps no Flexbox pai · espaçamento irregular = margem só no filho específico · renomear sempre cada layer no painel Structure com nomes descritivos ("Hero Wrap", não "Flexbox 3").

Sistema responsivo

Breakpoints por omissão V4: Desktop (base), Tablet (1024px), Phone (767px). Laptop (1366px) é recomendado como breakpoint custom (Elementor → Site Settings → Layout), não vem activo por omissão.

Desktop é sempre a base — definir tudo em Desktop primeiro, depois mudar o selector de breakpoint no cabeçalho do painel para overrides em tamanhos menores. Overrides propagam para baixo (um override em Tablet aplica-se a Phone salvo override próprio).

Variáveis CSS não mudam por breakpoint — para dimensionamento responsivo sem overrides de breakpoint, usar clamp() no Variables Manager:

--spacing_section: clamp(1rem, 3vw, 1.5rem);
--font_h1: clamp(2rem, 5vw, 4rem);

Overrides standard em Phone (quando não se usa clamp): tamanhos de heading −20% do valor desktop · padding reduzido para variável de spacing menor · flex direction Row→Column para empilhar · gaps reduzidos.

Dark mode

Só implementar se o projecto tiver um theme switcher light/dark. A abordagem V4 usa um atributo [data-theme="dark"] no <html>, alternado por JavaScript, com overrides de variáveis CSS no snippet Design Tokens: 1) valores light em :root; 2) overrides dark em [data-theme="dark"]; 3) todas as cores do painel via variáveis (trocam automaticamente); 4) botão de toggle com atributo custom data-theme-toggle (tab General → Attributes).

Interactions

Tab 3 em todos os widgets V4. Múltiplas animações podem empilhar-se por elemento.

Campo	Opções
Trigger	Page load / Scroll into view
Effect	Fade / Slide / Scale
Type	In / Out
Direction	Up / Down / Left / Right
Duration	0–1500ms (passos fixos)
Delay	0–1500ms (passos fixos)

Elementos acima da dobra (visíveis sem scroll) → trigger Page load. Elementos abaixo da dobra → trigger Scroll into view.

Checklist de qualidade

• Nomes de layer no painel Structure são descritivos
• Nenhum Custom CSS em nenhum widget
• Hierarquia de decisão seguida (classe → painel → variável → código)
• Máximo 4 níveis de nesting
• Se houver theme switcher: todas as cores usam variáveis, zero hex fixo
• Responsivo verificado em Desktop, Tablet, Phone (+ Laptop se adicionado)
• Interactions: Page load acima da dobra, Scroll into view abaixo
• Espaçamento usa gaps nos pais, não margens nos filhos
• Elementos com espaçamento inesperado: verificar padding 10px por omissão

Skills relacionadas

• emcp-page-building — a mesma versão Elementor 4.x via chamadas MCP/API (add-flexbox, update-element, settings JSON) em vez do painel visual.
• elementor-pro-widgets / elementskit-widgets / powerpack-widgets — catálogos de widgets disponíveis para colocar dentro destes layouts.