claude-plugins/wordpress/skills/elementor-v4-visual-editor/references/painel.md

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:

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