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

4.5 KiB

Raw Blame History

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.

4.5 KiB Raw Blame History