Elementor, le meilleur page builder WordPress !
Milieu d’année 2016 est arrivé un nouveau page builder, un certain Elementor WordPress.
Et quel succès ! Plus de 2 millions d’installations actives depuis sa lancée et un parfait 5 étoiles au classement.
Petit tour d’horizon de cette extension qui va vous simplifier la vie !
Le sommaire
- Mais un Page Builder, c’est quoi ?
- Comment installer et configurer le Page Builder Elementor pour WordPress ?
- Importer un modèle Elementor pour construire sa page
- Construire soi-même sa page avec Elementor WordPress
- Elementor pour WordPress et le Responsive Design
- Enregistrer ses modèles de page avec Elementor
- Conclusion
Mais un Page Builder, c'est quoi ?
Un page builder est un outil qui va aider un développeur à construire une page Web en direct, en ne mettant pas ou peu les mains dans le code.
Comment installer et configurer le Page Builder Elementor pour WordPress ?
Comme pour chaque extension, direction le back-office WordPress et l’onglet Extensions, Ajouter.
Ensuite tapez Elementor dans la barre de recherche, Elementor Page Builder est le premier résultat.
Enfin, on installe et on active, et c’est parti !
Les réglages
Elementor WordPress est très bien paramétré par défaut, il n’y a rien à toucher ou presque :
Vous pouvez choisir d’activer Elementor pour les Articles de blog et/ou pour les Pages.
Avant tout, nous vous conseillons de cocher la case “désactiver les couleurs par défaut”. Ainsi, les couleurs de votre thème seront choisies plutôt que les couleurs par défaut d’Elementor, notamment pour les titres et les paragraphes.
D’autre part, nous vous conseillons également de “désactiver les polices par défaut”, pour les mêmes raisons.
Désormais, c’est votre thème qui dicte les règles en matière de style !
Du côté des réglages de style, il n’y a rien à toucher. Les réglages par défaut sont très bien.
Cela dit, cette section peut être utile pour les points de rupture tablette et mobile.
Par exemple, si vous souhaitez passer à l’affichage pour tablette et pour mobile à partir d’une résolution précise, vous pouvez configurer au pixel près à partir de quelle résolution changer de type d’affichage.
Gestionnaire de rôles
Une fonctionnalité peu utile si vous êtes seul à développer votre site.
Cela dit, sachez qu’Elementor WordPress peut être interdit à certains types de membres si vous êtes plusieurs à travailler sur le back-office.
Enfin, les autres onglets de réglages sont facultatifs et non primordiaux pour l’utilisation d’Elementor, nous ne détaillerons pas le reste du menu du back-office.
Importer un modèle Elementor pour construire sa page
Çà y est, Elementor WordPress est installé et configuré, il est grand temps de commencer à construire une page pour voir un peu ce qu’il a dans le ventre !
Avant tout, j’ai créé une page spécialement pour ce tutoriel appelée “Testons ensemble Elementor” (petit rappel pour la création de page dans le back-office : onglet Pages, Ajouter).
Ensuite, une fois sur la page, un gros bouton bleu apparaît : “Modifier avec Elementor”. Allez on clique !
On se retrouve alors directement sur la page, c’est le principe d’un page builder, tout en visuel. 
Le principe est assez simple :
Sur la gauche (1), vous retrouvez l’ensemble des widgets que vous pouvez ajouter à votre page.
D’autre part, sur la droite (2), vous retrouvez votre page, avec la possibilité d’ajouter des widget dans la zone en pointillé (3) pour construire petit à petit votre page.
Mais nous allons voir dans un premier temps comment importer un modèle de page conçu par l’équipe Elementor WordPress.
Il faut pour cela cliquer sur la petite icône grise avec un dossier (4).
Après cela fenêtre pop-up s’ouvre avec 3 onglets :
Les blocs
Vous pouvez importer sur votre page un modèle de bloc.
Cela permet d’ajouter une section à votre site, c’est-à-dire une partie de la page.
Les pages
Vous pouvez importer sur votre page un modèle entier de page.
Si vous êtes en manque d’inspiration lors de la création de votre site, il est très intéressant d’importer quelques modèles pour trouver des idées et voir comment est paramétré Elementor.
Mes modèles
Cet onglet permet d’importer un modèle de page que vous avez vous-même enregistré, nous reviendrons sur les modèles enregistrés un peu plus bas.
En survolant les blocs et les pages disponibles, Elementor vous indique que vous pouvez insérer le bloc (en vert), ou alors il vous indique que vous devez passer à la version pro car ce bloc ou cette page n’est pas disponible en version gratuite.
Par contre, si vous achetez une licence Elementor WordPress, vous aurez bien entendu accès à l’ensemble des contenus.
Allons dans les pages et cliquons sur la deuxième page disponible, “Homepage – Restaurant – page”.
En second lieu, un aperçu de la page s’affiche, et il ne reste plus qu’à cliquer sur “insérer” en haut à droite pour que le modèle de cette page se retrouve directement sur votre site web.
Pour conclure, le style de la page est importé, les couleurs et les polices sont intégrées. De même, les images sont ajoutées à la bibliothèque de médias.
Et en 2 clics.
C’est pas magique tout ça ?!
Et sur le même principe que les thèmes WordPress, si une partie de la page ne vous plaît pas, libre à vous de modifier le widget en question comme bon vous semble.
N’oubliez pas de cliquer sur "Mettre à jour" en bas à gauche pour sauvegarder les modifications effectuées sur votre page.
Construire soi-même sa page avec Elementor WordPress
Dans la majeure partie des cas, vous ne voudrez pas insérer un modèle de page pré-conçu, vous voudrez réaliser votre page, à votre image. Une page sur mesure pour votre site.
Regardons ensemble toutes les possibilités d’Elementor pour construire soi même une page.
Avant tout, on efface le travail précédent et on recommence !
Ajouter des widgets
Le principe est assez simple : Avec Elementor WordPress, on crée des sections, dans lesquelles on insère des colonnes, et dans ces colonnes on ajoute des widgets. Détaillons un petit peu ce principe :
D’abord, pour ajouter une nouvelle section, il suffit de cliquer sur l’icône rose “+”.
Ensuite, Elementor vous proposera alors plusieurs structures pour votre section.
Une colonne, deux colonnes, 6 colonnes, à vous de choisir !
Commençons par ajouter une structure à une colonne pour ajouter un titre et un paragraphe, la base d’une page Web.
Et pour cela, rien de plus simple, il suffit d’aller chercher le widget titre (1), et de le glisser / déposer dans la section (2) fraîchement créée.
Revenons dans le panneau de widgets en cliquant sur le bouton (3), et faisons la même chose avec le widget éditeur de texte qui permet d’insérer un paragraphe. Un glisser / déposer plus tard, et nous avons notre premier paragraphe présent sous le titre.
On est jamais à l’abri d’un plantage de l’ordinateur, du navigateur ou d’Elementor. Pensez à régulièrement cliquer sur "mettre à jour" votre page pour enregistrer vos modifications.
Conseil : N'hésitez pas à regarder comment sont structurés les modèles de page Elementor. Chaque section aborde un thème, un sujet, et lorsqu’on change de thème ou de sujet, on change de section.
Conseil 2 : Lorsque vous avez terminé une section, si vous souhaitez en créer une nouvelle assez similaire, vous pouvez copier/coller un élément ! Pour cela, cliquez droit sur une structure, copier. Puis cliquez droit sur le rectangle pointillé pour ajouter une nouvelle section, coller 🙂
Et pour terminer cette section, nous allons ajouter une petite image sous le paragraphe, ce qui permet d’avoir un titre, un paragraphe et une image pour la suite de ce tutoriel !
Réglages des widgets
C’est bien d’ajouter des widgets, mais après il faut savoir les paramétrer à sa guise pour rendre son site unique.
Lorsque vous cliquez sur une section, une colonne ou un widget ajouté à votre page, le panneau d’édition en rapport avec votre clic s’ouvre.
Cliquons sur le widget titre pour découvrir les réglages que l’on peut effectuer.
Le panneau d’édition est composé de 3 onglets : Contenu, Style et Avancé.
L'onglet contenu
Cet onglet vous permet de saisir le texte du titre, d’y ajouter un lien, de choisir la taille du titre et l’alignement.
Vous pouvez également affecter une balise HTML à votre titre, sachant que la page à déjà un titre H1 qui n’est pas défini par Elementor , ici il est logique que l’on attribue au titre une balise H2.
Selon la même logique, si cette section contenait un sous-titre, on lui affecterait la balise H3, etc.
L'onglet style
Cet onglet va vous permettre de modifier graphiquement votre Widget. Couleur du texte, Typographie, Ombre du texte, Mode de fusion, tout est paramétrable.
La typographie vous permettra notamment de choisir la police, la taille du titre, le niveau de gras. Vous pourrez également transformer le titre en majuscules ou minuscules, le mettre en italique, le souligner, le surligner.
Bref, vous pouvez tout faire !
L'onglet avancé
Cet onglet va vous permettre de régler plusieurs choses :
- Avancé / Les marges : vous voulez que votre titre soit plus haut, plus bas, à droite ou à gauche ? Vous pouvez paramétrer les marges et/ou les marges internes !
- Index-Z : Dans le cas ou deux éléments sont positionnés au même endroit sur la page, l’index-Z le plus élevé des deux sera affiché par-dessus l’autre.
- Id et classes CSS : Permet d’affecter des ID et classes au widget, à la colonne ou à la section. Utile pour des règles CSS, mais aussi très utile dans le cas des liens internes pour créer des ancres.
- Les effets de mouvements : Donnez vie à votre site avec quelques animations. Mais attention, un peu d’animation, c’est sympa ! Trop d’animations, c’est le bazar !
- Arrière plan : Ajouter une couleur ou une image d’arrière plan à vos éléments.
- Bordures : Ajoutez des bordures à un élément, sélectionnez un type de bordure, une couleur, choisissez le rayon de vos bordures et ajoutez même des ombres.
Le positionnement, une fonctionnalité intéressante
- Positionnement : Vous pourrez définir la largeur que vous souhaitez attribuer à un élément. Par défaut, un élément prendra toute la largeur de page, mais vous pouvez la rétrécir comme bon vous semble. Choisissez également d’attribuer un positionnement absolu ou fixe à vos éléments. Pour en savoir plus sur le positionnement, nous vous recommandons cette documentation.
- Responsive : Une fonctionnalité très utile qui vous permet de masquer un élément uniquement sur un type de périphérique (ordinateur, tablette et/ou mobile).
- CSS personnalisé : Uniquement disponible dans la version pro, cette option permet d’ajouter des règles CSS à un élément. Mais cela n’est pas forcément utile, si vous avez lu mon article concernant la création d’un thème enfant, vous pourrez ajouter vos règles CSS dans votre fichier « style.css« .
Maintenant que nous avons survolé la plupart des fonctionnalités d’Elementor, il ne vous reste plus qu’à pratiquer en ajoutant les différents widgets disponibles, pour voir le résultat directement sur votre page web.
Et une fois vos modifications bien avancées, vous pouvez prévisualiser vos résultats en cliquant sur le bouton en forme d’œil juste à gauche du bouton « mettre à jour ».
Elementor pour WordPress et le responsive design
Une des grandes forces d’Elementor est la gestion du responsive design en mode page builder, ce qui signifie que l’on peut voir en direct le résultat de ses créations sur ordinateur, tablette et mobile.
Aperçu sur tablette et mobile
Pour cela, il suffit de cliquer sur la petite icône responsive de la barre des tâches, et de choisir un aperçu sur ordinateur (qui est le choix par défaut), sur tablette ou sur mobile.
Si vous sélectionnez l’aperçu sur mobile, la page se transforme en smartphone et vous pouvez prévisualiser en direct le résultat de votre page sur un mobile. Quelle efficacité !
Réglages pour tablette et mobile
Et pour couronner le tout, on peut régler via Elementor des paramètres spécifiques pour ordinateur, tablette ou mobile !
Lorsqu’un réglage peut être modifié de manière responsive, 3 petites icônes apparaissent à côté du réglage : ordinateur, tablette et mobile.
Pour affecter une valeur spécifique à un type de périphérique, il suffit de cliquer sur l’icône correspondante et d’affecter la valeur désirée.
Par exemple, si vous voulez agrandir la taille de votre titre uniquement sur mobile, vous sélectionnez mobile et vous saisissez par exemple 34 pixels.
Votre titre aura cette taille uniquement sur les mobiles !
Enregistrer ses modèles de page avec Elementor
Imaginons que vous ayez créé une structure de page magnifique, et que vous souhaitez la conserver pour pouvoir la dupliquer sur une autre page.
Elementor vous permet de faire tout cela, il vous suffit de cliquer sur la petite flèche à droite du bouton « mettre à jour » (1), et de cliquer sur « enregistrer comme modèle » (2).
Donnez un nom à votre modèle de page et cliquez sur enregistrer.
Votre page se retrouve désormais enregistrée dans la bibliothèque de modèles, et vous pourrez la ré-insérer un peu partout comme bon vous semble.
Et pour aller encore plus loin, si vous avez besoin de récupérer un modèle de page pour un autre site web, Elementor vous permet en cliquant sur l’icône … (1) d’exporter votre modèle (2) pour l’insérer ensuite sur n’importe quel autre site Web.
Après avoir exporté votre modèle, vous pouvez l’importer sur un autre site équipé de l’extension Elementor en cliquant sur l’icône flèche (3) et en allant sélectionner le fichier du modèle en question.
Rapide. Efficace. Merci Elementor !
La conclusion !
Elementor WordPress est THE page builder.
Chez Monsieur Site Web, nous n’en avons pas utilisé énormément, mais il faut reconnaître sa simplicité d’utilisation et sa puissance.
Elementor vous simplifie la vie et vous rend beaucoup plus productif.
Pour acquérir Elementor version Pro, ca se passe par ici :
Les tags
A bientôt pour de nouvelles astuces ! 🙂
Vous avez aimé cet article ? Vous pouvez
Le partager avec votre communauté
Articles similaires
Personnaliser le formulaire de validation de commande Woocommerce
Le tunnel de vente d’un site E-commerce est extrêmement important pour que les ventes se convertissent.
Une page de validation de commande trop succincte, peu réfléchie, ou au contraire une page surchargée aura un impact négatif sur vos ventes.
Découvrons ensemble comment personnaliser la page de checkout pour offrir une expérience utilisateur optimale à vos clients.
Ajouter les prix de revient des produits Woocommerce, calculer les marges nettes sans plugin
Woocommerce est l’extension de référence pour créer une boutique E-commerce sur un site WordPress. Cependant, Woocommerce ne permet pas tout. Par défaut, il n’est pas prévu de pouvoir saisir les prix d’achat (ou prix de revient ) des produits pour connaître les marges nettes réalisées.
Découvrons ensemble comment ajouter cette fonctionnalité à Woocommerce.
Pourquoi nous avons créé notre plugin Monsieur Site Web
WordPress est magique, certes !
Mais pour réaliser un site internet professionnel, WordPress à quelques inconvénients et certaines fonctionnalités nécessaires doivent être ajoutées sur chaque site internet.
C’est pourquoi chez Monsieur Site Web, nous avons créé notre propre plugin qui nous permet d’effectuer des actions de manière automatique sur votre futur site.
Découvrons en détails le fonctionnement de notre plugin.
Les commentaires
Merci
merci pour tous vos efforts que vous avez mis dans cet article. Informations très intéressantes.
Merci!!
Bonjour Anthony!
Merci pour le tuto!
J’ai un gros soucis avec une mise en page importée depuis ELEMENTOR PRO
J’ai voulu insérer dans une page une mise en page toute faite depuis “PAGES” dans ELEMENTOR PRO, mais celle-ci se retrouve dans tout mon site! Toute l’architecture a changé! Ceci dit, la mise en page originale y est toujours ( elle se retrouve à la suite de cette nouvelle mise en forme)mais lorsque je clique sur éditer avec Elementor, impossible de supprimer cette mise en page!
Comment revenir en arrière?
Merci de votre aide!
Réponse de Monsieur Site Web
Bonjour Adeline,
Merci pour votre retour. Au vue du problème décrit, vous avez surement du importer un template depuis un modèle Elementor, et concernant les conditions d’affichage de ce modèle, vous avez du sélectionner tout le site.
Lorsqu’on importe un modèle, il faut restreindre les conditions d’affichage de ce dernier.
Pour revenir en arrière, il vous suffit de supprimer ce modèle créé et votre site reviendra à son état d’origine.
Bon courage 🙂
Merci !
Merci pour cet article, ca me donne envie d’essayer cette extension sur mon site.
Mais est ce qu’on peut faire un site sans la version pro ou elle devient rapidement nécessaire ?
Réponse de Monsieur Site Web
Bonjour Baptiste, tout d’abord merci pour votre commentaire.
Vous pouvez parfaitement utiliser Elementor sans la version pro pour la majeure partie de vos besoins.
Elementor pro devient nécessaire dans certaines situations, notamment lorsqu’on est sur une boutique E-commerce puisqu’Elementor Pro est compatible WooCommerce.
Voici un lien qui vous aidera surement, il liste les caractéristiques supplémentaires d’Elementor Pro :
Bonne journée.
Anthony
