WordPress a encore l’image d’une usine à gaz difficile à prendre en main et limitée en termes de personnalisation.

En 2016 une extension a vu le jour et a donné à l’univers WordPress un second souffle. Cette extension c’est Elementor.

D’année en année elle est devenue de plus en plus populaire jusqu’à aujourd’hui devenir l’une des extensions les plus installées sur WordPress. Mais pourquoi ce succès ?

Elementor est un constructeur de pages. C’est un type d’extension qui va permettre de personnaliser de A à Z le design de votre site WordPress.

Grâce à Elementor vous aurez toute la liberté dont vous avez besoin pour créer un site web qui vous ressemble et qui dégage une image professionnelle.

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 qu’Elementor fonctionne comme un jeu de Lego.

Vous allez créer votre page en ajoutant ce qu’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 votre page 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 tout simplement 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.

Les blocs

Un peu plus tôt je vous disais qu’Elementor fonctionne comme un jeu de Lego. Si vous avez ajouté plusieurs modules à votre page, vous verrez que chaque module se superpose en se plaçant au-dessus ou en dessous d’un module déjà présent.

Pour créer un site web avec une allure professionnelle, vous aurez besoin de créer des structures pour développées. Pour ça vous allez avoir besoin d’importer des blocs.

Les blocs sont des ensembles de modules avec des structures plus ou moins perfectionnées.

Sur chaque page que vous modifierez avec Elementor, vous verrez tout en bas un encart délimité par des pointillés et contenant trois icônes.

Cliquez sur la dernière icône en forme de S (si elle n’est pas présente, c’est que vous n’avez pas téléchargé et activé l’extension Starter Templates dont je vous parlais au début de l’article).

Vous verrez alors apparaître une fenêtre où tout en haut deux onglets seront présents dont «Blocks». En cliquant dessus vous verrez apparaître des dizaines de blocs prêt à être ajoutés à votre page.

Vous trouverez dans le coin supérieur gauche un menu déroulant qui vous permettra de filtrer par type de bloc. Une fois que vous aurez trouvé le bloc que vous voulez ajouter à votre page, cliquez simplement dessus et ensuite sur le bouton «Import Block».

Les blocs sont volontairement épurés pour vous permettre de les personnaliser avec le style du reste de votre page.

Les sections et colonnes

En ajoutant votre premier bloc et donc en créant une structure plus complexe, vous mettez le doigt sur des concepts les plus compliqués d’Elementor : les sections et colonnes.

Chaque nouveau bloc que vous allez créer avec Elementor sera composé de trois types d’éléments :

• De sections
• De colonnes
• De modules (un titre, une image, un corps de texte, etc.)

Chaque module (texte, image, bouton, etc.) a besoin d’être organisé dans un conteneur, qu’on appelle ici section. Dans ces sections, on va pouvoir créer une ou plusieurs colonnes qui vont nous servir à organiser les éléments à l’intérieur de ces conteneurs.

Donc si vous passez votre souris sur les différentes parties de votre page, vous verrez toutes les sections, colonnes et module délimités par des encarts :

• Les sections seront délimitées par des encarts bleus avec tout en haut trois icônes (un plus, un rectangle avec six ronds et une croix)
• Les colonnes seront délimitées par des encarts gris en pointillés et une icône dans le coin supérieur gauche (en forme de fenêtre)
• Les modules seront délimités par des encarts bleus et une icône dans le coin supérieur droit (en forme de stylo)

Comme on l’a vu juste avant, vous trouverez un encart avec trois icônes à chaque fin de page.

Si vous cliquez cette fois-ci sur le bouton «+», Elementor vous permettra de créer une nouvelle section. Elementor vous demandera ensuite de choisir combien de colonnes doit comporter votre section.

Peu importe le choix que vous faites, vous aurez toujours la possibilité d’ajouter, de retirer et de modifier la taille d’une colonne.

• Ajouter une colonne – Passez votre souris sur une des colonnes présentes dans votre section jusqu’à voir apparaître l’icône en forme de fenêtre dans le coin supérieur gauche. Faites un clic droit dessus et sélectionnez «Ajouter une nouvelle colonne» dans le menu déroulant.
• Supprimer une colonne – Même procédé que pour ajouter une colonne sauf que cette fois-ci vous verrez apparaître tout en bas une option Effacer
• Modifier la taille d’une colonne – Placez votre souris sur la limite entre deux colonnes pour voir le curseur de votre souris changer de forme. Cliquez tout en restant appuyé et déplacez la limite entre les colonnes pour changer leur taille.

Une fois que vous aurez créé votre section avec à l’intérieur vos colonnes, vous pourrez déplacer vos modules à l’intérieur d’une des colonnes que vous aurez choisies.

Utiliser les marges

Maintenant que vous comprenez comment fonctionnent les sections et colonnes, vous serez en mesure de créer des mises en page plus évoluées. Si vous voulez aller encore plus loin en créant des structures plus perfectionnées, vous allez devoir comprendre le système de marges.

Le système de marges est un réglage que vous allez pouvoir retrouver dans l’onglet «Avancé» une fois que vous aurez sélectionné un module sur votre page.

Vous trouverez dans cette partie deux lignes : Marge et Marge interne.

Comprendre la différence entre ces deux types de marges n’est pas évident. Comme vous êtes débutant, je vous conseille de ne vous concentrer seulement sur les marges classiques.

Les marges sont donc ce qui va vous permettre de déplacer les modules, colonnes et sections sur votre page.

Si vous placez votre souris sur une des cases de direction, vous verrez apparaître deux petites flèches qui vous permettront d’augmenter ou de diminuer la valeur. L’élément que vous avez sélectionné va donc ensuite se déplacer sur votre page.

Si vous voulez modifier une seule direction, vous allez devoir cliquer sur l’icône en forme de trombone.

Pour finir, je vous recommande de cliquer sur la valeur «%» présente juste au-dessus avant de modifier une valeur. C’est ce qui vous permettra d’avoir le fameux design responsive qu’on va voir juste après.

Déplacer des éléments

Comme vous l’avez remarqué, Elementor est une extension qui fonctionne en glisser-déposer. Chaque élément de votre page peut donc être déplacé : les sections, les colonnes et les modules.

Si vous voulez déplacer un module, il vous suffit de passer votre souris sur l’élément jusqu’à voir apparaître l’icône en forme de stylo. Cliquez ensuite sur cette icône tout en gardant le clic appuyé et déplacez l’élément à un autre endroit de votre page.

En déplaçant l’élément, vous verrez apparaître une barre bleue qui vous montrera où l’élément peut être déposé.

Vous pouvez aussi faire cette même manipulation avec les colonnes et les sections. Pour les sections il faudra cliquer sur l’icône grise et pour les sections sur l’icône centrale avec les six points.

Si vous n’arrivez pas à accéder à un élément ou à le déplacer, vous pouvez utiliser le navigateur Elementor. En cliquant dessus vous aurez une vue des différentes sections, colonnes et modules de votre page.

Si vous cliquez sur un élément, Elementor vous le sélectionnera sur la page et vous pourrez ensuite le déplacer en utilisant le navigateur.

Rendre sa page responsive

Le responsive consiste à créer un design qui va automatiquement s’adapter à différentes tailles d’écran. De l’ordinateur, au smartphone, en passant par la tablette.

Elementor propose une fonctionnalité qui vous permettra de créer une mise en page responsive.

Pour ça, il faut que vous cliquiez sur l’icône tout en bas du bandeau Elementor qui vous permettra d’activer le mode responsive.

Une fois que vous aurez cliqué dessus, vous aurez un second bandeau qui apparaîtra tout en haut de votre page. En cliquant sur l’icône d’ordinateur, de tablette ou de smartphone, vous pourrez modifier la taille d’écran et voir comment votre page s’adapte.

Qu’importe le thème que vous utilisez, votre page demandera sûrement certains ajustements. Comme une taille de police trop grande ou plus d’espace entre certains éléments.

Si vous regardez de plus près certains réglages dans le panneau Elementor, vous verrez une icône apparaître à côté de certains paramètres.

S’il y a une icône qui vous indique le type d’appareil que vous avez sélectionné (ordinateur, tablette ou smartphone), c’est que changer la valeur du paramètre s’appliquera uniquement à la taille d’écran que vous avez sélectionné.

Par exemple, si je sélectionne la vue smartphone et que je change l’alignement pour qu’il soit centré et non plus à gauche, mon alignement s’appliquera uniquement au smartphone et non aux tablettes et ordinateurs.

Si un réglage n’a pas cette icône, ça veut dire qu’en le changeant vous ferez une modification sur toutes les tailles d’écrans.

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.

Passer à Elementor Pro

La version gratuite d’Elementor vous permettra de faire beaucoup de choses et sera largement suffisante pour bien commencer.

Si vous voulez aller plus loin, il existe une version payante d’Elementor qui vous permettra de passer au niveau supérieur grâce :

• À l’accès à des dizaines de modules supplémentaires
• À la création d’en-têtes et de pieds de page plus perfectionnés
• À la possibilité de créer un site e-commerce, un blog ou un portfolio personnalisé
• À la création de pop-up

Si vous voulez aller plus loin avec votre site et lui donner une allure encore plus professionnelle, n’hésitez pas à passer à la version payante d’Elementor.

Vous verrez que la version Pro d’Elementor commence à 49$ par an. Que vous décidiez ou non de renouveler votre licence Elementor Pro, vous profiterez de toutes les fonctionnalités à vie. Ce qu’Elementor vous propose de renouveler tous les ans est l’accès aux nouvelles mises à jour (donc fonctionnalités) et au support Elementor. Rien ne vous empêche donc de prendre la licence Elementor Pro un an seulement.

Conclusion

Voilà, vous venez de découvrir les principales fonctionnalités d’Elementor.

Je vous conseille d’expérimenter le plus possible sur votre page de test jusqu’à comprendre par la pratique comment utiliser cette extension. Au début vous serez probablement perdu, mais c’est tout à fait normal.

Elementor possède beaucoup de fonctionnalités et permet donc beaucoup de choses. Si vous débutez dans la création de sites internet, je vous conseille de partir d’un thème le plus complet possible et de vous servir d’Elementor comme d’un outil de personnalisation et de support.

Beaucoup de personnes font l’erreur de vouloir créer un site sur-mesure avec Elementor. Dans la grande majorité des cas le résultat final n’est pas très professionnel (ce qui est tout à fait normal) et les personnes passent beaucoup de temps sur quelque chose qui n’est finalement pas leur coeur de métier.

Privilégiez plutôt un bon thème qui vous fera économiser beaucoup de temps et vous donnera un résultat pro, plutôt que de passer des heures à essayer de réinventer la roue. Une fois que vous aurez ce thème, personnalisez-le avec les différents réglages et privilégiez l’importation de blocs plutôt que la création sur-mesure de nouvelles sections.