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).
This commit is contained in:
Claude Code
@@ -0,0 +1,145 @@
|
||||
# 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).
|
||||
Reference in New Issue
Block a user