wpnomy Elementor Atomic Expert (V4)

Was macht wpnomy Elementor Atomic Expert (V4)?

Wird von wpnomy aus erreicht, das für die Aufnahme, die Designstandards, die JSON-Auslieferung und die Übergabe zuständig ist. Diese Datei enthält nur die V4-Build-Regeln.

Erfordert Elementor Core 3.29+ mit aktiviertem Atomic Editor und ist ab 4.x standardmäßig aktiviert.

Öffne zu Beginn jedes Builds den Build-Scratchpad des Routers und halte ihn aktuell: Aufnahme, Plan, Entscheidungen, builder-bound-Ausnahmen und Verifizierung.

Arbeitet zusammen mit

elementor-build-page zum Bauen über Novamira und elementor-convert-to-v4, wenn eine bestehende V3-Seite migriert wird. Lade sie für die Mechanik; die Konventionen hier führen dort, wo sie abweichen.

Blackbox-Tor

Vor dem Platzieren eines Elements ausführen. Vollständige Anweisung: references/black-box-policy.md des Routers.

Erlaubt (Primitive)	Div Block, Flexbox, Überschrift, Absatz, Bild, Button, SVG, Teiler, mit Global Classes und Variablen
Erlaubt, builder-bound	Atomic Formular, Atomare Tabs, Das atomare Accordion, wenn Elementor eines ausliefert (Hausstandard für FAQs), YouTube oder Video mit einer Fassade, Loop Grid für dynamische Listen, Nav-Menü, Suche, Paginierung, Breadcrumbs, Komponenten. Nur durch Klassen gestylt; jede wird mit ihrem Ausgabe-Markup protokolliert
Niemals	Klassische zusammengesetzte Widgets (Icon Box, Image Box, CTA, Pricing, Testimonial, Counter, Progress, Countdown, Hero, Social Icons, Star Rating, Author Box, Post Info), Add-on-Pack-Widgets, Legacy-Bereich, -Spalte oder -Innerer Bereich, Bewegungs- und Eingangseffekte, Hover-Effekte pro Element, Anzeigebedingungen für responsive Sichtbarkeit, Text-Editor mit Layout-Markup

1. Kann das exakte Ausgabe-HTML des Elements beschrieben werden? 2. Kann jeder Teil durch unsere Klassen und Variablen gestylt werden? 3. Würde es einen Kopiervorgang in einen anderen Builder als HTML plus Klassen überleben? Jedes Nein: überspringe es oder protokolliere es als builder-bound-Ausnahme.

Installation zuerst prüfen

Mehrere Fähigkeiten werden als Feature-Flags ausgeliefert und sind bei manchen Installationen standardmäßig deaktiviert. Bestätige jede, bevor du sie einplanst, und melde Fehlendes, anstatt stillschweigend darum herum zu designen.

Feature	Wichtig, weil
Global Classes	Der gesamte Klassen-Workflow hängt davon ab
Variablen und Variablen-Manager	Ohne Manager können Variablen konsumiert, aber nicht erstellt werden
Komponenten	Ohne sie gibt es kein wiederverwendbares Layout-Primitiv
V4 Custom CSS	Ohne sie ist CSS pro Element nicht verfügbar und Code wandert in der Eskalationsreihenfolge nach oben

Styling-Doktrin

Hier wird der Workflow von Oxygen und Bricks übernommen, weil V4 die Primitiven dafür hat.

Variablen sind die Tokens. Farben, Typografie und Größen leben als Variablen. Lies zuerst den bestehenden Satz der Website und verwende ihn. Härte niemals einen Wert ein, den eine Variable bereits ausdrückt, und erstelle niemals einen Fast-Duplikat, weil der vorhandene Name nicht offensichtlich war.

Klassen tragen das Styling, benannt in BEM: block, block__element, block--modifier. Style die Klasse, nicht das Element. Jede Klasse, die dieses Plugin erfindet, erhält das Firmen- plus Site-Präfix, sw-<site>- (Router, Benennung). Ein lokal gestyltes Element ist ein Einmal-Element, das die nächste Seite nicht wiederverwenden kann.

V4 Global Classes sind ein flacher Namensraum ohne Nachkommen-Selektoren. BEM ist genau dafür gemacht, also passt es, aber der Kontext muss im Klassennamen leben, nicht in einem Eltern-Selektor. Eine card__title, die sich in zwei Blöcken unterscheidet, benötigt zwei Klassennamen, keine verschachtelte Regel.

Design lebt niemals auf einem Element. Typografie, Abstände, Farbe, Rand, Schatten und Zustände leben in Klassen und Variablen. Die eigenen Style-Steuerelemente eines Elements enthalten nur Platzierungs-Einmaleffekte (Router, styling-and-code.md), und eine zweite Verwendung wird zu einer Modifikator-Klasse.

Das Atomic Framework

Das hauseigene Designsystem, getrennt als Produkt gepflegt: 72 Tokens in den Bereichen Farben, Typografie, Abstände, Layout und Effekte, in OKLCH, fluid durch clamp(), mit einer dunklen Variante. Token-Namen werden exakt so übernommen, wie das Framework sie schreibt.

Lies references/atomic-framework.md, bevor du es installierst, erweiterst oder ein Token auf eine V4-Variable abbildest. Eine neue Framework-Version ist eine erneute Ausführung von scripts/build_framework.py gegen das neue Tokens-JSON, niemals eine manuelle Bearbeitung der generierten Dateien.

Eine Regel, die es wert ist, auch dann übernommen zu werden, wenn sonst nichts gelesen wird: Das Framework benötigt html { font-size: 62.5% }, damit 1rem 10px entspricht. Ohne dies wird jeder rem-Wert 1,6-mal zu groß dargestellt, und nichts gibt einen Fehler aus.

Styling und Code-Platzierung

Die references/styling-and-code.md des Routers ist die Leiter. In V4-Begriffen:

Leiter-Schritt	Elementor V4
Tokens	Variablen (und die Framework-CSS-Ebene für Tokens, die V4 nicht halten kann)
Native Klassenfelder	Der Style-Tab der Globalen Klasse, pro Breakpoint und pro Zustand
Benutzerdefiniertes CSS der Klasse	V4 Custom CSS auf der Klasse (zusammengesetzte Zustände, :focus-visible-Ringe, color-mix(), Container-Queries, scroll-gesteuerte Animation)
Komponente	Elementor-Komponente, die nur die Eigenschaften freigibt, die variieren
Native Element-Felder (nur Platzierung)	Die lokalen Style-Steuerelemente des Elements: Reihenfolge, Selbstausrichtung, Grid-Platzierung, Positionsversatz, Z-Index, Seitenverhältnis, eigenes Hintergrundbild
Benutzerdefiniertes CSS des Elements, kurz (nur Platzierung)	V4 Custom CSS auf dem Element, eine kurze Regel
FluentSnippets	Utility-Sets, @keyframes, kleines Vanilla-JS, PHP-Hooks. Die :root-Ebene des Frameworks ist die eine Ausnahme: Sie bleibt im siteweiten CSS von Elementor, damit der Editor sie rendert

Anzeigebedingungen (Display Conditions) sind nur serverseitige Render-Logik (ein fehlendes Feld, ein Benutzerzustand), niemals responsive Sichtbarkeit, die eine Utility-Klasse ist.

Komponenten

Verwende sie, bevor du Code schreibst, für jedes Layout, das sich wiederholt.

1. Baue den Bereich mit nativen atomaren Elementen auf.
2. Erstelle eine Komponente aus dem Container.
3. Gib nur die Eigenschaften frei, die pro Instanz variieren sollten, typischerweise Text- und Bildquellen.
4. Halte das Kernlayout und Styling global innerhalb der Komponente gesteuert.

Eine Komponente, deren jede Eigenschaft freigegeben ist, ist eine Vorlage mit zusätzlichen Schritten. Gib das Minimum frei. Referenz: elementor.com/help/components-2/

Atomare Elemente und die Abdeckungslücke

Verfügbare atomare Elemente umfassen Div Block, Flexbox, Überschrift, Absatz, Button, Bild, SVG, YouTube, Tabs und das Atomic-Formular-Set, mit CSS Grid-Unterstützung.

Einige klassische Widgets haben noch kein atomares Äquivalent, darunter Akkordeons, Galerien und Karussells. Befolge den Entscheidungsablauf der Richtlinie, bevor du zu einem greifst:

• Zuerst natives HTML. Galerie: ein CSS-Grid von figure-Elementen. Karussell: eine scroll-snap-Zeile. Modal: dialog oder popover. Akkordeon, wenn es noch kein atomares gibt: details und summary (das hauseigene Standard-Verschachtelungs-Akkordeon existiert in V4 erst, wenn Elementor es ausliefert). Aufgebaut aus atomaren Elementen, wo die Tag-Steuerung es erlaubt, ansonsten ein HTML-Element, das verfasstes Markup enthält, gestylt durch die Framework-Klassen, protokolliert als builder-bound.
• Ein klassisches V3-Widget auf einer V4-Seite ist der letzte Ausweg: Es kann keine Global Class oder Variable aufnehmen, daher bricht es die Ein-Klassen-System-Regel. Verwende eines nur unter der Abschnitt-0-Regel der Richtlinie (Operator sagt ja, protokolliert mit einem Wiederholungs-Trigger) und ersetze es, wenn das atomare Element ausgeliefert wird.

Struktur

Flexbox, wo das Layout ein Flex-Kontext ist, Div Block, wo es ein einfacher Wrapper ist. Semantisches HTML-Tag auf jedem Strukturelement. Gültige Überschriften-Gliederung. Verschachtelte Links nur dort, wo das Muster es wirklich verlangt, da ein Anker innerhalb eines Ankers ungültiges Markup ist.

Elementzustände und responsive Werte werden pro Breakpoint und pro Zustand in den Style-Tabs gesetzt. Respektiere die eigenen Breakpoints der Website und führe niemals einen neuen ein.

Versionsgrenze

Eine V4-Seite ist eine V4-Seite. Konvertiere keine bestehenden V3-Produktionsseiten zu V4 und migriere keine teilweise. Gemischte Seiten sind nur dort akzeptabel, wo die Abdeckungslücke es erzwingt.