Comment utiliser Elementor : un guide d'installation du début à la fin

Elementor : ton guide complet sur le constructeur de pages WordPress

Elementor est à l'heure actuelle l'un des constructeurs de pages WordPress les plus populaires. Et pour cause, Elementor regorge de fonctionnalités qui rendent la création de sites web personnalisés plus facile que jamais. Dans cet article, tu apprendras tout ce que tu dois savoir sur Elementor.

Si tu es curieux·se de savoir comment utiliser Elementor, tu es au bon endroit. Dans cet article, tout tourne autour d'Elementor et comprend des conseils d'installation ainsi que les meilleurs thèmes et extensions. En effet, surtout au début, l'utilisation d'Elementor peut être source de confusion. Nous allons examiner de plus près les sujets suivants :

  • Elementor : qu'est-ce qu'Elementor et comment fonctionne le constructeur de pages ?
  • Avantages de l'utilisation d'Elementor comme constructeur de pages WordPress
  • Différences entre Elementor et Elementor Pro
  • Comment installer le page builder d'Elementor sur WordPress ?
  • Comment utiliser Elementor, expliqué étape par étape
  • Les meilleurs thèmes Elementor et comment les utiliser
  • Extensions recommandées pour Elementor
  • En conclusion, comment utiliser Elementor, le guide complet

Qu'est-ce qu'Elementor, et comment ça marche ?

Qu'est-ce qu'un constructeur de pages, au juste ?

Un constructeur de pages est comparable à un "kit de construction" pour le contenu de ton site web dans lequel tu peux glisser et déposer des éléments individuels aux endroits souhaités et les remplir avec ton propre contenu. Dans notre article, tu apprendras les principaux avantages et inconvénients des constructeurs de pages.

Elementor est un plugin de construction de sites web conçu pour WordPress. Elementor ajoute toute une série de fonctions de glisser-déposer. Ainsi, même les débutant·e·s peuvent créer des sites web époustouflants à l'allure professionnelle.

Le plus grand avantage d'Elementor est que tu as une vue complète et en direct de ton site web, et ce pendant que tu y apportes des modifications.

Elementor crée une expérience de conception intuitive, notamment pour les débutant·e·s. Pour ce faire, le plugin utilise des dizaines de widgets, une bibliothèque complète de modèles et une fonction d'historique des modifications. 

Le Core Plugin d'Elementor est gratuit et comprend de nombreux éléments de base. Si tu as besoin de fonctionnalités plus avancées, Elementor Pro est disponible. Cette version premium d'Elementor comporte plusieurs niveaux de prix, allant de 49 $/an pour un site web à 999 $/an pour 1 000 sites web.

Avantages de l'utilisation d'Elementor comme constructeur de pages WordPress

Comme tu l'as sans doute deviné, Elementor présente quelques avantages. Examinons-en quelques-uns avant de nous lancer dans le tutoriel d'Elementor. Les avantages les plus importants sont les suivants : 

  • Facile à utiliser. L'édition visuelle du front-end combinée aux widgets rend le travail avec Elementor Page Builder incroyablement facile, même pour les débutant·e·s. 
  • Flexible et extensible pour les développeur·euse·s. Grâce à une bibliothèque de modèles robuste, à un éditeur de blocs et à un contrôle total de l'édition, même les développeur·euse·s les plus expérimenté·e·s peuvent apprendre à utiliser et à travailler avec le constructeur de thèmes d'Elementor. 
  • Des tonnes d'options pour le style. Tu peux utiliser le panneau de l'éditeur avec des curseurs pour ajuster les paramètres du design dans un cadre d'édition confortable.  
  • Des widgets complets qui font gagner du temps. Modifie, personnalise, enregistre et utilise les widgets sur plusieurs sites web. 
  • Création de thèmes par glisser-déposer. Crée un thème Elementor à partir de zéro en utilisant les widgets intégrés, ou utilise les modèles Pro d'Elementor comme base. 
  • Intégration de l'e-commerce. Utilise le panneau de widgets pour créer une boutique en ligne avec le contrôle complet et réactif auquel tu es habitué·e avec d'autres constructeurs compatibles avec WooCommerce.
  • Outils de marketing intégrés. Surtout lorsque tu débutes avec Elementor, tu remarqueras tout de suite les éléments suivants : tu peux personnaliser les styles de formulaire, créer une page de renvoi Elementor et utiliser les plugins de widgets pour développer simultanément ta présence sur le web et ta stratégie marketing. 
  • Une communauté et un marché de tiers vastes. L'un des grands avantages d'Elementor est l'importante communauté de développeur·euse·s qui le soutient. Tu peux passer des heures à parcourir tous les modèles de sites Elementor, thèmes WordPress et les extensions qui étendent les fonctionnalités de base d'Elementor. 

Comparaison des 15 constructeurs de pages WordPress les plus populaires

Il n'y a pas qu'un seul constructeur de pages WordPress. Nous te présentons 15 de ces plugins différents dès maintenant pour t'aider à avancer plus vite avec WordPress. Apprends à connaître les meilleurs constructeurs de pages WordPress sur le marché actuel.

Différences entre Elementor et Elementor Pro

Avant d'aller plus loin, il est important de mentionner qu'il existe une version Pro d'Elementor. La version gratuite te mènera assez loin mais si tu recherches encore plus de fonctionnalités, tu devrais envisager d'utiliser Elementor Pro

La version gratuite d'Elementor comprend tout ce dont tu as besoin pour créer un site web, y compris des fonctions de construction :

  • En-tête 
  • Champs de texte 
  • Widgets d'image 
  • Widgets vidéo 
  • Widgets de galerie
  • Témoignages 
  • Widgets de séparation 
  • Widgets d'accordéon 

Elementor Pro offre plusieurs fonctionnalités destinées aux entreprises, notamment des :

  • Formulaires 
  • Diapositives 
  • Portefeuilles 
  • Tableaux de prix 
  • Carrousels d'images 
  • Widgets de comptage 
  • Pop-ups 
  • Widgets de boutons sociaux
  • Créateurs de pied de page et d'en-tête personnalisés 
  • Appels à l'action

Tu peux également ajouter des polices et des points d'arrêt personnalisés et utiliser de nombreux widgets premium. Tu trouveras ici une comparaison entre la version gratuite de Elementor et Elementor Pro : 

Différences entre Elementor  et Elementor  Pro
Infographie comparant les fonctionnalités d'Elementor et d'Elementor Pro

Comment installer le page builder Elementor sur WordPress

Pourinstaller Elementor, tu as besoin d'un WordPress installé avec untarif d'hébergement et unnom de domaine . Une fois que tu es connecté à Tableau de bord de ton site WordPress, va sur Plugins > Add New

Comment installer le Page Builder de Elementor  en WordPress
Écran de recherche de plugins WordPress dans le tableau de bord

Cherche Elementor et installe-le. Clique ensuite sur Activer

Comment installer le site Elementor  plugin
Installation et activation du plugin Elementor sur le tableau de bord WordPress

Si tu choisis Elementor Pro (ou si tu veux passer de la version de base Elementor à une version améliorée), rendez-vous sur le site Elementor, sur Mon compte, et clique sur le bouton Télécharger le plugin. Cela permettra d'enregistrer un fichier ZIP sur ton ordinateur. 

Elementor  vue du compte
Vue du compte dans Elementor, accès au menu des téléchargements

Ensuite, connecte-toi à ton tableau de bord WordPress et va dans Plugins > Ajouter. Télécharge le fichier ZIP que tu viens d'enregistrer sur ton ordinateur, clique sur Installer, puis sur Activer. Pour que cela fonctionne, tu dois avoir installé et activé la version gratuite du plugin Elementor. 

Ajout de plugins à WordPress
Ajouter Plugins à WordPress

De là, tu dois activer ta licence. Pour ce faire, va dans Elementor > Licence et clique sur Connecter & Activer. 

Activation de la licence Elementor  Pro dans le tableau de bord WordPress  ].
Activation de la licence Elementor Pro dans le tableau de bord WordPress

Sur l'écran suivant, clique sur Connecter, puis connecte-toi à ton compte Elementor. 

Connexion de la licence Elementor  avec votre site web WordPress
Connexion de la licence Elementor à ton site web WordPress

Tu seras redirigé·e vers le tableau de bord. Le message en haut de l'écran te demandant d'activer ta licence devrait avoir disparu. 

Comment utiliser Elementor, une explication étape par étape

Maintenant que l'installation est terminée, il est temps de passer à l'utilisation pratique d'Elementor. Elementor recommande l'installation du plugin Envato Elements qui te fournit une sélection de modèles de sites Elementor dans le tableau de bord. Assure-toi que la version par défaut de WordPress est installée et activée. 

Télécharger les Envato Elements plugin dans le tableau de bord WordPress
Téléchargement du plugin Envato Elements à partir du tableau de bord WordPress

Pour commencer, navigue vers Elements dans le tableau de bord WordPress. Tu peux choisir entre des kits de modèles gratuits et premium. Décide lequel tu préfères. Choisis ensuite un modèle qui te convient.

Une liste de kits de modèles gratuits par Envato Elements en WordPress
Une liste de kits de modèles gratuits d'Envato Elements dans WordPress

Fais défiler le menu des modèles et sélectionne le thème de page d'accueil que tu souhaites importer. Répète cette opération pour chaque nouveau modèle de site spécifique que tu souhaites créer. De nombreuses personnes choisissent souvent de l'utiliser pour créer des pages telles que les pages À propos de nous, Service , et Contactez-nous, mais c'est à toi de voir.

Une liste de kits de modèles gratuits par Envato Elements en WordPress
Options de modèles de page d'accueil dans le kit de modèles pour espaces de travail partagés

Une fois que tu as créé tes pages, tu peux les modifier en utilisant Elementor. Pour ce faire, va dans Pages > Toutes les pages, passe la souris sur la page que tu souhaites modifier, puis clique sur Modifier avec Elementor

Une fois la page chargée, tu devrais voir l'éditeur Elementor en action. Dans la partie gauche de l'écran, tu verras que le mode d'édition est activé. Sur le côté droit, tu verras l'aperçu de l'éditeur. Il s'agit essentiellement d'une vue en direct de ton site web que tu peux réorganiser, reformater et modifier directement. 

Elementor : ton guide complet sur le constructeur de pages WordPress
Modification d'une page d'accueil dans Elementor

Le contenu est divisé en sections en mode d'édition. Lorsque tu passes la souris sur les sections, elles devraient apparaître surlignées en bleu clair. 

Lorsque tu cliques sur une section, tu peux directement modifier son contenu. Si tu fais un clic droit, le panneau de contrôle de section s'ouvre. Tu peux voir ici comment, après avoir cliqué sur une image dans le modèle, le panneau de contrôle de l'image apparaît sur le côté gauche : 

Modification des images dans Elementor
Modification des images dans Elementor

Le travail avec les widgets est un processus similaire : s'il est déjà présent dans le modèle, il suffit de cliquer sur l'icône de crayon gris pour ouvrir le mode d'édition de ce widget particulier. Celui-ci apparaîtra aussi alors sur le côté gauche.

Si tu souhaites apporter des modifications à un widget de carrousel d'images, tu peux cliquer dessus dans le modèle préétabli, puis modifier les paramètres en ajustant la taille, le texte associé et les images. 

Ajout d'un widget de carrousel d'images dans Elementor
Ajout d'un widget de carrousel d'images en Elementor

Au fur et à mesure que tu apprends à utiliser les modèles d'Elementor et à concevoir ta mise en page à ton goût, tu peux commencer à penser au style. Tu peux personnaliser les couleurs en les ajustant à un niveau global (pour l'ensemble de ton site web si tu utilises Pro) mais aussi sur la base d'un widget. 

Changer la couleur du texte de tes titres est un jeu d'enfant :

Modification de la couleur, de la police et du style du texte dans les documents de l'UE Elementor
Modification de la couleur, de la police et du style du texte dans Elementor

Tu peux régler le style et la taille des polices, l'ombre portée du texte (et son opacité), ainsi que divers autres paramètres de style pour l'espacement, les marges et les bordures. Tu peux même régler la taille et le motif des lignes du widget séparateur. 

Tu peux insérer des icônes de réseaux sociaux, personnaliser leur couleur et leur taille, et déterminer leur emplacement. Tu peux également modifier leur forme, ajouter des colonnes et changer leur orientation. 

Ajout d'icônes de médias sociaux en utilisant Elementor
Ajout d'icônes de réseaux sociaux avec Elementor.

L'ensemble du flux de travail avec Elementor est facile d'utilisation. Si tu fais une erreur, elle est facile à corriger car tu peux toujours consulter l'historique des révisions et revenir à une version antérieure de ton site web en un seul clic. 

Les vues Historique de révision et Navigateur dans Elementor
Les vues de l'historique de révision et du navigateur dans Elementor

De même, le navigateur permet de voir facilement chaque section, chaque zone intérieure et chaque widget simultanément, ce qui évite de devoir faire défiler infiniment les pages vers le haut ou vers le bas. La manipulation de n'importe quelle partie de ton site web est similaire chez Elementor. Sélectionne une section ou un widget, apporte des modifications et enregistre ton travail. Quand tu es prêt·e, tu peux mettre ton site web en ligne. 

Si tu souhaites ajouter d'autres fonctionnalités ou si tu veux un thème de démarrage encore plus robuste, tu peux utiliser les thèmes et extensions d'Elementor, ce qui est exactement ce que nous allons désormais aborder. Maintenant que tu comprends les principes de base de l'utilisation d'Elementor, jetons un coup d'œil à certains des thèmes les plus populaires disponibles pour la plateforme. 

Les meilleurs thèmes Elementor

  • Hello: Hello est un thème gratuit et facile à utiliser conçu pour Elementor. Hello est un thème vraiment conçu pour commencer avec Elementor. Hello ne contient pas de stylisation ou de scripts, mais il est compatible avec les principaux plugins de WordPress
  • Layers : Elementor a adopté Layers afin qu'il soit désormais compatible avec le plugin et offre une sélection de designs adaptés aux professionnel·le·s et entièrement gratuits. 
  • Astra  : connu comme le thème WordPress le plus populaire de tous les temps, Astra est léger, rapide et facile à personnaliser via Elementor. La version gratuite est très riche en fonctionnalités, mais il existe également une version Pro qui offre une plus grande sélection de widgets pré-fabriqués et d'options de personnalisation. Le prix commence à 47 $/an.
  • Hestia  : Hestia est un autre thème qui est compatible avec Elementor. Il t'offre gratuitement un design moderne. Tu peux toutefois également passer à la version Pro pour bénéficier de plus d'options pour les widgets et d'une meilleure compatibilité avec Elementor. Les prix commencent à 69 $/an.
  • GeneratePress  : ce thème gratuit et open source WordPress est un choix solide pour créer tout type de site web. Il existe également une version Pro, avec plus de fonctionnalités, à partir de 44 $/an. 
  • OceanWP : ce thème premium WordPress offre une compatibilité totale avec Elementor, y compris de multiples démos, extensions et widgets, à partir de 39 $/an. 
  • Customify : ce thème est gratuit. Grâce à l'intégration à Elementor et au constructeur d'en-têtes et de pieds de page, il t'offre des tonnes d'options de personnalisation. Tu peux également passer à la version Pro, disponible à partir de 59 $/an, pour bénéficier de modules supplémentaires, de mises à jour et d'une assistance.
  • Neve : ce thème a un design Mobile First qui fonctionne avec Elementor et est libre d'utilisation. Il existe une version Pro avec encore plus de fonctionnalités, disponible à partir de 59 $/an.
  • Phlox Pro : ce thème premium est disponible sur ThemeForest pour 49 $ et comprend plus de 150 modèles Elementor. 
  • Zakra : ce thème est conçu pour la vitesse et le référencement et comprend plus de 65 modèles de démarrage. La version Pro comprend des démos premium et un ensemble plus large de fonctionnalités, à partir de 59 $/an. 

Extensions recommandées pour Elementor 

Elementor regorge de fonctionnalités. Tu sais maintenant comment utiliser les thèmes d'Elementor. Tu devrais cependant également envisager les diverses extensions populaires pour étendre davantage les fonctionnalités. 

Pendant que tu apprends à utiliser Elementor, n'hésite pas à consulter les extensions suivantes :

  • Ultimate Addons : étend Elementor avec plus d'extensions, de widgets et de blocs, à partir de 55 $. 
  • Essential Addons pour Elementor : il s'agit de la bibliothèque la plus populaire d'Elementor pour Elementor. Elle comprend plus de 70 options à partir de 39,97 $ pour un seul site. 
  • Pack Elementor : ce paquet est rempli de widgets et d'extensions gratuites d'Elementor. La version Pro offre encore plus de widgets ainsi qu'une assistance et des mises à jour, à partir de 29 $/an.
  • Prime Slider : ce module complémentaire te permet de créer un slider dans l'en-tête et le hero de ton site web Elementor. Tu peux télécharger le plugin gratuitement ou opter pour la version Pro, qui inclut l'assistance et les mises à jour, à partir de 7,92 $/an.
  • ToolKit pour Elementor : ToolKit vise à simplifier la création de sites web Elementor grâce à des améliorations de performance et des outils d'administration plus intuitifs. Tu peux commencer à travailler sur un maximum de trois sites web avec cette extension pour 49 $/an.
  • Happy Addons : le dernier mais non le moindre est Happy Addons. Ce module complémentaire ajoute de nouveaux widgets, de nouvelles sections et de nouveaux pré-réglages à Elementor. Il existe une version gratuite et une version Pro. Cette dernière est dotée de fonctionnalités supplémentaires telles que la copie en ligne, l'assistance et les mises à jour 24/7. Le prix commence à 29 $/an. 

Conclusion sur le page builder Elementor

Elementor est souvent considéré comme le meilleur plugin de construction de pages pour WordPress. Il y a de bonnes raisons à cela : la conception riche en fonctionnalités, la communauté robuste et la disponibilité des thèmes et des extensions font d'Elementor un moyen flexible et accessible de créer un site web. 

Si tu veux apprendre à utiliser Elementor, tu dois commencer par un tarif d'hébergement solide. Chez nous, nous avons Raidboxes Tu peuxbénéficier d'un hébergement spécifique à WordPress , qui couvre une multitude de besoins. Si tu as des questions sur nos tarifs, n'hésite pas à nous contacter.

Tes questions au sujet d'Elementor

Quelles questions as-tu à poser à Maddy ? Nous nous réjouissons de ton commentaire. Tu t'intéresses à WordPress et au design web ? Alors suis Raidboxes sur Twitter, Facebook, LinkedIn ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un *.