Une introduction \u00e0 WordPress Elementor<\/h2>\n
Aux premiers jours d’Internet, la cr\u00e9ation d’un site web n\u00e9cessitait des comp\u00e9tences avanc\u00e9es en mati\u00e8re de\u00a0d\u00e9veloppement et de conception<\/a> web, ou l’acc\u00e8s \u00e0 une \u00e9quipe de sp\u00e9cialistes. Cela signifie que la cr\u00e9ation d’un site web prenait du temps, \u00e9tait souvent frustrante et potentiellement co\u00fbteuse.<\/p>\n Gr\u00e2ce aux constructeurs de pages modernes<\/a>, vous pouvez d\u00e9sormais cr\u00e9er un site web performant<\/a> et de conception professionnelle<\/a> sans comp\u00e9tences sp\u00e9cialis\u00e9es. Une fois que votre site est op\u00e9rationnel, vous pouvez rapidement et facilement ajouter du contenu ou modifier la mise en page \u00e0 tout moment, m\u00eame si vous n’\u00eates pas un codeur<\/a>.<\/p>\n Il existe plusieurs constructeurs de pages WordPress, mais avec plus de cinq millions d’installations actives<\/a>, l’extension Elementor<\/a> est l’une des plus populaires. Elementor<\/a> vous permet de tout cr\u00e9er, des sites web entiers aux simples pages de destination<\/a>, via un \u00e9diteur intuitif de type glisser-d\u00e9poser.<\/p>\n Avec Elementor, vous pouvez contr\u00f4ler tous les aspects de la conception de votre site \u00e0 l’aide d’une seule plateforme. Ainsi, votre site web peut refl\u00e9ter parfaitement votre image de marque<\/a>.<\/p>\n L’\u00e9diteur intuitif et sans code d’Elementor est particuli\u00e8rement appr\u00e9ci\u00e9 des propri\u00e9taires de sites web qui n’ont pas d’exp\u00e9rience en mati\u00e8re de conception et de d\u00e9veloppement. Il convient \u00e9galement parfaitement aux entrepreneurs et aux petites entreprises<\/a> qui ont une id\u00e9e de projet en ligne, mais qui n’ont pas n\u00e9cessairement les fonds n\u00e9cessaires pour engager une \u00e9quipe de conception ou de d\u00e9veloppement d\u00e9di\u00e9e.<\/p>\n M\u00eame si vous \u00eates un pro exp\u00e9riment\u00e9, il y a de nombreuses raisons d’utiliser Elementor. Ce n’est pas parce que vous avez des comp\u00e9tences en codage qu’il est sage de toujours tout cr\u00e9er \u00e0 partir de z\u00e9ro.<\/p>\n Elementor dispose de nombreuses fonctionnalit\u00e9s pour vous aider \u00e0 cr\u00e9er des sites web prim\u00e9s en moins de temps. Cela inclut plus de 90 widgets pr\u00eats \u00e0 l’emploi<\/a> et des mod\u00e8les de sites web con\u00e7us par des professionnels<\/a>.<\/p>\n De cette mani\u00e8re, Elementor peut stimuler votre productivit\u00e9 et vos b\u00e9n\u00e9fices. Ces fonctions permettant de gagner du temps peuvent s’av\u00e9rer particuli\u00e8rement lucratives si vous construisez r\u00e9guli\u00e8rement des sites web WordPress (c’est-\u00e0-dire pour les d\u00e9veloppeurs ind\u00e9pendants<\/a> et les agences WordPress<\/a>).<\/p>\n\n Elementor est un logiciel \u00ab freemium \u00bb. Vous pouvez t\u00e9l\u00e9charger gratuitement l’extension\u00a0Elementor de base<\/a> ou acheter une licence Elementor Pro<\/a>.<\/p>\n L’extension WordPress gratuite est livr\u00e9e avec tout ce dont vous avez besoin pour cr\u00e9er des pages de vente visuellement attrayantes, des listes de produits<\/a>, des sites web commerciaux<\/a>, et plus encore. Il comprend plus de 40 widgets, 100 mod\u00e8les et plus de 300 blocs. Les blocs sont des mod\u00e8les de sections pr\u00e9con\u00e7us que vous pouvez m\u00e9langer et assortir pour cr\u00e9er des designs uniques.<\/p>\n Si vous souhaitez des fonctionnalit\u00e9s plus avanc\u00e9es, vous pouvez acheter Elementor Pro. Cela d\u00e9bloque quelques widgets suppl\u00e9mentaires, ainsi que le constructeur de th\u00e8me<\/a> d’Elementor.<\/p>\n \u00c0 l’aide du constructeur de th\u00e8me, vous pouvez modifier presque tous les \u00e9l\u00e9ments du site, y compris l’en-t\u00eate et le pied de page. Vous pouvez \u00e9galement cr\u00e9er des conceptions personnalis\u00e9es pour les articles et les pages d’archives.<\/p>\n Si vous d\u00e9veloppez une boutique en ligne, Elementor Pro comprend \u00e9galement un constructeur WooCommerce<\/a>. Vous pouvez l’utiliser pour personnaliser le contenu WooCommerce de votre site, notamment la page du produit, l’archive du produit et la page de commande. Vous aurez \u00e9galement acc\u00e8s \u00e0 des widgets explicitement con\u00e7us pour stimuler les conversions, tels que l’ajout personnalis\u00e9 au panier<\/a>, les ventes incitatives<\/a> et les produits similaires<\/a>.<\/p>\n Elementor Pro est \u00e9galement livr\u00e9 avec un constructeur de popup<\/a> et un constructeur de formulaires<\/a>. Bien qu’il existe des extensions s\u00e9par\u00e9es qui peuvent vous aider \u00e0 cr\u00e9er des formulaires<\/a> et des popups<\/a>, en optant pour Elementor, vous pouvez minimiser le nombre d’extensions que vous devrez installer et maintenir.<\/p>\n L’utilisation de trop d’extensions peut rendre votre site plus vuln\u00e9rable aux pirates informatiques<\/a>. Cela peut m\u00eame avoir un impact sur les performances de votre site<\/a>. C’est donc une bonne pratique que de minimiser le nombre d’extensions que vous avez install\u00e9. En outre, puisque vous concevez tous les \u00e9l\u00e9ments de votre site \u00e0 l’aide de la m\u00eame plateforme, vous devriez trouver plus facile d’obtenir un aspect et une sensation coh\u00e9rents.<\/p>\n Les licences Elementor Pro comprennent l’acc\u00e8s \u00e0 plus de 60 kits de sites web professionnels. Il s’agit de packs de mod\u00e8les, de pages, de popups et d’autres composants qui peuvent vous aider \u00e0 cr\u00e9er un site web complet. Si vous achetez une licence Expert ou sup\u00e9rieure, vous aurez \u00e9galement acc\u00e8s \u00e0 20 kits de sites web experts.<\/p>\n En outre, chaque licence Pro comprend une assistance premium. G\u00e9n\u00e9ralement, vous recevrez des r\u00e9ponses de l’\u00e9quipe d’assistance sp\u00e9cialis\u00e9e d’Elementor dans un d\u00e9lai d’un jour. Toutefois, si vous optez pour Elementor Pro Studio ou une version sup\u00e9rieure, vous b\u00e9n\u00e9ficierez d’une assistance VIP. Cela vous permet de participer \u00e0 des discussions en direct avec l’\u00e9quipe d’assistance VIP d’Elementor. Vous recevrez \u00e9galement des r\u00e9ponses prioritaires \u00e0 vos tickets, qui arrivent g\u00e9n\u00e9ralement en moins de 30 minutes.<\/p>\n Si vous \u00eates une agence, un d\u00e9veloppeur ou un designer, vous serez peut-\u00eatre int\u00e9ress\u00e9 par un profil Experts Network<\/a>. Vous pourrez y pr\u00e9senter votre travail et attirer l’attention de clients potentiels.<\/p>\n Si vous \u00eates int\u00e9ress\u00e9 par la publicit\u00e9 via le R\u00e9seau d’experts, vous pouvez \u00e9galement \u00eatre int\u00e9ress\u00e9 par les licences Expert, Studio ou Agence d’Elementor Pro. Ces licences vous donnent le droit de cr\u00e9er un profil sur cette place de march\u00e9 populaire.<\/p>\n Les plans d’Elementor Pro vont de 49 $ \u00e0 999 $ par an<\/a>. La soci\u00e9t\u00e9 offre \u00e9galement une garantie de remboursement de 30 jours, ce qui vous permet de l’essayer avant de l’acheter.<\/p>\n Puisqu’il s’agit d’une extension WordPress, l’installation d’Elementor<\/a> est rapide et facile. Vous pouvez t\u00e9l\u00e9charger l’extension gratuite<\/a> directement depuis votre tableau de bord WordPress.<\/p>\n Pour t\u00e9l\u00e9charger la version gratuite, allez dans Extensions > Ajouter<\/strong>. Dans le champ de recherche, saisissez Elementor<\/strong>. Lorsque l’extension appara\u00eet, cliquez sur Installer maintenant<\/strong>.<\/p>\n Lorsque vous y \u00eates invit\u00e9, cliquez sur Activer<\/strong>. L’extension ajoutera une option Elementor <\/strong>\u00e0 votre colonne lat\u00e9rale WordPress.<\/p>\n Vous \u00eates maintenant pr\u00eat \u00e0 commencer \u00e0 utiliser Elementor ! Pour commencer, cliquez simplement sur l’option Elementor dans la colonne lat\u00e9rale.<\/p>\n Alternativement, vous pouvez t\u00e9l\u00e9charger l’extension Elementor directement depuis le d\u00e9p\u00f4t WordPress. Ensuite, connectez-vous \u00e0 votre tableau de bord WordPress et allez vers Extensions > Ajouter > T\u00e9l\u00e9verser une extension<\/strong>. Vous pouvez ensuite cliquer sur Choisier un fichier<\/strong>, et s\u00e9lectionner le fichier .zip<\/em> Elementor que vous venez de t\u00e9l\u00e9charger.<\/p>\n Il y a deux fa\u00e7ons de connecter Elementor Pro \u00e0 WordPress. Si vous n’avez pas encore achet\u00e9 une licence Elementor Pro, vous devez vous rendre sur le site officiel et s\u00e9lectionner Get Started<\/strong>.<\/p>\n Vous pouvez ensuite suivre les instructions \u00e0 l’\u00e9cran pour cr\u00e9er un compte Elementor. Lorsque vous y \u00eates invit\u00e9, entrez quelques informations sur le type de site web que vous souhaitez cr\u00e9er.<\/p>\n Ensuite, choisissez le plan que vous voulez acheter. Comme Elementor n\u00e9cessite un site web WordPress actif, vous devrez saisir le domaine de votre site. Elementor effectuera ensuite un contr\u00f4le pour v\u00e9rifier que votre site utilise la plateforme WordPress.<\/p>\n En supposant que vous avez un site WordPress actif, l’\u00e9tape suivante consiste \u00e0 cliquer sur Installer Elementor<\/strong>. Vous serez automatiquement redirig\u00e9 vers la page de l’extension Elementor si vous \u00eates actuellement connect\u00e9 \u00e0 votre site.<\/p>\n Lorsque vous y \u00eates invit\u00e9, cliquez sur Installer maintenant > Activer<\/strong>. Elementor ajoutera alors l’extension de construction de pages \u00e0 votre site.<\/p>\n Sinon, si vous avez d\u00e9j\u00e0 achet\u00e9 une licence Elementor Pro, rendez-vous sur le site officiel et connectez-vous \u00e0 l’aide des d\u00e9tails que vous avez re\u00e7us dans votre e-mail de confirmation.<\/p>\n Dans votre compte Elementor, s\u00e9lectionnez Abonnements <\/strong>dans le menu de gauche. Vous pouvez ensuite cliquer sur T\u00e9l\u00e9charger le Zip<\/strong>.<\/p>\n Ensuite, connectez-vous \u00e0 votre tableau de bord WordPress et allez dans Extensions > Ajouter<\/strong>. Vous pouvez alors t\u00e9l\u00e9verser le fichier .zip<\/em> Elementor Pro que vous venez de t\u00e9l\u00e9charger.<\/p>\n Apr\u00e8s avoir install\u00e9 et activ\u00e9 Elementor Pro, WordPress devrait vous demander de saisir votre cl\u00e9 de licence. Vous pouvez \u00e9galement aller dans Elementor > Licence > Connecter & Activer<\/strong>.<\/p>\n WordPress devrait v\u00e9rifier votre licence automatiquement si vous \u00eates actuellement connect\u00e9 \u00e0 votre compte Elementor. Si vous ne l’\u00eates pas, saisissez votre identifiant et votre mot de passe Elementor lorsque vous \u00eates invit\u00e9 \u00e0 activer votre licence.<\/p>\n Avec Elementor, vous pouvez concevoir des sites web uniques sans comp\u00e9tences particuli\u00e8res en mati\u00e8re de conception ou de d\u00e9veloppement. Toutefois, il est utile de se familiariser avec les principes fondamentaux avant de cr\u00e9er un site web complet. Voici une introduction rapide au flux de travail d’Elementor dans cette optique.<\/p>\n Pour concevoir une nouvelle page ou un nouvel article dans le constructeur de pages Elementor, naviguez dans Pages\/Articles > Ajouter<\/strong>. Vous pouvez lancer l’\u00e9diteur Elementor en cliquant sur Modifier avec Elementor<\/strong>.<\/p>\n Sinon, vous avez peut-\u00eatre une page existante qui pourrait b\u00e9n\u00e9ficier d’un re-looking. Il suffit de naviguer vers la page en question et de l’ouvrir \u00e0 l’\u00e9dition dans ce sc\u00e9nario. Vous pouvez ensuite cliquer sur le bouton Modifier avec Elementor<\/strong>.<\/p>\n Sur le c\u00f4t\u00e9 gauche de l’\u00e9cran, vous verrez la colonne lat\u00e9rale d’Elementor. C’est l\u00e0 que vous trouverez tous les \u00e9l\u00e9ments que vous pouvez ajouter \u00e0 vos designs, comme les boutons et les titres.<\/p>\n La colonne lat\u00e9rale d’Elementor contient \u00e9galement une section Widgets globaux<\/strong>. Si vous pr\u00e9voyez de r\u00e9utiliser le m\u00eame widget dans plusieurs designs, vous pouvez l’enregistrer en tant que widget global. Cela rend votre \u00e9l\u00e9ment personnalis\u00e9 facilement accessible \u00e0 tout moment. Il fournit \u00e9galement un emplacement central o\u00f9 vous pouvez \u00e9diter votre widget une fois pour apporter des modifications universelles. Elementor reproduira ensuite ces modifications sur l’ensemble de votre site web.<\/p>\n \u00c0 droite se trouve le canevas d’aper\u00e7u en direct, o\u00f9 vous pouvez cr\u00e9er votre design. Elementor se met automatiquement \u00e0 jour pour afficher vos modifications en temps r\u00e9el, au fur et \u00e0 mesure que vous apportez vos modifications.<\/p>\n L’\u00e9diteur Elementor donne acc\u00e8s \u00e0 trois blocs de construction principaux : Sections, Colonnes, et Widgets. Nous avons d\u00e9j\u00e0 abord\u00e9 les widgets pr\u00eats \u00e0 l’emploi d’Elementor, alors voyons comment vous pouvez les ajouter \u00e0 vos designs.<\/p>\n En g\u00e9n\u00e9ral, vous commencerez par cr\u00e9er une section, en cliquant sur l’ic\u00f4ne +<\/strong> dans le canevas principal. Elementor vous demandera ensuite de S\u00e9lectionner votre structure<\/strong>.<\/p>\n Les options de structure consistent en une ou plusieurs colonnes. \u00c9ventuellement, vous placerez votre widget \u00e0 l’int\u00e9rieur de ces Colonnes. Elles jouent un r\u00f4le important dans la cr\u00e9ation de mises en page plus organis\u00e9es.<\/p>\n Apr\u00e8s avoir pris votre d\u00e9cision, Elementor ajoutera cette Section \u00e0 votre mise en page. Pour d\u00e9placer cette section vers un nouvel emplacement, cliquez dessus, puis saisissez la poign\u00e9e bleue en pointill\u00e9 qui appara\u00eet.<\/p>\n Pour modifier une section, il suffit de cliquer sur cette poign\u00e9e bleue en pointill\u00e9 avec la touche Contr\u00f4le. Cela lancera un menu contextuel, dans lequel vous pourrez effectuer des modifications simples, comme copier ou supprimer la section s\u00e9lectionn\u00e9e.<\/p>\n Supposons que vous souhaitiez effectuer des modifications plus complexes, faites un Contr\u00f4le + clic sur la poign\u00e9e bleue et s\u00e9lectionnez Modifier la section<\/strong>. La colonne lat\u00e9rale d’Elementor se met alors \u00e0 jour pour afficher toutes les modifications suppl\u00e9mentaires que vous pouvez apporter \u00e0 cette section.<\/p>\n Vous pouvez \u00e9galement ajouter des widgets \u00e0 cette section. Dans la colonne lat\u00e9rale d’Elementor, trouvez le widget que vous voulez utiliser et faites-le glisser sur le canevas principal.<\/p>\n Pendant que vous faites glisser le widget, Elementor met en \u00e9vidence toutes les diff\u00e9rentes sections et colonnes o\u00f9 vous pouvez d\u00e9poser cet \u00e9l\u00e9ment. Lorsque vous \u00eates pr\u00eat, rel\u00e2chez simplement votre souris. Elementor ajoutera maintenant ce widget \u00e0 la section que vous avez choisie.<\/p>\n Vous pouvez utiliser Elementor pour modifier les r\u00e9glages de votre site. Cela inclut la modification de la police par d\u00e9faut<\/a> et des couleurs HTML<\/a>. Vous pouvez \u00e9galement modifier les bordures et les ombres que WordPress ajoute aux \u00e9l\u00e9ments tels que les images de votre site.<\/p>\n En ajustant ces r\u00e9glages au niveau du site, vous pouvez garantir un aspect et une convivialit\u00e9 coh\u00e9rents sur l’ensemble de votre site web WordPress. Ce processus est \u00e9galement beaucoup plus rapide et plus facile que d’appliquer ces modifications page par page. Pour afficher les r\u00e9glages du site disponibles, cliquez sur le menu hamburger dans la colonne lat\u00e9rale d’Elementor.<\/p>\n Vous pouvez maintenant explorer vos options et apporter les modifications n\u00e9cessaires. Lorsque vous \u00eates pr\u00eat \u00e0 publier les nouveaux r\u00e9glages de votre site, cliquez sur le bouton Mettre \u00e0 jour<\/strong> tout en bas de la colonne lat\u00e9rale d’Elementor.<\/p>\n Pendant que vous modifiez vos conceptions, Elementor enregistre tranquillement vos changements. Vous pouvez facilement revenir sur vos modifications, ce qui peut vous sauver la vie si vous vous rendez compte que vous avez fait une erreur.<\/p>\n Le journal de l’historique d’Elementor vous donne \u00e9galement la libert\u00e9 d’exp\u00e9rimenter. Vous pouvez tester diverses modifications, puis les supprimer rapidement. En vous encourageant \u00e0 exp\u00e9rimenter, Elementor peut am\u00e9liorer la qualit\u00e9 de vos conceptions finies<\/a>.<\/p>\n Pour afficher le journal d’Elementor, cliquez sur l’ic\u00f4ne Historique<\/strong> en bas de la colonne lat\u00e9rale. L’onglet Actions<\/strong> enregistre chaque modification que vous effectuez dans Elementor. Cela peut aller de la cr\u00e9ation d’une nouvelle section \u00e0 la modification d’un texte existant :<\/p>\n Chaque fois que vous appuyez sur Enregistrer<\/strong>, Elementor enregistre la version actuelle de votre page comme une nouvelle r\u00e9vision. Vous pouvez voir tous ces instantan\u00e9s dans l’onglet R\u00e9visions<\/strong>. Si vous voulez revenir \u00e0 une sauvegarde pr\u00e9c\u00e9dente, il suffit de la trouver dans la liste des r\u00e9visions<\/strong> et de cliquer dessus.<\/p>\n Maintenant que vous \u00eates familiaris\u00e9 avec le flux de travail essentiel d’Elementor, voyons comment vous pouvez utiliser ce savoir-faire pour concevoir de nouvelles pages. Tout d’abord, nous allons couvrir la cr\u00e9ation d’une page WordPress standard \u00e0 l’aide de l’extension gratuite Elementor. Ensuite, nous verrons comment d\u00e9velopper une page de produit \u00e0 fort taux de conversion en utilisant WooCommerce et Elementor Pro<\/a>.<\/p>\n Chaque page web est diff\u00e9rente. Cependant, il existe des \u00e9l\u00e9ments communs que vous retrouverez sur diff\u00e9rents sites. Il s’agit notamment des titres, du corps du texte et des m\u00e9dias tels que les images<\/a>. Voyons comment vous pouvez cr\u00e9er une page comportant ces \u00e9l\u00e9ments essentiels.<\/p>\n Pour commencer, cr\u00e9ez une nouvelle page en naviguant dans Pages > Ajouter > Modifier avec Elementor<\/strong>. Ensuite, ajoutez une section \u00e0 votre conception en cliquant sur l’ic\u00f4ne +<\/strong>. Nous allons commencer par notre titre, et nous allons donc opter pour une mise en page \u00e0 une seule colonne.<\/p>\n Dans la colonne lat\u00e9rale d’Elementor, trouvez le widget Titre. Maintenant, faites glisser et d\u00e9posez ce widget dans votre nouvelle section. Vous pouvez ensuite saisir votre texte de titre dans la colonne lat\u00e9rale d’Elementor et utiliser divers r\u00e9glages pour styliser votre titre.<\/p>\n Ensuite, cliquez sur l’ic\u00f4ne +<\/strong> pour ajouter une deuxi\u00e8me section. Nous allons int\u00e9grer une image, puis fournir un texte de soutien. Nous allons donc opter pour une mise en page \u00e0 plusieurs colonnes.<\/p>\n Ensuite, faites glisser le widget de l’\u00e9diteur de texte depuis la colonne lat\u00e9rale d’Elementor, et d\u00e9posez-le dans cette nouvelle section. Vous pouvez ensuite ajouter et styliser votre texte \u00e0 l’aide des r\u00e9glages de la colonne lat\u00e9rale.<\/p>\n Lorsque vous \u00eates satisfait de votre texte, trouvez le widget Image. Une fois encore, utilisez la fonction glisser-d\u00e9poser pour ajouter ce widget \u00e0 votre section.<\/p>\n Dans la colonne lat\u00e9rale, cliquez sur la miniature d’aper\u00e7u. Vous pouvez maintenant utiliser la m\u00e9diath\u00e8que de WordPress pour t\u00e9l\u00e9verser une nouvelle image ou choisir un graphique d\u00e9j\u00e0 t\u00e9l\u00e9vers\u00e9.<\/p>\n Pour voir votre conception en action, cliquez sur l’ic\u00f4ne en forme d’\u0153il en bas de la colonne lat\u00e9rale d’Elementor. Cela affiche un aper\u00e7u de votre mise en page dans un nouvel onglet.<\/p>\n Lorsque vous \u00eates satisfait de votre conception, cliquez sur le bouton Publier<\/strong>. Notez que si votre page est d\u00e9j\u00e0 en ligne, ce bouton vous demandera de Mettre \u00e0 jour<\/strong> \u00e0 la place.<\/p>\n Si vous utilisez une boutique WooCommerce<\/a>, vous pouvez utiliser Elementor Pro pour cr\u00e9er une page de produit personnalis\u00e9e. Il peut s’agir de modifier la page WooCommerce standard pour mieux refl\u00e9ter l’image de marque de votre site. Vous pouvez \u00e9galement tenter d’optimiser votre page pour augmenter les conversions.<\/p>\n Pour concevoir une page de produit WooCommerce personnalis\u00e9e, s\u00e9lectionnez Mod\u00e8les<\/strong> dans le tableau de bord WordPress. Ensuite, cliquez sur le bouton Ajouter<\/strong>. Dans la fen\u00eatre suivante, ouvrez le premier menu d\u00e9roulant et s\u00e9lectionnez Produit unique<\/strong>.<\/p>\n Donnez \u00e0 votre nouveau mod\u00e8le un nom descriptif et cliquez sur Cr\u00e9er un mod\u00e8le<\/strong>. Cela lancera la biblioth\u00e8que Elementor avec tous les designs de produits uniques disponibles.<\/p>\n Pour examiner de plus pr\u00e8s un mod\u00e8le, survolez-le et cliquez sur l’ic\u00f4ne de la loupe lorsqu’elle appara\u00eet. Si vous souhaitez appliquer ce design \u00e0 votre boutique, cliquez sur Ins\u00e9rer<\/strong>.<\/p>\n Les mod\u00e8les d’Elementor comportent une gamme de composants pr\u00eats \u00e0 l’emploi. Pour modifier l’un de ces \u00e9l\u00e9ments, il suffit de cliquer dessus. La colonne lat\u00e9rale d’Elementor se met \u00e0 jour pour afficher tous les r\u00e9glages de cet \u00e9l\u00e9ment particulier.<\/p>\n Elementor Pro fournit une gamme de widgets WooCommerce<\/a> que vous pouvez ajouter \u00e0 vos designs. Pour voir ce qui est disponible, faites d\u00e9filer jusqu’aux sections WooCommerce<\/strong> ou Produit<\/strong> dans la colonne lat\u00e9rale d’Elementor.<\/p>\n Ces sections comprennent des widgets avec des fonctionnalit\u00e9s int\u00e9gr\u00e9es avanc\u00e9es, telles que les Fils d’Ariane WooCommerce<\/a>, Panier, et Commande. Pour ajouter ces \u00e9l\u00e9ments \u00e0 votre conception, il suffit de les faire glisser dans le canevas Elementor et de les lib\u00e9rer. Vous pouvez ensuite d\u00e9poser le widget dans la section o\u00f9 vous souhaitez afficher ce contenu.<\/p>\n Lorsque vous \u00eates satisfait de votre conception, cliquez sur Publier<\/strong>. Vous pouvez ensuite s\u00e9lectionner Ajouter une condition<\/strong> et sp\u00e9cifier les zones o\u00f9 vous souhaitez utiliser ce design. Par exemple, vous pouvez appliquer ce mod\u00e8le \u00e0 une cat\u00e9gorie de produits sp\u00e9cifique ou l’utiliser dans l’ensemble de votre boutique.<\/p>\n Les mod\u00e8les Elementor sont des pages et des modules pr\u00e9con\u00e7us qui simplifient le processus de cr\u00e9ation de sites web. Les pages sont des mises en page de contenu complet, tandis que les blocs sont des sections qui contiennent des widgets pr\u00e9-construits. Parmi les exemples populaires de modules, citons les en-t\u00eates, les pieds de page, les critiques et les t\u00e9moignages<\/a>, ainsi que les foires aux questions (FAQ)<\/a>.<\/p>\n L’extension gratuite Elementor est livr\u00e9e avec plus de 100 mod\u00e8les pleine page, et plus de 300 blocs. Si vous passez \u00e0 Elementor Pro, vous aurez acc\u00e8s \u00e0 des options suppl\u00e9mentaires.<\/p>\n Cliquez sur l’ic\u00f4ne Ajouter un mod\u00e8le pour appliquer un mod\u00e8le \u00e0 votre conception actuelle. Ce bouton devrait appara\u00eetre dans le cadre de chaque bloc Section et est repr\u00e9sent\u00e9 par un dossier blanc. Cela lancera la biblioth\u00e8que d’Elementor.<\/p>\n Ici, vous trouverez tous les mod\u00e8les de blocs et de pages que vous pouvez appliquer \u00e0 votre page. Vous pouvez pr\u00e9visualiser n’importe quel mod\u00e8le en le survolant et en cliquant sur son ic\u00f4ne en forme de loupe.<\/p>\n Lorsque vous trouvez un mod\u00e8le que vous voulez utiliser, cliquez sur Ins\u00e9rer<\/strong>. Si vous ne vous \u00eates pas encore connect\u00e9 \u00e0 la biblioth\u00e8que de mod\u00e8les d’Elementor, la fen\u00eatre contextuelle vous demandera d’effectuer cette \u00e9tape.<\/p>\n Apr\u00e8s avoir effectu\u00e9 cette connexion, Elementor ins\u00e9rera le mod\u00e8le que vous avez choisi. Vous pouvez maintenant le personnaliser. Par exemple, vous pouvez ajouter plus de widgets ou supprimer tout contenu.<\/p>\n Elementor est livr\u00e9 avec une large s\u00e9lection de mod\u00e8les pr\u00eats \u00e0 l’emploi. Cependant, il peut arriver que vous ayez un look particulier en t\u00eate. Dans ce cas, vous pr\u00e9f\u00e9rerez peut-\u00eatre concevoir vos mod\u00e8les.<\/p>\n La cr\u00e9ation de vos mod\u00e8les peut garantir la coh\u00e9rence de l’ensemble de votre site. Vous pouvez m\u00eame utiliser des mod\u00e8les pour acc\u00e9l\u00e9rer la conception et le d\u00e9veloppement si vous \u00eates une agence WordPress. Par exemple, vous pouvez cr\u00e9er une biblioth\u00e8que de mod\u00e8les qui pr\u00e9sentent tout le contenu et les r\u00e9glages que vous appliquez habituellement aux sites de vos clients. Vous pouvez ensuite utiliser ces mod\u00e8les comme point de d\u00e9part pour tous les projets futurs.<\/p>\n Pour commencer, s\u00e9lectionnez Mod\u00e8les<\/strong>\u00a0dans le tableau de bord de WordPress. Ensuite, cliquez sur Ajouter<\/strong>.<\/p>\n Dans la popup qui suit, ouvrez le premier menu d\u00e9roulant et choisissez le type de mod\u00e8le que vous voulez cr\u00e9er. Vos options sont Page<\/strong>, Section<\/strong>, ou Page de destination<\/strong>.<\/p>\n Ensuite, donnez \u00e0 ce design un nom descriptif, et cliquez sur Cr\u00e9er un mod\u00e8le<\/strong>. Cela lancera le constructeur de page standard d’Elementor. Vous pouvez maintenant construire votre mod\u00e8le de la m\u00eame mani\u00e8re que vous cr\u00e9eriez une page ordinaire. Ajoutez simplement des sections, des colonnes et des widgets jusqu’\u00e0 ce que vous soyez satisfait de votre mise en page.<\/p>\n Pour enregistrer ce design en tant que mod\u00e8le, cliquez sur la fl\u00e8che qui appara\u00eet \u00e0 c\u00f4t\u00e9 du bouton Mettre \u00e0 jour\/Publier<\/strong>. Vous pouvez ensuite s\u00e9lectionner Enregistrer comme mod\u00e8le<\/strong>.<\/p>\n Ce design va maintenant \u00eatre enregistr\u00e9 dans la biblioth\u00e8que Elementor. Vous pouvez y acc\u00e9der en lan\u00e7ant la biblioth\u00e8que et en s\u00e9lectionnant l’onglet Mes mod\u00e8les<\/strong>.<\/p>\n![\"Constructeur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-wordpress-plugin.png\")
![\"Page](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-web-templates.png\")
Elementor Free vs Elementor Pro<\/h2>\n
![\"Options](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-pro-homepage.png\")
![\"Biblioth\u00e8que](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-block-templates.png\")
![\"Constructeur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-theme-builder.png\")
![\"Constructeur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/woocommerce-builder-homepage.png\")
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-experts-network.png\")
Comment installer Elementor<\/h2>\n
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-wordpress-sidebar.png\")
Comment connecter Elementor Pro \u00e0 WordPress<\/h3>\n
![\"Cr\u00e9er](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-pro-setup.png\")
![\"T\u00e9l\u00e9charger](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-download-zip.png\")
Utilisation d’Elementor : 4 t\u00e2ches essentielles \u00e0 ma\u00eetriser<\/h2>\n
1. Lancer le constructeur de pages Elementor<\/h3>\n
![\"Option](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/edit-with-elementor-1.png\")
![\"\u00c9diteur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-page-builder.png\")
2. Ajouter des sections, des colonnes et des widgets<\/h3>\n
![\"Ajouter](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-section-structure.png\")
![\"S\u00e9lectionnez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-column-structure.png\")
![\"Ajouter](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/edit-elementor-section.png\")
![\"Des](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-edit-section.png\")
3. Modifier les r\u00e9glages de votre site<\/h3>\n
![\"Configurer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-site-settings.png\")
4. V\u00e9rifier l’historique de vos r\u00e9visions<\/h3>\n
![\"Voir](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-revision-history.png\")
Comment construire une page dans Elementor (2 m\u00e9thodes)<\/h2>\n
1. Comment cr\u00e9er une page WordPress standard<\/h3>\n
![\"Cr\u00e9er](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-single-column.png\")
![\"Style](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-heading-widget.png\")
![\"Ajouter](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-two-column.png\")
![\"Glisser-d\u00e9poser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-image-widget-.png\")
![\"Aper\u00e7u](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-design-preview.png\")
2. Comment cr\u00e9er une page de produit WooCommerce<\/h3>\n
![\"WooCommerce](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-single-product-.png\")
![\"Conceptions](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/single-product-templates.png\")
![\"Survolez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/insert-page-template.png\")
![\"Composants](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-edit-woocommerce.png\")
![\"Widgets](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/woocommerce-elementor-widgets.png\")
![\"Glisser-d\u00e9poser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/woocommerce-cart-widget.png\")
Comment trouver et installer des mod\u00e8les Elementor pr\u00e9-con\u00e7us<\/h2>\n
![\"Biblioth\u00e8que](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/faq-elementor-blocks.png\")
![\"Ajouter](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-template-library.png\")
![\"Survolez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-404-block.png\")
![\"Se](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/connect-template-library-.png\")
Comment cr\u00e9er des mod\u00e8les avec Elementor<\/h2>\n
![\"Ajouter](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-templates-new.png\")
![\"Choisissez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/landing-page-template.png\")
![\"Enregistrer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/save-as-template.png\")
![\"Retrouvez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/my-templates-library.png\")
![\"Transformer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/block-template-save-.png\")
![\"Afficher](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-navigator-menu.png\")
![\"Raccourcis](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/keyboard-shortcuts-hotkeys.png\")