feat(wordpress): adiciona elementor-v4-visual-editor (editor visual V4)
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).
This commit is contained in:
Claude Code
@@ -0,0 +1,161 @@
|
||||
---
|
||||
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.
|
||||
@@ -0,0 +1,131 @@
|
||||
# Padrões de Layout — Elementor V4
|
||||
|
||||
Fonte: adaptado de jainshwetank/elementor-pro-designer-skill (MIT). Sequências de instrução de painel testadas em produção — copiar e adaptar.
|
||||
|
||||
## Padrão: secção full-height com elemento pinado ao fundo
|
||||
|
||||
Caso de uso: heros, ecrãs de abertura com indicador de scroll pinado no fundo.
|
||||
|
||||
```
|
||||
Flexbox "Section Wrap"
|
||||
CLASSES: [a tua classe de secção]
|
||||
STYLE > Layout > Direction: Column
|
||||
STYLE > Layout > Align items: center
|
||||
STYLE > Size > Height: 100vh ou 90vh ← LOCAL
|
||||
|
||||
├── Flexbox "Content"
|
||||
│ STYLE > Layout > Justify: center
|
||||
│ STYLE > Layout > Align: center
|
||||
│ STYLE > Flex child > Flex Size: custom (grow 1) ← LOCAL
|
||||
│ └── [Headings, CTAs, etc.]
|
||||
│
|
||||
└── [Indicador de scroll ou elemento de fundo]
|
||||
STYLE > Spacing > Margin bottom: [variável de spacing] ← LOCAL
|
||||
```
|
||||
|
||||
Chave: usar `Flex child > Flex Size: grow 1` na área de conteúdo, não uma altura fixa. O elemento de fundo pina naturalmente por ser o último flex child.
|
||||
|
||||
## Padrão: layout de duas colunas
|
||||
|
||||
Caso de uso: imagem + texto, métrica + descrição, qualquer arranjo lado a lado.
|
||||
|
||||
```
|
||||
Flexbox "Row"
|
||||
STYLE > Layout > Direction: Row
|
||||
STYLE > Layout > Align items: center
|
||||
STYLE > Layout > Gap, Column: [variável de spacing] ← LOCAL
|
||||
|
||||
├── Flexbox "Left Column"
|
||||
│ STYLE > Flex child > Flex Size: custom (grow 1, shrink 1, basis 0%) ← LOCAL
|
||||
│
|
||||
└── Flexbox "Right Column"
|
||||
STYLE > Flex child > Flex Size: custom (grow 1, shrink 1, basis 0%) ← LOCAL
|
||||
```
|
||||
|
||||
Para colunas desiguais (ex. 60/40): basis a `60%` e `40%` respectivamente. No breakpoint Phone: mudar Direction para Column para empilhar.
|
||||
|
||||
## Padrão: imagem em moldura
|
||||
|
||||
Caso de uso: screenshots, mockups, qualquer imagem que precise de dimensionamento contido.
|
||||
|
||||
```
|
||||
Flexbox "Frame"
|
||||
STYLE > Size > Width: [px ou % específico] ← LOCAL
|
||||
STYLE > Size > Aspect Ratio: [conforme o conteúdo — 16/10, 4/3, etc.] ← LOCAL
|
||||
STYLE > Border > Radius: 4px ← LOCAL
|
||||
STYLE > Size > Overflow: hidden ← LOCAL
|
||||
|
||||
└── Image
|
||||
STYLE > Size > Width: 100%, Height: 100% ← LOCAL
|
||||
STYLE > Size > Object fit: cover ← LOCAL
|
||||
```
|
||||
|
||||
Importante: o aspect ratio deve servir o conteúdo. Não forçar enquadramento paisagem em conteúdo retrato (ex. screenshots de telemóvel, UI de app alta) — deixar o conteúdo ditar a forma da moldura.
|
||||
|
||||
## Padrão: cabeçalho de passo/secção
|
||||
|
||||
Caso de uso: cabeçalhos de secção numerados que comunicam hierarquia.
|
||||
|
||||
```
|
||||
Flexbox "Step Header"
|
||||
STYLE > Layout > Direction: Column
|
||||
STYLE > Layout > Gap, Row: [variável de spacing pequena] ← LOCAL
|
||||
|
||||
├── Heading "Number" (ex. "01")
|
||||
│ CLASSES: [a tua classe display/muted]
|
||||
│ STYLE > Typography > Size: 72px ← LOCAL
|
||||
│ STYLE > Typography > Weight: 200 ← LOCAL
|
||||
│ STYLE > Effects > Opacity: 6% ← LOCAL
|
||||
│
|
||||
├── Heading "Label" (ex. "Step 1")
|
||||
│ CLASSES: [a tua classe overline/label]
|
||||
│
|
||||
└── Heading "Title" (ex. "O padrão")
|
||||
CLASSES: [a tua classe h2]
|
||||
```
|
||||
|
||||
O número fantasma (opacity 6%) cria profundidade sem competir com o título.
|
||||
|
||||
## Padrão: fundos de secção alternados
|
||||
|
||||
Caso de uso: ritmo visual entre secções de conteúdo.
|
||||
|
||||
```
|
||||
Secção A: sem background (herda o background do body)
|
||||
Secção B: STYLE > Background > Color: [variável de bg secundária] ← LOCAL
|
||||
Secção C: sem background (herda)
|
||||
```
|
||||
|
||||
Nunca alternar com cores fixas — usar sempre variáveis para o dark mode funcionar.
|
||||
|
||||
## Padrão: secção centrada com largura de texto limitada
|
||||
|
||||
Caso de uso: secções de texto longo onde o comprimento de linha precisa de limite para legibilidade.
|
||||
|
||||
```
|
||||
Flexbox "Section"
|
||||
STYLE > Layout > Direction: Column
|
||||
STYLE > Layout > Align items: center
|
||||
STYLE > Spacing > Padding [T/B]: [variável de spacing grande]
|
||||
|
||||
└── Flexbox "Content"
|
||||
STYLE > Size > Max width: 640px ← LOCAL
|
||||
STYLE > Layout > Direction: Column
|
||||
STYLE > Layout > Gap, Row: [variável de spacing média]
|
||||
└── [Parágrafos, headings]
|
||||
```
|
||||
|
||||
Aplicar max-width no wrapper de conteúdo interno, não na secção — a secção mantém-se full-width.
|
||||
|
||||
## Padrão: separador horizontal
|
||||
|
||||
Caso de uso: separação visual dentro de uma secção (não entre secções).
|
||||
|
||||
```
|
||||
Div block "Divider"
|
||||
STYLE > Size > Width: 100%, Height: 1px ← LOCAL
|
||||
STYLE > Background > Color: [variável border/muted] ← LOCAL
|
||||
STYLE > Spacing > Margin [T/B]: [variável de spacing] ← LOCAL
|
||||
```
|
||||
|
||||
Usar um Div block, não o widget Divider — mais controlo, sistema de classes consistente.
|
||||
@@ -0,0 +1,145 @@
|
||||
# Referência de Painel — Elementor V4
|
||||
|
||||
Fonte: adaptado de jainshwetank/elementor-pro-designer-skill (MIT). Termos de campo mantidos em inglês (interface real do editor).
|
||||
|
||||
## Painel de widget: 3 tabs
|
||||
|
||||
Todo widget em V4 tem exactamente três tabs: **General**, **Style**, **Interactions**.
|
||||
|
||||
### Tab 1: General
|
||||
|
||||
- **HTML Tag** — Div / Section / Header / Footer / Main / Article / Nav / Aside
|
||||
- **Link** — botão (+) para adicionar
|
||||
- **ID** — campo de texto (anchor links ou hooks JS; deixar vazio caso contrário)
|
||||
- **Attributes** — botão (+) para atributos `data-*` custom (ex. `data-theme-toggle`)
|
||||
- **Display Conditions** — só Elementor Pro; mostrar/esconder por role, URL, data, etc.
|
||||
|
||||
### Tab 2: Style
|
||||
|
||||
Propriedades listadas de cima a baixo pela ordem real no painel.
|
||||
|
||||
**Classes** — topo do tab Style. Escrever nome de classe para aplicar do Class Manager. Várias classes empilham (separadas por espaço). Badge "local" = override de instância. Badge de classe = propriedade vinda da classe global.
|
||||
|
||||
**Layout**
|
||||
- Display: `Block` / `Flex` (omissão) / `In-blk` / `None` / `Inline-flex`
|
||||
- Direction (só Flex): `Row` (omissão) / `Column` / `Row reversed` / `Column reversed`
|
||||
- Justify content: flex-start / center / flex-end / space-between / space-around / space-evenly
|
||||
- Align items: flex-start / center / flex-end / stretch
|
||||
- Gap: Column gap (px) + Row gap (px), toggle de link para sincronizar
|
||||
- Wrap: nowrap / wrap / wrap-reverse
|
||||
|
||||
Sub-secção Flex child (visível quando o elemento está dentro de um pai Flex):
|
||||
- Align self: auto / flex-start / center / flex-end / stretch
|
||||
- Order: inteiro
|
||||
- Flex Size: Fill space (grow 1) / Fit content / Fixed / Custom (grow + shrink + basis)
|
||||
|
||||
**Spacing**
|
||||
- Margin: T/R/B/L, toggle de link, unidades px/%/vw/vh/em/rem
|
||||
- Padding: T/R/B/L, toggle de link, mesmas unidades
|
||||
- Nota: alguns widgets V4 têm **padding por omissão de 10px** — verificar sempre e definir a 0 se não pretendido.
|
||||
|
||||
**Size**
|
||||
- Width, Height, Min width, Min height, Max width, Max height (px/%/vw/vh/em/rem)
|
||||
- Overflow: visible / hidden / auto / scroll
|
||||
- (Show more): Aspect Ratio, Object fit (cover/contain/fill/none)
|
||||
|
||||
**Position**
|
||||
- Position: default / relative / absolute / fixed / sticky
|
||||
- Inset (top/right/bottom/left) aparece quando não-default
|
||||
- Z-index, Anchor offset (para sticky)
|
||||
|
||||
**Typography**
|
||||
- Font family — picker; usar variable picker (ƒ) para variável de fonte
|
||||
- Font weight: 100–900
|
||||
- Font size + unidade — variable picker (ƒ) para variável de tamanho ou valor clamp
|
||||
- Text align: left/center/right/justify
|
||||
- Text color — picker; variable picker (ƒ) para variável de cor
|
||||
- (Show more): Line height, Letter spacing, Word spacing, Text decoration, Text transform, Direction (LTR/RTL), Font style, Text stroke
|
||||
|
||||
**Background**
|
||||
- Color — picker; variable picker (ƒ)
|
||||
- Overlay (+): gradiente ou imagem
|
||||
- Clipping: text / content-box / border-box / padding-box
|
||||
|
||||
**Border**
|
||||
- Width: T/R/B/L ou todos, toggle de link
|
||||
- Color — picker; variable picker (ƒ)
|
||||
- Type: none/solid/dashed/dotted/double/groove/ridge
|
||||
- Radius: TL/TR/BR/BL, toggle de link
|
||||
|
||||
**Effects**
|
||||
- Blend mode, Opacity (0–100%)
|
||||
- Box shadow (+): cor, X, Y, blur, spread, toggle inset
|
||||
- Transform (+): rotate, scale, translate, skew
|
||||
- Transitions (+): propriedade, duração, timing, delay
|
||||
- Filters (+): blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia
|
||||
- Backdrop filters (+): mesmas opções, aplicadas ao fundo atrás do elemento
|
||||
|
||||
**Custom CSS** — editor de código no fundo do tab Style. **Deixar sempre vazio.** Usar classes e definições de painel em vez disso.
|
||||
|
||||
### Tab 3: Interactions
|
||||
|
||||
Botão (+) no topo. Várias interactions podem empilhar-se num elemento.
|
||||
|
||||
- **Trigger**: Page load / Scroll into view
|
||||
- **Effect**: Fade / Slide / Scale
|
||||
- **Type**: In / Out
|
||||
- **Direction**: Up / Down / Left / Right
|
||||
- **Duration**: 0/100/200/300/400/500/750/1000/1250/1500 ms
|
||||
- **Delay**: mesma escala
|
||||
- **Preview**: botão ▶
|
||||
- **Delete**: ✕
|
||||
|
||||
## Widgets atómicos (V4 — usar estes)
|
||||
|
||||
| Widget | Propósito | Substitui (V3) |
|
||||
|---|---|---|
|
||||
| Flexbox | Container de layout com flex | Container |
|
||||
| Div block | Bloco genérico não-flex | Inner Container |
|
||||
| Heading | `<h1>`–`<h6>` | Heading (Basic) |
|
||||
| Paragraph | Texto corpo/rich text | Text Editor (Basic) |
|
||||
| Image | Imagem com object-fit | Image (Basic) |
|
||||
| Button | Botão CTA | Button (Basic) |
|
||||
| SVG | SVG inline | — |
|
||||
| Divider | Linha `<hr>` | Divider (Basic) |
|
||||
| YouTube | Vídeo embed | Video (Basic) |
|
||||
| Tabs | Conteúdo em tabs | — |
|
||||
|
||||
**Correspondência com `emcp-page-building`:** estes 10 widgets atómicos mapeiam directamente para as tools MCP `add-flexbox`/`add-div-block`/`add-atomic-heading`/`add-atomic-paragraph`/`add-atomic-image`/`add-atomic-button`/`add-atomic-svg`/`add-atomic-divider`/`add-atomic-youtube` — confirmado ao vivo nessa skill. "Tabs" não tem tool de conveniência própria confirmada; usar `add-atomic-widget` genérico.
|
||||
|
||||
## Widgets legacy (V3 — evitar em construções V4 novas)
|
||||
|
||||
Container, Inner Container, Text Editor, Spacer, Google Maps. Continuam a existir por compatibilidade. Não usar em construções V4 novas — mas ver `emcp-page-building` para os casos em que um widget legacy é mesmo necessário (terceiros sem versão atómica: ElementsKit, PowerPack, etc.).
|
||||
|
||||
## Variables Manager
|
||||
|
||||
**Acesso:** ao editar um campo de cor/tamanho no tab Style, clicar no ícone ƒ (variable picker), depois **+** para criar uma variável nova. Acesso directo: ícone ƒ → engrenagem (⚙) abre o Variables Manager completo.
|
||||
|
||||
Variáveis são CSS custom properties. O Elementor guarda-as com prefixo `--`, logo uma variável `color_accent` referencia-se em código como `var(--color_accent)`.
|
||||
|
||||
**Convenção de nomes** (underscores como separador):
|
||||
```
|
||||
color_accent → cor de destaque da marca
|
||||
color_primary → cor primária de texto/marca
|
||||
color_bg-primary → cores de fundo/texto/borda
|
||||
spacing_md → padding, margin, gap
|
||||
font_heading → família de fonte
|
||||
size_section-pad → spacing composto para secções
|
||||
```
|
||||
|
||||
**`clamp()` para variáveis responsivas** — definir valores fluidos no Variables Manager para escalar sem overrides por breakpoint:
|
||||
```css
|
||||
clamp(2rem, 5vw, 4rem) /* tamanho de fonte que escala de 2rem (mobile) a 4rem (desktop) */
|
||||
clamp(1rem, 3vw, 2rem) /* spacing que escala de 1rem a 2rem */
|
||||
```
|
||||
Escrever a expressão clamp directamente como valor da variável. Aplicar a tamanhos de fonte, padding de secção e valores de gap resolve a maior parte da responsividade num único sítio.
|
||||
|
||||
## Class Manager
|
||||
|
||||
**Acesso:** tab Style → campo Classes → escrever nome de classe → link "Manage Classes", ou via Elementor site settings.
|
||||
|
||||
**O que uma classe guarda:** múltiplas propriedades, cada uma podendo referenciar uma variável. Exemplo: uma classe `t-body` pode definir font-family (via `var(--font_body)`), font-size (via `var(--size_body)`), line-height (1.55) e color (via `var(--color_text-primary)`) — tudo numa classe.
|
||||
|
||||
**Quatro estados por classe:** 1. Normal (omissão) · 2. Hover (mouse por cima) · 3. Focus (foco de teclado) · 4. Active (pressionado). Definir cada estado conforme necessário; Hover é o mais usado além de Normal; deixar vazio se não houver mudança nesse estado.
|
||||
|
||||
**Badge de classe vs local:** propriedade da classe aplicada e não sobreposta → badge de classe. Override de uma propriedade da classe para um elemento específico → badge "local" (não altera a classe em si, é override de instância).
|
||||
@@ -0,0 +1,108 @@
|
||||
# Troubleshooting — Elementor V4
|
||||
|
||||
Fonte: adaptado de jainshwetank/elementor-pro-designer-skill (MIT). Sintomas, causas e correcções para problemas comuns do editor visual V4.
|
||||
|
||||
## Problemas de layout
|
||||
|
||||
**Elementos não empilham verticalmente dentro de um Flexbox**
|
||||
- Verificar Direction — tem de estar ↓ (column), não → (row).
|
||||
- Se uma classe está a definir a direction, sobrepor localmente ou rever a classe.
|
||||
|
||||
**Flex child não preenche a altura restante**
|
||||
- Definir Flex child > Flex Size: Custom → Grow: 1, Shrink: 0, Basis: 0%.
|
||||
- O pai precisa de altura definida (vh, px, ou ele próprio flex) para o grow funcionar.
|
||||
- Nunca usar `height: 100%` num flex child — usar grow.
|
||||
|
||||
**Duas colunas a empilhar verticalmente em desktop**
|
||||
- Direction do Flexbox pai tem de ser → (row), não ↓ (column).
|
||||
- Se uma classe força column, sobrepor localmente no breakpoint desktop.
|
||||
|
||||
**Gap não aparece entre elementos**
|
||||
- Gap só funciona em pais Flexbox. Se o pai é um Div block (não-flex), gap não tem efeito.
|
||||
- Solução: mudar o pai para Flexbox, ou usar Spacing > Margin nos filhos individuais.
|
||||
|
||||
**Elemento a fazer overflow do pai**
|
||||
- Definir no pai: Size > Overflow: hidden.
|
||||
- Verificar se uma width/min-width fixa no filho excede o pai.
|
||||
|
||||
**Elemento sticky não fica sticky**
|
||||
- Position tem de estar definido como Sticky no próprio elemento.
|
||||
- O pai não pode ter `overflow: hidden` — isso quebra o sticky.
|
||||
- Anchor offset controla a que distância do topo o elemento gruda.
|
||||
|
||||
## Problemas de espaçamento
|
||||
|
||||
**Padding não aplica simetricamente**
|
||||
- Verificar se o toggle de link (ícone de corrente) está activo — se não, T/R/B/L são independentes.
|
||||
- Verificar se uma classe está a definir padding conflituoso — o badge "local" aparece se for override.
|
||||
|
||||
**Margem entre elementos é irregular**
|
||||
- Se usares margin nos filhos, os gaps compõem-se entre alguns elementos.
|
||||
- Solução: remover margens dos filhos, usar Gap no Flexbox pai. Margem no filho só para espaçamento irregular pontual.
|
||||
|
||||
## Problemas de tipografia
|
||||
|
||||
**Tamanho de fonte não muda**
|
||||
- Uma classe pode estar a definir o tamanho e estás a editar um override local que não tem efeito.
|
||||
- Verificar se o campo Typography > Font size mostra badge de classe ou badge "local".
|
||||
- Se badge de classe: mudar a classe no Class Manager, ou sobrepor localmente.
|
||||
|
||||
**Cor do texto não corresponde à variável**
|
||||
- Confirmar que o campo de cor mostra o nome da variável, não um hex.
|
||||
- Se mostrar hex: abrir o color picker, seleccionar o ícone de variável (ƒ), escolher a variável.
|
||||
|
||||
**Line height demasiado apertado ou solto**
|
||||
- Line height está escondido em Style > Typography > Show more.
|
||||
- Texto corpo: 1.5–1.6 é standard. Headings: 1.1–1.2 é standard.
|
||||
|
||||
## Problemas de dark mode
|
||||
|
||||
**Dark mode não aplica**
|
||||
- Verificar que o snippet Design Tokens contém overrides `[data-theme="dark"]`.
|
||||
- Verificar que o botão de toggle tem o atributo `data-theme-toggle` no tab General → Attributes.
|
||||
- Verificar que o snippet Dark Mode Toggle está activo e na posição footer.
|
||||
- Abrir DevTools e confirmar que o elemento `html` tem o atributo `data-theme="dark"` depois de clicar no toggle.
|
||||
|
||||
**Alguns elementos não mudam no dark mode**
|
||||
- Só elementos a usar variáveis CSS mudam. Cores hex fixas não mudam.
|
||||
- Localizar o elemento, verificar cada campo de cor — substituir hex por variável apropriada.
|
||||
|
||||
**Flash do tema errado ao carregar a página (FOUC)**
|
||||
- O snippet Dark Mode Toggle lê o localStorage ao carregar, mas o snippet FOUC pode atrasar a visibilidade.
|
||||
- Garantir que o atributo `data-theme` é aplicado antes de `visibility: visible` disparar.
|
||||
- Solução: mover a leitura do localStorage para um `<script>` inline no `<head>` (antes do snippet FOUC disparar).
|
||||
|
||||
## Problemas de interactions
|
||||
|
||||
**Animação não dispara**
|
||||
- Trigger tem de ser "Scroll into view" para reveals por scroll.
|
||||
- Testar fazendo scroll do elemento para fora e depois de volta.
|
||||
- Se a página carregou com o elemento já visível, "Scroll into view" nunca dispara — usar "Page load" para elementos acima da dobra.
|
||||
|
||||
**Animação a disparar cedo demais / elemento visível antes da animação**
|
||||
- A direction "Out" (Fade Out, Slide Out) é para animações de saída. Provavelmente queres "In".
|
||||
- Se elementos estão visíveis antes do scroll, verificar se uma animação anterior os deixou num estado visível.
|
||||
|
||||
**Várias animações no mesmo elemento em conflito**
|
||||
- Verificar o tab Interactions — empilha. Se houver uma animação residual de testes, apagar (botão ✕).
|
||||
- Duas "Fade In" no mesmo elemento disparam ambas e podem entrar em conflito.
|
||||
|
||||
**Interaction não aparece no tab Interactions**
|
||||
- O tab Interactions é o Tab 3 (não Style, não General).
|
||||
- Só disponível em elementos Elementor V4 — não em widgets legacy V3.
|
||||
|
||||
## Problemas de Custom Code
|
||||
|
||||
**Snippet Custom Code não aplica**
|
||||
- Verificar se o snippet está Active (toggle na lista de snippets).
|
||||
- Verificar a Location: `<head>` para CSS, footer para JS.
|
||||
- Verificar erros de sintaxe — um `;` em falta parte o snippet inteiro.
|
||||
|
||||
**Variável CSS não resolve**
|
||||
- Nomes de variável em Custom Code usam prefixo `--`: `var(--color_accent)`.
|
||||
- Confirmar que a variável está definida em `:root` no snippet Design Tokens.
|
||||
- O Elementor acrescenta `--` automaticamente às variáveis do Variables Manager, mas snippets Custom Code têm de usar a sintaxe completa `var(--nome)`.
|
||||
|
||||
**Snippet Design Tokens a crescer demasiado**
|
||||
- Só variáveis de cor e mapeamentos classe-para-cor pertencem aqui.
|
||||
- Se estiveres a acrescentar regras de layout, animações ou estilos de componente — mover para um snippet novo e nomeado.
|
||||
Reference in New Issue
Block a user