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