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
parent 4a55d51329
commit 7363300a7f
4 changed files with 545 additions and 0 deletions
@@ -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.