Non classifié(e)

Elementor 3 est sorti → Quelles nouveautés ?

Elementor, Nouvelles fonctionnalités

Elementor 3.0 est enfin là, et il apporte une toute nouvelle façon de construire des sites.

Préparez-vous à une version spéciale 3-en-1 qui comprend : Caractéristiques du système de conception, nouveau constructeur de thèmes et améliorations significatives des performances.

Chaque version de fonctionnalité fait progresser Elementor, mais les versions majeures entraînent des avancées considérables pour le flux de travail de nos utilisateurs.

Elementor 1.0 en 2016 a apporté une toute nouvelle approche de la conception visuelle de WordPress. Elementor 2.0 en 2018 comprenait un générateur de thème révolutionnaire.

Aujourd’hui, en 2020, je suis ravi de dévoiler Elementor 3.0, qui comporte non pas une, mais trois fonctions révolutionnaires : Caractéristiques du système de conception, nouveau générateur de thème et améliorations significatives des performances.

Il a fallu des mois de travail et une reconstruction complète de notre infrastructure, mais le dur labeur a porté ses fruits. Elementor 3.0 comprend des améliorations de base et des améliorations Pro, ainsi qu’une toute nouvelle façon de construire des sites web. Lisez la suite pour découvrir comment cette version va révolutionner votre flux de travail et vous permettre de créer des sites web plus rapides et plus cohérents que jamais.

Gérer le système de conception de votre site à partir d’un seul endroit

Comment les grandes marques comme Spotify, Apple ou Nike parviennent-elles à offrir une expérience cohérente et gagnante sur toutes les plateformes ?

Peu importe la page d’accueil, la page du site web, la bannière ou l’élément que vous voyez, ils conservent la même apparence et la même convivialité. C’est grâce à ce qu’on appelle un système de conception.

Mais si nous vous disions que les créateurs de sites web comme vous peuvent désormais offrir le même type de cohérence de grande marque à leurs clients ?

Voici les caractéristiques du système de conception. Mettez en place un système de conception, révolutionnez votre flux de travail et gardez toute votre équipe cohérente autour d’un langage de conception unique.

Révolutionnez votre flux de travail et créez des sites web plus rapides et plus cohérents.

Qu’est-ce qu’un système de conception ?

Pour ceux d’entre vous qui ne connaissent pas le terme, un Design System est la source unique qui forme la base autour de laquelle une équipe conçoit un site web.

Disons que vous construisez un site qui comprend plusieurs pages, des pages de renvoi et des articles de blog. Comment pouvez-vous vous assurer que toutes les couleurs, les polices et la mise en page de toutes ces pages et de tous ces articles restent cohérentes dans une seule langue ? C’est le rôle du système de conception.

La mise en œuvre des capacités du système de conception vous permet de concevoir et d’éditer des sites web nouveaux et existants en un temps record, de réduire les flux de travail et de raccourcir les délais de mise sur le marché tout en préservant la cohérence de la marque et du visuel.

Tous les éléments de conception de votre site web sont intégrés, de sorte que toute votre équipe est synchronisée et que votre site web est cohérent à 100 %, en permanence.

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

  • Panneau de configuration du nouveau site – comprenant l’identité du site, les paramètres de la boîte à lumière, les styles des thèmes et plus encore
  • Couleurs du monde
  • Polices globales
  • Examinons chacune de ces caractéristiques et voyons comment elles vous aideront à créer des sites web plus professionnels.

Paramètres du site

Définir les paramètres de base d’un site web peut prendre beaucoup de temps.

Jongler avec le code du thème, le Customizer, les fonctions .php … oubliez tout cela.

Nous avons ajouté un nouveau panneau de paramètres du site, qui présente de nombreux outils de configuration pour l’ensemble du site. De cette façon, vous pouvez rester dans Elementor, et avoir un seul endroit pour définir tous les paramètres de votre site. Super !

Dans chaque page que vous modifiez avec Elementor, allez dans le panneau de gauche, et cliquez sur l’icône en haut à gauche. Vous passerez alors au panneau des paramètres globaux.

Vous trouverez le panneau des paramètres globaux :

Identité du site : Personnalisez votre identité intersite comme le logo, le titre, le slogan et même le favicon
Mise en page : Définir les paramètres de mise en page par défaut d’Elementor, comme la largeur du contenu ou la mise en page par défaut
Lightbox : Définir tous les styles par défaut des boîtes lumineuses Elementor
Thème Style : Personnalisez vos éléments HTML autres que ceux de l’élément (généralement définis par le thème) pour la typographie, les boutons, les images et les champs de formulaire.
Couleurs et polices globales (sera expliqué en détail ci-dessous)
Regarder le tutoriel sur les paramètres du site >

Couleurs du monde

La version 3.0 introduit une nouvelle méthode de travail avec les couleurs du site : Couleurs globales.

Les couleurs globales vous permettent de changer la couleur à un endroit et de mettre à jour cette couleur partout où vous l’avez placée.

Commencez par choisir les quatre couleurs globales de base de votre site. Ensuite, allez dans n’importe quel style de couleur dans Elementor, et choisissez l’une des quatre couleurs. Vous pouvez également ajouter autant de couleurs personnalisées à la liste globale et les nommer comme vous le souhaitez.

Maintenant, la magie des variables CSS opère. Retournez à la section « Couleurs globales » et modifiez l’une des couleurs. Le schéma de couleurs de votre site change en fonction de la nouvelle couleur globale. Il n’a jamais été aussi facile de mélanger et de faire correspondre les couleurs lors de la conception de votre site web.

Nous avons conçu ce système de manière à ce que vous puissiez voir la couleur globale réelle à l’intérieur du contrôle, en éliminant toute approximation. Vous pourrez également attribuer une couleur globale différente à partir du contrôle, ou créer une nouvelle couleur globale, en utilisant le même sélecteur de couleur à l’intérieur du contrôle.

Proposez-vous des services de maintenance, de mise à jour ou de reconception de sites existants ? Alors c’est votre jour de chance ! Cette fonction est parfaite pour modifier la palette de couleurs d’un site web sans avoir à passer en revue toutes vos pages et tous vos messages et à les modifier individuellement. Désormais, vous pouvez définir, modifier et supprimer n’importe quelle couleur globale à un endroit donné en quelques clics.

Voir le tutoriel sur les couleurs globales >

Polices globales

Les couleurs et la typographie sont les éléments constitutifs de tout site web. Dans la même logique que Global Colors, nous avons créé une toute nouvelle méthode pour travailler avec les styles de texte de votre site.

Avec Global Fonts, tous les paramètres typographiques peuvent être définis globalement. Vous pouvez désormais configurer tous les paramètres typographiques de votre site de manière globale, y compris : Famille de polices, Taille et échelle des polices, Poids des polices, Transformation des polices, Style des polices, Décoration des polices, Hauteur des lignes, Espacement des lettres et Paramètres réactifs.

Vous pourrez appliquer ces paramètres à chaque widget qui contient du texte et personnaliser vos propres polices globales au-delà de la liste de base.

Une fois que vous aurez défini la typographie de votre site, vous pourrez apporter des modifications qui affecteront toutes les zones de texte que vous aurez définies avec les polices globales.

Vous pouvez également voir exactement quelles polices globales ont été appliquées.

Voir le tutoriel sur les polices globales >

Votre site entier visualisé et organisé en un seul endroit

Bien que le constructeur de thèmes d’Elementor soit devenu le leader du secteur en termes de conception visuelle de sites web complets, nous avons décidé de le rendre encore meilleur.

Voici le nouveau Theme Builder, un endroit unique pour gérer votre site ENTIER de manière visuelle et intuitive.

Le Theme Builder est une application basée sur React, qui fournit une vue d’ensemble du site, y compris toutes les parties du site : en-tête, pied de page, modèle de page global, modèle de message global et plus encore. Chaque partie du site est intuitivement à portée de main, ce qui rend la tâche de concevoir un site web complet d’autant plus facile.

Le nouveau générateur de thèmes vous permettra de jeter un coup d’œil visuel sur l’ensemble de la structure de votre site. Voyez quelles parties sont actives et lesquelles ne le sont pas, gérez quel modèle s’applique aux différentes zones de votre site web et accédez facilement aux modifications, mises à jour ou ajouts de contenu à votre guise.

Chaque partie du site bénéficie d’un aperçu automatique de l’image et d’une capture d’écran du modèle réel. Cela vous permet d’avoir un aperçu visuel de l’ensemble de votre site, afin que vous puissiez identifier le modèle exact que vous souhaitez modifier.

Voir le tutoriel sur le créateur de thèmes >

Comment cela fonctionne-t-il ?

Le paragraphe suivant va faire de vous un « super-élément constructeur », en avance sur la plupart des créateurs de sites web, je vous suggère donc d’être particulièrement attentif.

Pour commencer à construire votre site à l’aide du nouveau constructeur de thème, cliquez sur l’icône du hamburger en haut à gauche de l’éditeur, puis cliquez sur le « constructeur de thème ». Vous pouvez également y accéder depuis la barre d’administration supérieure et en utilisant un raccourci CMD / CTRL + Maj + E. Ceci est applicable depuis n’importe quel endroit de votre site.

Vous verrez maintenant toutes les parties essentielles qui sont nécessaires pour créer un site complet.

S’il s’agit d’un nouveau site, et qu’il ne comporte pas encore de parties, cliquez sur n’importe quelle partie et construisez-la. Nous vous suggérons de commencer par un nouvel en-tête (pour rester « au top » des choses…)

Après avoir construit l’en-tête, vous pouvez passer à la conception d’autres parties du site et les insérer dans n’importe quelle page.

Nouveau constructeur de thème : Enfin, un aperçu visuel de l’ensemble de votre site web.

Fonctionnalité bonus : Améliorations des performances

Nous apportons toujours des modifications et des améliorations aux performances, mais cette fois, nous avons procédé à des mises à jour majeures de notre code et de notre infrastructure, qui ont permis d’améliorer sensiblement les performances.

Nous avons réduit le nombre d’éléments DOM et rendu Elementor plus rapide pour le rendu de vos pages web.

Cela améliorera le classement de la vitesse de vos pages et l’expérience globale des utilisateurs sur votre site web.

Qu’est-ce qui a changé en termes de vitesse de chargement des pages ?
Elementor 3.0 comprend des améliorations significatives des processus de rendu côté serveur et de la façon dont Elementor rend les valeurs CSS dynamiques.

Elementor vous permet d’incorporer des éléments et des valeurs dynamiques dans votre site web. Par exemple, vous pouvez créer un modèle pour les articles du site et décider d’afficher l’image de chaque article comme arrière-plan derrière le titre de l’article.

Dans les coulisses, lorsque Elementor prépare un message à envoyer au navigateur, il recherche les valeurs dynamiques du message, les récupère et, si elles incluent des valeurs CSS, les imprime. Ce processus est « coûteux », c’est-à-dire qu’il prend beaucoup de temps et de ressources.

Dans Elementor 3.0, nous avons considérablement réduit le temps consacré à ce processus. Cela se fait en stockant une liste de valeurs dynamiques pour chaque poste. Une fois cette liste créée, chaque fois que quelqu’un visite le poste, Elementor passe directement à cette liste, ce qui rend le processus plus rapide et plus simple. Les valeurs dynamiques affectées par cette optimisation comprennent les images de fond, les couleurs, et bien plus encore.

Cette amélioration entraîne une réduction substantielle de la charge des serveurs, du temps de chargement du premier octet et, par conséquent, un temps de chargement beaucoup plus rapide pour les visiteurs du site. Vous avez remarqué une amélioration des performances de l’un de vos sites ? Faites-le nous savoir dans les commentaires.

Chez Elementor, nous considérons la performance des sites comme un sujet hautement prioritaire et nous continuerons à l’améliorer dans les prochaines versions.

Note importante concernant la mise à jour

Elementor 3.0 est une version majeure, et comprend quelques changements substantiels d’infrastructure. Avant de passer à la version 3.0, assurez-vous de sauvegarder votre site, et si vous utilisez un module complémentaire tiers pour Elementor, assurez-vous qu’il est compatible avec Elementor 3.0.

Veuillez vous assurer que vous mettez à niveau vers la version de base d’Elementor 3.0 avant de mettre à niveau la version Pro 3.0.

Pour plus de réponses aux questions relatives à la version 3.0, visitez notre page FAQ 3.0.

Il est temps de faire tourner la version 3.0 !

Comme nous l’avons mentionné, cette version est pleine de bonnes choses, et nous pensons qu’elle aura un réel impact sur votre travail quotidien. Résumons :

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

Le nouveau générateur de thème est un outil visuel puissant pour gérer chaque partie de votre site web sans code.

Nos améliorations de performance amélioreront le temps de chargement de votre site.

Elementor 3.0 vous aidera à obtenir un avantage en tant que créateur web professionnel. Si vous ne l’avez pas encore fait, passez dès maintenant à Elementor Pro et faites de 2020 l’année où votre entreprise connaîtra une croissance fulgurante !

 

 

Publier un commentaire

Le Blog du Web Design