{"id":730,"date":"2020-10-01T07:23:10","date_gmt":"2020-10-01T07:23:10","guid":{"rendered":"https:\/\/www.webdesign-inspiration.com\/blog?p=730"},"modified":"2020-10-01T07:33:04","modified_gmt":"2020-10-01T07:33:04","slug":"elementor-3-est-sorti-%e2%86%92-quelles-nouveautes","status":"publish","type":"post","link":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/elementor-3-est-sorti-%e2%86%92-quelles-nouveautes","title":{"rendered":"Elementor 3 est sorti \u2192 Quelles nouveaut\u00e9s ?"},"content":{"rendered":"<p><strong>Elementor, Nouvelles fonctionnalit\u00e9s<\/strong><\/p>\n<p>Elementor 3.0 est enfin l\u00e0, et il apporte une toute nouvelle fa\u00e7on de construire des sites.<\/p>\n<p>Pr\u00e9parez-vous \u00e0 une version sp\u00e9ciale 3-en-1 qui comprend : Caract\u00e9ristiques du syst\u00e8me de conception, nouveau constructeur de th\u00e8mes et am\u00e9liorations significatives des performances.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/N8wiLAsuIZ4\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Chaque version de fonctionnalit\u00e9 fait progresser Elementor, mais les versions majeures entra\u00eenent des avanc\u00e9es consid\u00e9rables pour le flux de travail de nos utilisateurs.<\/p>\n<p>Elementor 1.0 en 2016 a apport\u00e9 une toute nouvelle approche de la conception visuelle de WordPress. Elementor 2.0 en 2018 comprenait un g\u00e9n\u00e9rateur de th\u00e8me r\u00e9volutionnaire.<\/p>\n<p>Aujourd&rsquo;hui, en 2020, je suis ravi de d\u00e9voiler Elementor 3.0, qui comporte non pas une, mais trois fonctions r\u00e9volutionnaires : Caract\u00e9ristiques du syst\u00e8me de conception, nouveau g\u00e9n\u00e9rateur de th\u00e8me et am\u00e9liorations significatives des performances.<\/p>\n<p>Il a fallu des mois de travail et une reconstruction compl\u00e8te de notre infrastructure, mais le dur labeur a port\u00e9 ses fruits. Elementor 3.0 comprend des am\u00e9liorations de base et des am\u00e9liorations Pro, ainsi qu&rsquo;une toute nouvelle fa\u00e7on de construire des sites web. Lisez la suite pour d\u00e9couvrir comment cette version va r\u00e9volutionner votre flux de travail et vous permettre de cr\u00e9er des sites web plus rapides et plus coh\u00e9rents que jamais.<\/p>\n<h2>G\u00e9rer le syst\u00e8me de conception de votre site \u00e0 partir d&rsquo;un seul endroit<\/h2>\n<p>Comment les grandes marques comme Spotify, Apple ou Nike parviennent-elles \u00e0 offrir une exp\u00e9rience coh\u00e9rente et gagnante sur toutes les plateformes ?<\/p>\n<p>Peu importe la page d&rsquo;accueil, la page du site web, la banni\u00e8re ou l&rsquo;\u00e9l\u00e9ment que vous voyez, ils conservent la m\u00eame apparence et la m\u00eame convivialit\u00e9. C&rsquo;est gr\u00e2ce \u00e0 ce qu&rsquo;on appelle un syst\u00e8me de conception.<\/p>\n<p>Mais si nous vous disions que les cr\u00e9ateurs de sites web comme vous peuvent d\u00e9sormais offrir le m\u00eame type de coh\u00e9rence de grande marque \u00e0 leurs clients ?<\/p>\n<p>Voici les caract\u00e9ristiques du syst\u00e8me de conception. Mettez en place un syst\u00e8me de conception, r\u00e9volutionnez votre flux de travail et gardez toute votre \u00e9quipe coh\u00e9rente autour d&rsquo;un langage de conception unique.<\/p>\n<blockquote><p>R\u00e9volutionnez votre flux de travail et cr\u00e9ez des sites web plus rapides et plus coh\u00e9rents.<\/p><\/blockquote>\n<h3>Qu&rsquo;est-ce qu&rsquo;un syst\u00e8me de conception ?<\/h3>\n<p>Pour ceux d&rsquo;entre vous qui ne connaissent pas le terme, un Design System est la source unique qui forme la base autour de laquelle une \u00e9quipe con\u00e7oit un site web.<\/p>\n<p>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\u00e9rentes dans une seule langue ? C&rsquo;est le r\u00f4le du syst\u00e8me de conception.<\/p>\n<p>La mise en \u0153uvre des capacit\u00e9s du syst\u00e8me de conception vous permet de concevoir et d&rsquo;\u00e9diter des sites web nouveaux et existants en un temps record, de r\u00e9duire les flux de travail et de raccourcir les d\u00e9lais de mise sur le march\u00e9 tout en pr\u00e9servant la coh\u00e9rence de la marque et du visuel.<\/p>\n<p>Tous les \u00e9l\u00e9ments de conception de votre site web sont int\u00e9gr\u00e9s, de sorte que toute votre \u00e9quipe est synchronis\u00e9e et que votre site web est coh\u00e9rent \u00e0 100 %, en permanence.<\/p>\n<p>Les fonctionnalit\u00e9s du syst\u00e8me de conception d&rsquo;Elementor comprennent :<\/p>\n<ul>\n<li>Panneau de configuration du nouveau site &#8211; comprenant l&rsquo;identit\u00e9 du site, les param\u00e8tres de la bo\u00eete \u00e0 lumi\u00e8re, les styles des th\u00e8mes et plus encore<\/li>\n<li>Couleurs du monde<\/li>\n<li>Polices globales<\/li>\n<li>Examinons chacune de ces caract\u00e9ristiques et voyons comment elles vous aideront \u00e0 cr\u00e9er des sites web plus professionnels.<\/li>\n<\/ul>\n<h3>Param\u00e8tres du site<\/h3>\n<p>D\u00e9finir les param\u00e8tres de base d&rsquo;un site web peut prendre beaucoup de temps.<\/p>\n<p>Jongler avec le code du th\u00e8me, le Customizer, les fonctions .php &#8230; oubliez tout cela.<\/p>\n<p>Nous avons ajout\u00e9 un nouveau panneau de param\u00e8tres du site, qui pr\u00e9sente de nombreux outils de configuration pour l&rsquo;ensemble du site. De cette fa\u00e7on, vous pouvez rester dans Elementor, et avoir un seul endroit pour d\u00e9finir tous les param\u00e8tres de votre site. Super !<\/p>\n<p>Dans chaque page que vous modifiez avec Elementor, allez dans le panneau de gauche, et cliquez sur l&rsquo;ic\u00f4ne en haut \u00e0 gauche. Vous passerez alors au panneau des param\u00e8tres globaux.<\/p>\n<p>Vous trouverez le panneau des param\u00e8tres globaux :<\/p>\n<p>Identit\u00e9 du site : Personnalisez votre identit\u00e9 intersite comme le logo, le titre, le slogan et m\u00eame le favicon<br \/>\nMise en page : D\u00e9finir les param\u00e8tres de mise en page par d\u00e9faut d&rsquo;Elementor, comme la largeur du contenu ou la mise en page par d\u00e9faut<br \/>\nLightbox : D\u00e9finir tous les styles par d\u00e9faut des bo\u00eetes lumineuses Elementor<br \/>\nTh\u00e8me Style : Personnalisez vos \u00e9l\u00e9ments HTML autres que ceux de l&rsquo;\u00e9l\u00e9ment (g\u00e9n\u00e9ralement d\u00e9finis par le th\u00e8me) pour la typographie, les boutons, les images et les champs de formulaire.<br \/>\nCouleurs et polices globales (sera expliqu\u00e9 en d\u00e9tail ci-dessous)<br \/>\nRegarder le tutoriel sur les param\u00e8tres du site &gt;<\/p>\n<h3>Couleurs du monde<\/h3>\n<p>La version 3.0 introduit une nouvelle m\u00e9thode de travail avec les couleurs du site : Couleurs globales.<\/p>\n<p>Les couleurs globales vous permettent de changer la couleur \u00e0 un endroit et de mettre \u00e0 jour cette couleur partout o\u00f9 vous l&rsquo;avez plac\u00e9e.<\/p>\n<p>Commencez par choisir les quatre couleurs globales de base de votre site. Ensuite, allez dans n&rsquo;importe quel style de couleur dans Elementor, et choisissez l&rsquo;une des quatre couleurs. Vous pouvez \u00e9galement ajouter autant de couleurs personnalis\u00e9es \u00e0 la liste globale et les nommer comme vous le souhaitez.<\/p>\n<p>Maintenant, la magie des variables CSS op\u00e8re. Retournez \u00e0 la section \u00ab\u00a0Couleurs globales\u00a0\u00bb et modifiez l&rsquo;une des couleurs. Le sch\u00e9ma de couleurs de votre site change en fonction de la nouvelle couleur globale. Il n&rsquo;a jamais \u00e9t\u00e9 aussi facile de m\u00e9langer et de faire correspondre les couleurs lors de la conception de votre site web.<\/p>\n<p>Nous avons con\u00e7u ce syst\u00e8me de mani\u00e8re \u00e0 ce que vous puissiez voir la couleur globale r\u00e9elle \u00e0 l&rsquo;int\u00e9rieur du contr\u00f4le, en \u00e9liminant toute approximation. Vous pourrez \u00e9galement attribuer une couleur globale diff\u00e9rente \u00e0 partir du contr\u00f4le, ou cr\u00e9er une nouvelle couleur globale, en utilisant le m\u00eame s\u00e9lecteur de couleur \u00e0 l&rsquo;int\u00e9rieur du contr\u00f4le.<\/p>\n<p>Proposez-vous des services de maintenance, de mise \u00e0 jour ou de reconception de sites existants ? Alors c&rsquo;est votre jour de chance ! Cette fonction est parfaite pour modifier la palette de couleurs d&rsquo;un site web sans avoir \u00e0 passer en revue toutes vos pages et tous vos messages et \u00e0 les modifier individuellement. D\u00e9sormais, vous pouvez d\u00e9finir, modifier et supprimer n&rsquo;importe quelle couleur globale \u00e0 un endroit donn\u00e9 en quelques clics.<\/p>\n<p>Voir le tutoriel sur les couleurs globales &gt;<\/p>\n<h3>Polices globales<\/h3>\n<p>Les couleurs et la typographie sont les \u00e9l\u00e9ments constitutifs de tout site web. Dans la m\u00eame logique que Global Colors, nous avons cr\u00e9\u00e9 une toute nouvelle m\u00e9thode pour travailler avec les styles de texte de votre site.<\/p>\n<p>Avec Global Fonts, tous les param\u00e8tres typographiques peuvent \u00eatre d\u00e9finis globalement. Vous pouvez d\u00e9sormais configurer tous les param\u00e8tres typographiques de votre site de mani\u00e8re globale, y compris : Famille de polices, Taille et \u00e9chelle des polices, Poids des polices, Transformation des polices, Style des polices, D\u00e9coration des polices, Hauteur des lignes, Espacement des lettres et Param\u00e8tres r\u00e9actifs.<\/p>\n<p>Vous pourrez appliquer ces param\u00e8tres \u00e0 chaque widget qui contient du texte et personnaliser vos propres polices globales au-del\u00e0 de la liste de base.<\/p>\n<p>Une fois que vous aurez d\u00e9fini la typographie de votre site, vous pourrez apporter des modifications qui affecteront toutes les zones de texte que vous aurez d\u00e9finies avec les polices globales.<\/p>\n<p>Vous pouvez \u00e9galement voir exactement quelles polices globales ont \u00e9t\u00e9 appliqu\u00e9es.<\/p>\n<p>Voir le tutoriel sur les polices globales &gt;<\/p>\n<h2>Votre site entier visualis\u00e9 et organis\u00e9 en un seul endroit<\/h2>\n<p>Bien que le constructeur de th\u00e8mes d&rsquo;Elementor soit devenu le leader du secteur en termes de conception visuelle de sites web complets, nous avons d\u00e9cid\u00e9 de le rendre encore meilleur.<\/p>\n<p>Voici le nouveau Theme Builder, un endroit unique pour g\u00e9rer votre site ENTIER de mani\u00e8re visuelle et intuitive.<\/p>\n<p>Le Theme Builder est une application bas\u00e9e sur React, qui fournit une vue d&rsquo;ensemble du site, y compris toutes les parties du site : en-t\u00eate, pied de page, mod\u00e8le de page global, mod\u00e8le de message global et plus encore. Chaque partie du site est intuitivement \u00e0 port\u00e9e de main, ce qui rend la t\u00e2che de concevoir un site web complet d&rsquo;autant plus facile.<\/p>\n<p>Le nouveau g\u00e9n\u00e9rateur de th\u00e8mes vous permettra de jeter un coup d&rsquo;\u0153il visuel sur l&rsquo;ensemble de la structure de votre site. Voyez quelles parties sont actives et lesquelles ne le sont pas, g\u00e9rez quel mod\u00e8le s&rsquo;applique aux diff\u00e9rentes zones de votre site web et acc\u00e9dez facilement aux modifications, mises \u00e0 jour ou ajouts de contenu \u00e0 votre guise.<\/p>\n<p>Chaque partie du site b\u00e9n\u00e9ficie d&rsquo;un aper\u00e7u automatique de l&rsquo;image et d&rsquo;une capture d&rsquo;\u00e9cran du mod\u00e8le r\u00e9el. Cela vous permet d&rsquo;avoir un aper\u00e7u visuel de l&rsquo;ensemble de votre site, afin que vous puissiez identifier le mod\u00e8le exact que vous souhaitez modifier.<\/p>\n<p>Voir le tutoriel sur le cr\u00e9ateur de th\u00e8mes &gt;<\/p>\n<h3>Comment cela fonctionne-t-il ?<\/h3>\n<p>Le paragraphe suivant va faire de vous un \u00ab\u00a0super-\u00e9l\u00e9ment constructeur\u00a0\u00bb, en avance sur la plupart des cr\u00e9ateurs de sites web, je vous sugg\u00e8re donc d&rsquo;\u00eatre particuli\u00e8rement attentif.<\/p>\n<p>Pour commencer \u00e0 construire votre site \u00e0 l&rsquo;aide du nouveau constructeur de th\u00e8me, cliquez sur l&rsquo;ic\u00f4ne du hamburger en haut \u00e0 gauche de l&rsquo;\u00e9diteur, puis cliquez sur le \u00ab\u00a0constructeur de th\u00e8me\u00a0\u00bb. Vous pouvez \u00e9galement y acc\u00e9der depuis la barre d&rsquo;administration sup\u00e9rieure et en utilisant un raccourci CMD \/ CTRL + Maj + E. Ceci est applicable depuis n&rsquo;importe quel endroit de votre site.<\/p>\n<p>Vous verrez maintenant toutes les parties essentielles qui sont n\u00e9cessaires pour cr\u00e9er un site complet.<\/p>\n<p>S&rsquo;il s&rsquo;agit d&rsquo;un nouveau site, et qu&rsquo;il ne comporte pas encore de parties, cliquez sur n&rsquo;importe quelle partie et construisez-la. Nous vous sugg\u00e9rons de commencer par un nouvel en-t\u00eate (pour rester \u00ab\u00a0au top\u00a0\u00bb des choses&#8230;)<\/p>\n<p>Apr\u00e8s avoir construit l&rsquo;en-t\u00eate, vous pouvez passer \u00e0 la conception d&rsquo;autres parties du site et les ins\u00e9rer dans n&rsquo;importe quelle page.<\/p>\n<p>Nouveau constructeur de th\u00e8me : Enfin, un aper\u00e7u visuel de l&rsquo;ensemble de votre site web.<\/p>\n<h3>Fonctionnalit\u00e9 bonus : Am\u00e9liorations des performances<\/h3>\n<p>Nous apportons toujours des modifications et des am\u00e9liorations aux performances, mais cette fois, nous avons proc\u00e9d\u00e9 \u00e0 des mises \u00e0 jour majeures de notre code et de notre infrastructure, qui ont permis d&rsquo;am\u00e9liorer sensiblement les performances.<\/p>\n<p>Nous avons r\u00e9duit le nombre d&rsquo;\u00e9l\u00e9ments DOM et rendu Elementor plus rapide pour le rendu de vos pages web.<\/p>\n<p>Cela am\u00e9liorera le classement de la vitesse de vos pages et l&rsquo;exp\u00e9rience globale des utilisateurs sur votre site web.<\/p>\n<p>Qu&rsquo;est-ce qui a chang\u00e9 en termes de vitesse de chargement des pages ?<br \/>\nElementor 3.0 comprend des am\u00e9liorations significatives des processus de rendu c\u00f4t\u00e9 serveur et de la fa\u00e7on dont Elementor rend les valeurs CSS dynamiques.<\/p>\n<p>Elementor vous permet d&rsquo;incorporer des \u00e9l\u00e9ments et des valeurs dynamiques dans votre site web. Par exemple, vous pouvez cr\u00e9er un mod\u00e8le pour les articles du site et d\u00e9cider d&rsquo;afficher l&rsquo;image de chaque article comme arri\u00e8re-plan derri\u00e8re le titre de l&rsquo;article.<\/p>\n<p>Dans les coulisses, lorsque Elementor pr\u00e9pare un message \u00e0 envoyer au navigateur, il recherche les valeurs dynamiques du message, les r\u00e9cup\u00e8re et, si elles incluent des valeurs CSS, les imprime. Ce processus est \u00ab\u00a0co\u00fbteux\u00a0\u00bb, c&rsquo;est-\u00e0-dire qu&rsquo;il prend beaucoup de temps et de ressources.<\/p>\n<p>Dans Elementor 3.0, nous avons consid\u00e9rablement r\u00e9duit le temps consacr\u00e9 \u00e0 ce processus. Cela se fait en stockant une liste de valeurs dynamiques pour chaque poste. Une fois cette liste cr\u00e9\u00e9e, chaque fois que quelqu&rsquo;un visite le poste, Elementor passe directement \u00e0 cette liste, ce qui rend le processus plus rapide et plus simple. Les valeurs dynamiques affect\u00e9es par cette optimisation comprennent les images de fond, les couleurs, et bien plus encore.<\/p>\n<p>Cette am\u00e9lioration entra\u00eene une r\u00e9duction substantielle de la charge des serveurs, du temps de chargement du premier octet et, par cons\u00e9quent, un temps de chargement beaucoup plus rapide pour les visiteurs du site. Vous avez remarqu\u00e9 une am\u00e9lioration des performances de l&rsquo;un de vos sites ? Faites-le nous savoir dans les commentaires.<\/p>\n<p>Chez Elementor, nous consid\u00e9rons la performance des sites comme un sujet hautement prioritaire et nous continuerons \u00e0 l&rsquo;am\u00e9liorer dans les prochaines versions.<\/p>\n<h3>Note importante concernant la mise \u00e0 jour<\/h3>\n<p>Elementor 3.0 est une version majeure, et comprend quelques changements substantiels d&rsquo;infrastructure. Avant de passer \u00e0 la version 3.0, assurez-vous de sauvegarder votre site, et si vous utilisez un module compl\u00e9mentaire tiers pour Elementor, assurez-vous qu&rsquo;il est compatible avec Elementor 3.0.<\/p>\n<p>Veuillez vous assurer que vous mettez \u00e0 niveau vers la version de base d&rsquo;Elementor 3.0 avant de mettre \u00e0 niveau la version Pro 3.0.<\/p>\n<p>Pour plus de r\u00e9ponses aux questions relatives \u00e0 la version 3.0, visitez notre page FAQ 3.0.<\/p>\n<h3>Il est temps de faire tourner la version 3.0 !<\/h3>\n<p>Comme nous l&rsquo;avons mentionn\u00e9, cette version est pleine de bonnes choses, et nous pensons qu&rsquo;elle aura un r\u00e9el impact sur votre travail quotidien. R\u00e9sumons :<\/p>\n<p>Les fonctionnalit\u00e9s du syst\u00e8me de conception vous aident \u00e0 travailler de mani\u00e8re plus coh\u00e9rente et plus efficace.<\/p>\n<p>Le nouveau g\u00e9n\u00e9rateur de th\u00e8me est un outil visuel puissant pour g\u00e9rer chaque partie de votre site web sans code.<\/p>\n<p>Nos am\u00e9liorations de performance am\u00e9lioreront le temps de chargement de votre site.<\/p>\n<p>Elementor 3.0 vous aidera \u00e0 obtenir un avantage en tant que cr\u00e9ateur web professionnel. Si vous ne l&rsquo;avez pas encore fait, passez d\u00e8s maintenant \u00e0 Elementor Pro et faites de 2020 l&rsquo;ann\u00e9e o\u00f9 votre entreprise conna\u00eetra une croissance fulgurante !<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elementor, Nouvelles fonctionnalit\u00e9s Elementor 3.0 est enfin l\u00e0, et il apporte une toute nouvelle fa\u00e7on de construire des sites. Pr\u00e9parez-vous [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":733,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"yasr_overall_rating":4.7,"yasr_post_is_review":"yes","yasr_auto_insert_disabled":"","yasr_review_type":"CreativeWorkSeries","footnotes":""},"categories":[11],"tags":[],"class_list":["post-730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classifiee"],"acf":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":3,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":735,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/730\/revisions\/735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/media\/733"}],"wp:attachment":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}