¿Qué hace wpnomy Elementor Atomic Expert (V4)?
Alcanzado desde wpnomy, que gestiona la entrada, los estándares de diseño, la entrega JSON y la transferencia. Este archivo contiene solo las reglas de construcción V4.
Requiere Elementor Core 3.29+ con el Editor Atómico activado, y está activado por defecto desde la versión 4.x.
Abre el bloc de notas de construcción del enrutador al inicio de cada construcción y mantenlo actualizado: entrada, plan, decisiones, excepciones vinculadas al constructor y verificación.
Se empareja con
elementor-build-page para construir a través de Novamira, y elementor-convert-to-v4 cuando se migra una página V3 existente. Cárgalos para la mecánica; las convenciones aquí guían donde difieren.
Puerta de la caja negra
Ejecutar antes de colocar cualquier elemento. Declaración completa: references/black-box-policy.md del enrutador.
| Permitido (primitivos) | Div Block, Flexbox, Heading, Paragraph, Image, Button, SVG, Divider, con Clases Globales y Variables |
|---|---|
| Permitido, vinculado al constructor | Atomic Form, Tabs atómicos, el acordeón atómico cuando Elementor tenga uno (valor predeterminado del sistema para preguntas frecuentes), YouTube o video con fachada, Loop Grid para listas dinámicas, Nav Menu, búsqueda, paginación, breadcrumbs, Componentes. Estilizados solo por clases; cada uno registrado con su marcado de salida |
| Nunca | Widgets clásicos compuestos (icon box, image box, CTA, pricing, testimonial, counter, progress, countdown, hero, social icons, star rating, author box, post info), widgets de paquetes de complementos, Section, Column o Inner Section heredados, efectos de movimiento y entrada, efectos hover por elemento, condiciones de visualización para visibilidad responsiva, Text Editor que contenga marcado de diseño |
- ¿Se puede describir el HTML de salida exacto del elemento? 2. ¿Se puede estilizar cada parte con nuestras clases y variables? 3. ¿Sobreviviría a una copia a otro constructor como HTML más clases? Cualquier "no": saltarlo, o registrarlo como una excepción vinculada al constructor.
Verificar la instalación primero
Varias capacidades se envían como características experimentales y están desactivadas por defecto en algunas instalaciones. Confirma cada una antes de planificar en torno a ella, e informa cualquier falta en lugar de diseñar silenciosamente alrededor de ella.
| Característica | Importa porque |
|---|---|
| Clases Globales | Todo el flujo de trabajo de clases depende de ello |
| Variables y el Gestor de Variables | Sin el Gestor, las Variables se pueden consumir pero no crear |
| Componentes | Sin ello no hay primitiva de diseño reutilizable |
| CSS Personalizado V4 | Sin ello, el CSS por elemento no está disponible y el código sube en el orden de escalamiento |
Doctrina de estilo
Aquí es donde el flujo de trabajo de Oxygen y Bricks se traslada, porque V4 tiene las primitivas para ello.
Las Variables son los tokens. Los colores, la tipografía y los tamaños viven como Variables. Lee primero el conjunto existente del sitio y úsalo. Nunca codifiques un valor que una variable ya exprese, y nunca crees un casi-duplicado porque el nombre existente no era obvio.
Las Clases llevan el estilo, nombradas en BEM: block, block__element, block--modifier. Estiliza la clase, no el elemento. Cualquier clase que este plugin invente toma el prefijo de la compañía más el sitio, sw-<site>- (enrutador, Nomenclatura). Un elemento estilizado localmente es algo único que la siguiente página no puede reutilizar.
Las Clases Globales V4 son un espacio de nombres plano sin selectores descendientes. BEM está construido exactamente para eso, así que encaja, pero el contexto tiene que vivir en el nombre de la clase en lugar de un selector padre. Un card__title que difiere dentro de dos bloques necesita dos nombres de clase, no una regla anidada.
El diseño nunca vive en un elemento. La tipografía, el espaciado, el color, el borde, la sombra y los estados viven en clases y variables. Los controles de estilo propios de un elemento contienen solo excepciones de colocación únicas (enrutador, styling-and-code.md), y un segundo uso se convierte en una clase modificadora.
El Atomic Framework
El sistema de diseño interno, mantenido por separado como un producto: 72 tokens en Colores, Tipografía, Espaciado, Diseño y Efectos, en OKLCH, fluidos mediante clamp(), con una variante oscura. Los nombres de los tokens pasan exactamente como los escribe el framework.
Lee references/atomic-framework.md antes de instalarlo, extenderlo o mapear cualquier token a una Variable V4. Una nueva versión del framework es una re-ejecución de scripts/build_framework.py contra el nuevo JSON de tokens, nunca una edición manual de los archivos generados.
Una regla que vale la pena llevar incluso si no se lee nada más: el framework necesita html { font-size: 62.5% } para que 1rem sea 10px. Sin ello, cada valor en rem se renderiza 1.6 veces más grande, y nada da error.
Colocación de estilo y código
El references/styling-and-code.md del enrutador es la escalera. En términos de V4:
| Paso de la escalera | Elementor V4 |
|---|---|
| Tokens | Variables (y la capa CSS del framework para tokens que V4 no puede contener) |
| Campos nativos de clase | La pestaña de estilo de la Clase Global, por punto de interrupción y por estado |
| CSS personalizado de clase | CSS Personalizado V4 en la clase (estados compuestos, anillos :focus-visible, color-mix(), consultas de contenedor, animación impulsada por desplazamiento) |
| Componente | Componente de Elementor que expone solo las propiedades que varían |
| Campos nativos de elemento (solo colocación) | Los controles de estilo locales del elemento: orden, auto-alineación, colocación en cuadrícula, desplazamiento de posición, z-index, relación de aspecto, su propia imagen de fondo |
| CSS personalizado de elemento, corto (solo colocación) | CSS Personalizado V4 en el elemento, una regla corta |
| FluentSnippets | Conjuntos de utilidades, @keyframes, JavaScript vainilla pequeño, hooks PHP. La capa :root del framework es la única excepción: permanece en el CSS de todo el sitio de Elementor para que el editor lo renderice |
Las Condiciones de Visualización son solo lógica de renderizado del lado del servidor (un campo faltante, un estado de usuario), nunca visibilidad responsiva, que es una clase de utilidad.
Componentes
Úsalos antes de escribir código, para cualquier diseño que se repita.
- Diseña la sección con elementos atómicos nativos.
- Crea un Componente desde el contenedor.
- Expón solo las propiedades que deben variar por instancia, típicamente fuentes de texto e imagen.
- Mantén el diseño y estilo central controlados globalmente, dentro del componente.
Un componente cuyas todas las propiedades están expuestas es una plantilla con pasos extra. Expón el mínimo. Referencia: elementor.com/help/components-2/
Elementos atómicos y la brecha de cobertura
Los elementos atómicos disponibles incluyen Div Block, Flexbox, Heading, Paragraph, Button, Image, SVG, YouTube, pestañas y el conjunto Atomic Form, con soporte para CSS Grid.
Algunos widgets clásicos aún no tienen un equivalente atómico, entre ellos acordeones, galerías y carruseles. Sigue el flujo de decisión de la política antes de recurrir a uno:
- HTML nativo primero. Galería: una cuadrícula CSS de elementos
figure. Carrusel: una filascroll-snap. Modal:dialogopopover. Acordeón sin acordeón atómico aún:detailsysummary(el acordeón anidado predeterminado del sistema solo existe en V4 una vez que Elementor lo implemente). Construido a partir de elementos atómicos donde el control de etiqueta lo permita, de lo contrario, un elemento HTML que contenga marcado creado estilizado por las clases del framework, registrado como vinculado al constructor. - Un widget V3 clásico en una página V4 es el último recurso: no puede tomar una Clase Global ni una Variable, por lo que rompe la regla de un solo sistema de clases. Úsalo solo bajo la regla de la sección 0 de la política (sí del operador, registrado con un disparador de revisión) y reemplázalo cuando el elemento atómico esté disponible.
Estructura
Flexbox donde el diseño es un contexto flex, Div Block donde es un contenedor simple. Etiqueta HTML semántica en cada elemento estructural. Esquema de encabezado válido. Enlaces anidados solo donde el patrón realmente lo requiera, ya que un ancla dentro de un ancla es marcado inválido.
Los estados de los elementos y los valores responsivos se establecen por punto de interrupción y por estado en las pestañas de estilo. Respeta los puntos de interrupción propios del sitio y nunca introduzcas uno nuevo.
Límite de versión
Una página V4 es una página V4. No conviertas páginas V3 de producción existentes a V4 ni migres parcialmente una. Las páginas mixtas son aceptables solo cuando la brecha de cobertura lo fuerza.