From 7363300a7f5548c6011a963f319d2121a5757375 Mon Sep 17 00:00:00 2001 From: Claude Code Date: Wed, 19 Aug 2026 03:50:30 +0100 Subject: [PATCH] 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). --- .../elementor-v4-visual-editor/SKILL.md | 161 ++++++++++++++++++ .../references/padroes.md | 131 ++++++++++++++ .../references/painel.md | 145 ++++++++++++++++ .../references/troubleshooting.md | 108 ++++++++++++ 4 files changed, 545 insertions(+) create mode 100644 wordpress/skills/elementor-v4-visual-editor/SKILL.md create mode 100644 wordpress/skills/elementor-v4-visual-editor/references/padroes.md create mode 100644 wordpress/skills/elementor-v4-visual-editor/references/painel.md create mode 100644 wordpress/skills/elementor-v4-visual-editor/references/troubleshooting.md diff --git a/wordpress/skills/elementor-v4-visual-editor/SKILL.md b/wordpress/skills/elementor-v4-visual-editor/SKILL.md new file mode 100644 index 0000000..1576589 --- /dev/null +++ b/wordpress/skills/elementor-v4-visual-editor/SKILL.md @@ -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 ``, 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. diff --git a/wordpress/skills/elementor-v4-visual-editor/references/padroes.md b/wordpress/skills/elementor-v4-visual-editor/references/padroes.md new file mode 100644 index 0000000..f9cc474 --- /dev/null +++ b/wordpress/skills/elementor-v4-visual-editor/references/padroes.md @@ -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. diff --git a/wordpress/skills/elementor-v4-visual-editor/references/painel.md b/wordpress/skills/elementor-v4-visual-editor/references/painel.md new file mode 100644 index 0000000..76529c8 --- /dev/null +++ b/wordpress/skills/elementor-v4-visual-editor/references/painel.md @@ -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 | `

`–`

` | 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 `
` | 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). diff --git a/wordpress/skills/elementor-v4-visual-editor/references/troubleshooting.md b/wordpress/skills/elementor-v4-visual-editor/references/troubleshooting.md new file mode 100644 index 0000000..ebb560a --- /dev/null +++ b/wordpress/skills/elementor-v4-visual-editor/references/troubleshooting.md @@ -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 `