Bannière article Elementor, le meilleur page builder Wordpress - Monsieur Site Web

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 !

C'est quoi ? - Monsieur Site Web

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 Elementor 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, je vous conseille 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, je vous conseille 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ôle

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, je ne détaillerai 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 :

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.

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é, je reviendrai 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, je vais 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, je vous recommande 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 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 je sélectionne l’aperçu sur mobile, ma page se transforme en smartphone et je peux prévisualiser en direct le résultat de ma page sur un mobile. Quelle efficacité !

Aperçu de la page sur mobile Elementor WordPress - Monsieur Site Web

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 je veux agrandir la taille de mon titre uniquement sur mobile, je sélectionne mobile et j’inscris par exemple 34 pixels.
Mon 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 !

Conclusion

Elementor WordPress est THE page builder.
Je n’en ai pas utilisé énormément personnellement, puisque j’étais plutôt du genre à écrire mes pages avec Notepad++ avant de passer à WordPress.
Mais il faut reconnaître sa simplicité d’utilisation et sa puissance.
Elementor vous simplifie la vie et vous rend beaucoup plus productif.

A bientôt pour de nouvelles astuces sur l’environnement WordPress ! 🙂

Vous avez aimé cet article ? N'hésitez pas à le partager avec vos contacts 😉

Pour être notifié de l'ajout d'un nouvel article sur ce blog, une seule solution :

Commentaires

5
5,0 rating
Moyenne de 5 sur 5 (2 avis)
Excellent100%
Très bien0%
Bien0%
Mauvais0%
Très mauvais   0%

Merci!!

5,0 rating
2 septembre 2020

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!

Adeline

Réponse d'Anthony - Monsieur Site Web

Bonjour,
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 !

5,0 rating
12 juillet 2019

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 ?

Baptiste

Réponse d'Anthony - 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 :
https://elementor.com/pro/
Bonne journée.
Anthony

Laisser un commentaire

Vous avez un projet ?

Je suis disponible à tout moment pour l’étudier et le réaliser. N’hésitez pas à me contacter.

Image de demande de devis - Monsieur Site Web