Tutoriel WordPress Elementor | Un guide étape par étape en 2024

Vous souhaitez débuter avec Elementor et recherchez un Tutoriel WordPress Elementor ? Votre recherche se termine ici. Dans cet article, je vais vous expliquer tout ce que vous devez savoir sur Elementor.

Depuis son installation jusqu'à la création d'une page très élégante, tous vos doutes seront résolus si vous lisez l'article. Je t'assure; la lecture ne sera pas vaine !

Mais vous avez besoin d’un plugin de création de site Web pour donner une touche professionnelle à votre site Web.

Comment tu l'as obtenu? Eh bien, j'utilise Elementor pour ça. Elementor me permet de créer extrêmement facilement un site Web professionnel par simple fonction glisser-déposer. 

Curieux d'en savoir plus sur Elementor, alors consultez mon détail Examen Elementor.

Comment installer Elementor sur WordPress

Eh bien, il existe 2 façons d’installer Elementor sur WordPress. 

• Via le site officiel d'Elementor

Rendez-vous sur le site officiel d’Elementor et cliquez sur le bouton Téléchargement gratuit affiché sur le site Web. 

Dès que vous cliquez sur le bouton Téléchargement gratuit, une fenêtre contextuelle apparaîtra pour vous abonner au site Web Elementor, et une fois que vous aurez fait de même, le plugin commencera automatiquement le téléchargement.

Vous trouverez un fichier zip téléchargé sur votre ordinateur portable/PC. Rendez-vous maintenant sur votre tableau de bord WordPress et cliquez sur la section Plugins > Ajouter un nouveau plugin > Télécharger le plugin

Choisissez le fichier Elementor et téléchargez-le sur WordPress.

• Via le tableau de bord WordPress

Vous pouvez également installer le plugin Elementor directement à partir du tableau de bord WordPress. Allez simplement sur Plugin, puis sur Ajouter un nouveau plugin

Dans le coin supérieur droit, vous trouverez une barre de recherche, tapez Elementor dans la barre de recherche. Le tout premier résultat est ce que vous devez installer dans votre WordPress. Cliquez simplement sur installer et attendez que le plugin soit installé. Activez le plugin et vous disposez d’un excellent créateur de site Web prêt à être déployé.

Maintenant qu’Elementor est installé dans votre tableau de bord WordPress, examinons les fonctionnalités qu’il offre.

Fonctionnalités d'Elementor et leur utilisation dans la création d'une page Web

La liste des fonctionnalités fournies par Elementor est interminable, je vais donc discuter de nombreuses fonctionnalités essentielles d'Elementor. Assurez-vous de les lire et de les essayer plus tard.

Il existe deux plans pour Elementor The Free et The Pro. Comme le nom l'indique pour le forfait Pro, vous devrez jouer, mais plusieurs fonctionnalités sont également fournies avec son forfait gratuit.

Je commencerai par discuter des fonctionnalités du plan Free, suivi du plan Pro.

Fonctionnalités du plan gratuit Elementor

Caractéristiques essentielles:

• Drag and Drop

La fonction glisser-déposer d'Elementor est très rapide et vous aide à accélérer la conception de pages Web. De la création d'une mise en page Web à la mise au point, tout peut être fait par simple glisser-déposer.

Vous n'avez pas besoin de changer d'onglet ou de modifier la page pour concevoir vos en-têtes et pieds de page. Avec Elementor, vous pouvez le faire sur la même page où se trouve votre page Web principale.

Vous pouvez copier et coller, voire dupliquer le style ou la fonctionnalité que vous souhaitez utiliser. Cela vous fait gagner du temps pour reconstruire la même fonctionnalité encore et encore.

Avec l'option de barre de recherche fournie par Elementor, vous pouvez facilement naviguer sur le site Web et atteindre l'onglet souhaité en quelques secondes. Cette fonctionnalité est vraiment utile lorsque vous avez une très longue page à créer.

Il existe 3 options pour enregistrer votre conception, de la suppression à l'obtention d'une sauvegarde. Vous pouvez refaire/annuler les créations que vous avez réalisées. Cela vous donne la possibilité de faire une sorte de test A/B de la page avec vos observations. 

Vous pouvez visiter toutes les révisions dans l'onglet Révision, c'est-à-dire que vous pouvez consulter tous les types de conceptions que vous avez essayées jusqu'à présent sur votre page Web et sélectionner également une version antérieure si vous n'aimez pas votre page Web actuelle. 

Vous souhaitez essayer de nombreuses fonctionnalités différentes et voir ce qui fonctionne ? Aucun problème avec Elementor ; vous pouvez concevoir la page en mode brouillon, tout essayer et reprendre la page plus tard une fois que vous êtes entièrement prêt à publier la page.

Comment utiliser la fonctionnalité Glisser-Déposer d'Elementor

Toutes les fonctionnalités de glisser-déposer sont disponibles sur le côté gauche de la page dès que vous créez une page.

Après avoir créé une page sur WordPress et lui avoir donné un titre, cliquez simplement sur modifier avec Elementor, ce qui vous amènera à l'éditeur en direct d'Elementor, qui ressemble à l'image ci-dessous.

Dans la deuxième image ci-dessus, vous pouvez consulter les options de glisser-déposer sur le côté gauche de la page. Il existe de nombreux widgets qu'il vous suffit de faire défiler vers le bas, ou vous pouvez également rechercher un widget à l'aide de la barre de recherche en haut.

• Modèles de conception

Vous obtenez des modèles de conception intégrés avec Elementor. Pas seulement 5 ou 10, mais Elementor vous propose plus de 100 modèles de conception gratuits et plus encore lorsque vous passez à la version Pro.

Comment sélectionner le modèle souhaité pour la bibliothèque de modèles Elementor

Lorsque vous verrez pour la première fois ouvrir la page du générateur Elementor, vous verrez quelque chose du genre ci-dessous :

L'image est tirée du site Web Elementor et est assez explicite.

Dès que vous cliquez sur l'option Dossier, vous verrez une fenêtre contextuelle ci-dessous.

• Widgets

Les widgets glisser-déposer fournis avec Elementor sont innombrables. Certains d'entre eux sont:

• Section intérieure : divisons une section en deux.
• Titre : déposez ce champ dans votre page Web pour insérer un titre accrocheur.
• Image : mettez des images sur votre page Web à l'aide de ce widget
• Éditeur de texte : saisissez du texte dans votre page Web à l'aide d'un widget éditeur de texte
• Vidéo : vous pouvez utiliser un widget Vidéo pour placer des vidéos de qualité sur votre page. Cela augmentera l’expérience utilisateur
• Bouton : les appels à l'action sont très importants pour presque tout le site, avec des boutons vous pouvez placer l'appel à l'action sur votre page et les lier à la page de destination de votre produit.
• Classement par étoiles : le classement par étoiles est utile pour tout site Web de commerce électronique car il permet d'évaluer plusieurs produits différents qu'il propose.
• Diviseur : aide votre page Web dans l'indentation et génère un espace blanc pour augmenter l'expérience utilisateur.
• Icônes : avec le widget d'icônes, vous pouvez mettre des icônes accrocheuses de médias sociaux ainsi que de différents services pour rendre votre page plus attrayante.
• Compteur : créez un compte à rebours pour vos produits ou des services supplémentaires limités afin de créer une urgence.
• Témoignages : ajoutez des témoignages sur vos produits et services pour renforcer la confiance des visiteurs de votre site Web.

En dehors de cela, il existe de nombreux autres widgets tels que le carrousel d'images, la galerie de base, les onglets, les codes courts, le HTML, la barre de menus, etc. Assurez-vous de regarder toutes les fonctionnalités après avoir installé le plugin sur WordPress.

Jetez un œil à certains des widgets d’Elementor ci-dessous dans l’image.

Comment utiliser les widgets Elementor

Pour utiliser les widgets Elementor :

Dirigez-vous vers le tableau de bord d’Elementor et regardez sur le côté gauche de la page. Il existe un certain nombre de widgets que vous pouvez glisser-déposer sur votre page Web et commencer votre travail.

• Conception et édition réactives

Avec la règle d'indexation mobile d'abord sous le feu des projecteurs, Google s'assure que le site adapté aux mobiles se classe uniquement plus haut sur Google, et il en va de même avec d'autres SERP. 

Avec Elementor, vous n'avez pas à vous soucier de la convivialité mobile car tous les modèles, qu'ils soient gratuits ou payants, sont adaptés aux mobiles ainsi qu'aux tablettes et aux ordinateurs de bureau. Vous pouvez également modifier les fonctionnalités que vos utilisateurs verront lorsqu'ils accéderont à partir d'un mobile ou d'un ordinateur. 

Vous pouvez leur offrir des expériences différentes sur les deux appareils, bien que cette pratique ne soit pas recommandée car elle peut parfois créer une confusion dans l'esprit de vos utilisateurs à propos de la marque.

Comment voir la réactivité mobile de vos pages Web

Au bas du générateur de page Web, dans le coin inférieur gauche, vous verrez trois icônes offrant la possibilité d'afficher votre page Web via un ordinateur, une tablette et un mobile. Le site aura exactement la même apparence pour les autres utilisateurs après la publication de votre site Web.

Fonctionnalités du flux de travail :

• Aucune exigence de codage

Vous n'avez pas besoin d'être un expert ni même de connaître un peu le codage pour utiliser Elementor. Tous les widgets mentionnés ci-dessus se font par glisser-déposer, et vous pouvez facilement créer une page Web haut de gamme et élégante avec eux. 

L’Elementor s’occupe lui-même de la partie codage. De plus, le code utilisé est optimisé et raccourci afin de réduire le temps de chargement de votre page Web, un facteur très important pour un classement parmi les meilleurs.

• Barre de navigation

À l'aide de la navigation, vous pouvez voir la structure que vous avez conçue sur la page Web, c'est-à-dire le séquencement de votre page et le flux. Vous pouvez également modifier, supprimer et dupliquer les widgets si vous le souhaitez via la barre de navigation.

Comment utiliser la barre de navigation

Pour utiliser le Navigateur, faites un clic droit sur le backend de votre page Web ouverte avec Elementor et cliquez sur Navigateur. Une fenêtre contextuelle apparaîtra, comme le montre l'image ci-dessous.

• Raccourcis

Les raccourcis clavier sont les touches de raccourci vers le widget principal présent dans le tableau de bord Elementor. Jetez un œil à l'image pour voir certains des raccourcis clavier prédéfinis.

• Fonctionnalité d'édition en ligne

Avec Elementor, vous n'avez pas besoin d'écrire votre contenu ailleurs, ni de copier-coller et d'en modifier le style. Vous pouvez taper directement sur le tableau de bord WordPress avec le style souhaité et gagner un temps précieux.

Caractéristiques de conception

• Polices globales

Avec l'aide d'Elementor, vous pouvez définir un style de police particulier pour l'ensemble de votre site Web en un seul clic. Peu importe qu'il s'agisse d'un titre, d'un paragraphe, d'une citation ou même d'un appel à l'action. 

• Couleurs globales

De même, lorsque la police globale est définie, vous pouvez définir la couleur de l'ensemble du texte de votre site Web de la même manière si nécessaire.

• Dégradés de fond

Avec la fonction de dégradé de couleurs, vous pouvez éclairer l'arrière-plan que vous avez défini pour chaque bloc et même votre page d'accueil. Ces couleurs dégradées s'appliquent à chaque page de votre site Web.

• Vidéos d'arrière-plan

Vous pouvez utiliser des vidéos comme arrière-plan avec Elementor. Les vidéos en arrière-plan pourraient vraiment éclairer votre page Web.

Comment utiliser les fonctionnalités de conception dans Elementor

Toutes les fonctionnalités mentionnées ci-dessus peuvent facilement être trouvées dans le tableau de bord Elementor, et vous pouvez les utiliser en cliquant simplement et en testant ce qui semble bien sur votre page Web.

• Autres caractéristiques
• Appliquer la superposition d'arrière-plan
• Mettre le diaporama en arrière-plan
• Créez un canevas pour donner vie à votre page
• Utiliser les modes de fusion
• Filtres de style CSS
• Diviseurs de forme
• Boîte ombre
• Icônes
• Exporter des icônes SVG à partir d'autres sites Web

Fonctionnalités de mise en page

Vous pouvez modifier la mise en page de la page Web et l'optimiser pour qu'elle soit belle avec diverses fonctionnalités qui Elementor fournit, comme la largeur et la hauteur de la section, la largeur de la colonne, l'espace et sa position.

Vous pouvez également ajuster les marges et le remplissage, ce qui est une fonctionnalité très importante sur une page Web. 

Caractéristiques du forfait Elementor Pro

Essentiels

Outre la fonctionnalité gratuite, Elementor Pro propose 2 fonctionnalités supplémentaires.

1. Constructeur de pop-up

Vous pouvez créer des fenêtres contextuelles pour vous inscrire, pour une offre à durée limitée, ainsi que des fenêtres contextuelles d'intention de sortie pour augmenter vos ventes et rendre votre page plus attrayante.

La fonctionnalité, comme les autres widgets, est présente dans le tableau de bord d'Elementor.

Avec Pop-up Builder, vous pouvez créer les pop-ups suivants :

• Email Subscription
• Fenêtres contextuelles du formulaire de connexion
• Pop-ups de bannières de promotion et de vente
• Capture de plomb
• Verrouillage du contenu et révélation des fenêtres contextuelles
• Nombre d'annonces
• Quitter l'intention
• Fenêtres contextuelles de type tapis de bienvenue
• Produits associés et ventes incitatives

2. Générateur de thème

Avec Elementor Pro, vous avez un contrôle total sur toutes les fonctionnalités que vous utilisez sur votre site Web. Vous pouvez concevoir les 404 pages et diriger vos utilisateurs vers la page de votre choix. 

Vous pouvez gérer l'en-tête et le pied de page sur la même page sur laquelle vous concevez. Avec la puissante intégration WooCommerce, vous pouvez également optimiser vos pages de produits.

Caractéristiques de conception

1. CSS personnalisé

Avec chaque widget que vous ajoutez, vous pouvez ajouter un extrait CSS personnalisé pour rendre le contenu plus personnalisé et attrayant. Mais pour utiliser cette fonctionnalité, vous devez avoir une bonne connaissance du CSS. 

L’utiliser sans aucune connaissance préalable peut également aller au sud. Donc, si vous ne possédez pas les compétences, mieux vaut éviter la fonctionnalité CSS personnalisée.

2. Effets de mouvement

Vous pouvez ajouter de superbes animations et donner à votre site Web un type de dessin animé. Cela permet d’attirer un public cible spécifique et peut parfois être très bénéfique. 

Comment utiliser la fonctionnalité de conception dans Elementor

Eh bien, ce n’est pas sorcier. Comme les autres widgets, vous pouvez faire défiler le panneau du tableau de bord et les rechercher ou simplement saisir le nom du widget dans le panneau de recherche.

Stratégie

Ces fonctionnalités sont celles qui sont absentes de la version gratuite d’Elementor.

• Widget de formulaire

Avec le générateur de formulaires Elementor, vous pouvez apporter diverses modifications et rendre vos formulaires intéressants et attrayants à remplir.

• Choisissez la disposition et l'espacement que vous souhaitez assez facilement.
• Plus de 10 champs parmi lesquels choisir, que vous souhaitez dans votre formulaire.
• Choisissez parmi de nombreuses couleurs et typographies qui correspondent à la conception et à la palette de couleurs de la page Web.
• Vous pouvez également créer des formulaires dynamiques
• Si vous avez besoin d'un formulaire long avec le générateur de formulaires d'Elementor, vous pouvez le créer et le diviser en plusieurs étapes afin que les utilisateurs le remplissent facilement.

• Widget de carrousel de témoignage

• Vous pouvez utiliser les modèles prédéfinis fournis avec la version Pro d'Elementor et créer un superbe carrousel de témoignages pour votre entreprise afin d'obtenir plus de conversions.
• Alignez le contenu et la mise en page du carrousel. Ayez un contrôle total sur l’apparence et l’alignement du carrousel.
• Les modèles de personnalisation fournis dans Elementor Pro sont faciles à utiliser et offrent une expérience conviviale à la fois à celui qui le construit et à celui qui le voit.

Comment utiliser le widget carrousel de témoignages dans Elementor Pro

• Recherchez le curseur de témoignage dans la barre de recherche du tableau de bord. Ouvrez le widget et vous pouvez commencer par créer le curseur immédiatement. Il y a deux skins à choisir parmi celui par défaut et celui à bulle. Choisissez celui dont vous avez besoin en fonction du style.
• Alignez et finalisez la mise en page de vos témoignages, ce qui peut être fait via 5 options Image en ligne, image empilée, l'image du dessus, l'image à gauche et l'image à droite.
• Choisissez le style et le design en fonction de votre palette de couleurs et ajoutez du contenu au curseur.
• Vous pouvez lire automatiquement les diapositives sur le curseur, les mettre en pause lorsque les utilisateurs cliquent dessus ou définir une heure particulière sur l'option de changement de diapositive. Je préfère utiliser la pause sur l'option d'interaction pour mes curseurs de témoignage.
• Liens d'action

Vous pouvez connecter votre site Web à WhatsApp, au calendrier Google et à bien d'autres applications avec Elementor Pro.

Comment utiliser les liens d'action dans Elementor Pro

• Allez à Elementor tableau de bord et recherchez les champs de lien, qui est l’un des widgets Pro dont dispose Elementor.
• Choisissez l'option dynamique disponible dans le coin supérieur droit de la fenêtre contextuelle du widget.
• Choisissez l'URL du contact sous l'option d'action.
• Ajoutez tous les détails demandés par le widget et vous êtes prêt à intégrer votre plateforme de contact à votre site Web.

Fonctionnalité de création de thème

• Contenu dynamique
• Utilisez une intégration impeccable pour créer une superbe page Web dynamique.
• Vous pouvez ajouter des couleurs dynamiques, des images, même des logos de sites Web et bien plus encore à votre page Web.
• La meilleure chose est que vous pouvez enregistrer la mise en page du contenu dynamique que vous avez créé et l'utiliser n'importe où sur le site Web.

Comment utiliser le contenu dynamique avec Elementor Pro

Je vais montrer l'exemple de l'utilisation d'un éditeur de texte et de la dynamisation du contenu. Assurez-vous de voir tous les autres widgets et essayez-les.

1. Ouvrez un éditeur de texte et tapez le texte souhaité sur votre page Web. Cliquez maintenant sur l'icône dans le coin supérieur droit de l'éditeur, comme indiqué dans l'image ci-dessous.
2. Lorsque vous cliquez sur l'icône, vous verrez une liste d'options qui apparaissent via une liste déroulante. Ceux-ci sont classés en publication, archive et site. Choisissez l'option que vous souhaitez et commencez votre travail immédiatement.
3. Maintenant, pour modifier davantage le titre de votre page, vous devez cliquer sur une icône, qui est une clé, comme le montre l'image ci-dessous.

Dans les cases affichées dans l'image ci-dessus, c'est-à-dire avant, après et fallback, vous devez mettre le titre avant le changement, un titre qui doit être après le changement, et un contenu cohérent qui sera affiché à la place du contenu dynamique. quand il n'y a pas d'avant et d'après le titre.

Autres fonctionnalités de création de thèmes dans Elementor Pro

• Condition d'affichage : vous pouvez décider quoi afficher et où afficher
• En-tête et pied de page : par simple glisser-déposer, vous pouvez personnaliser l'en-tête et le pied de page de votre page Web.
• En-tête collant : ajoutez un en-tête collant à des pages spécifiques ou à l'ensemble de votre site Web dans le monde.
• Page 404 : concevez une page 404 personnalisée et redirigez vos utilisateurs et votre audience vers la page de votre choix.

Contenu du thème

• Widget de la barre de menus de navigation

• Il existe de nombreuses options de style parmi lesquelles vous pouvez choisir pour votre barre de navigation.
• Ces styles répondent à tous les appareils, et vous pouvez les voir sur la version mobile et apporter les modifications nécessaires si nécessaire.
• Vous pouvez animer votre barre de navigation avec des effets d'animation et de survol. Cela illumine vraiment votre page.
• Vous pouvez choisir comment placer le menu, c'est-à-dire horizontalement, verticalement, l'afficher en plein écran, peut-être essayer l'option hamburger.

Comment utiliser le widget de la barre de menus de navigation

1. Dirigez-vous vers le tableau de bord et recherchez la barre de menu
2. Vous pouvez définir votre menu sur horizontal, vertical ou déroulant selon le style qui convient à votre site Web.
3. Vous pouvez également ajouter une doublure simple et double sous le contenu de chaque menu pour mettre en évidence et même modifier la couleur du texte via le tableau de bord.

• Widget de recherche

Le widget de recherche est livré avec trois skins : le widget de recherche par défaut, minimal et plein écran.

Vous pouvez modifier la conception de la barre de recherche ainsi que le bouton pour qu'ils correspondent au style de votre page Web.

Comment utiliser la barre de recherche avec Elementor Pro

Accédez au tableau de bord Elementor et recherchez le widget de la barre de recherche, choisissez le style souhaité, par défaut, plein écran ou minimal et modifiez la typographie et les couleurs de la barre de recherche en fonction de votre thème de couleurs.

• Autres fonctionnalités de contenu de thème que vous obtenez avec Elementor Pro

• Widget de publication : modifiez l'apparence de la barre latérale en y plaçant vos publications récentes.
• Widget de commentaires WordPress : Avec ce widget, les lecteurs peuvent commenter l'article que vous avez écrit.
• Widget de portefeuille : si vous avez de nombreux portefeuilles à afficher, utilisez ce widget de portefeuille pour les afficher dans un style innovant et attrayant.

Toutes ces fonctionnalités sont disponibles dans le tableau de bord principal d'Elementor, à l'instar des autres widgets. Assurez-vous de jeter un œil à toutes ces fonctionnalités.

Tarification Elementor Pro

Avis d'utilisateur 

Liens rapides:

• Tutoriel Elementor Pro
• MEILLEURS AJOUTS D’ÉLÉMENT
• Ancre du menu Elementor
• Duda contre Elementor

FAQ sur le didacticiel WordPress Elementor

Lisez aussi:

• Castor Builder contre Divi
• Castor Builder vs Elementor

Conclusion : Tutoriel WordPress Elementor 2024

L'un des principaux logiciels de conception de pages Web, Elementor, est une plate-forme fiable et vivante sur laquelle créer votre site Web. De la création d'une page de blog de base à la création d'une page de destination de produit élégante et époustouflante, tout peut être fait avec Elementor.

La version Pro d'Elementor propose des fonctionnalités infinies avec lesquelles travailler et faire passer votre site Web à un nouveau niveau. Cela vous donne également la liberté d’avoir un contrôle total sur votre site Web.

Vous n'avez pas besoin d'être un codeur pour utiliser Elementor. Utiliser Elementor est aussi simple que d’apprendre à cliquer et glisser-déposer des fonctionnalités.

Oui, il faut un peu de temps pour voir toutes les fonctionnalités et savoir quelles fonctionnalités sont utiles pour votre site Web, mais le temps que vous consacrerez à Elementor en vaudra la peine, je peux vous l'assurer.

Alors, essayez Elementor et faites-moi part de votre expérience en commentant ci-dessous ! 

Elementor Vidéos populaires

Elementor sur les réseaux sociaux

Sommet des constructeurs de pages 2021 (@sommet_camp) ça commence demain ! Obtenez votre billet GRATUIT et discutez avec plus de 35 experts du secteur, dont @bpines1 . Je suis ravi de parrainer ce grand événement. On se voit là-bas! 💻🎉https://t.co/gDtFpUJLBH

- Elementor (@elemntor) 9 mai 2021

Écartez-vous et accueillez notre vitrine d’avril 2021. 🏆🌷 Ce mois-ci, nous saluons 10 agences de design du monde entier. Cette collection diversifiée représente les talents de création Web Elementor à travers le monde. 🌎 https://t.co/bwwOUDQCuu

- Elementor (@elemntor) 19 mai 2021