wpnomy Elementor Atomic Expert (V4)

Que fait wpnomy Elementor Atomic Expert (V4) ?

Atteint depuis wpnomy, qui gère la réception, les normes de design, la livraison JSON et la remise. Ce fichier contient uniquement les règles de construction V4.

Nécessite Elementor Core 3.29+ avec l'Éditeur Atomique activé, et est activé par défaut à partir de la version 4.x.

Ouvrez le bloc-notes de construction du routeur au début de chaque construction et tenez-le à jour : réception, plan, décisions, exceptions liées au constructeur et vérification.

Associations

elementor-build-page pour la construction via Novamira, et elementor-convert-to-v4 lorsqu'une page V3 existante est transférée. Chargez-les pour les mécanismes ; les conventions ici guident là où elles diffèrent.

Porte de la boîte noire

Exécutez avant de placer tout élément. Déclaration complète : references/black-box-policy.md du routeur.

Autorisé (primitifs)	Bloc Div, Flexbox, Titre, Paragraphe, Image, Bouton, SVG, Séparateur, avec Classes Globales et Variables
Autorisé, lié au constructeur	Formulaire atomique, onglets atomiques, l'accordéon atomique quand Elementor en livre un (par défaut pour les FAQ), YouTube ou vidéo avec façade, Grille de boucles pour listes dynamiques, Menu de navigation, recherche, pagination, fil d'Ariane, Composants. Stylisés uniquement par classes ; chacun enregistré avec son balisage de sortie
Jamais	Widgets composites classiques (boîte d'icône, boîte d'image, CTA, tarification, témoignage, compteur, progression, compte à rebours, héros, icônes sociales, notation par étoiles, boîte d'auteur, infos d'article), widgets de modules complémentaires, Section, Colonne ou Section Intérieure legacy, effets de mouvement et d'entrée, effets de survol par élément, conditions d'affichage pour visibilité réactive, Éditeur de texte contenant du balisage de mise en page

1. Le HTML de sortie exact de l'élément peut-il être décrit ? 2. Chaque partie peut-elle être stylisée par nos classes et variables ? 3. Survivrait-il à une copie vers un autre constructeur en tant que HTML plus classes ? Si non : ignorez-le, ou enregistrez-le comme exception liée au constructeur.

Vérifiez d'abord l'installation

Plusieurs capacités sont livrées en tant que fonctionnalités optionnelles et sont désactivées par défaut sur certaines installations. Confirmez chacune avant de planifier autour d'elle, et signalez tout élément manquant plutôt que de concevoir silencieusement autour.

Fonctionnalité	Importance
Classes Globales	L'ensemble du flux de travail des classes en dépend
Variables et Gestionnaire de Variables	Sans le Gestionnaire, les variables peuvent être consommées mais pas créées
Composants	Sans cela, il n'y a pas de primitive de mise en page réutilisable
CSS Personnalisé V4	Sans cela, le CSS par élément est indisponible et le code remonte dans l'ordre d'escalade

Doctrine de style

C'est là que le flux de travail Oxygen et Bricks est repris, car V4 dispose des primitives pour cela.

Les variables sont les jetons. Couleurs, typographie et tailles vivent en tant que variables. Lisez d'abord l'ensemble existant du site et utilisez-le. Ne codez jamais en dur une valeur qu'une variable exprime déjà, et ne créez jamais de quasi-doublon parce que le nom existant n'était pas évident.

Les classes portent le style, nommées en BEM : block, block__element, block--modifier. Stylisez la classe, pas l'élément. Toute classe inventée par ce plugin prend le préfixe de l'entreprise plus celui du site, sw-<site>- (routeur, Nommage). Un élément stylisé localement est un élément unique que la page suivante ne peut pas réutiliser.

Les Classes Globales V4 sont un espace de noms plat sans sélecteurs descendants. BEM est conçu exactement pour cela, donc cela convient, mais le contexte doit vivre dans le nom de la classe plutôt que dans un sélecteur parent. Un card__title qui diffère à l'intérieur de deux blocs nécessite deux noms de classe, pas une règle imbriquée.

Le design ne vit jamais sur un élément. Typographie, espacement, couleur, bordure, ombre et états vivent dans les classes et les variables. Les contrôles de style propres d'un élément ne gèrent que les cas uniques de placement (routeur, styling-and-code.md), et une deuxième utilisation devient une classe de modificateur.

L'Atomic Framework

Le système de design maison, maintenu séparément en tant que produit : 72 jetons répartis sur Couleurs, Typographie, Espacement, Mise en page et Effets, en OKLCH, fluides via clamp(), avec une variante sombre. Les noms de jetons passent exactement comme le framework les écrit.

Lisez references/atomic-framework.md avant de l'installer, de l'étendre ou de mapper un jeton sur une Variable V4. Une nouvelle version du framework est une réexécution de scripts/build_framework.py avec le nouveau JSON de jetons, jamais une modification manuelle des fichiers générés.

Une règle qui mérite d'être retenue même si rien d'autre n'est lu : le framework a besoin de html { font-size: 62.5% } pour que 1rem soit égal à 10px. Sans cela, chaque valeur en rem sera 1,6 fois trop grande, et rien ne génère d'erreur.

Placement du style et du code

Le references/styling-and-code.md du routeur est l'échelle. En termes V4 :

Échelon	Elementor V4
Jetons	Variables (et la couche CSS du framework pour les jetons que V4 ne peut pas contenir)
Champs natifs de classe	L'onglet de style de la Classe Globale, par point d'arrêt et par état
CSS personnalisé de classe	CSS Personnalisé V4 sur la classe (états composés, anneaux :focus-visible, color-mix(), requêtes de conteneur, animation pilotée par le défilement)
Composant	Composant Elementor exposant uniquement les propriétés qui varient
Champs natifs d'élément (placement uniquement)	Les contrôles de style locaux de l'élément : ordre, auto-alignement, placement en grille, décalage de position, z-index, rapport d'aspect, son propre fond d'image
CSS personnalisé d'élément, court (placement uniquement)	CSS Personnalisé V4 sur l'élément, une règle courte
FluentSnippets	Ensembles d'utilitaires, @keyframes, petit JavaScript vanilla, hooks PHP. La couche :root du framework est la seule exception : elle reste dans le CSS à l'échelle du site d'Elementor pour que l'éditeur la rende

Les Conditions d'Affichage sont uniquement une logique de rendu côté serveur (un champ manquant, un état utilisateur), jamais une visibilité réactive, qui est une classe utilitaire.

Composants

Utilisez avant d'écrire du code, pour toute mise en page qui se répète.

1. Disposez la section avec des éléments atomiques natifs.
2. Créez un Composant à partir du conteneur.
3. Exposez uniquement les propriétés qui doivent varier par instance, généralement les sources de texte et d'image.
4. Gardez la mise en page et le style de base contrôlés globalement, à l'intérieur du composant.

Un composant dont chaque propriété est exposée est un modèle avec des étapes supplémentaires. Exposez le minimum. Référence : elementor.com/help/components-2/

Éléments atomiques et le déficit de couverture

Les éléments atomiques disponibles incluent Bloc Div, Flexbox, Titre, Paragraphe, Bouton, Image, SVG, YouTube, Onglets et l'ensemble Formulaire Atomique, avec prise en charge de la grille CSS.

Certains widgets classiques n'ont pas encore d'équivalent atomique, notamment les accordéons, les galeries et les carrousels. Suivez le flux de décision de la politique avant d'en utiliser un :

• HTML natif d'abord. Galerie : une grille CSS d'éléments figure. Carrousel : une ligne scroll-snap. Modal : dialog ou popover. Accordéon sans accordéon atomique encore : details et summary (l'accordéon imbriqué par défaut de la maison n'existe dans V4 qu'une fois qu'Elementor le livre). Construit à partir d'éléments atomiques là où le contrôle de balise le permet, sinon un élément HTML contenant un balisage créé stylisé par les classes du framework, enregistré comme lié au constructeur.
• Un widget classique V3 sur une page V4 est le dernier recours : il ne peut pas prendre de Classe Globale ou de Variable, il brise donc la règle de la classe unique. Utilisez-en un uniquement sous la règle de la section 0 de la politique (accord de l'opérateur, enregistré avec un déclencheur de révision), et remplacez-le lorsque l'élément atomique est livré.

Structure

Flexbox là où la mise en page est un contexte flex, Bloc Div là où c'est un simple conteneur. Balise HTML sémantique sur chaque élément structurel. Structure de titres valide. Liens imbriqués uniquement là où le motif le demande réellement, car un ancre à l'intérieur d'un ancre est un balisage invalide.

Les états d'élément et les valeurs réactives sont définis par point d'arrêt et par état dans les onglets de style. Respectez les propres points d'arrêt du site et n'en introduisez jamais de nouveaux.

Limite de version

Une page V4 est une page V4. Ne convertissez pas les pages V3 de production existantes en V4 et ne migrez pas partiellement une page. Les pages mixtes ne sont acceptables que lorsque le déficit de couverture l'impose.