Elementor, le constructeur de pages star pour WordPress ne cesse de progresser depuis sa sortie en mai 2016 !
De nombreux utilisateurs ont délaissés leur ancien page builder pour passer sur Elementor, qui compte aujourd’hui plus de 2 millions d’installations actives (contre seulement 600.000 en avril 2017).
C’est une vraie folie. Tout le monde veut l’utiliser mais certains ont du mal à le prendre en main…
Aujourd’hui je vous propose un guide complet de son utilisation.
Sinon, vous pourrez également le télécharger sur le répertoire officiel.
Dès l’activation du plugin, vous verrez apparaître deux nouveaux onglets dans votre administration : l’onglet Elementor et l’onglet Modèles.
Nous allons, dans un premier temps, nous pencher sur le premier onglet.
2.1 – Onglet Elementor > Réglages
L’onglet des réglages d’Elementor est composé de 3 sous-onglets. Même si l’onglet Style et Avancé vous permettent de paramétrer quelques options supplémentaires, je voudrais m’attarder un peu sur l’onglet Général.
2.2 – Onglet Elementor > Gestionnaire de rôle
L’onglet Gestionnaire de rôle va vous permettre de désactiver l’utilisation du page builder en fonction des rôles des utilisateurs. Cela peut être pertinent si vous n’êtes pas le seul à maintenir votre site. Par défaut, tout le monde a le droit d’utiliser Elementor. Vous pouvez le désactiver pour les utilisateurs qui ont le rôle d’éditeur, d’auteur, de contributeur ou d’abonné.
En savoir plus sur les différents rôles au sein de WordPress.
2.3 – Onglet Elementor > Outils
Onglet Général
Vous ne devriez pas avoir besoin d’aller dans cet onglet. Toutefois, il est bien de savoir qu’il existe et ce qu’il propose :
Onglet Remplacer l’URL
Attention, cette fonctionnalité peut avoir des conséquences sur votre site : elle permet de changer l’URL de votre site en base de données et de mettre à jour vos données Elementor. Ceci ne doit être utilisé que dans des cas précis et si vous savez ce que vous faites.
Onglet Contrôle de version
Si vous avez un problème de compatibilité, vous pourriez faire le choix de rétrograder la version d’Elementor que vous utilisez ou même devenir un Bêta Testeur.
Onglet Mode maintenance
Cette fonctionnalité d’Elementor vous permettra de mettre votre site en maintenance sans avoir à utiliser un autre plugin.
2.4 – Onglet Elementor > Information système
Ici, rien de bien compliqué. Cet onglet vous permet de contrôler les informations de votre système : WordPress et hébergement. Cela pourrait vous être demandé lorsque vous faites une demande d’aide auprès d’un support.
2.5 – Onglet Commencer / Obtenir de l’aide
Les deux onglets suivants vous permettront de trouver des informations et de l’aide. L’onglet Commencer met à disposition des vidéos d’explication et l’onglet Obtenir de l’aide vous renvoie vers la page du support officiel d’Elementor.
2.6 – Onglet Elementor > Polices personnalisées
L’onglet Polices Personnalisées sera disponible uniquement si vous utilisez la version pro du plugin. Ceci dit, c’est tout à fait faisable sans souscrire à cette licence via votre thème enfant.
Maintenant que nous avons fait le tour des principaux paramétrages globaux d’Elementor, nous allons voir comment l’activer au sein de vos pages (ou autres types de posts).
Avant d’aller plus loin dans la conception de votre layout, je vous propose de comprendre comment Elementor fonctionne…
4.1 – Tour d’horizon
Voici une image qui reflète une page vide où l’on vient d’activer Elementor (étape précédente). Vous devez distinguer 4 parties :
4.2 – La conception d’un layout (from scratch)
Créer une mise en page from scratch (en partant de zéro) est un bon exercice pour comprendre comment ça marche.
Le principe : vous ajoutez des sections dans lesquelles vous ajoutez des widgets.
Le reste dépendra de votre créativité et de l’utilisation que vous ferez des options proposées par Elementor.
Voici les étapes :
Vous pourrez commencer à personnaliser le design de cette section grâce aux options disponibles :
Ainsi de suite, vous allez ajouter plusieurs sections pour définir la structure de votre layout.
Recommencez autant que nécessaire :
Une fois que vous aurez inséré votre widget au sein d’une section, le personnaliseur de gauche s’ouvrira afin que vous puissiez paramétrer le module :
Notez que chaque widget proposera des options différentes.
Le côté responsive de votre layout va se gérer à divers endroits :
Il vous suffira de cliquer sur l’un de ces éléments pour les importer en un clic.
Attention, cela peut paraître être un gain de temps, mais en fait, le temps de changer tous les éléments et les options de paramétrage peut être également fastidieux. À voir…
Nous avons vu qu’il était possible d’importer une mise en page en un seul clic. Une autre fonctionnalité intéressante d’Elementor est de pouvoir sauvegarder une mise en page dans la bibliothèque (modèle). Ainsi, ce layout pourra être utilisé à nouveau au sein d’une autre page !
Voyons comment faire :
Pour importer une mise en page pré-construite que vous auriez sauvegardée sur votre ordinateur, la démarche est inversée mais très similaire :
ATTENTION : ces modèles peuvent nuire à votre référencement naturel ! Je m’explique : par défaut, la bibliothèque des modèles d’Elementor est indexable par les moteurs de recherche.
N’oubliez pas d’aller dans les réglages de Yoast SEO pour désactiver l’indexation de vos modèles dans les résultats de recherche.
Vous avez dû remarquer qu’Elementor cachait pas mal de fonctionnalités derrière des petites icônes çà et là… Découvrez-les en détail :
Ou bien de revenir à l’éditeur de WordPress en backoffice pour pouvoir faire vos optimisations SEO par exemple (en remplissant les champs de Yoast).
Même si Elementor est plutôt satisfaisant en version gratuite, pas mal de fonctionnalités sont bridées. Pour les débloquer, vous devrez passer en version pro. Tarifs : de 49 à 199$ HT par an.
Elementor est invraisemblablement le Page Builder Freemium le plus puissant du marché. C’est justement parce qu’il est “freemium” qu’il a connu ce grand succès. Mais ce n’est pas la seule raison.
En effet, il a bousculé les “codes” de construction d’un site web avec WordPress, faisant même oublier la notion de “thème” et la place qu’ils prenaient en termes de design jusqu’alors !
À présent, ce n’est plus primordial de bien choisir son thème au vu des fonctionnalités qu’Elementor propose (dans sa version pro)…