Elementor est l’une des extensions les plus puissantes de WordPress.Une fois installée sur votre WordPress, elle vous permettra de personnaliser de A à Z le design de votre site. Grâce à cette extension, il est tout à fait possible de créer un site sur-mesure sans même savoir coder.Dans cette partie on va voir ensemble les bases d’Elementor pour que vous compreniez dans les grandes lignes comment elle fonctionne. On verra ensuite dans un second temps comment l’utiliser pour que vous puissiez commencer à personnaliser votre site.

Installer l’extension Elementor

Pour installer Elementor, vous devez d’abord vous rendre dans le menu Extensions de votre tableau de bord et cliquer sur le sous-onglet Ajouter.Il vous suffira ensuite de rechercher «Elementor» dans la barre de recherche et d’installer puis activer l’extension.

En plus de cette extension, je vous conseille d’en installer une autre qui s’appelle Starter Templates – Elementor, WordPress & Beaver Builder.Cette extension vous donnera accès à beaucoup de modèles qui vous feront gagner du temps dans la création de votre site web.

Pour comprendre les fondamentaux d’Elementor, on va partir d’une page vierge sur laquelle vous pourrez expérimenter les différentes fonctionnalités d’Elementor.Pour commencer, rendez-vous dans le menu Pages et cliquez sur le sous-onglet Ajouter. Nommez votre page comme vous le voulez («Elementor» ou «Test», peu importe) et cliquez ensuite sur le bouton Modifier avec Elementor présent tout en haut.

Vous allez ensuite vous retrouver face à une page relativement vide, mais composée d’un en-tête et d’un pied de page par défaut que votre thème vous met à disposition.Pour vraiment partir d’une page totalement vierge, vous devrez cliquer sur l’icône en forme de roue tout en bas à gauche de votre écran et sélectionner Elementor Canvas dans le menu déroulant correspondant au Modèle de page.

Les modules

La toute première chose que vous devez comprendre c’est que Elementor fonctionne comme un jeu de Lego.Vous allez créer votre page en ajoutant ce que Elementor appelle des «widgets» (qu’on appellera ici modules). Pour accéder à la liste de tous les modules disponible avec Elementor, vous devez cliquer sur l’icône tout en haut à droite du bandeau Elementor.

Vous allez ensuite voir apparaître des dizaines de modules. Dans cette liste, vous verrez que certains des modules ont un cadenas et d’autres non.Elementor vous permettra d’utiliser une trentaine de modules gratuitement, mais vous devrez passer à Elementor Pro si vous voulez utiliser les +100 modules à disposition.Elementor est une extension qui fonctionne en glisser-déposer.Pour faire un test, sélectionnez le module Titre et déplacez-le à l’intérieur du rectangle entouré de petits pointillés. Un titre va alors apparaître sur votre page et vous pourrez ensuite le customiser.

Les réglages

Une fois que vous aurez déplacé ce module sur la page, vous remarquerez que le bandeau Elementor à gauche change automatiquement de forme pour afficher différents réglages.Tout en haut vous trouverez trois onglets : Contenu, Style et Avancé.

Vous trouverez des dizaines de réglages en basculant sur les différents onglets. D’un module à un autre, les réglages ne seront pas les mêmes.La meilleure façon de comprendre la plupart des réglages reste de les modifier et de voir directement l’effet qu’ils ont sur le module.Voyez cette page que vous avez créée comme un bac à sable. Profitez-en pour ajouter des modules qui vous intéresse et modifier les différents réglages pour voir leurs effets et comment ils fonctionnent.

L’historique

Si vous commencez à bidouiller un peu les réglages, vous allez rapidement avoir besoin de deux choses : effacer ce que vous avez fait et revenir en arrière.En bas du bandeau Elementor, vous trouverez cinq icônes et un gros bouton vert.

Cliquez sur la troisième icône de cette liste pour visualiser l’historique de vos changements.Pour chaque action que vous allez faire sur la page, Elementor va créer un bloc d’action. Si vous cliquez sur un des blocs, vous retournerez à l’action en question.Vous pouvez aussi faire un Commande + Z sur Mac ou Contrôle + Z sur PC pour revenir rapidement en arrière.Si vous voulez supprimer un élément, il vous faudra faire un clic droit sur le module en question pour voir apparaître une fenêtre dans laquelle vous aurez l’option Effacer.

La prévisualisation

Même si vous allez voir en temps réel chaque changement que vous faites sur la page, le bandeau Elementor et les informations qui s’affichent au survol peuvent empêcher de voir clairement ce que vous avez fait.L’icône sur le bord du bandeau Elementor vous permettra de le masquer pour voir votre page dans toute sa largeur. Avec ce mode, les encarts et informations qui s’affichaient seront maintenant inactifs.

La deuxième façon de prévisualiser ce que vous avez fait est tout simplement de mettre à jour votre page en cliquant sur le bouton vert et d’ensuite cliquer sur l’icône située juste à sa gauche.

Elementor va alors ouvrir votre page dans un nouvel onglet.À chaque fois que vous ferez une modification et que vous mettrez à jour votre page, l’onglet de prévisualisation rafraichira automatiquement la page pour afficher les derniers changements.

Sortir d’Elementor

Une fois que vous aurez terminé vos expérimentations sur votre page de test, vous voudrez sûrement revenir à votre tableau de bord WordPress.Pour ça, vous devrez cliquer sur l’icône tout en haut à gauche du bandeau Elementor et cliquer sur le bouton Quitter.

Rebasculer sur l’éditeur Elementor

Si vous voulez modifier une page avec Elementor, vous pouvez vous y prendre de deux façons.La première est d’aller dans le menu Pages de votre tableau de bord, de passer votre souris sur la page que vous souhaitez modifier jusqu’à voir apparaître une liste d’action juste en dessous.Si dans dans cette liste l’action vous avez «Modifier avec Elementor», vous pouvez cliquer dessus et vous pourrez commencer à modifier la page en question avec Elementor.Si vous n’avez pas ce bouton «Modifier avec Elementor», vous devrez d’abord cliquer sur «Modifier» et vous trouverez ensuite tout en haut de la page un nouveau bouton «Modifier avec Elementor».La deuxième façon de modifier une page avec Elementor est de basculer sur votre site avec le bouton tout en haut à gauche qui contient l’icône en forme de maison.Placez-vous ensuite sur la page que vous voulez modifier et cliquez sur «Modifier avec Elementor» qui se trouve dans la barre d’action rapide tout en haut de votre écran.