Files

T

Claude Code 7363300a7f 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).

2026-08-19 03:50:30 +01:00

5.5 KiB

Raw Permalink Blame History

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.

5.5 KiB Raw Permalink Blame History Unescape Escape