Elementor : le Guide Ultime

ELEMENTOR HUB | 2020

Construire un site entier avec Elementor - Tutoriel Complet 2020

Partagez le Guide :

Rejoignez la mailing list pour avoir les prochains guides :

Qu'est-ce qu'Elementor ?

Elementor est un constructeur de pages de site internet intégré à WordPress.

Elementor fonctionne comme un Wysiwyg : ce que vous voyez au moment de construire la page est exactement ce que vous aurez sur la version en ligne de votre site internet.

Elementor contient un ensemble de widgets qui vont pouvoir être glissés déplacés sur votre page pour la construire et ajouter des fonctionnalités.

Pour faire simple, Elementor est un constructeur de page avec la simplicité de Wix mais qui utilise la puissance de WordPress.

Il est ainsi compatible avec votre thème, l’ensemble de vos pages et vos plugins.

Ceci explique son incroyable popularité.

Avec ce Tuto vous allez pouvoir installer Elementor sur votre site WordPress et créer l’ensemble de vos pages en utilisant toutes les fonctionnalités du constructeur de page.

Comment fonctionne Elementor ?

Elementor est un plugin WordPress qui s’installe gratuitement.

Une fois installé vous allez pouvoir choisir sur chacune de vos pages, existante ou nouvelles, si vous souhaitez utiliser Elementor pour la construire.

Vous pouvez ainsi créer des pages entièrement avec votre thème tout en ayant d’autres pages construites avec Elementor.

De plus si vous souhaitez désinstaller Elementor, vos pages seront automatiquement convertie en page WordPress, ainsi vous ne perdrez jamais votre contenu.

Installer Elementor sur mon site WordPress ?

Elementor vient sous la forme d’un plugin WordPress.

Donc pour l’installer il suffit de le chercher dans la bibliothèque des plugins et de cliquer sur Installer :

installer elementor page builder plugin wordpress

Besoin d’aide ?

Cliquez ici pour voir en détail comment installer Elementor sur votre site WordPress

Paramétrer Elementor dans le tableau de bord WordPress

Une fois Elementor installé sur notre site WordPress, il faut paramétrer le constructeur de page.

Pour accéder aux paramètres il suffit d’aller dans Elementor > Réglages.

Les paramètres se trouvent dans les trois onglets Général, Style et Avancé.

Voici les éléments que l’on peut paramétrer :

  • Les paramètres Elementor par défaut de couleur et de police.
  • Les pages sur lesquelles on souhaite utiliser Elementor : Articles ou Page.
  • La largeur du contenu de notre page.
  • L’espace entre les différents éléments qui composent notre page.
  • Définir le point de rupture responsive, c’est à dire la largeur de l’écran à partir de laquelle Elementor va passer de la version Ordinateur à Tablette et de Tablette à Mobile de votre page
  • Ou encore activer le mode Sans-échec d’Elementor.

parametres d'Elementor dans WordPress

Aller plus loin

Allez voir en détail tous les paramètres Elementor pour votre site WordPress

Comment créer une nouvelle page avec Elementor

Une fois Elementor Installé et paramétrer, on va pouvoir créer sa première page Elementor.

Elementor s’intègre à WordPress, donc il faut d’abord créer une nouvelle page WordPress dans Pages > Ajouter

Ensuite on défini le Titre de la page et le slug (url) et on enregistre.

Puis sous attribut de la page on va pouvoir définir le modèle de page à utiliser (voir ci-dessous pour le choix du modèle).

C’est ici que l’on va indiquer si l’on souhaite utiliser le modèle de page par défaut, c’est à dire celui de notre thème, ou si l’on souhaite utiliser un des modèles Elementor.

créer une nouvelle page Elementor WordPress

Une fois notre modèle Elementor sélectionné, il suffit de cliquer sur le bouton Modifier avec Elementor pour ouvrir la nouvelle page de notre site dans Elementor.

Page Elementor Canevas vierge

Aller plus loin

Allez voir en détail comment créer une nouvelle page WordPress avec Elementor

Choisir le modèle de page Elementor à utiliser : Elementor Caneva, pleine largeur et theme

Lorsque l’on crée une nouvelle page Elementor, dans Attribut de la page on va pouvoir choisir entre 3 modèles :

  1. Elementor Caneva 
  2. Pleine largeur  
  3. Modèle du thème


Elementor Caneva :
Ce modèle va créer une page complètement gérée par Elementor.

Donc il n’y aura aucun éléments appartenant au thème comme le menu ou le footer.

Elementor Pleine largeur :
À l’inverse va nous permettre de garder les éléments du thème comme le menu et le footer et d’utiliser Elementor uniquement sur la partie de contenu de la page.

Modèle du Thème :
C’est le modèle par défaut. Il affiche l’ensemble des éléments de votre thème comme le menu, le pied de page, la barre latérale, la largeur du thème etc.

Elementor Caneva modele de page
Cet exemple de page utilise le modèle Elementor Caneva.

Aller plus loin

Explorez en détail les différences entre les modèles Caneva, Pleine largeur et Thème.

Découvrir l’interface d’Elementor

L’interface d’Elementor est relativement simple.


A gauche les Widgets, les Paramètres et le menu Elementor :

Vous disposez d’une barre latérale qui affiche l’ensemble des paramètres liés à la page ou à un élément en particulier.

Il vous permet également d’accéder à la liste de l’ensemble des Widgets pour les sélectionner et les faire glisser sur votre page.

Enfin il offre des options de navigation pour revenir au tableau de bord WordPress, sauvegarder sa page, et de fonctionnalité pour afficher la navigation entre les éléments de sa page, l’historique ou le mode responsive.


Au centre se trouve votre page web :

La page s’affiche sous forme de wysiwyg donc ce que vous voyez est similaire à la version en ligne de votre page.

C’est ici que vous allez définir vos sections et colonnes puis ajouter les widgets pour construire votre page et la paramétrer.

En faisant clic droit sur les éléments de votre page vous allez avoir également des options supplémentaires qui s’affichent.


À droite se trouve par défaut le volet de navigation :

Il peut être affiché ou masqué via l’icône navigateur dans la barre latérale gauche des paramètres).

Le volet de navigation d’Elementor permet de sélectionner plus facilement n’importe quel élément de la page.

Interface d'Elementor Page Builder

Aller plus loin

Explorez en détail les différences entre les modèles Caneva, Pleine largeur et Thème.

La grille d’Elementor pour construire sa page

Pour suivre les principes simples du Webdesign, Elementor se base sur une grille dans laquelle vous allez pouvoir ajouter vos Widgets Titre, texte, image, bouton, etc.

La grille permet d’avoir un site agréable visuellement et surtout responsive car elle permet à l’ensemble des éléments de votre site de correctement s’organiser sur Mobile et Tablette également.

  • Elementor s’organise en sections les unes au dessus des autres.
  • A l’intérieur de chaque section se trouvent une ou plusieurs colonnes.
  • Enfin dans chaque colonne on va retrouver les widgets c’est à dire l’ensemble du contenu de notre page ainsi que des sections internes permettant d’ajouter des colonnes à l’intérieur d’une colonne.
Grille Elementor : section, colonnes, widget section internes

Pour ajouter une nouvelle section il suffit de cliquer sur le bouton + et de définir le nombre de colonnes que l’on souhaite avoir dans la section :

Choix du nombre de colonnes dans Elementor

Ensuite on paramètre la grille (couleur, marges), on y ajoute des Widgets puis on empile les sections pour construire sa page.

Grille Elementor Sections

Aller plus loin

Découvrez le principe de grille, les sections, les colonnes et sections interne pour construire la structure de vos pages Elementor.

Créer une grille complexe avec les sections internes d'Elementor

Les sections internes permettent de créer une grille plus complexe.

Il s’agit d’une section que l’on place à l’intérieur d’une colonne.

Par exemple :

Sections Internes Elementor

Les sections internes permettent d’avoir un niveau de complexité plus important de la grille Elementor.

Les sections internes sont très utilisées pour les doubles boutons par exemple.

Pour ajouter une section interne, sélectionnez le Widget Section Interne, qui est le premier Widget de la liste d’Elementor.

Aller plus loin

Apprenez à utiliser les sections internes pour créer des pages Elementor plus complexes.

Utiliser des blocs prédéfinis pour construire sa page Elementor

Elementor met à disposition une bibliothèque blocs de sections tout fait, prêts à être intégrés sur la page.

Les blocs sont une manière rapide de construire une page web avec Elementor sans partir de zéro.

Les blocs peuvent être entièrement personnalisés.

Pour accéder à la bibliothèque de bloc Elementor, il suffit de cliquer sur l’icône du dossier sur la page puis dans Blocs de choisir le bloc à insérer dans sa page :

Le bloc est alors inséré et prêt à être personnalisé

Les blocs de la bibliothèque Elementor permettent donc de construire rapidement les différentes sections d’une page web.

Bloc predefini Elementor

Aller plus loin

Suivez le guide pour accéder à la bibliothèque Elementor, importer et personnaliser vos blocs sur votre page web.

Utiliser des templates de pages Elementor

Elementor met également à disposition des templates de pages toutes faites pour construire en quelques clics une page de votre site.

Vous pouvez donc importer des dizaines de pages prêtes à être personnalisées avec votre propre contenu.

Pour cela cliquez sur l’icône du dossier sur votre page et dans bibliothèque choisissez l’onglet Page :

bibliotheque template page elementor

Prévisualisez les modèles pour trouver la page qui vous convient puis cliquez sur Importer pour la charger sur votre page Elementor.

Il ne vous reste plus qu’à la personnaliser avec vos couleurs et votre contenu, ou modifier les sections, les supprimer ou en ajouter.

modele de page elementor

Aller plus loin

suivez le guide pour accéder à la bibliothèque d’Elementor, trouver des modèles de page et les importer sur votre page Elementor.

Créer une page Elementor de zéro (à partir d’une page vierge)

En plus des blocs ou des templates de pages, vous pouvez créer vos pages en partant entièrement de zéro.

La première étape est de cliquer sur le bouton + sur la page pour ajouter une nouvelle section et de définir le nombre de colonnes que l’on souhaite ajouter à sa section (on peut en ajouter ou supprimer au fur et a mesure donc ne réfléchissez pas trop à ce stade).

Choix du nombre de colonnes dans Elementor

Ensuite dans le panneau latéral gauche sélectionnez un nouveau Widget (si vous ne voyez pas la liste des widgets par défaut, cliquez sur l’icône aux neufs points), et faites le glisser sur votre page :

widget titre elementor

Il ne vous reste plus qu’à paramétrer la section, la colonne et les widgets en cliquant dessus, via le panneau latéral gauche.

Vous pourrez régler :

Le contenu, les couleurs, les typos, les taille, les comportements, les marges et bien d’autres paramètres, en utilisant les 3 onglets :

  • Contenu,
  • Style 
  • Avancé 
widget titre elementor

Aller plus loin

accédez au guide avancé sur le paramétrage des sections et widgets Elementor pour construire votre page.

Déjà évoqué plus haut, le navigateur Elementor est votre meilleur amis pour réorganiser rapidement une page, accéder à un élément ou sélectionner et déplacer une section ou un widget.

Pour accéder au navigateur Elementor s’il n’est pas affiché par défaut, il suffit de cliquer sur l’icône Navigateur en bas à gauche de l’écran.

Navigateur Elementor

Vous pourrez alors accéder à l’ensemble des éléments présents sur votre page Elementor et interagir facilement avec.

Aller plus loin

Regardez comment utiliser le navigateur Elementor pour améliorer la vitesse de création de vos pages web.

Copier coller dans Elementor : Sections, colonnes et widgets

Une fois que vous avez paramétré un Widget Elementor comme un titre, ou une colonne ou une section entière, vous pouvez simplement le copier coller n’importe où sur votre page pour gagner du temps.

Pour copier un élément il suffit de faire clic droit dessus > Copier

Ensuite rendez vous sur l’élément au dessus duquel vous voulez le coller et faites clic droit > Coller

copier coller dans Elementor

Un exemple ?

Par ici pour mieux comprendre comment utiliser le copier-coller sur Elementor.

Utilisez l’historique pour revenir en arrière en cas d’erreur ou sur une version antérieure de la page.

Pour annuler une action sur Elementor vous pouvez faire Ctrl+Z sur PC ou Cmd+Z sur mac.

Mais si vous voulez accéder à la liste complète des modifications, cliquez sur le bouton Historique en bas à gauche de la fenêtre Elementor :

Historique Elementor

Vous aurez alors la liste complète des modifications dans l’onglet Action et la liste complète des versions de la page dans Révision.

ALLER PLUS LOIN 

accédez à l’historique de vos modifications Elementor et revenez sur des versions antérieurs de vos pages.

Prévisualiser et publier vos pages Elementor

Vous êtes prêt à publier votre page Elementor ?

Pour prévisualiser la page, cliquez sur l’icône de l’oeil en bas à gauche de l’interface Elementor Prévisualiser.

prévisualiser la page dans Elementor

La page s’ouvre dans un nouvel onglet.

Puis sur Publier si le résultat vous convient.

Revenir au tableau de bord WordPress depuis Elementor

Une fois votre page Elementor enregistrée ou publiée, pour revenir au tableau de bord WordPress il suffit de cliquer sur l’icône Hamburger > Revenir à l’éditeur WordPress.

revenir au tableau de bord wordpress depuis Elementor

ALLER PLUS LOIN 

Les étapes en détail pour revenir au tableau de bord WordPress depuis Elementor.

Ajouter des addons à Elementor pour obtenir de nouveaux Widgets

La force d’Elementor c’est sa puissance, sa simplicité et surtout la richesse de ses Widgets.

Il existe un nombre énorme d’Addons qui vont vous permettre d’obtenir de nouveaux Widgets pour construire vos pages Elementor.

Un Addon Elementor est un plugin compatible avec Elementor qui, une fois installé, va vous offrir de nouveaux Widgets directement disponibles dans l’éditeur d’Elementor.

Les addons Elementor les plus populaires sont :

Essential Add-Ons : un must have qui propose de nombreux widgets

Premium Add-Ons : Qui offre également de nombreux Widgets supplémentaires

Elements Kit : Qui est un des meilleurs addons pour Elementor en proposant entre-autre un menu et beaucoup de Widget normalement réservés à la version Pro d’Elementor.

Pour les installer il suffit de se rendre dans le tableau de bord WordPress > Extensions > Ajouter et de les chercher parmi la bibliothèque de plugin de WordPress.

Les addons vont vous offrir des centaines de Widgets supplémentaires pour construire les pages de votre site avec Elementor.

addons elementor widgets

ALLER PLUS LOIN 

Obtenez la liste des Addons principaux sur Elementor, comment les installer et comment les utiliser.

Designer les pages de son site avec Elementor

En utilisant les templates de page ou les blocs, il est très facile de comprendre comment créer rapidement des pages web.

Elementor permet d’aller très loin en terme de design.

Voyons donc les fonctionnalités avancées du constructeur de page pour mieux designer ses pages web avec Elementor.

Ajouter un effet Parallaxe sur Elementor

L’effet parallaxe est le fait d’avoir une image de fond qui est fixe tandis que l’on descend ou monte sur la page.

Il en résulte un effet de profondeur assez intéressant et simple pour améliorer le design de vos pages.

Voici un exemple d’effet parallaxe :

Il suffit donc d’ajouter une image en fond de section ou de colonne puis dans l’onglet Style > Arrière plan > Position > sélectionner Fixe

ALLER PLUS LOIN 

Plus de détail pour créer un effet parallaxe sur Elementor.

Mettre une vidéo en arrière plan sur Elementor

Mettre une vidéo en fond de section est un excellent moyen de donner de la vie à votre page, de présenter votre service ou votre univers.

Dans #1 an tu souhaiteras avoir commencé aujourd'hui

De plus, en captant l’attention, les vidéos augmentent le temps passé sur vos pages Elementor et donc améliorent votre SEO.

Pour ajouter une vidéo en arrière plan, il suffit de sélectionner une section > arrière plan > vidéo, puis de coller l’url de la vidéo obtenue depuis YouTube ou Viméo.

ALLER PLUS LOIN 

Apprenez à trouver, ajouter et paramétrer des vidéos d’arrière plan sur vos pages Elementor.

Animer un element Elementor au survol de la souris (Hover-Effect)

Le hover effect ou survol permet de modifier le design d’un élément lorsque la souris passe dessus.

Le plus utilisé est pour la couleur du bouton qui change lorsque l’on passe le curseur sur ce dernier.

Elementor nous permet d’ajouter un hover-effect ou effet au survol sur des sections, des colonnes ou des widgets.

Pour cela il suffit de cliquer sur l’élément puis Onglet Style > Arrière-plan > Au survol

On peut ensuite définir la couleur au survol ou la durée de la transition ainsi que des animations prédéfinies.

survol hover effect elementor

ALLER PLUS LOIN 

Explorez les possibilité du hover effect en terme de couleurs et d’animation avec Elementor.

Superposer des éléments Widgets, colonnes et sections sur Elementor : Index-z

En design il est courant maintenant d’avoir des éléments qui se superposent, que ce soit des boutons ou textes, des colonnes ou encore des sections.

Par exemple :

superposition colonne elementor

Pour superposer deux éléments sur Elementor, il faut utiliser les marges négatives et l’index-z.

Lorsque deux éléments sont à côté, il suffit de cliquer sur l’un et dans l’onglet Avancé > Marges, de saisir des marges négatives pour les faire se superposer.

Puis toujours dans l’onglet Avancé en donnant un nombre à l’index-z.

Plus l’index-z a un chiffre grand et plus l’élément apparait en premier plan.

index-z elementor

ALLER PLUS LOIN 

Explorez en détail comment superposer des éléments sur vos pages Elementor

Créer des éléments fixes (sticky éléments) sur vos pages Elementor

Les éléments fixes, ou stick elements, sont des éléments sur vos pages qui sont toujours visibles sur l’écran.

Ils descendent et montent en même temps que vous naviguez sur la page (exemple, la barre de navigation ou icônes de réseaux sociaux).

Elementor permet de rendre fixe n’importe quel widget uniquement

Pour créer un élément fixe ou stick element, il suffit de cliquer sur le widget > onglet Avancé > Positionnement > Position > choisir Fixe.

Ensuite on choisit l’orientation verticale ou horizontale pour venir le placer sur la page.

Exemple ici avec le bouton vert fixe en haut à droite de la page :

sticky element fixe elementor

ALLER PLUS LOIN 

Apprenez comment créer des éléments fixes (sticky elements) sur vos pages Elementor.

Créer des motifs entre les sections avec les séparateurs de sections Elementor

Les séparateurs de sections permettent d’ajouter des motifs entre deux sections.

La fonction d’un séparateur de section est purement esthétique.

Exemple ici d’un séparateur en forme de gouttes :

separateur section gouttes elementor

Pour ajouter un motif entre deux sections, cliquez sur la section inférieure et sous Style > Forme de séparation > Indiquer Haut et choisir la forme de séparation, sa couleur et sa hauteur.

ALLER PLUS LOIN 

Apprenez à ajouter et paramétrer des motifs de séparation entre deux sections Elementor.

Ajouter des animations d’entrée sur vos pages Elementor

Les animations d’entrée permettent de faire apparaitre les éléments de la page lorsque l’utilisateur descend sur la page.

Il s’agit purement d’esthétique et améliorent l’expérience utilisateur lorsqu’ils sont bien utilisés en dynamisant votre contenu.

Pour ajouter une animation à un élément (Section, colonne ou widget), il faut cliquer sur l’élément > Onglet Avancé > effet de mouvement > Animation d’entrée > Et de choisir l’animation d’entrée à appliquer.

animation entree Elementor

ALLER PLUS LOIN 

Plus de détails sur l’ajout d’animations d’entrée à n’importe quel élément de votre page Elementor.

Ajouter des widgets avancés sur Elementor : Menu, Footer, Commentaires, Formulaires, boutons de réseaux sociaux.

Lorsqu’on souhaite utiliser toute la puissance d’Elementor pour créer un site entier et non pas seulement quelques pages web, on va vouloir rapidement trouver une solution pour intégrer dans nos pages des menus, des pieds de pages, des boites de commentaires ou encore des formulaires de contact.

Ces widgets avancés sont pour la plupart réservés à la version Pro d’Elementor.

Bien que la version Pro d’Elementor soit très abordable en terme de prix et débloque un nombre incroyable de widgets et de templates, il existe des moyens avec la version classique de créer ces éléments de menu ou formulaires.

Passons-les en revue :

Elementor Pro permet de créer des menus sur vos pages Elementor.

Pour la version gratuite d’Elementor, installez et activez le plugin WordPress Elements Kit Elementor addons, qui est un addons à Elementor.

Il contient le Widgets Nav Menu, qui permet d’ajouter un menu WordPress n’importe où sur votre page Elementor.

Sélectionnez le menu à ajouter, choisissez le logo mobile et modifier son apparence dans l’onglet Style.

créer un menu elementor Nav Menu

Attention cependant, lorsque vous créez un élément comme le menu leader ou le pied de page, ce n’est pas la meilleure technique.

En effet si vous souhaitez modifier l’apparence de votre menu, vous devrez le faire sur chaque page unes par unes.

Pour vos Menus et Pieds de page, utilisez le plugin Elementor header, footer et blocks template pour créer des modèles qui s’afficheront automatiquement sur toutes vos pages.

menu elementor addon header footer blocks template plugin

Il suffira alors de modifier me modèle pour que votre menu se modifie automatiquement sur toutes vos pages.

ALLER PLUS LOIN 

Apprenez ici à créer des modèles de menus automatiques pour vos pages Elementor.

Comme pour le menu, un footer ou pied de page est une section qui se retrouve sur l’ensemble des pages de votre site.

Le footer, ou pied de page, contient des liens vers les pages importantes de votre site, il peut contenir son propre menu, des icônes de réseaux sociaux ou encore un champ de souscription à la newsletter.

Pour créer un footer, vous pouvez le faire manuellement en ajoutant une section à la fin de votre page Elementor.

Encore une fois la meilleure option est de créer un modèle de Footer que l’on va diffuser automatiquement sur toutes nos pages.

De cette manière lorsque vous modifiez le modèle de footer, l’ensemble des pieds de pages seront mis à jour instantanément sur toutes vos pages Elementor.

Pour cela on utiliser le plugin Elementor header, footer et blocks template qui va permettre de créer des modèles de footer Elementor et de les diffuser automatiquement sur toutes vos pages.

footer pied de page elementor block addon plugin

ALLER PLUS LOIN 

apprenez à créer des modèles de footer Elementor et à les diffuser automatiquement sur vos pages.

Ajouter des boutons de partages de la page sur les réseaux sociaux dans Elementor

Les boutons de partage sur les réseaux sociaux permettent à vos visiteurs de partager automatiquement vos pages en un clic sur leurs réseaux sociaux.

On parle de share button à l’inverse des follow button qui sont simplement un lien vers vos différents réseaux sociaux et qui poussent juste les visiteurs à vous suivre.

Les shares buttons sont donc très puissants pour générer du trafic.

  • Si vous avez la version Pro d’Elementor, le Widget Social Share est disponible et vous permettra d’ajouter des boutons de partage sur vos pages Elementor.

  • Si vous avez la version gratuite d’Elementor, utilisez le Widget Social Share de l’addon Elements kit pour Elementor.
elementor share button reseaux sociaux partage gratuit

ALLER PLUS LOIN 

installez et ajoutez des boutons de partage sur les réseaux sociaux avec la version gratuite d’Elementor.

Ajouter une boite de commentaires à vos articles ou pages Elementor

La boite de commentaires permet à vos visiteurs de vous laisser un commentaire qui s’affichera automatiquement sur votre page Elementor.

Ils sont généralement réservés aux articles.

Aussi si vous rédigez vos articles avec Elementor, utilisez le Widget Commentaires Articles présent par défaut dans Elementor.

widget commentaire elementor wordpress

Par défaut les commentaires prennent l’apparence de votre thème.

ALLER PLUS LOIN 

voici comment ajouter et modifier l’apparence de votre boite de commentaire sur Elementor.

Créer des formulaires sur vos pages Elementor : Contact, souscription, abonnement ou réservation.

Mettre en place des formulaires sur vos pages va permettre à vos visiteurs d’interagir directement avec vous.

On retrouver principalement :

  • Les formulaires de souscriptions ou d’abonnement à la newsletter
  • les formulaires de contact 
  • Les formulaires de réservation


Les formulaires sont réservés à la version Pro d’Elementor.

Donc utilisez les widgets de formulaires des deux addons Elements Kit et Essential Addons pour Elementor pour avoir des Widgets de formulaires.

addons formulaires elementor

our créer vos formulaires, vous devez passer par un plugin WordPress de formulaire, par exemple Contact Form 7 ou Ninja Form, etc.

Vous pourrez ensuite utiliser le bon widget associé pour diffuser votre formulaire sur vos pages Elementor, que ce soit avec les addons Elements Kit ou Essential Addons d’Elementor.

Par exemple ce formulaire d’inscription à la Newsletter est réalisé avec Contact Form 7 et Elements Kit :

ALLER PLUS LOIN 

Apprenez à créer et diffuser des formulaires avec Contact Form 7, sur vos pages Elementor.

Techniques et fonctionnalités avancées d'Elementor : Responsive, SEO, etc.

En tant qu’éditeur de page très complet, Elementor permet de gérer pratiquement tous les aspects de la création de vos pages web.

Il va vous permettre de gérer totalement le comportement responsive design de votre site et également de mettre en place le SEO de votre site pour améliorer son référencement.

Enfin il cache de nombreux modes de maintenance, de sauvegarde et d’importation de vos pages et blocs ou encore un mode sans echec et même une customisation de son thème natif.

Bref, si vous utilisez sérieusement Elementor pour construire vos pages, vous devez absolument connaitre ces fonctionnalités.

Créer des pages Elementor responsive mobile

Le responsive mobile permet aux pages Elementor de s’adapter automatiquement quelle que soit l’appareil utilisé par vos visiteurs : ordinateur, tablette ou mobile.

Les pages Elementor sont conçues pour être responsive mobile.

Vous allez pourvoir gérer entièrement le rendu de vos pages sur Ordinateur mais également sur tablette et mobile.

Pour accéder au mode responsive mobile d’Elementor, cliquez sur l’icône Mode responsive en bas à gauche de l’éditeur Elementor.

Et choisissez entre Mobile, Tablette ou Ordinateur.

responsive mobile elementor

Ensuite effectuez les modifications de vos éléments comme sur la version ordinateur.

C’est à dire réglez la taille des typographies, la taille des marges ou encore des espacements.

Attention ne touchez qu’aux éléments qui contiennent une icône mobile :

responsive mobile elementor

Avec cette icône vous savez que vous êtes bien en train de modifier uniquement la version mobile de votre page.

Enfin vous voudrez masquer certains éléments sur mobile par exemple ou à l’inverse afficher des éléments uniquement sur la version mobile et pas sur les autres versions de la page.

Pour afficher ou masquer un élément en fonction de l’appareil utilisé, rendez-vous dans l’onglet Avancé > Responsive > Masquer l’élément sur Tablette ou Mobile ou Ordinateur.

ALLER PLUS LOIN 

voici un guide ultra complet pour rendre vos pages Elementor totalement responsive mobile.

On-Page SEO avec Elementor : référencer vos pages Elementor

Le On-page SEO est le fait d’intégrer des éléments SEO directement sur la page dans le but d’améliorer le référencement de cette page sur les moteurs de recherche comme Google.

Il est possible de gérer le SEO sur les pages Elementor.

La première chose est de définir les niveaux de titres : H1, H2, H3, etc.

Pour cela cliquez sur votre titre principal et dans l’onglet Contenu sous Balise HTML choisissez H1

Faites la même chose avec vos titres secondaires : H2, puis vos titres de niveau trois avec H3, etc.

seo elementor balise html titres

Vous pouvez également définir la balise html des sections en cliquant dessus et toujours dans l’onglet Contenu, choisir Header, Footer, Nav, etc.

Une fois les balises HTML correctement renseignées, installez le plugin SEO Rank Math.

rank math seo wordpress plugin elementor

Attention toujours un seul plugin SEO à la fois sur un site internet.

Donc si vous utilisez Yoast, pas de soucis, Rank Math va récupérer l’ensemble des paramètres de Yoast (réglages, metas, etc.). donc vous ne perdrez pas votre travail.

Rank Math a l’énorme avantage de s’intégrer parfaitement avec Elementor.

Une fois installé vous aurez un nouvel onglet SEO qui s’affiche dans l’éditeur Elementor.

rank math onglet seo elementor

Vous aurez via cet onglet SEO, un accès complet à :

  • La gestion des meta Titre et meta Description
  • La définition du mot clé visé
  • Au suivi de l’optimisation sur la page autour de ce mots clés
  • À l’indexation 
  • Au rendu lors du partage sur les réseaux sociaux de la page

ALLER PLUS LOIN 

Installez et utilisez Rank Math sur Elementor pour mettre en place le SEO de vos pages.

Créer un lien ancre, hypertexte dans une page Elementor

Un lien ancre vous permet de faire un lien d’un endroit de la page vers un autre endroit de la même page.

Par exemple le sommaire a gauche qui vous amène, au clic, directement au bon endroit de la page, est un lien ancre.

Pour créer des liens ancre hypertexte dans une page Elementor il suffit de suivre deux étapes simples.


Etape 01 :

Cliquez sur l’élément de destination, celui sur lequel vous voulez arriver, dans l’onglet Avancé > Sous ID CSS, définissez un ID.


Etape 02 :

Cliquez sur l’élément depuis lequel vous souhaitez faire un lien.

Dans l’onglet Contenu sous liens, écrivez simplement un # suivi de l’ID CSS de l’élément vers lequel vous souhaitez faire le lien.

lien ancre elementor id css

ALLER PLUS LOIN 

Voici une explication détaillée pour créer des ancres dans vos pages Elementor.

Créer et sauvegarder ses propres modèles de blocs et pages Elementor dans la bibliothèque

Vous l’aurez compris, utiliser des blocs et des templates de pages Elementor pour construire les différentes pages de son site est un gain de temps phénoménal.

Elementor vous permet de sauvegarder n’importe quelle section ou page que vous avez créé dans votre bibliothèque de modèle pour les importer sur n’importe quelle page Elementor.

Pour sauvegarder une section dans votre bibliothèque, faites clic droit > Enregistrer comme modèle > Donnez lui un nom > Enregistrer.

enregistrer une section elementor comme modele

Pour sauvegarder une page entière comme modèle, cliquez sur la flèche à coté du bouton Enregistrer > Enregistrer comme modèle.

enregistrer une page comme modele elementor

Si vous voulez importer votre section, cliquez sur l’icône du dossier sur votre page Elementor pour accéder à la bibliothèque et sous l’Onglet mes modèles, vous retrouverez tous vos enregistrements, blocs et pages Elementor.

insérer un modele enregistre elementor

ALLER PLUS LOIN 

Créez, enregistrez et importez des blocs modèles sur n’importe quelle page Elementor.

Exporter et importer vos pages Elementor d'un autre site

Lorsque vous possédez plusieurs site internet ou que vous souhaitez partager votre bibliothèque de bloc et de page Elementor, vous pouvez les télécharger depuis l’éditeur Elementor puis les importer sur n’importe quel site.

Pour télécharger un modèle depuis votre bibliothèque Elementor, cliquez sur les trois petits points puis Export :

exporter modele elementor

Ensuite pour importer un modèle depuis votre ordinateur vers Elementor, allez dans votre bibliothèque puis bouton importer > Sélectionnez le fichier Json de votre modèle.

importer fichier json elementor bibliotheque

Attention les images doivent être chargées indépendamment dans votre bibliothèque Media de WordPress.

Veillez également bien à avoir les mêmes addons Elementor pour avoir les mêmes Widgets.

ALLER PLUS LOIN 

ici un tuto plus détaillé pour télécharger et importer des blocs et des pages Elementor.

Utiliser Hello Theme, le thème officiel d’Elementor

Elementor utilise les paramètres par défaut de votre thème.

Le gros avantages c’est que vos pages Elementor ont par défaut le même design que les pages de votre thème WordPress.

Cependant si vous souhaitez développer entièrement un site sur Elementor, il vaut alors mieux utiliser le thème natif d’Elementor : Hello Theme.

Hello Theme, étant le thème officiel d’Elementor, va vous permettre de paramétrer votre thème entièrement vous-même.

Pour ça, installez et activez Hello Thème :

Hello theme elementor

Puis dans l’éditeur Elementor vous allez pouvoir définir les polices, les couleurs les tailles des titres, les fonds de section, etc. Et ainsi paramétrer le thème.

Pour paramétrer Hello thème allez dans l’icône hamburger > Style du thème.

style du theme elementor

Puis définissez le style par défaut de vos widgets Elementor.

Ainsi lorsque vous glisserez un widget sur votre page Elementor, il prendra par défaut l’apparence que vous avez défini dans votre thème.

parametrer theme elementor hello

ALLER PLUS LOIN 

Paramétrez votre propre thème Elementor.

Activer le mode maintenance du site avec Elementor

Lorsque vous travaillez sur une grosse mise à jour de votre site et que vous ne souhaitez pas que vos visiteurs accèdent à vos pages et tombent sur des bugs, activez le mode maintenance du site.

Il va indiquer à tous les visiteurs que votre site est en maintenance en les redirigeant automatiquement vers la page de maintenance.

Donc première chose, créer un modèle de page maintenance.

Pour cela on va dans Tableau de bord WordPress > sous Elementor on clique sur Modèle > Ajouter

On édite le modèle dans Elementor, il s’agit de la page que verront les visiteurs puis on enregistre.

page de maintenance elementor

Pour activer le mode maintenance et rediriger automatiquement les visiteurs vers cette page maintenance il faut se rendre dans Tableau de bord WordPress > Elementor > Outils > Onglet mode maintenance et on choisit le modèle que l’on vient de créer.

page de maintenance elementor

ALLER PLUS LOIN 

voici plus en détail comment créer une page maintenance et activer le mode maintenance d’Elementor.

Activer le mode sans-échec d’Elementor et résoudre les bugs.

Il est possible de rencontrer plusieurs bugs sur nos pages Elementor.

La plupart du temps ils sont liés à un conflit entre Elementor et un autre plugin.

Pour régler les bugs rencontrés sur Elementor, activer le mode sans échec vous permet d’ouvrir vos pages Elementor sans utilisez les autres plugins et ainsi valider s’il s’agit bien d’une erreur liée à un conflit entre Elementor et un plugin WordPress ou réellement un bug d’Elementor.

En cas de problème donc, rendez-vous dans le tableau de bord WordPress > Elementor > Outils > Mode sans échec > Activer > Enregistrer les modifications.

Au chargement d’une page Elementor, vous aurez le pop-up Mode sans échec pour vous confirmer qu’il est bien actif.

mode sans echec elementor

ALLER PLUS LOIN 

Régler les bugs Elementor avec le mode sans échec.

Prêt à commencer à créer vos pages avec Elementor ?

Elementor est un outil surpuissant pour créer les pages de son site internet.

Il s’intègre parfaitement à WordPress et en fait, de très loin, le meilleur constructeur de page pour WordPress.

Vous voulez aller plus loin avec Elementor ?

Voici plusieurs ressources totalement essentielles pour vous :

  • Ressource 1 : Le Hub Elementor pour retrouver toutes les ressources pour créer vos pages avec Elementor.

     

  • Ressource 2 : Un chapitre du cours sous forme de travaux pratiques ou l’on va voir comment copier exactement le design de n’importe quelle page web avec Elementor.

     

  • Ressource 3 : Un guide complet pour designer ses pages Elementor en responsive mobile pour un affichage parfait sur ordinateurs, tablettes et mobiles.

 

Si vous aimez ce que vous lisez, partagez le hub sur les réseaux sociaux !

Des guides sur le webmarketing sortent régulièrement. Laissez moi votre adresse et je vous les enverrai dès leur sortie.

Tom

Partagez le hub Elementor :

Guides à venir...

Hey, je suis Tom, j’écris pour avalanchemate.

Vous aimez ce que vous lisez ? Ces guides sont fait avec amour mais surtout pour être ultra appliqués et ultra utiles.

Envie de recevoir les prochains ? Il suffit juste de s’inscrire ici :