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 guide Elementor 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.
Que va-t’on trouver dans ce guide Elementor ?
Ce guide Elementor va couvrir l’ensemble des choses qu’il y a à savoir pour utiliser le constructeur de page Elementor et créer votre site internet WordPress.
Vous allez voir comment installer Elementor.
Puis comment le paramétrer et créer l’ensemble de vos pages et de votre contenu au pixel près.
Ce guide Elementor couvre également les solutions gratuites pour vous permettre de créer un menu ou un footer, et d’autres fonctionnalités réservées à Elementor Pro.
Vous êtes prêt ?
Alors allons-y.
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 :
Besoin d’aide ?
Cliquez ici pour accéder au détail de ce guide Elementor sur : 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 Tableau de bord > 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.
Aller plus loin
Allez voir en détail la partie de ce guide Elementor sur 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 (ici pour en apprendre plus sur 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.
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.
Aller plus loin
Cliquez ici pour accéder au détail de ce guide Elementor sur : 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 :
- Elementor Caneva
- Pleine largeur
- 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.
Aller plus loin
Cliquez ici pour accéder au détail de ce guide Elementor sur 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.
1. 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.
2. 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.
3. À 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.
Aller plus loin
Découvrez en détail l’interface d’Elementor pour comprendre ou se trouve chaque éléments pour construire les pages de votre site.
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.
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 :
Ensuite on paramètre la grille (couleur, marges), on y ajoute des Widgets puis on empile les sections (en violet sur le screenshot) pour construire sa page.
Aller plus loin
Explorez plus en détail la partie de ce guide Elementor sur 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 :
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
Voici le détail de ce guide Elementor pour 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.
Aller plus loin
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 :
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.
Aller plus loin
Explorez cette partie du guide Elementor 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).
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 :
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é
Aller plus loin
Utilisez la grille Elementor pour construire vos pages à l’aide des Sections, colonnes et Widgets Elementor dans cette partie détaillée du guide Elementor.
Utilisez le navigateur Elementor pour construire vos pages rapidement
Déjà évoqué plus haut, le navigateur Elementor est votre meilleur ami 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.
Vous pourrez alors accéder à l’ensemble des éléments présents sur votre page Elementor et interagir facilement avec.
Aller plus loin
Lisez cette partie du guide Elementor pour apprendre à 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.
Il est également possible de ne copier que le style (les paramètres) d’un élément pour le reporter sur un autre.
Le copier-coller est donc extrêmement utile pour construire rapidement une page avec Elementor.
Un exemple ?
Lisez cette section du guide Elementor 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 :
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.
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.
La page s’ouvre dans un nouvel onglet.
Puis sur Publier si le résultat vous convient.
Aller plus loin
Plus de détails sur les options de prévisualisation et de publication avec Elementor dans cette partie du guide Elementor.
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.
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.
Aller plus loin
Consultez cette page du guide Elementor pour Obtenir 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.
Dans cette partie du guide Elementor nous allons explorer en détail 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 sur Elementor :
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
Lisez cette partie du guide Elementor pour plus de détail sur comment 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
Référez vous à cette section du guide Elementor pour apprendre à 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 animation au 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.
Aller plus loin
Explorez les possibilité du hover effect en terme de couleurs et d’animation dans cette partie du guide 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 :
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.
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 sticky 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, dans sa version gratuite, ne permet de rendre fixe que les widgets.
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 :
Aller plus loin
Plus de détails sur cette partie du guide Elementor pour 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 :
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
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.
Aller plus loin
Plus de détails dans cette partie du guide Elementor 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.
En utilisant les Addons à Elementor qui remplacent les widgets réservés à la version Pro d’Elementor.
Dans cette partie du guide Elementor, nous allons les passer en revue :
Créer un menu avec Elementor version gratuite
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.
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.
Il suffira alors de modifier me modèle pour que votre menu se modifie automatiquement sur toutes vos pages.
Aller plus loin
Voici le détail du guide Elementor pour apprendre à créer des modèles de menus automatiques pour vos pages Elementor.
Créer un footer ou pied de page sur 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.
Aller plus loin
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.
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.
Par défaut les commentaires prennent l’apparence de votre thème.
Aller plus loin
Voici le détail du guide Elementor pour 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.
Pour 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.
Aller plus loin
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.
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 :
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 Elementor 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.
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 qui s’intègre directement dans l’éditeur 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.
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
Voici le guide Elementor détaillé pour Installer et utiliser 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.
Aller plus loin
Voici le détail de ce guide Elementor 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.
Pour sauvegarder une page entière comme modèle, cliquez sur la flèche à coté du bouton Enregistrer > Enregistrer comme modèle.
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.
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 :
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.
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 guide Elementor plus détaillé pour télécharger et importer des blocs et des pages Elementor.
Paramétrer le thème avec Elementor et 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 :
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.
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.
Aller plus loin
Voici le guide Elementore pour paramétrer 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.
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.
Aller plus loin
voici la section détaillée de ce guide Elementor pour 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.
Aller plus loin
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.
Ajouter des boutons de partages de la page sur les réseaux sociaux dans Elementor