Elementor : notre avis sur le constructeur de page le plus à la mode

Elementor : notre avis sur le constructeur de page le plus à la mode

Si vous essayez de savoir si Elementor est le constructeur de pages pour votre site WordPress qu’il vous faut, cet article risque de vous intéresser ! Nous allons tester ici toutes les fonctionnalités d’Elementor et espérons pouvoir vous donner toutes les informations sur le constructeur de pages phare du moment. Notre test prend en compte les toutes dernières fonctionnalités d’Elementor 2.0 afin de vous donner un aperçu complet et à jour du plugin. Nous allons parler de la version gratuite d’Elementor mais aussi des extensions payantes !

Lancé il y a seulement deux ans, en 2016, Elementor est aujourd’hui utilisé sur plus de 800 000 sites web. Sa note par les utilisateurs est absolument exceptionnelle avec une moyenne de 4,9/5 sur plus de 5000 avis sur le site WordPress.org.

Alors, Elementor est-il fait pour vous ? C’est ce que nous allons essayer de voir tout de suite ensemble.

PS : sachez que si nos captures d’écran peuvent être en anglais, l’extension est à 100% traduite en français.

Quels sont les grands avantages d’Elementor ?

Elementor, meilleur constructeur de page WordPress ?

Elementor vous aide à ajouter des éléments de style, de mise en page et de conception avancés sur vos pages WordPress sans que vous ayez besoin de savoir coder. Dans la nouvelle version Elementor Pro, vous pouvez même concevoir l’ensemble de votre thème WordPress sans avoir à coder la moindre ligne.

Pour être plus précis, Elementor est une extension de création de pages par glisser-déposer visuel. Nous allons analyser ici ce que cela signifie :

  • Visuel veut dire que vous voyez en temps réel à quoi ressemblera votre page pour vos visiteurs. Vous n’aurez de ce fait en principe aucune mauvaise surprise une fois votre contenu publié.
  • Le glisser-déposer signifie que vous pouvez vous déplacer dans divers éléments de conception – comme les boutons, les formulaires ou les images – simplement en les faisant glisser et en les déposant à l’endroit où vous souhaitez les intégrer sur votre page. Encore une fois, aucun code n’est requis !

Ainsi, WordPress est un outil extrêmement pratique qui vous permet de concevoir votre site WordPress exactement comme vous le souhaitez sans avoir à apprendre à coder.

Comment fonctionne l’interface Elementor

Nous allons commencer cet avis sur Elementor en vous faisant un aperçu du mode de fonctionnement de son interface. Si vous connaissez déjà un peu Elementor, vous pouvez passer directement à la section suivante de cet article où nous allons détailler quelques caractéristiques plus spécifiques.

Comment l’interface d’Elementor est-elle divisée ?

Lorsque vous lancerez l’éditeur Elementor pour la première fois, vous verrez quelque chose comme ceci :

Elementor comment fonctionne l'interface ?

  • (1) – la zone de contenu : vous verrez votre thème habituel en dehors de cette zone. Vous pourrez construire votre propre design dans la zone marquée par les pointillés gris.
  • (2) – les éléments/ widgets : Ce sont les éléments de base que vous pouvez assembler pour concevoir votre page.
  • (3) – les paramètres : Ils vous permettent d’annuler les modifications, de prévisualiser votre design sur PC, tablette ou smartphone et bien plus encore.

Création de la mise en page et de votre design

Bien que vous puissiez commencer à utiliser des éléments tout de suite sur votre page, le plus intéressant est certainement de commencer dans un premier temps par la construction de la structure de base de votre page.

Elementor vous propose deux éléments structurels qui vous aideront :

  • A positionner les différents éléments sur votre page
  • A intégrer des éléments de style en tant que groupe (par exemple, ajouter un arrière-plan à une section entière de votre page)

Ces éléments structurels sont :

  • Les sections : le bloc de présentation le plus large.
  • Les colonnes : se trouvent à l’intérieur d’une section. Vous pouvez avoir une colonne ou décider d’en intégrer plusieurs à votre section.

Par exemple, voici à quoi ressemble :

  • (1) : une section, marquée en bleu
  • (2) : deux colonnes à l’intérieur de cette section, marquées en noir

Elementor sections et blocs

Ajouter de nouveaux éléments à votre design

Pour ajouter un nouvel élément à une section ou à une colonne, il suffit de le faire glisser de la barre latérale gauche sur l’aperçu visuel de votre page :

elementor

Si créer un élément d’en-tête est un exemple assez basique de ce que l’on peut faire avec Elementor, vous disposez d’un tas d’autres options qui vous permettent de faire des choses bien plus complexes et très sympas, comme créer un carrousel de logos par exemple.

Éléments de style, colonnes ou sections

Pour mieux contrôler le style de vos éléments, colonnes ou sections, vous pouvez cliquer sur le contenu souhaité et utiliser les onglets de la barre latérale :

elementor modification des éléments

Elementor est-il un constructeur de page difficile à prendre en main ?

Comparée à d’autres constructeurs de pages, l’interface d’Elementor est l’une des plus faciles à appréhender. Mais quel que soit le plugin de création de pages que vous choisissez, il y aura toujours une courbe d’apprentissage assez longue avant que vous puissiez commencer à créer des pages vraiment magnifiques.

Pour vous aider à maîtriser son outil, Elementor a mis à votre disposition une chaîne YouTube avec différents tutoriels. Vous trouverez également de nombreux guides et vidéos sur internet pour vous aider à maîtriser au mieux ce constructeur de pages.

Mais voici selon nous la meilleure façon de maitriser les bases d’Elementor : Importez un modèle Elementor pré-construit (nous vous diront comment faire dans quelques instants) et déconstruisez-le pour voir comment le concepteur a créé la page. De cette façon, vous pourrez voir à quoi servent les différentes options et quand les utiliser pour créer la page de vos rêves.

Six caractéristiques spécifiques de l’Elementor qui en font un constructeur de pages unique

Maintenant que vous avez compris comment Elementor fonctionne dans les grandes lignes, allons un petit peu plus dans les détails et examinons certaines des caractéristiques spécifiques qui ont contribué au succès d’Elementor.

1. La bibliothèque de modèles d’Elementor

Bien qu’Elementor vous donne la possibilité de créer des designs complets en partant de zéro… vous n’avez pas toujours besoin de tout faire vous-même grâce à la bibliothèque de modèles d’Elementor très fournie.

Cette bibliothèque comprend un ensemble de modèles que vous pouvez insérer d’un simple clic :

elementor, bibliothèque de modèles

Depuis la version Elementor 2.0, ces modèles sont désormais disponibles en deux formats :

  • Pages : il s’agit de modèles de pages entières que vous pouvez importer puis modifier selon vos besoins.
  • Blocs : il s’agit de modèles pour des “sections” spécifiques plutôt que pour des pages entières. Par exemple, si vous souhaitez simplement ajouter une section de contact prédéfinie à une mise en page existante, les blocs peuvent vous aider à le faire.

Une fois que vous avez-vous-même créé vos propres modèles, vous pouvez les enregistrer en tant que modèles ou blocs pour les réutiliser facilement par la suite sur vos autres pages.

2. Prévisualisation sur mobile tablette avec une vue en temps réel de votre page

Comme une grande partie du trafic sur le web se fait aujourd’hui sur des appareils mobiles, il faut que la version de votre site sur smartphones soit bien optimisée. On estime même souvent qu’un site doit être construit avant tout pour les smartphones (c’est ce qu’on appelle être mobile first).

Sachez que tous les designs que vous créez avec Elementor sont automatiquement responsive design (c’est-à-dire qu’ils sont adaptés à la taille des écrans des téléphones).

Si jamais vous souhaitez voir à quoi ressemble votre design sur un autre appareil, Elementor vous permet de lancer rapidement une prévisualisation sans quitter l’interface :

Elementor responsive design

Elementor va également plus loin en vous permettant d’afficher/masquer des widgets individuels sur certains appareils.

Par exemple, si vous avez une grande image sur un article, vous ne voudrez peut-être pas afficher cette image sur la version mobile de votre site. Les commandes de conception réactives d’Elementor vous permettent de la masquer sur les appareils mobiles d’un simple clic :

Elementor enlever éléments en fonction des supports

3. Contrôles détaillés de la mise en page

Comme les constructeurs de pages éliminent le besoin de savoir coder, il faut parfois accepter de sacrifier un peu de flexibilité sur l’endroit où vous positionnez les éléments pour atteindre cette simplicité.

Mais ce qui est génial avec Elementor, c’est qu’il vous donne des tonnes de moyens de contrôler facilement l’endroit où vous souhaitez placer chaque widget, section et colonne. Pour cela vous pouvez :

  • Définir manuellement le remplissage et la marge des sections, des colonnes et des widgets
  • Ajuster la largeur des colonnes en faisant simplement glisser le séparateur entre les colonnes
  • Positionner les widgets verticalement dans une colonne (ou des colonnes dans une section)
  • Créer un espace vide entre les colonnes avec un espacement réglable

Elementor, placez les éléments où vous voulez

4. Édition de texte en ligne

L’édition de texte en ligne est un moyen pratique de modifier le texte de votre page. Plutôt que d’utiliser un popup comme d’autres constructeurs de pages, Elementor vous permet de cliquer sur la page et de commencer à écrire directement :

Elementor edition de texte

5. Annulation et rétablissement facile avec un historique de vos révisions

« Le seul homme à ne jamais faire d’erreur est celui qui ne fait jamais rien» Albert Einstein

Comme Albert nous le dit dans sa célèbre citation, vous allez probablement faire une erreur (ou plutôt de nombreuses erreurs) lorsque vous essaierez de nouvelles conceptions pour votre site WordPress.

Si vous faites une erreur, Elementor vous permet de la réparer de deux manières différentes :

  • Premièrement, chaque action que vous effectuez* est enregistrée et peut être annulée si nécessaire :

Elementor annulation d'une action

  • Deuxièmement, chaque fois que vous enregistrez votre conception, vous obtenez également une toute nouvelle révision à laquelle vous pouvez revenir si nécessaire.

*Ces actions individuelles sont effacées lorsque vous quittez l’interface. Il s’agit donc de chaque action que vous effectuez au cours d’une session de conception spécifique. Les révisions sauvegardées sont cependant toujours accessibles.

6. Nettoyer le code si jamais vous désactivez Elementor

Si jamais vous devez désactiver Elementor à un moment donné, sachez qu’il ne laissera pas derrière lui un tas de shortcodes comme le font d’autres constructeurs de page tels que WPBakery Page Builder ou Divi Builder.

Au contraire, Elementor laisse derrière lui un code propre (bien que vous perdiez, bien sûr, tous les éléments de style créés avec).

Qu’apporte Elementor Pro en plus de la version gratuite ?

Le plugin de base du constructeur de pages Elementor est 100% gratuit et open source. Mais l’équipe Elementor propose également un module complémentaire appelé Elementor Pro. Cet add-on vous offre de nombreuses fonctionnalités utiles à pour 49 $ (seulement). Voici quelques-unes des fonctionnalités les plus utiles que propose la version Pro d’Elementor :

Construire un thème WordPress complet et sans coder avec Elementor

Jusqu’à récemment, Elementor n’était utilisé que pour développer votre contenu. Vous deviez avoir un thème en plus d’Elementor pour avoir un site de qualité..

Avec la version 2.0 d’Elementor Pro, vous pouvez maintenant construire votre thème entier avec la même interface Elementor par glisser-déposer, y compris vos modèles d’en-tête, de pied de page et de messages de blog.

Pour construire votre thème, vous devez d’abord sélectionner la partie de votre thème que vous souhaitez construire :

Elementor section à construire

Ensuite, vous pouvez utiliser la même interface Elementor (avec l’ajout de widgets pour ce type de contenu) pour construire votre mise en page.

Par exemple, si vous construisez le modèle de votre article de blog, vous pourrez faire glisser les widgets pour le :

  • titre de l’article
  • l’affichage du contenu
  • les métadonnées sur les auteurs…

Elementor pro construire un thème entièrement

Vous disposerez de beaucoup plus de widgets pour construire votre contenu

Elementor Pro ajoute un grand nombre de nouveaux widgets. En plus de vous donner plus de flexibilité, ceux-ci peuvent également vous aider à remplacer d’autres plugins. Par exemple, Elementor Pro dispose de widgets pour :

  • les formulaires (y compris les formulaires de contact)
  • les Sliders
  • les boutons de partage social
  • des compte à rebours si vous vendez des produits
  • des tableaux de prix
  • des formulaires de connexion

Vous pourrez ainsi avec la version Pro d’Elementor construire vos propres popups, intégrer de nombreux éléments pour vos pages produits Woocommerce et profiter de plusieurs options marketing pour améliorer votre taux de conversion.

Voir la liste complète des widgets Elementor Pro ci-dessous :

elementor pro widgets

Des tonnes de modèles premium

Lorsque vous achetez Elementor Pro, vous déverrouillez tous les modèles et blocs de la bibliothèque. Au-delà du simple fait d’en avoir “plus”, les modèles Pro sont généralement un peu plus détaillés et complexes. Vous aurez ainsi plus de choix et surtout des choix de pages et d’éléments plus complexes.

Au moment où nous écrivons cet article, vous aurez plus de 100 modèles à votre disposition.

Les widgets globaux vous aident à réutiliser le même élément sur plusieurs pages

Pour conclure notre aperçu d’Elementor, regardons une autre fonctionnalité de la version Pro :

Il peut arriver de vouloir réutiliser un même élément sur plusieurs pages. Par exemple, vous pouvez avoir une section de contact qui doit inclure le même contenu sur chaque page.

Les widgets globaux vous facilitent la tâche en vous permettant de le faire :

  • d’enregistrer ce widget comme modèle à réutiliser sur plusieurs pages
  • Mettre à jour automatiquement chaque instance de ce widget en l’éditant une seule fois

Prix d’Elementor Pro

La version Pro d’Elementor est vendue au prix de :

  • 49 $ pour un an de support et 1 site
  • 99 $ pour un an de support et 3 sites
  • 199$ pour un an de support et 1000 sites

Avez-vous besoin d’Elementor Pro ?

Si vous souhaitez simplement créer des pages de style basique, la version gratuite d’Elementor devrait vous suffire. En fait, Elementor offre probablement la version gratuite la plus riche en fonctionnalités de tous les créateurs de pages.

Cela étant dit, si vous souhaitez utiliser Elementor pour créer des pages avec des éléments plus complexes (ou pour créer votre site web complet dès maintenant, grâce au générateur de thèmes), Elementor Pro sera une option intéressante en raison des nombreux nouveaux éléments disponibles et de nombreuses autres fonctionnalités qui seront à votre disposition.

Il existe encore d’autres extensions qui permettent à Elementor de rendre votre site encore plus unique et personnalisable.

Comme l’équipe Elementor a permis aux développeurs d’étendre facilement ses fonctionnalités, vous pouvez également trouver des tonnes d’autres extensions Elementor utiles qui vont au-delà de l’extension officielle Elementor Pro.

Test d’Elementor : notre avis final

Les chiffres ne mentent pas quand il s’agit d’Elementor. C’est déjà l’un des principaux constructeurs de pages pour WordPress et les développeurs continuent de déployer régulièrement de nouvelles améliorations majeures.

La version gratuite d’Elementor étant très généreuse en contenu, vous devriez l’installer sur un site de test WordPress et l’essayer par vous-même. Si vous appréciez le fonctionnement de l’interface, passer à Elementor Pro vous permettra de construire l’ensemble de votre thème WordPress et de personnaliser vos pages avec de nombreux autres widgets à votre disposition et un large choix de modèles. Il s’agit véritablement d’un excellent constructeur de page et vous n’aurez plus besoin de beaucoup d’autres plugins avec la version pro d’Elementor !

Néanmoins, si votre site internet est un e-commerce, nous vous invitons à vous renseigner sur le thème Flatsome qui a également son propre constructeur de page et qui nous semble un excellent choix pour une boutique en ligne.

Points forts

  • Bibliothèque de modèles de pages prêts à l’emploi bien fournie.
  • Des tonnes de modules de contenu différents à choisir.
  • Facile à utiliser, même pour un débutant.
  • Aperçus mobiles de votre page en temps réel
  • Possible de voir l’aperçu sur mobile, tablette et PC
  • Édition de texte en ligne – modification des textes très facile.

Points faibles

  • Le style des éléments/widgets doivent être souvent travaillés avec les différentes options disponibles
  • Un constructeur de page qui fera chauffer votre souris : de nombreux clics sont nécessaires

Laisser un commentaire