# 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 `