syncwin/wpnomy-elementor-atomic-expert

wpnomy Elementor Atomic Expert (V4)

Alcançado a partir de wpnomy, que gerencia a ingestão, padrões de design, entrega JSON e handover. Este arquivo contém apenas regras de construção V4.

Requer Elementor Core 3.29+ com o Editor Atômico ativado, e está ativo por padrão a partir da versão 4.x.

Abra o scratchpad de construção do roteador no início de cada construção e mantenha-o atualizado: ingestão, plano, decisões, exceções vinculadas ao construtor e verificação.

Emparelha com

elementor-build-page para construção via Novamira, e elementor-convert-to-v4 quando uma página V3 existente está sendo migrada. Carregue-os para a mecânica; as convenções aqui lideram onde eles diferem.

Portão de caixa preta

Execute antes de colocar qualquer elemento. Declaração completa: o references/black-box-policy.md do roteador.

Permitido (primitivos)	Div Block, Flexbox, Heading, Paragraph, Image, Button, SVG, Divider, com Classes Globais e Variáveis
Permitido, vinculado ao construtor	Atomic Form, atomic Tabs, o acordeão atômico quando o Elementor enviar um (padrão da casa para FAQs), YouTube ou vídeo com fachada, Loop Grid para listas dinâmicas, Nav Menu, pesquisa, paginação, breadcrumbs, Componentes. Estilizado apenas por classes; cada um registrado com sua marcação de saída
Nunca	Widgets compostos clássicos (icon box, image box, CTA, pricing, testimonial, counter, progress, countdown, hero, social icons, star rating, author box, post info), widgets de pacotes de complementos, Section, Column ou Inner Section legados, efeitos de movimento e entrada, efeitos de hover por elemento, condições de exibição para visibilidade responsiva, Text Editor contendo marcação de layout

1. O HTML de saída exato do elemento pode ser descrito? 2. Cada parte pode ser estilizada por nossas classes e variáveis? 3. Sobreviveria a uma cópia para outro construtor como HTML mais classes? Qualquer não: pule-o ou registre-o como uma exceção vinculada ao construtor.

Verifique a instalação primeiro

Vários recursos vêm como feature flags e estão desativados por padrão em algumas instalações. Confirme cada um antes de planejar em torno dele e relate qualquer coisa faltando em vez de projetar silenciosamente em torno dele.

Recurso	Importante porque
Classes Globais	Todo o fluxo de trabalho de classes depende disso
Variáveis e Gerenciador de Variáveis	Sem o Gerenciador, as variáveis podem ser consumidas, mas não criadas
Componentes	Sem isso, não há primitivo de layout reutilizável
V4 Custom CSS	Sem isso, o CSS por elemento não está disponível e o código sobe na ordem de escalação

Doutrina de estilo

É aqui que o fluxo de trabalho do Oxygen e Bricks é transferido, porque o V4 tem os primitivos para isso.

Variáveis são os tokens. Cores, tipografia e tamanhos vivem como Variáveis. Leia o conjunto existente do site primeiro e use-o. Nunca codifique um valor que uma variável já expressa e nunca crie uma quase duplicata porque o nome existente não era óbvio.

Classes carregam o estilo, nomeadas em BEM: block, block__element, block--modifier. Estilize a classe, não o elemento. Qualquer classe que este plugin invente recebe o prefixo da empresa mais o site, sw-<site>- (roteador, Nomenclatura). Um elemento estilizado localmente é algo único que a próxima página não pode reutilizar.

As Classes Globais V4 são um namespace plano sem seletores descendentes. O BEM foi construído exatamente para isso, então se encaixa, mas o contexto tem que viver no nome da classe em vez de um seletor pai. Um card__title que difere dentro de dois blocos precisa de dois nomes de classe, não de uma regra aninhada.

O design nunca vive em um elemento. Tipografia, espaçamento, cor, borda, sombra e estados vivem em classes e variáveis. Os controles de estilo próprios de um elemento seguram apenas exclusividades de posicionamento (roteador, styling-and-code.md), e um segundo uso se torna uma classe modificadora.

O Atomic Framework

O sistema de design da casa, mantido separadamente como um produto: 72 tokens abrangendo Cores, Tipografia, Espaçamento, Layout e Efeitos, em OKLCH, fluidos por clamp(), com uma variante escura. Os nomes dos tokens passam exatamente como o framework os escreve.

Leia references/atomic-framework.md antes de instalá-lo, estendê-lo ou mapear qualquer token para uma Variável V4. Uma nova versão do framework é uma reexecução de scripts/build_framework.py contra o novo JSON de tokens, nunca uma edição manual dos arquivos gerados.

Uma regra que vale a pena carregar mesmo que nada mais seja lido: o framework precisa de html { font-size: 62.5% } para que 1rem seja 10px. Sem isso, cada valor rem renderiza 1,6 vezes maior, e nada acusa erro.

Posicionamento de estilo e código

O references/styling-and-code.md do roteador é a escada. Em termos V4:

Degrau da escada	Elementor V4
Tokens	Variáveis (e a camada CSS do framework para tokens que o V4 não pode conter)
Campos nativos da classe	A aba de estilo da Classe Global, por breakpoint e por estado
CSS personalizado da classe	V4 Custom CSS na classe (estados compostos, anéis :focus-visible, color-mix(), container queries, animação orientada por scroll)
Componente	Componente Elementor expondo apenas as propriedades que variam
Campos nativos do elemento (apenas posicionamento)	Os controles de estilo locais do elemento: ordem, auto-alinhamento, posicionamento em grade, deslocamento de posição, z-index, proporção de aspecto, sua própria imagem de fundo
CSS personalizado do elemento, curto (apenas posicionamento)	V4 Custom CSS no elemento, uma regra curta
FluentSnippets	Conjuntos de utilidades, @keyframes, pequeno JS vanilla, hooks PHP. A camada :root do framework é a única exceção: permanece no CSS de todo o site do Elementor para que o editor o renderize

As Condições de Exibição são apenas lógica de renderização do lado do servidor (um campo ausente, um estado de usuário), nunca visibilidade responsiva, que é uma classe de utilidade.

Componentes

Use antes de escrever código, para qualquer layout que se repita.

1. Organize a seção com elementos atômicos nativos.
2. Crie um Componente a partir do contêiner.
3. Exponha apenas as propriedades que devem variar por instância, tipicamente fontes de texto e imagem.
4. Mantenha o layout principal e o estilo controlados globalmente, dentro do componente.

Um componente cuja cada propriedade é exposta é um modelo com etapas extras. Exponha o mínimo. Referência: elementor.com/help/components-2/

Elementos atômicos e a lacuna de cobertura

Elementos atômicos disponíveis incluem Div Block, Flexbox, Heading, Paragraph, Button, Image, SVG, YouTube, Tabs e o conjunto Atomic Form, com suporte a CSS Grid.

Alguns widgets clássicos ainda não têm equivalente atômico, incluindo acordeões, galerias e carrosséis. Siga o fluxo de decisão da política antes de recorrer a um:

• HTML nativo primeiro. Galeria: uma grade CSS de itens figure. Carrossel: uma linha scroll-snap. Modal: dialog ou popover. Acordeão sem acordeão atômico ainda: details e summary (o acordeão aninhado padrão da casa só existe no V4 quando o Elementor o enviar). Construído a partir de elementos atômicos onde o controle de tag permite, caso contrário, um elemento HTML contendo marcação criada estilizada pelas classes do framework, registrado como vinculado ao construtor.
• Um widget V3 clássico em uma página V4 é o último recurso: não pode receber uma Classe Global ou uma Variável, então quebra a regra de um-class-system. Use um apenas sob a regra da seção 0 da política (sim do operador, registrado com um gatilho de revisão) e substitua-o quando o elemento atômico for enviado.

Estrutura

Flexbox onde o layout é um contexto flex, Div Block onde é um wrapper simples. Tag HTML semântica em cada elemento estrutural. Esboço de título válido. Links aninhados apenas onde o padrão realmente exige, já que uma âncora dentro de uma âncora é marcação inválida.

Estados de elemento e valores responsivos são definidos por breakpoint e por estado nas abas de estilo. Respeite os breakpoints do próprio site e nunca introduza um novo.

Limite de versão

Uma página V4 é uma página V4. Não converta páginas de produção V3 existentes para V4 e não migre parcialmente uma. Páginas mistas são aceitáveis apenas onde a lacuna de cobertura força isso.