Claude Code
7363300a7f
Adaptado de jainshwetank/elementor-pro-designer-skill (MIT) - painel General/Style/Interactions, Class Manager, Variables Manager, breakpoints, padroes de layout e troubleshooting para o editor visual Elementor Pro V4. Complementa emcp-page-building (mesma versao Elementor, mas via MCP/API).
162 lines
10 KiB
Markdown
162 lines
10 KiB
Markdown
---
|
||
name: elementor-v4-visual-editor
|
||
description: 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".
|
||
layer: wiki
|
||
---
|
||
|
||
# /elementor-v4-visual-editor — Editor Visual Elementor Pro V4
|
||
|
||
Fonte: adaptado de [jainshwetank/elementor-pro-designer-skill](https://github.com/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:
|
||
|
||
```css
|
||
--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.
|