# Referência de Painel — Elementor V4

Fonte: adaptado de jainshwetank/elementor-pro-designer-skill (MIT). Termos de campo mantidos em inglês (interface real do editor).

## Painel de widget: 3 tabs

Todo widget em V4 tem exactamente três tabs: **General**, **Style**, **Interactions**.

### Tab 1: General

- **HTML Tag** — Div / Section / Header / Footer / Main / Article / Nav / Aside
- **Link** — botão (+) para adicionar
- **ID** — campo de texto (anchor links ou hooks JS; deixar vazio caso contrário)
- **Attributes** — botão (+) para atributos `data-*` custom (ex. `data-theme-toggle`)
- **Display Conditions** — só Elementor Pro; mostrar/esconder por role, URL, data, etc.

### Tab 2: Style

Propriedades listadas de cima a baixo pela ordem real no painel.

**Classes** — topo do tab Style. Escrever nome de classe para aplicar do Class Manager. Várias classes empilham (separadas por espaço). Badge "local" = override de instância. Badge de classe = propriedade vinda da classe global.

**Layout**
- Display: `Block` / `Flex` (omissão) / `In-blk` / `None` / `Inline-flex`
- Direction (só Flex): `Row` (omissão) / `Column` / `Row reversed` / `Column reversed`
- Justify content: flex-start / center / flex-end / space-between / space-around / space-evenly
- Align items: flex-start / center / flex-end / stretch
- Gap: Column gap (px) + Row gap (px), toggle de link para sincronizar
- Wrap: nowrap / wrap / wrap-reverse

Sub-secção Flex child (visível quando o elemento está dentro de um pai Flex):
- Align self: auto / flex-start / center / flex-end / stretch
- Order: inteiro
- Flex Size: Fill space (grow 1) / Fit content / Fixed / Custom (grow + shrink + basis)

**Spacing**
- Margin: T/R/B/L, toggle de link, unidades px/%/vw/vh/em/rem
- Padding: T/R/B/L, toggle de link, mesmas unidades
- Nota: alguns widgets V4 têm **padding por omissão de 10px** — verificar sempre e definir a 0 se não pretendido.

**Size**
- Width, Height, Min width, Min height, Max width, Max height (px/%/vw/vh/em/rem)
- Overflow: visible / hidden / auto / scroll
- (Show more): Aspect Ratio, Object fit (cover/contain/fill/none)

**Position**
- Position: default / relative / absolute / fixed / sticky
- Inset (top/right/bottom/left) aparece quando não-default
- Z-index, Anchor offset (para sticky)

**Typography**
- Font family — picker; usar variable picker (ƒ) para variável de fonte
- Font weight: 100–900
- Font size + unidade — variable picker (ƒ) para variável de tamanho ou valor clamp
- Text align: left/center/right/justify
- Text color — picker; variable picker (ƒ) para variável de cor
- (Show more): Line height, Letter spacing, Word spacing, Text decoration, Text transform, Direction (LTR/RTL), Font style, Text stroke

**Background**
- Color — picker; variable picker (ƒ)
- Overlay (+): gradiente ou imagem
- Clipping: text / content-box / border-box / padding-box

**Border**
- Width: T/R/B/L ou todos, toggle de link
- Color — picker; variable picker (ƒ)
- Type: none/solid/dashed/dotted/double/groove/ridge
- Radius: TL/TR/BR/BL, toggle de link

**Effects**
- Blend mode, Opacity (0–100%)
- Box shadow (+): cor, X, Y, blur, spread, toggle inset
- Transform (+): rotate, scale, translate, skew
- Transitions (+): propriedade, duração, timing, delay
- Filters (+): blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia
- Backdrop filters (+): mesmas opções, aplicadas ao fundo atrás do elemento

**Custom CSS** — editor de código no fundo do tab Style. **Deixar sempre vazio.** Usar classes e definições de painel em vez disso.

### Tab 3: Interactions

Botão (+) no topo. Várias interactions podem empilhar-se num elemento.

- **Trigger**: Page load / Scroll into view
- **Effect**: Fade / Slide / Scale
- **Type**: In / Out
- **Direction**: Up / Down / Left / Right
- **Duration**: 0/100/200/300/400/500/750/1000/1250/1500 ms
- **Delay**: mesma escala
- **Preview**: botão ▶
- **Delete**: ✕

## Widgets atómicos (V4 — usar estes)

| Widget | Propósito | Substitui (V3) |
|---|---|---|
| Flexbox | Container de layout com flex | Container |
| Div block | Bloco genérico não-flex | Inner Container |
| Heading | `<h1>`–`<h6>` | Heading (Basic) |
| Paragraph | Texto corpo/rich text | Text Editor (Basic) |
| Image | Imagem com object-fit | Image (Basic) |
| Button | Botão CTA | Button (Basic) |
| SVG | SVG inline | — |
| Divider | Linha `<hr>` | Divider (Basic) |
| YouTube | Vídeo embed | Video (Basic) |
| Tabs | Conteúdo em tabs | — |

**Correspondência com `emcp-page-building`:** estes 10 widgets atómicos mapeiam directamente para as tools MCP `add-flexbox`/`add-div-block`/`add-atomic-heading`/`add-atomic-paragraph`/`add-atomic-image`/`add-atomic-button`/`add-atomic-svg`/`add-atomic-divider`/`add-atomic-youtube` — confirmado ao vivo nessa skill. "Tabs" não tem tool de conveniência própria confirmada; usar `add-atomic-widget` genérico.

## Widgets legacy (V3 — evitar em construções V4 novas)

Container, Inner Container, Text Editor, Spacer, Google Maps. Continuam a existir por compatibilidade. Não usar em construções V4 novas — mas ver `emcp-page-building` para os casos em que um widget legacy é mesmo necessário (terceiros sem versão atómica: ElementsKit, PowerPack, etc.).

## Variables Manager

**Acesso:** ao editar um campo de cor/tamanho no tab Style, clicar no ícone ƒ (variable picker), depois **+** para criar uma variável nova. Acesso directo: ícone ƒ → engrenagem (⚙) abre o Variables Manager completo.

Variáveis são CSS custom properties. O Elementor guarda-as com prefixo `--`, logo uma variável `color_accent` referencia-se em código como `var(--color_accent)`.

**Convenção de nomes** (underscores como separador):
```
color_accent        → cor de destaque da marca
color_primary       → cor primária de texto/marca
color_bg-primary    → cores de fundo/texto/borda
spacing_md          → padding, margin, gap
font_heading        → família de fonte
size_section-pad    → spacing composto para secções
```

**`clamp()` para variáveis responsivas** — definir valores fluidos no Variables Manager para escalar sem overrides por breakpoint:
```css
clamp(2rem, 5vw, 4rem)   /* tamanho de fonte que escala de 2rem (mobile) a 4rem (desktop) */
clamp(1rem, 3vw, 2rem)   /* spacing que escala de 1rem a 2rem */
```
Escrever a expressão clamp directamente como valor da variável. Aplicar a tamanhos de fonte, padding de secção e valores de gap resolve a maior parte da responsividade num único sítio.

## Class Manager

**Acesso:** tab Style → campo Classes → escrever nome de classe → link "Manage Classes", ou via Elementor site settings.

**O que uma classe guarda:** múltiplas propriedades, cada uma podendo referenciar uma variável. Exemplo: uma classe `t-body` pode definir font-family (via `var(--font_body)`), font-size (via `var(--size_body)`), line-height (1.55) e color (via `var(--color_text-primary)`) — tudo numa classe.

**Quatro estados por classe:** 1. Normal (omissão) · 2. Hover (mouse por cima) · 3. Focus (foco de teclado) · 4. Active (pressionado). Definir cada estado conforme necessário; Hover é o mais usado além de Normal; deixar vazio se não houver mudança nesse estado.

**Badge de classe vs local:** propriedade da classe aplicada e não sobreposta → badge de classe. Override de uma propriedade da classe para um elemento específico → badge "local" (não altera a classe em si, é override de instância).