Présentation de l'éditeur V4 Alpha : l'avenir de la construction de sites web avec Elementor

Éditeur V4 Alpha introduit une option permettant de commencer par CSS Un cadre de base qui fournit des classes et des états réutilisables, des améliorations de performance, un système de style unifié et des contrôles de style entièrement réactifs qui sont conçus pour améliorer l'efficacité et la cohérence de la construction de sites Web.

Au fil des années, la conception de sites web a évolué et les défis auxquels sont confrontés les créateurs de sites web se sont multipliés, beaucoup d'entre eux rencontrant des problèmes similaires :

• Difficultés à styliser de manière cohérente plusieurs éléments d'un site web
• Duplication du travail lors de la mise à jour d'un même style à plusieurs endroits
• Limiter la réactivité en vous obligeant à utiliser des feuilles de style CSS personnalisées ou à masquer des éléments
• Dégradation des performances due à la complexité de la mise en page
• Différences d'interface entre les widgets

Editor V4 répond à ces problèmes grâce à un puissant cadre centré sur les CSS qui offre des fonctionnalités de niveau professionnel sans avoir à écrire une seule ligne de code.

La première version alpha de l'Éditeur V4 est maintenant disponible en tant qu'expérience optionnelle, vous donnant la possibilité d'explorer les nouvelles fonctionnalités à votre propre rythme. Vous pouvez tester ces nouvelles fonctionnalités, faire part de vos commentaires et continuer à utiliser les fonctionnalités familières de la V3 pendant que nous continuons à développer et à améliorer l'expérience de la V4.

Pour commencer à utiliser l'Éditeur V4 Alpha, mettez à jour la page Elementor 3.29, allez dans Elementor > Settings > Editor V4 et suivez les étapes d'activation. Veuillez noter qu'il s'agit d'une version alpha précoce et qu'elle ne doit être utilisée que sur des sites d'essai ou de test, évitez de l'utiliser dans un environnement de production.

Un seul style, une seule application - utilisez les classes.

Imaginez que vous construisiez un site web avec de nombreux boutons qui doivent avoir le même design. Dans le passé, vous deviez styliser chaque bouton un par un, ou utiliser d'autres méthodes. Désormais, le système de classes de l'Éditeur V4 vous permet de.. :

• Créer des collections de styles réutilisables qui peuvent être appliquées à plusieurs éléments
• La mise à jour d'un style à un endroit donné est immédiatement répercutée dans tous les endroits qui utilisent ce style.
• Maintenir la cohérence de la conception sur l'ensemble du site

Le système de classes introduit deux types de classes :

• Classe locale Chaque élément reçoit automatiquement une classe locale unique (en rose) qui a la priorité la plus élevée en matière de style et ne peut être supprimée. Cela permet de s'assurer que les styles spécifiques à un élément ne sont pas remplacés par d'autres classes.
• Classe mondiale Vous pouvez créer et nommer votre propre classe globale (en vert) pour l'appliquer à tout élément devant partager ces styles. Lorsque vous mettez à jour une classe globale, tous les éléments qui l'utilisent sont mis à jour simultanément. Vous pouvez supprimer les classes globales des éléments sans supprimer la classe elle-même, ce qui facilite l'expérimentation de différentes conceptions au moment de la conception.

Définir des styles interactifs sans écrire de code - en utilisant les États

Utilisez des états (pseudo-classes) pour rendre votre site plus interactif. Vous pouvez définir l'aspect des éléments lorsque les utilisateurs interagissent avec eux, par exemple en créant des états de survol, de mise au point et d'activation. Vous pouvez ainsi concevoir des expériences interactives attrayantes sans avoir à écrire de code.

Pour ajouter un état, il suffit de cliquer sur les trois points situés à côté de la classe à laquelle vous souhaitez appliquer l'état et de sélectionner l'état "Hover", "Active" ou "Focus". Les modifications que vous définissez ne seront appliquées qu'à l'état sélectionné. Les modifications apportées à un état n'affecteront pas les autres états, ce qui vous permet de contrôler précisément les éléments interactifs. Mieux encore, vous pouvez appliquer une expérience d'interaction cohérente sur l'ensemble du site en utilisant des états avec des classes globales.

Gérer et organiser vos classes avec le gestionnaire de classes

Le gestionnaire de classes est un centre de commande qui vous permet d'assurer la cohérence des styles de votre site web :

• Supprimer ou renommer des classes à partir d'un emplacement central
• Modification de la priorité et de la hiérarchie des classes par glisser-déposer
• Voir une vue d'ensemble de toutes les classes globales
• Comprendre la cascade de styles, utiliser les indicateurs de classe

Lorsque vous travaillez avec des classes et des états, des indicateurs codés par couleur vous aideront à comprendre la cascade de styles. Chaque couleur a une fonction différente :

• Les points roses : les styles des classes locales
• Point vert : Styles des classes globales
• Points orange : styles contradictoires à surveiller
• Points gris : styles hérités d'autres classes

Ces repères visuels fournissent un retour d'information instantané pendant que vous travaillez, vous aidant à comprendre d'où viennent les styles et comment ils interagissent.

Onglets de style unifiés pour simplifier le flux de travail

L'éditeur V4 introduit un onglet Styles unifiés pour tous les éléments, contrairement à la V3 où chaque widget disposait d'un panneau Styles distinct.

Le principal avantage de l'onglet Style uniforme :

• Les paramètres de contenu et de fonctionnalités restent dans l'onglet Général
• Toutes les options de style visuel se trouvent dans l'onglet Styles
• Apprendre le système une fois, l'appliquer partout
• Accès cohérent à de puissantes fonctions de stylisme dans tous les éléments

L'onglet Style uniforme comprend des sections complètes qui permettent un contrôle total :

• ouverture (jargon des échecs)Définir le comportement et la structure de l'affichage
• Espacement : définir des contrôles de lien pour les marges et les rembourrages
• Taille : définition de la largeur et de la hauteur, définition des contraintes
• Positionnement : sélectionne la méthode de positionnement et contrôle l'indice Z
• Typographie : accès à d'importantes options de style de texte
• Contexte : création de dessins riches en couches au potentiel illimité
• Bordures : appliquer des styles de bordures cohérents ou différents
• Effet : ajout de plusieurs couches d'ombres et d'autres effets

Améliorez les performances de votre site avec un simple wrapper DIV

L'éditeur V4 présente une version nettement plus DOM qui a une incidence directe sur les performances du site. Chaque élément n'utilise plus qu'un seul DIV au lieu de plusieurs DIV imbriqués comme dans les versions précédentes. HTML réduit la taille de la page et la complexité du navigateur lors du rendu de la page, ce qui présente les avantages suivants :

• Un code plus propre et un rendu plus rapide
• améliorée RÉFÉRENCEMENT classements
• Une meilleure expérience pour les visiteurs

Alors que la version alpha a déjà montré des améliorations de performance, ces avantages seront encore plus significatifs lors de l'utilisation des éléments nouvellement optimisés sur un site web, à mesure que l'Éditeur V4 arrivera à maturité.

Contrôler chaque attribut de style pour chaque appareil

L'éditeur V4 a été complètement amélioré en termes de conception réactive, offrant un contrôle sans précédent et remédiant aux limites des widgets de la V3, où seules certaines options de contrôle disposaient d'une fonctionnalité réactive.

Dans l'Éditeur V4, chaque propriété de style peut être ajustée pour chaque appareil, sans exception. Il suffit de changer d'appareil dans la barre supérieure pour effectuer des ajustements qui n'affectent qu'une taille d'écran spécifique. Cela signifie que vous pouvez définir des styles complètement différents pour les appareils mobiles et les appareils de bureau sans avoir à écrire une seule ligne ! CSS.

Création de motifs riches en couches avec les répétiteurs de style

L'éditeur V4 introduit le répétiteur de style, qui permet de créer des structures hiérarchiques pour les arrière-plans et les effets :

• Ajouter plusieurs images d'arrière-plan, des dégradés et des couleurs
• Créez des effets d'ombre complexes et superposez-les.
• Faire glisser les calques pour ajuster la priorité
• Dupliquer, masquer ou supprimer des calques à l'aide d'opérations contextuelles

Les outils de dégradé améliorés offrent un contrôle avancé, vous permettant d'ajouter autant d'arrêts de couleur que nécessaire et de les positionner avec précision pour créer des effets visuels époustouflants.

Le répéteur de style fonctionne actuellement pour les arrière-plans et les ombres de boîtes, et la prise en charge d'autres options de style sera ajoutée à l'avenir.

Nouveaux éléments de l'éditeur V4

L'éditeur V4 Alpha introduit sept nouveaux éléments atomiques :

• Bloc DIV
• Flexbox
• légende
• passages
• imagerie
• boutons
• SVG

Chaque élément illustre la philosophie de la V4 : balisage simplifié, modèles de style cohérents et performances améliorées. Cette approche modulaire garantit des mises à jour plus rapides et plus évolutives pour l'ensemble du site.

Parfaitement compatible avec V3

Étant donné qu'Elementor compte déjà plus de 18 millions de sites web, nous déployons l'Éditeur V4 par étapes, ce qui nous permet de recueillir des commentaires et d'améliorer continuellement l'expérience avant qu'il ne devienne l'éditeur par défaut.

L'éditeur V4 est désormais parfaitement compatible avec la V3 :

• Vous pouvez utiliser des éléments V3 et V4 sur la même page.
• Continuez à utiliser les widgets familiers de la V3 tout en explorant progressivement les fonctionnalités de la V4 !
• Les widgets V3 sont toujours pleinement fonctionnels et peuvent être placés sur des mises en page V4 (et vice versa).
• Pas d'impact sur les flux de travail existants

Démarrer avec la V4

Remarques importantesCette version alpha est destinée à être testée et utilisée à titre exploratoire. Nous recommandons de l'utiliser uniquement sur des sites d'essai ou de test, et non sur des sites de production.

Cette version alpha n'est qu'un début. Dans les mois à venir, de nouvelles fonctionnalités seront introduites, les fonctionnalités existantes seront améliorées et l'Éditeur V4 sera affiné sur la base de nos commentaires afin d'en faire le constructeur de sites web le plus puissant et le plus intuitif qui soit.

Dans les prochaines versions, nous verrons des variables, des propriétés personnalisées, des ID CSS et bien d'autres choses encore !

résumés

Avec l'introduction de l'Éditeur V4Elementor Une refonte majeure s'annonce. Les nouvelles fonctionnalités améliorent non seulement la flexibilité et l'efficacité de la conception, mais apportent également aux utilisateurs des contrôles de conception responsive plus puissants et de meilleures performances. Que ce soit par le biais de classes réutilisables, de styles interactifs ou de structures DOM simplifiées, l'Éditeur V4 offre à tous les créateurs de sites web un flux de travail plus efficace et une expérience de conception plus raffinée.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.