Elementor, l’outil ultime pour un site WordPress

Le guide Elementor pour WordPress

Vous êtes débutant et vous aimeriez en savoir plus sur Elementor ? Restez connecté, cet article est pour vous !

Depuis quelques années l’écosystème WordPress aura vu fleurir des plugins d’un genre nouveau : les builder de pages, avec par exemple Beaver, Divi, et Elementor, dont nous parler ici. Décriés ou adulés, ils sont désormais incontournables dans l’univers des plugins WordPress. Ce que nous allons ici n’est pas de savoir si vous devriez ou non les utiliser, mais comment bien les utiliser.

Le constructeur de pages Elementor pour WordPress

En premier lieu, je dois dire que j’étais totalement réfractaire à l’utilisation d’un tel plugin. Avec mon thème fétiche, Enfold, j’avais trouvé un équilibre stable qui m’apportait une entière satisfaction depuis plusieurs années.

J’avais passé de longues heures à apprendre les moindres recoins de ce thème, et il n’était pas rare que j’utilise quelques touches de code CSS pour peaufiner le travail.

Si je ne suis pas un codeur pur, je sais tout à fait me débrouiller pour chercher ce dont j’ai besoin et le mettre en place avec des langages tels que CSS, HTML ou PHP. Cela aide bien lorsque l’on pouvoir personnaliser son site comme on l’entend. Et cela permet d’ajouter une petite touche qui va vous différencier des personnes qui utilisent le même thème que vous.

Les pages builder, une percée remarquée

Seulement voilà, je suis de nature curieuse, et un beau jour, je me suis dit qu’il serait quand même temps de revenir jeter un œil à l’évolution des pages builder dont tout le monde parle.

J’avais pris le temps d’en tester quelques-uns lors de lors sortie, et je n’avais pas été du tout convaincu. Lent, lourd, peur ergonomique. Une bonne idée, mais pas au point du tout. Et j’en étais resté là.

Avec quelques années de plus au compteur, et autant de temps pour faire évoluer les choses, les développeurs nous proposent aujourd’hui quelque chose de bien plus abouti.

J’ai donc décidé de m’offrir les deux plus en vue que sont DIVI et Elementor. Autant vous le dire tout de suite, je n’ai pas du tout accroché à DIVI. Je ne vais donc pas m’étendre sur le sujet, et s’il est autant plébiscité, c’est qu’il doit y avoir une raison. Que cette dernière m’échappe n’est pas important.

En revanche, j’ai eu un vrai coup de cœur pour Elementor. Je me suis très vite senti très à l’aise avec son interface et son ergonomie, elle me rappelle les logiciels de wireframe, ces app qui vous permettent de créer des maquettes de sites en quelques clics.

Elementor existe en deux versions : Gratuite et Pro. Soyons clairs, pour faire quelque chose de sérieux, autant acheter la licence pro immédiatement. La version gratuite est bien trop limitée. Si elle permet de prendre l’outil en main, vous serez très vite contraint par les limitations. Donc, un upgrade, et en voiture !

Vitesse, temps de chargement, thème WordPress, comment tirer parti d’Elementor ?

C’est toujours le point d’achoppement avec WordPress, les codeurs purs lui reprochent d’être codé avec les pieds. De fait, il existe très peu de thème ou plugins dans l’univers WordPress qui trouve grâce à leurs yeux.

Soyons clairs, on s’en tape. Que les puristes se mettent dessus pour un gain de 3 millisecondes et deux lignes de code, c’est leur choix, et ce choix est tout à fait respectable.

Dans mon cas, et dans celui des personnes qui vont lire ce billet, ce genre de quête ne nous concerne pas. Nous, ce que nous souhaitons, c’est un plugin qui fait le job pour lequel il é été conçu.

Toutefois, si notre page met 25 secondes à s’afficher, ça risque de poser un problème. Et un sérieux problème.

De fait, si vous décidez de passer sur Elementor, c’est toute une philosophie que vous allez devoir repenser. Et à ce titre, il vaut mieux oublier les thèmes avec des milliers d’options, les thèmes qui savent tout faire, mais ne font vraiment rien de bien.

J’ai donc mis de côté Enfold pour choisir OceanWP sur les conseils de quelques personnes qui l’utilisaient depuis un moment.

OceanWP est donc un thème assez léger, qui peut être accompagné d’une foule d’options premium histoire d’égayer son côté austère. Seulement voilà, à l’usage, c’est plutôt pénible, car il faut passer d’Elementor au panneau de personnaliser de WordPress pour retrouver telle ou telle police de caractère, telle couleur, bref, une perte de temps.

Et les temps de chargement s’en ressentent également, car si vous activez toute ou partie des options premium d’OceanWP, c’est autant de CSS et de JavaScript à charger côté visiteur.

Hello Elementor, le minimum, le top

Dernièrement, je me suis donc mis en quête d’un thème encore plus léger que ce bon vieil OceanWP. Et là, j’ai découvert Hello Elementor. Le top pour bosser avec Elementor. Ce thème est vide. Il n’y a rien. Mais rien de rien. C’est la base de la base. Le minimum pour faire tourner un thème et rien de plus.

Ne vous attendez pas à trouver une option ou qui qu’est-ce, il n’y a rien. Pas même une sidebar ! C’est vous dire à quel point le thème est vide. Et c’est bien là toute sa force, car vous allez tout faire avec le système de template d’Elementor qui vient largement compenser.

Les templates Elementor, une puissance folle à portée de souris

Arrêtons-nous un instant sur la fonction des templates. Avec Elementor vous pouvez donc créer des modèles, ou templates, afin de personnaliser totalement votre site, et surtout, pour gagner du temps dans la construction de votre site.

Par exemple, vous pouvez réaliser un template pour un article de votre site et l’appliquer à l’ensemble des articles du site. Ou choisir de l’appliquer uniquement à une catégorie précise, ou une étiquette.

Attention à la tentation des templates

Attention, cette possibilité ouvre un champ dans lequel vous pourriez vous perdre. La tentation pour le débutant est très grande de créer un template bien distinct par catégorie. C’est chouette, c’est créatif, mais contre-productif pour le visiteur qui pourrait finir par se perdre et ne plus rien comprendre à votre identité visuelle.

Dans mon cas, j’ai donc un template par rubrique, la mise en page reste la même, je ne modifie que la barre latérale pour des besoins de navigation dans le site.

Design : Elementor s’occupe de tout !

Revenons-en à notre thème Hello Elementor. Vous l’aurez sans doute compris, si le thème est totalement vide, c’est pour faire place nette au plugin Elementor qui est donc aujourd’hui pensé et conçu pour s’occuper de tout !

Et c’est bien la force de ce plugin. Plus besoin d’un thème surchargé en diverses fonctions, livré avec on ne sait quel plugin, Elementor s’occupe de tout !

Quel que soit votre besoin, la version Pro d’Elementor peut y répondre. Et si jamais vous êtes un peu coincé, vous trouverez un tutoriel sur Youtube pour vous aider grâce à un CSS personnalisé.

Vous devez sans doute penser que j’utilise un plugin X ou Y en plus d’Elementor pour WhyIsLife ? Et bien pas du tout. C’est la version Pro avec du CSS personnalisé. Aucun plugin en plus pour Elementor, rien ! Nada !

Je ne vais pas vous mentir, j’ai utilisé un plugin à un moment, mais j’ai vite été gonflé par ses performances. Je voulais alléger autant possible le temps de chargement de mes pages. Donc, j’ai viré le plugin, et je me suis mis en quête d’astuces pour pousser Elementor dans ses retranchements.

Et donc, le temps de chargement ?

Vous avez un doute sur les temps de chargement de votre site avec Elementor ? Regardez donc les résultats obtenus sur WhyIsLife, veuillez noter que sur ce site, j’utilise le cache Wp-Rocket.

Elementor, l’outil ultime pour un site WordPress 1
Elementor, l’outil ultime pour un site WordPress 2
Elementor, l’outil ultime pour un site WordPress 3

Que dire de plus ! Avec un page speed à 99%, une page de moins méga-octet, je crois que la question est vite répondue n’est-ce pas ? Je pourrais améliorer le temps de chargement, mais il reste très correct.

Avec Elementor, vous êtes donc en capacité de créer un design sur mesure, et d’avoir un site très performant, ce qui est une des conditions de bases pour que votre site puisse être dignement référencé.

Elementor, comment ça marche ?

Maintenant que vous êtes rassuré sur la question des temps de chargement, regardons la bête d’un peu plus près.

Par où commencer ? Il y a tellement de choses à dire sur Elementor, que le plus compliqué reste de commencer ^^

Alors, commençons par le début. Elementor est donc un outil pour construire vos pages. Comme indiqué plus haut, grâce au système de template, pas de panique, vous ne serez pas obligé de construire chacune de vos pages avec Elementor. Si vous deviez faire cela, vous ne gagneriez pas de temps, et ce serait très fastidieux. Donc, pas de panique, vous créez votre template, vous choisissez ses conditions d’affichages, et voilà !

Construire une page avec Elementor

Vous avez ici plusieurs possibilités. Soit vous partez d’une page blanche, et vous ajoutez les éléments dont vous avez besoin, soit vos allez piocher dans les modèles mis à votre disposition avec la version pro.

Astuce Pro :

Ne cherchez pas à construire tout de suite votre page finale. Prenez le temps d’utiliser tous les widgets et de fouiller dans les options de chacun afin de voir comment ils fonctionnent et à quoi ils  servent. Familiarisez-vous avec l’outil. Une fois cela fait, vous serez en mesure de commencer à construire vos pages.

Avant de vous lancer, vous devez comprendre comment fonctionne Elementor. En effet, nous sommes sur un système de blocs. Voyez cela comme des briques Lego, ou presque.

Elementor fonctionne avec une section, dans laquelle vont se placer des colonnes. Vous pouvez ajouter une « section interne » dans une colonne. Mais vous ne pouvez pas ajouter une section interne dans une section interne. Oui, c’est un peu délicat à comprendre, mais vous allez vous y faire.

Une fois mes sections en place, il me suffit alors de faire glisser un élément de la barre d’outils sur ma page, puis d’apporter les réglages que je souhaite. C’est basique, enfantin, et d’une simplicité hallucinante !

Lorsque vous faites glisser un élément sur votre page, Elementor affiche alors automatiquement le panneau d’options lié à cet élément, pas besoin de chercher !

Les widgets dans Elementor

Les widget dans Elementor, tout pour construire son site WordPress sans code et sans difficulté

Chaque élément que vous pouvez faire glisser sur votre page porte le nom de widget dans Elementor.

Dans la version Pro, Elementor propose 6 catégories de widgets

  1. Basique
  2. Pro
  3. Général
  4. Site
  5. Unique
  6. WordPress

Les widgets Basique :

  • La section interne pour construire l’architecture de votre page.
  • Le titre de votre page (vous pouvez choisir si ce sera H1, H2, H3, etc.)
  • Image
  • Éditeur de texte
  • Vidéo
  • Bouton
  • Séparateur
  • Espaceur
  • La google Map
  • Icône

Comme vous pouvez le constater, c’est le strict minimum. Si vous n’avez pas la version pro, vous allez vite être gêné pour bâtir un site complet.

Les widgets Pro

Ici, nous entrons dans une autre dimension.

  • Les publications (articles ou page, ou tout autre contenu rédactionnel publié sur votre site)
  • Un portfolio, pas folichon, mais efficace et sobre.
  • Un formulaire
  • Le menu de navigation
  • Des tableaux de prix,
  • Des appels à l’action
  • Une table des matières
  • Etc…

Voilà qui est déjà bien plus conséquent pour construire un site de A à Z !

Les widgets Général

Ici, Elementor vous propose des éléments divers et variés

  • Une boite d’images
  • Une galerie basique
  • Un compteur
  • Un widget pour afficher les témoignages,
  • Des onglets,
  • Un accordéon,
  • Des boites alertes, informations, etc.
  • Une sidebar
  • Etc…

Avec cette section, vous pouvez donc enrichir votre site d’éléments variés pour lui donner un côté plus sexy.

Widget Site / Unique et WordPress

Dans ces trois sections, vous touchez un peu plus à WordPress et au contenu même de votre site. Le logo, le titre du site, une table des matières, les commentaires, les informations de la publication, la navigation, d’un article à l’autre, les widgets pour votre sidebar, etc.

Seulement, ici, rien sur le contenu même de votre page ou de votre article. Impossible ici d’afficher votre dernier article. Pour cela, vous devrez passer par le constructeur de thèmes d’Elementor.

Landing page et contenu rédactionnel classique dans Elementor

En effet, vous avez deux façons d’utiliser Elementor.

Vous pouvez créer une page contact, une page prestation ou toute autre page, selon vos besoins, directement dans Elementor.

En revanche, si vous souhaitez utiliser Elementor partout sur votre site, par exemple pour afficher vos articles, alors, vous devez passer par le constructeur de thèmes.

Pas de panique. L’interface est la même, les widgets sont les mêmes, vous ne serez pas perdus. La version « création de template » vous offre quelques fonctions en plus, justement pensées pour utiliser Elementor en lieu et place d’un thème classique.

Seulement, ici, c’est à vous de construire la mise en page de votre article. Hé oui. C’est quelque chose qu’il faut savoir pour éviter d’être désagréablement surpris et déçu.

Elementor n’est pas un thème, c’est un builder, en français, un constructeur de thèmes. Donc, c’est bien à vous de construire non pas votre thème de fond en comble, mais bien les différents modèles qui seront utilisés pour afficher votre contenu.

Vous pensez que c’est compliqué ? C’est bien plus amusant que compliqué ! Je ne vais pas vous raconter d’histoires, au départ, vous allez un peu galérer. D’où l’astuce pro que je vous ai donnée un peu plus haut dans cet article.

Une fois que vous aurez compris comment fonction Elementor, vous allez prendre un malin plaisir à l’utiliser.

Dans sa dernière version, Elementor vous propose de modifier vos pages catégories, vos pages étiquettes, la page d’erreur. Plus rien ne lui échappe.

Elementor et l’écosystème WordPress

Nous pouvons construire notre thème avec Elementor, très bien ! Mais est-ce que Elementor fonctionne avec ce qui existe déjà dans l’univers WordPress ?

Vous pouvez construire une boutique totalement à votre gout en utilisant WooCommerce et Elementor. Autant personnaliser WooCommerce est une galère sans nom, autant le faire avec Elementor est un vrai plaisir !

Vous pouvez créer une catégorie de produit, créer un template dans Elementor, et l’utiliser pour afficher les produits de la catégorie de votre choix. Un bonheur !

Vous utilisez le plugin ACF Pro ? Si vous n’êtes pas un codeur, allez mettre le nez dans le code des pages pour afficher votre contenu, voilà qui est bien pénible. Avec Elementor, terminé ! Sans écrire une ligne de code, vous pouvez désormais interfacer le contenu saisi via ACF.

Vous avez besoin de construire un site de formation ? Elementor sait fonctionner avec LearnDash.

Un espace membre ? Elementor fonctionne avec un grand choix de plugin « Membership ».

Combien coute Elementor ?

Et si l’on prenait la question autrement. Un thème WordPress complet coute aujourd’hui, en moyenne, 70€ par an. En soi, ce n’est pas excessif, surtout si l’on compare au prix d’une prestation de création de sites, environ 1500€ pour un site de base.

Elementor lui, va vous revenir à 49€, pour un site. Ce qui est plus que raisonnable. Sachant qu’avec Elementor, vous pouvez vraiment créer des sites totalement différent et rapide, ce qui n’est pas le cas de tous les thèmes.

Elementor, l’outil ultime pour un site WordPress 4

Les plugins pour Elementor

Il existe de nombreux plugins pour Elementor. J’en ai testé plusieurs. C’est joli, ça fait des trucs qui bougent, c’est mignon. Et inutile sur le long terme. Sauf dans des cas vraiment précis. Dans la grande majorité des cas, Elementor Pro comble tous nos besoins. Sauf !

Oui, il fallait bien une faille. Pas de conditions dynamiques pour afficher ou non un widget. C’est regrettable. Mais nul n’est parfait. Il existe donc un plugin pour venir réparer cet oubli. Certes, le plugin n’est pas encore parfait, car les conditions multiples ne sont pas au menu, mais c’est un début.

Elementor en conclusion

Je vous l’ai dit en introduction, fut une époque où je ne voulais pas entendre parler d’un builder (constructeur de pages). Celui intégré à mon thème me convenait très bien.

Et puis, j’ai découvert Elementor. Comment pourrais-je aujourd’hui m’en passer pour mes sites ? Demain, un autre outil viendra sans doute le supplanter. En attendant ce jour, j’ai vraiment beaucoup de plaisir à l’utiliser, et à l’oublier ! Car une fois votre site construit, vous pouvez l’oublier et vous concentrer sur votre rédactionnel.

Pour quel public ?

Les débutants pourront se faire la main avec Elementor, même si cela va leur demander un certain temps.

Des profils plus avancés quant à eux pourront rapidement prendre Elementor en main et tirer bénéfices de sa souplesse et de sa puissance.

Stephane briot

Stephane briot

Auteur et blogueur, mentor et entrepreneur.
Parlons de votre projet, de votre besoin : réservez votre appel gratuit de 30 minutes

Je réserve ma session gratuite

De très bonnes interventions toujours dirigés vers l'humain

Sacha Avatar
Sacha
Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur whatsapp
WhatsApp