Construisez de magnifiques sites Web WordPress en utilisant Divi et Divi Builder

Elementor 3.0: quelles sont les nouvelles fonctionnalités?

Blair2004 Tutoriels WordPress Nov 30, 2020

Une nouvelle mise à jour majeure d'Elementor a été publiée. Nous sommes passés de la version 2.x à Version 3.0. Cette nouvelle version comprend une nouvelle façon de créer des sites Web à l'aide de WordPress et Elementor. Nous essaierons de convertir ces nouvelles fonctionnalités.

Quels sont les principaux ajouts sur Elementor 3.0?

Elementor 3.0 est livré avec 3 ajouts principaux qui sont: les fonctionnalités du système de conception, le nouveau générateur de thèmes et des améliorations significatives des performances.

Caractéristiques du système de conception

Vous êtes-vous déjà demandé comment les grandes entreprises font pour bien performer, quelle que soit la plateforme dans laquelle elles se trouvent? Tout ce qu'ils créent semble cohérent et a le même design. C'est possible grâce à ce qu'on appelle «Design System». Selon UnxDesign.cc, le système de conception est:

La source unique de vérité qui regroupe tous les éléments qui permettront aux équipes de concevoir, réaliser et développer un produit. Un système de conception n'est donc pas un livrable, mais un ensemble de livrables. Il évoluera constamment avec le produit, les outils et les nouvelles technologies.

Collectif UX

En mettant en œuvre un système de conception, assurez la cohérence de toute votre équipe autour d'un langage de conception et révolutionnez également le fonctionnement de votre équipe et assurez un flux de travail plus rapide.

Télécharger Divi le meilleur thème WordPress

Le thème WordPress le plus populaire au monde et le constructeur ultime de la page WordPress

Télécharger divi

Les fonctionnalités du système de conception d'Elementor 3.0 comprennent:

  • Couleurs globales
  • Nouveau panneau Paramètres du site
  • Polices globales

Voyons en profondeur comment cela vous aidera à créer de meilleurs sites Web professionnels.

Couleurs globales

Elementor 3.0 ajoute une nouvelle façon de travailler avec les couleurs du site. Cette nouvelle méthode s'appelle Global Colors.

Les couleurs globales vous aident à changer la couleur d'un emplacement et à mettre à jour cette couleur partout où elle est utilisée.

Vous allez commencer à choisir les couleurs globales de base pour votre site Web. Ensuite, entrez dans n'importe quel style de couleur dans Elementor et définissez-le comme l'une des quatre couleurs. Notez que vous pouvez ajouter autant de couleurs personnalisées sur la liste globale.

C'est maintenant que les variables CSS entrent en jeu. Revenez aux couleurs globales et changez l'une des couleurs. Le jeu de couleurs de l'ensemble de votre site change en fonction de la nouvelle couleur globale. Avez-vous déjà vécu quelque chose d'aussi simple?

Vous pourrez également concevoir une couleur globale différente à partir de l’entrée de contrôle ou créer une nouvelle couleur globale, le tout en utilisant le même sélecteur de couleur à l’intérieur de l’entrée de contrôle.

Paramètres du site

La création des premiers paramètres de conception d'un site Web prend beaucoup de temps. Vous devrez jongler entre le code du thème, le Customizer, functions.php. Voilà des raisons suffisantes pour justifier vos maux de tête.

Les nouveaux paramètres du site affichent divers outils de configuration. De cette façon, vous continuerez à faire toutes ces tâches à partir d'un seul endroit.

Pour commencer, dans n'importe quelle page que vous modifiez avec Elementor, dans le panneau de gauche, cliquez sur l'icône en haut à gauche. Cela vous fera basculer vers le panneau Paramètres globaux.

Dans ce panneau Paramètres globaux, vous trouverez:

  • Mise en page: pour configurer les paramètres de mise en page par défaut d'Elementor, tels que la largeur du contenu par défaut ou la mise en page par défaut.
  • Identité du site: personnalisez vos identités intersites, comme le logo, le titre, le slogan et même le Favicon.
  • Style du thème: personnalisez les éléments HTML non liés à Elementor (généralement définis par le thème) pour la typographie, les boutons et les champs de formulaire.
  • Lightbox: définissez le style par défaut des Lightbox d'Elementor
  • Couleurs et polices globales: vous permettent de configurer les couleurs et les polices globales qui s'appliquent à votre site Web.

Polices globales

Les couleurs et la typographie font partie des composants de construction de tout site Web. En utilisant la même logique que la fonctionnalité Global Colors, il s'agit d'une nouvelle méthode de travail avec les styles de texte de votre site.

Avec les polices globales, tous les paramètres de typographie peuvent s'appliquer globalement. Vous pouvez désormais configurer tous les paramètres de typographie de votre site globalement, y compris la famille de polices, la taille et l'échelle de la police, l'épaisseur de la police, la transformation de la police, le style de police, la décoration de la police, la hauteur de ligne, l'espacement des lettres et même les paramètres réactifs. Vous pourrez également définir ces paramètres sur chaque widget contenant un texte et personnaliser vos propres polices globales.

Avec une typographie correctement conçue, vous pourrez appliquer ces changements globalement.

L'ensemble du site visualisé et organisé en un seul endroit

Alors que le célèbre Générateur de thèmes est devenu le leader de l'industrie en termes de présentation complète de la conception du site Web, cette nouvelle interface utilisateur va encore plus loin. Le nouveau générateur de thèmes vous donne maintenant une vue d'ensemble de tout un site Web de manière très intuitive.

Ce générateur de thèmes fournit une vue d'ensemble du site, cela inclut toutes les parties du site: en-tête, pied de page, modèle de page global, modèle de publication global, etc. Chaque partie du site peut être prévisualisée, ce qui facilite grandement la conception d'un site Web complet.

Amélioration des performances

Alors qu'une application se développe, il est évident que le développeur doit se soucier des performances. Les mises à jour effectuées sur Elementor 3.0 sont faites pour assurer une belle infrastructure de code qui a abouti à des améliorations de performances remarquables.

Il y a eu beaucoup de purges d'éléments DOM, ce qui accélère le rendu d'Elementor. Cela devrait certainement améliorer le classement de la vitesse de vos pages et l'expérience globale des utilisateurs de votre site Web.

Concrètement, qu'est-ce qui a changé en terme de vitesse de page?

Elementor 3.0 apporte des améliorations significatives pour les processus de rendu côté serveur et la façon dont Elementor rend les valeurs CSS dynamiques. Cela vous permet d'incorporer des éléments et des valeurs dynamiques dans tout votre site Web. Par exemple, vous pouvez créer un modèle pour les articles du site et décider d'afficher l'image sélectionnée de chaque article en arrière-plan derrière le titre de l'article.

En arrière-plan, lorsque Elementor prépare une publication à envoyer au navigateur, il analyse la publication pour les valeurs dynamiques, les récupère, et si elles incluent des valeurs CSS, il imprime ce CSS.

Avec Elementor 3.0, le temps consacré à ce processus a été considérablement réduit. Grâce aux valeurs dynamiques qui sont stockées pour chacun de vos posts. Une fois que cette liste a été stockée, chaque fois que quelqu'un visite la publication, Elementor accède directement à cette liste, accélérant ainsi le processus. Les valeurs dynamiques affectées par cette optimisation incluent les images d'arrière-plan, les couleurs et bien plus encore. Cette amélioration apporte une réduction notable des charges du serveur.

Résumé de la mise à jour Elementor 3.0

Comme nous l'avons mentionné ci-dessus, cette version est livrée avec des goodies intéressants qui devraient vraiment avoir un impact sur votre travail quotidien. Nous avons traversé:

Les fonctionnalités du système de conception qui vous aident à travailler de manière plus cohérente et plus efficace.

Le nouveau générateur de thèmes est un outil visuel puissant pour gérer chaque partie de votre site Web à partir d'un seul endroit.

Améliorations des performances pour une meilleure expérience utilisateur.

Elementor 3.0 vous mènera certainement à la pointe en tant que créateur Web professionnel. Si vous ne l'avez pas encore fait, passez maintenant au Elementor Pro. Vous devriez également envisager de lire notre article expliquant pourquoi Elementor est certainement le meilleur constructeur de pages gratuit sur WordPress.