Breaking News

Examen Elementor : Regard Honnête Et Complet Sur Ce Qu’il Offre En 2023

Envisagez-vous d’utiliser Elementor pour créer votre site WordPress ? Dans notre examen pratique d’Elementor, nous vous aiderons à décider s’il s’agit du bon outil pour votre site.

Examen Elementor: regard honnête et complet sur ce qu'il offre

Comme d’autres constructeurs de pages, Elementor vous offre une interface visuelle par glisser-déposer pour concevoir votre site WordPress – aucun code ni connaissance technique n’est nécessaire.

Mais Elementor est bien plus qu’un simple plugin de création de pages. C’est en grande partie pour cette raison qu’il est devenu le plugin de création WordPress le plus populaire.

Il regorge de fonctionnalités avancées telles qu’un générateur de thèmes, un générateur de fenêtres contextuelles, un générateur WooCommerce, une prise en charge de contenu dynamique, etc. Désormais, il propose même sa propre solution de site Web hébergé dans le cloud qui gère l’hébergement pour vous afin que vous puissiez vous concentrer uniquement sur la création de votre site sans vous soucier des détails techniques.

Il y a beaucoup à couvrir, alors allons-y !

Table des matières

🤔 Examen d’Elementor : à qui s’adresse Elementor ?

Examen des éléments

Avant d’approfondir cet examen d’Elementor, je veux commencer par parler des types de personnes qui peuvent bénéficier le plus d’ Elementor .

L’une des raisons pour lesquelles je pense qu’Elementor a connu un tel succès est qu’il offre quelque chose pour tout le monde :

  • Utilisateurs occasionnels – vous obtenez un contrôle total sur la conception de votre site Web sans avoir besoin de connaissances techniques. Vous pouvez utiliser une interface visuelle par glisser-déposer pour tout et il existe de nombreux modèles à utiliser comme point de départ.
  • Marketeurs – Elementor inclut une fonctionnalité dédiée pour créer des pages de destination distinctes. Vous bénéficiez également de fonctionnalités telles qu’un widget de formulaire ( avec des intégrations telles que Zapier ) et un générateur de popup flexible. C’est un excellent moyen de créer et d’itérer des pages de destination sans avoir à faire appel à un développeur.
  • Indépendants/agences créant des sites clients – Elementor vous permet d’accélérer vos flux de travail et de fournir de meilleurs sites Web aux clients. Le générateur de thème et la prise en charge du contenu dynamique vous permettent même de créer des sites de contenu personnalisés et des magasins WooCommerce selon vos besoins.

Cela ne veut pas dire que ce sont les seules personnes qui peuvent bénéficier d’Elementor. J’essaie simplement de montrer qu’Elementor peut être utile pour de nombreux types d’utilisateurs différents.

⚙️ Fonctionnement de l’interface Elementor

Avant d’approfondir certaines des fonctionnalités notables d’Elementor, je souhaite vous donner un aperçu rapide du fonctionnement de l’interface Elementor.

Je ne passerai pas trop de temps ici car vous pouvez comprendre tout cela en installant la version gratuite d’Elementor et en jouant ( ce que je recommande de faire ), mais je pense qu’il est utile d’établir la fonctionnalité de base avant d’aller plus loin.

Présentation de l’interface

Elementor offre une interface visuelle par glisser-déposer. Cela signifie exactement à quoi cela ressemble – vous verrez exactement à quoi ressemble votre conception pendant que vous la construisez et vous pouvez ajuster les choses en utilisant le glisser-déposer. Pour le texte, vous pouvez simplement cliquer et taper sur la page comme n’importe quel éditeur de texte. Pour les autres paramètres, vous obtiendrez une barre latérale.

Voici à quoi ressemble l’ouverture de l’interface Elementor :

  1. Cette barre latérale est l’endroit où vous pouvez ajouter de nouveaux widgets ou modifier les paramètres d’une section, d’une colonne ou d’un widget.
  2. Il s’agit de l’aperçu visuel de votre conception (et du reste de votre site). Il n’y a rien ici pour le moment – vous verrez un meilleur exemple dans une seconde .
  3. Cela vous permet d’ajouter une nouvelle section (ligne) ou d’insérer un modèle.
  4. Ces options vous permettent d’annuler/rétablir, de modifier les modes d’édition réactifs, etc.
  5. Cela vous permet d’accéder à certains paramètres au niveau de la page.
L'interface Elementor

Voici à quoi ressemble l’ouverture des paramètres d’un widget dans un design complet :

Paramètres des widgets

Si vous souhaitez un aperçu en plein écran, vous pouvez appuyer sur une bascule pour masquer rapidement la barre latérale.

Autres options d’interface utiles

L’une des choses que j’aime chez Elementor, c’est qu’il inclut de nombreuses améliorations de l’interface pour vous aider à travailler plus efficacement.

Tout d’abord, vous bénéficiez d’une prise en charge du clic droit, qui vous permet de dupliquer facilement des éléments, de copier/coller du contenu ou même simplement des paramètres, et plus encore.

Vous pouvez également ouvrir le mode navigateur pour avoir un aperçu de haut niveau de votre conception, y compris la possibilité d’ajouter des noms aux sections pour vous aider à rester organisé :

Options d'interface

Pour passer d’une conception à l’autre ou d’une zone de paramètres à l’autre, vous disposez d’un outil “Finder” sympa qui vous permet de trouver et d’accéder à peu près à tout sur votre site.

Dans l’ensemble, je pense que l’interface Elementor facilite le travail efficace et la création de conceptions personnalisées sans code.

🔥 Explorer sept fonctionnalités clés d’Elementor

Maintenant que vous savez comment fonctionne l’interface Elementor en général, je souhaite approfondir certaines des fonctionnalités les plus remarquables d’ Elementor .

Toutes ces fonctionnalités sont basées sur la même interface visuelle par glisser-déposer. Ainsi, que vous conceviez un article de blog, une fenêtre contextuelle ou un modèle de thème, vous utiliserez la même interface de base.

1. Conception réactive

Toutes les conceptions que vous créez avec Elementor sont réactives par défaut, ce qui signifie qu’elles s’adapteront automatiquement à différents appareils tels que les ordinateurs de bureau, les tablettes et les téléphones mobiles.

Cependant, vous pouvez avoir des situations où vous souhaitez adapter votre conception en fonction de l’appareil d’un utilisateur. Par exemple, vous pouvez modifier la taille du texte ou masquer une image pour les visiteurs mobiles.

Pour ce faire, Elementor fait quelques choses :

  1. Vous pouvez activer un aperçu réactif dans l’éditeur.
  2. De nombreux paramètres incluent une icône de contrôle réactif qui vous permet d’ajuster ce paramètre pour des appareils spécifiques au lieu de tous les visiteurs.
  3. Il existe une option dans l’ onglet Avancé pour masquer le contenu de certains appareils.
Conception réactive

À partir de 2023, Elementor vous permet également de définir vos propres points d’arrêt réactifs personnalisés si nécessaire.

2. Des tonnes d’options de conception et de style

Un autre détail remarquable d’Elementor est qu’il vous offre de nombreuses options de conception , en particulier avec Elementor Pro.

Vous obtenez plus d’options de conception intégrées que la plupart des autres constructeurs, Divi Builder étant l’un des rares constructeurs pouvant correspondre à la flexibilité de conception d’Elementor.

Vous pouvez contrôler les couleurs, la typographie, l’espacement, etc. Avec Elementor Pro, vous avez également accès à un positionnement personnalisé, à des effets de mouvement accrocheurs et à d’autres options pour créer des conceptions uniques.

3. Couleurs globales et typographie

Une autre fonctionnalité utile d’Elementor est les couleurs globales . Ceux-ci vous permettent de définir vos couleurs et votre typographie « par défaut » au niveau du site. Vos conceptions utiliseront automatiquement ces choix pour gagner du temps. 

Mais voici la partie vraiment utile :

Si jamais vous mettez à jour les paramètres de votre site global, ces modifications s’appliqueront automatiquement à chaque conception où vous avez utilisé la valeur par défaut, ce qui vous évite d’avoir à mettre à jour manuellement chaque conception.

Si vous êtes familier avec CSS, vous pouvez les considérer comme des variables CSS .

Couleurs globales

Bien sûr, vous pouvez toujours remplacer ces valeurs par défaut si nécessaire, de sorte que vous n’êtes pas bloqué.

4. Générateur de formulaires + intégrations

Avec Elementor Pro, vous avez accès à un widget de formulaire, qui est essentiellement un générateur de formulaires que vous pouvez utiliser à partir d’Elementor.

Vous pouvez créer des formulaires personnalisés avec autant de champs que nécessaire. Vous pouvez également configurer des actions après la soumission, telles que l’envoi d’un e-mail ou l’affichage d’un message de confirmation. Ou, vous pouvez intégrer vos formulaires avec des services de marketing par e-mail et des CRM populaires, ainsi qu’avec Zapier.

Pour la plupart des gens, cela élimine complètement le besoin d’utiliser un plugin de formulaire WordPress séparé . Cela fonctionne très bien pour les formulaires de contact, les formulaires de génération de leads, etc.

Widget de formulaire Elementor

Cependant, si vous avez besoin de formulaires plus avancés avec une logique conditionnelle, des calculs, etc., vous aurez toujours besoin d’un plugin de formulaire séparé. Heureusement, de nombreux plugins de formulaire proposent des widgets Elementor dédiés ( ou vous pouvez trouver des extensions tierces qui le font – plus sur celles-ci plus tard ).

5. Générateur de thèmes

Avec le constructeur Elementor standard, vous pouvez créer un design unique pour un seul article ou une seule page. Mais avec Elementor Theme Builder, vous pouvez concevoir vos modèles de thème réels, notamment :

  • Entête
  • Bas de page
  • Unique ( le modèle qui rend un seul article ou page de blog )
  • Archive ( le modèle qui répertorie les articles de votre blog )

Essentiellement, cela remplace complètement la nécessité de choisir un thème car vous pouvez concevoir chaque partie de votre thème à l’aide de l’interface visuelle d’Elementor.

Examen du générateur de thèmes Elementor

Par exemple, vous pouvez concevoir le modèle que tous vos articles de blog utilisent automatiquement. Vous pouvez dire « y mettre le titre du message », « y mettre l’image sélectionnée », « y afficher la biographie de l’auteur », etc.

Lorsque vous publiez un article, il insère automatiquement tout le contenu de l’éditeur WordPress natif dans votre conception.

Pour ce faire, vous obtiendrez des widgets spéciaux de création de thèmes dynamiques :

Widgets thématiques

Vous pouvez également utiliser des règles conditionnelles pour appliquer différents modèles à différents contenus. Par exemple, vous pouvez utiliser un modèle pour les publications de la catégorie “Avis” et un modèle différent pour les publications de la catégorie “Actualités”.

Règles d'affichage des modèles

Si vous créez des sites de contenu personnalisés, Elementor Theme Builder vous permet également d’insérer dynamiquement du contenu dans vos conceptions à partir de champs personnalisés ou d’autres données WordPress. Cela inclut des intégrations pour les champs personnalisés avancés (ACF), les pods, l’ensemble d’outils, etc.

C’est un peu plus complexe, mais cela ouvre tout un tas de possibilités pour travailler avec les données. Vous pouvez créer des répertoires, des sites de référencement et bien plus encore en utilisant la puissance des champs personnalisés et des types de publication personnalisés :

Contenu dynamique

Si vous utilisez le générateur de thèmes, Elementor propose également son propre thème officiel Elementor Hello pour fournir une toile vierge pour vos conceptions.

6. Générateur de fenêtres contextuelles

Elementor Popup Builder vous permet de concevoir vos propres popups personnalisés à l’aide de l’interface d’Elementor (et de tous les widgets d’Elementor).

Comme vous pouvez insérer n’importe quel widget ou contenu dans la fenêtre contextuelle, vous pouvez utiliser ces fenêtres contextuelles pour à peu près n’importe quoi, des abonnements aux e-mails aux annonces, aux formulaires de contact, aux formulaires de connexion, etc.

Vous pouvez contrôler entièrement le « canevas » de votre popup, ce qui vous permet de créer différents types de popups, notamment :

  • Fenêtre contextuelle Lightbox
  • Barre de notification
  • Glissière
  • Remplissage plein écran
Générateur de popup Elementor

L’une des fonctionnalités les plus puissantes est que vous obtenez également des tonnes de règles de ciblage et de déclenchement avancées.

Règles d'affichage des popups

Pour la plupart des gens, Elementor Popup Builder peut complètement remplacer le besoin d’utiliser un plugin popup séparé ou un plugin de génération de leads .

Les seules fonctionnalités qui pourraient manquer à certains spécialistes du marketing sont le manque d’analyses intégrées et de tests A/B. Cependant, vous pouvez toujours le configurer à l’aide de Google Analytics et de Google Optimize si nécessaire – c’est juste un peu de travail supplémentaire.

7. Constructeur WooCommerce

Si vous créez une boutique WooCommerce , Elementor Pro offre une prise en charge complète de WooCommerce pour vous permettre de concevoir votre boutique à l’aide de l’interface d’Elementor.

Tout d’abord, vous obtenez une tonne de widgets WooCommerce que vous pouvez utiliser pour insérer le contenu de votre boutique dans des conceptions uniques. Par exemple, vous pouvez utiliser le widget Produits pour présenter un ou plusieurs produits :

Widgets Elementor WooCommerce

Vous pouvez également utiliser Theme Builder pour concevoir les modèles de votre boutique WooCommerce. Par exemple, vous pouvez créer vos modèles de page de produit et de boutique uniques :

Widgets de thème Elementor pour WooCommerce

Vous obtenez également les règles d’affichage conditionnel, ce qui peut être très utile car vous pouvez créer différents modèles pour différents types de produits :

Début 2022, Elementor Pro a également ajouté ses propres widgets dédiés pour le panier WooCommerce, le paiement et les pages de mon compte.

Ces widgets vous offrent des tonnes d’options pour personnaliser entièrement toutes ces pages principales, ce qui corrige ce qui était auparavant un inconvénient de l’utilisation d’Elementor pour une boutique WooCommerce :

Widget de paiement Elementor WooCommerce

Fondamentalement, à partir de 2023, Elementor Pro vous permet de concevoir chaque partie de votre magasin à l’aide de l’interface d’Elementor.

🏎️ Examen des performances et de la vitesse d’Elementor

Le compromis pour toutes les fonctionnalités d’Elementor est qu’Elementor ajoute du poids à la page. Il n’y a aucun moyen de contourner cela. Il est plus lourd que l’éditeur WordPress natif et il est également un peu plus lourd que certains des constructeurs de pages plus légers comme Beaver Builder.

Par exemple, voici un test rapide où j’ai créé un design simple avec les trois constructeurs. Voici le poids total de la page ( y compris mon thème ).

ConstructeurTaille de la pageRequêtes HTTP
Elementor (avec expériences de vitesse)170 Ko21
Éditeur de blocs natif (Gutenberg)40 Ko7
Castor Bâtisseur84 Ko12

Mais il y a aussi de bonnes nouvelles, c’est pourquoi je pense que cette discussion a besoin d’un peu de recul.

Tout d’abord, l’équipe Elementor sait que la performance est importante, elle a donc fait (et continue de faire) un bon travail pour réduire l’impact d’Elementor. Par exemple, ils simplifient l’arborescence DOM d’Elementor et ils expérimentent également le chargement dynamique des ressources afin qu’Elementor ne charge que les ressources minimales nécessaires pour chaque page.

Deuxièmement, la chose importante à comprendre ici est que vous pouvez toujours créer des sites à chargement rapide avec Elementor.

Examen du site Web Elementor Cloud: laissez Elementor gérer l’hébergement pour vous

Jusqu’à présent, je me suis concentré presque exclusivement sur Elementor en tant que plugin WordPress. Autrement dit, vous installez le plugin Elementor sur votre site WordPress existant, puis vous commencez à construire en utilisant toutes ces fonctionnalités intéressantes ci-dessus.

Mais que faire si vous n’avez pas encore de site WordPress ? Ou, que se passe-t-il si vous avez lancé un site WordPress mais que vous vous sentez totalement dépassé par son fonctionnement et sa maintenance ?

Pour ces situations, vous pourriez être intéressé par Elementor Cloud Website , qui est une offre assez unique en ce qui concerne les constructeurs WordPress.

En un mot, le site Web Elementor Cloud offre tout ce dont vous avez besoin pour passer de rien à un site WordPress fonctionnel où vous pouvez commencer à construire avec Elementor.

Autrement dit, il gère la création et l’hébergement d’un site WordPress pour vous. Il pré-installe également tous les outils Elementor afin que vous puissiez commencer à construire immédiatement.

Pensez-y un peu comme si “WordPress + Elementor” et “Squarespace” avaient un bébé. C’est une solution tout-en-un qui comprend l’hébergement et tout le reste pour un prix forfaitaire.

Dans l’ensemble, j’ai été impressionné par la facilité avec laquelle le site Web Elementor Cloud permet de démarrer. Voici un rapide examen d’Elementor Cloud sur son fonctionnement et ses performances…

Configuration et utilisation

Lorsque vous vous inscrivez, le site Web Elementor Cloud dispose d’un assistant de site Web simple pour configurer votre site WordPress.

Et c’est tout! Vous avez maintenant un site WordPress fonctionnel. Dans le cadre de la configuration, Elementor préinstallera le thème Hello et les plugins Elementor + Elementor Pro :

Écran de réussite du site Web

Votre site fonctionne comme n’importe quelle autre installation WordPress auto-hébergée, en ce sens que vous pouvez installer tous les autres plugins et thèmes que vous souhaitez.

Vous aurez également accès au tableau de bord WordPress régulier, juste avec quelques ressources supplémentaires d’Elementor :

Tableau de bord WordPress sur le site Web Elementor Cloud

Si vous souhaitez importer l’un des kits de site complet d’Elementor, vous pouvez le faire en quelques clics.

Vous obtiendrez également d’autres options dans le tableau de bord Elementor. Par exemple, vous pouvez gérer les sauvegardes de votre site ( y compris les télécharger ou les restaurer ), ajouter une protection de connexion, ajouter votre propre nom de domaine personnalisé, et plus :

Gestion d'un site sur Elementor Cloud Website

Notre Avis Elementor

Interface utilisateur d'ElementorInterface utilisateur d'Elementor

Elementor n’est plus le petit nouveau sur le bloc. Il s’agit d’un constructeur de sites Web entièrement étoffé, en constante évolution, avec de nombreux atouts dans sa manche.

Malgré une concurrence féroce, il est rapidement devenu l’un des constructeurs de pages visuels les plus populaires pour WordPress, et il continue de croître à un rythme rapide.

Depuis sa sortie à la mi-2016, Elementor a enregistré plus de 5 millions  d’installations et une impressionnante  note de 4,8 étoiles sur WordPress.org.

Les gens l’aiment clairement – mais est-ce juste la dernière mode, ou Elementor est-il vraiment le constructeur de pages ultime pour WordPress ?

Découvrons-le dans notre revue Elementor.

Le Bon, Le Mauvais Et Le Truand

Pour cet examen, j’ai lancé Elementor pour voir à quel point ce constructeur de pages se comporte bien par rapport aux alternatives populaires.

À partir de maintenant, je partagerai mes expériences d’utilisation de cet outil, ainsi que ce que j’ai aimé et ce que je n’ai pas aimé en cours de route.

Faisons cela.

Installation D’Elementor

Il n’y a rien de pire (enfin presque rien) que de vouloir tester un nouveau constructeur de pages WordPress et de rencontrer des problèmes techniques lorsque vous essayez de l’installer.

Ajouter Elementor à votre installation WordPress est aussi simple que d’ajouter n’importe quel autre bon plugin :

Installation du plugin Elementor

Si vous avez la chance de posséder la version Pro, l’installation ici est également facile. Téléchargez simplement votre fichier ZIP d’installation, téléchargez-le via l’écran “Ajouter des plugins” et c’est parti.

C’est beaucoup plus facile que le processus suivi par certains constructeurs de pages WordPress, y compris celui que j’ai dû télécharger via FTP.

Si vous n’êtes pas familier avec FTP, c’est ce que Fred Flintstone a utilisé pour télécharger ses plugins de création de pages.

NB :Elementor Pro est un “add-on” pour la version gratuite d’Elementor, c’est-à-dire que vous avez besoin de la version gratuite installée pour que la version Pro fonctionne.

L’interface Utilisateur

Avant de plonger dans le vif du sujet de l’interface utilisateur d’Elementor, nous voulons donner aux développeurs des accessoires pour un ajout innovant – le Finder d’Elementor .

Chercheur D’éléments

L’un des plus gros problèmes que la plupart des gens rencontrent avec les constructeurs de pages est que la modification d’une page ou d’une section signifie beaucoup de clics ou la nécessité de quitter manuellement le tableau de bord WordPress.

Non seulement cela prend beaucoup de temps, mais cela peut aussi être très, très frustrant.

N’ayez crainte, Elementor Finder est là.

Appuyez sur CTRL + E (ou CMD + E sur Mac) pour faire apparaître la fenêtre de recherche “Finder” :

Chercheur d'éléments

Vous pouvez également accéder au Finder depuis le menu principal d’Elementor :

Recherche d'éléments dans le menu principal

Une fois que vous avez ouvert le Finder, tapez simplement ce que vous recherchez et il vous montrera une liste des options disponibles :

Cela vous permet de passer facilement d’un paramètre à l’autre, pages, publications, fenêtres contextuelles ou sections.

Mais – et je suis vraiment pinailleur ici – cela ne vous permet pas de “trouver” des widgets.

Pourquoi Elementor ? Pourquoi!

Anyhoo, à part ça, j’adore cette nouvelle fonctionnalité.

Conseil De Pro

Si vous voulez une liste d’autres raccourcis que vous pouvez utiliser dans Elementor, utilisez Ctrl + ? sous Windows, ou CMD+ ? sur Mac.

Raccourcis d'éléments

Le Panneau Latéral Elementor

Comme avec la plupart des constructeurs de pages, le panneau latéral constitue l’essentiel de l’interface des outils.

Je pense que ce format fonctionne bien, en particulier pour les constructeurs de pages visuels, car il ne prend pas trop de place sur l’écran – ce qui est évidemment important dans ce cas.

Panneau latéral Elementor

Une bonne idée est que vous pouvez également agrandir ou réduire le panneau en le faisant glisser.

Je dois admettre que c’est quelque chose que je n’ai réalisé qu’après plusieurs heures d’utilisation du constructeur… *rougir*

La sous-traitance du panneau vous donne plus d’espace pour travailler et ne sacrifie en rien la convivialité.

Vraiment pratique.

J’ai presque l’impression qu’ils auraient pu aller plus loin et avoir les icônes d’éléments par défaut dans une liste, permettant au panneau de se rétrécir encore plus.

Cliquer sur la petite flèche sur le panneau latéral l’éjecte complètement, vous permettant de prévisualiser la page.

Bien sûr, vous ne pouvez pas modifier la page en aperçu.

comment fonctionne le panneau latéral Elementor

Cela peut sembler une si petite chose, mais la rapidité et la simplicité de pouvoir prévisualiser comme ça étaient énormes pour moi.

Conseil De Pro

Vous pouvez également appuyer sur ‘Cmd + P’ sur un Mac ou sur ‘Ctrl + P’ sur un PC pour faire glisser rapidement le panneau latéral vers l’intérieur et vers l’extérieur.

Presque tout ce que l’outil a à offrir est fait via ce panneau, alors laissez-moi vous le présenter.

En haut à gauche, vous trouverez les paramètres de la page.

Paramètres du panneau latéral Elementor

(Ne vous inquiétez pas, je vais bientôt le démonter).

En bas, vous avez plusieurs autres options :

Menu inférieur d'élémentor
  1. Paramètres
  2. Navigateur
  3. Historique des révisions (leur version de “Annuler”)
  4. Mode responsive (prévisualisation sur ordinateur, tablette ou mobile)
  5. Aperçu des modifications
  6. Ummm….enregistre ou met à jour vos modifications

Et enfin, cliquer sur l’icône de la grille dans le coin supérieur droit vous ramènera à la bibliothèque d’éléments :

Bibliothèque d'éléments Elementor

Quant à l’ajout de différents éléments à votre contenu, il suffit de les faire glisser et de les déposer de la bibliothèque directement sur la page.

Aucune plainte là-bas. Le constructeur de pages Elementor est à la hauteur du battage médiatique jusqu’à présent.

Navigateur De Section

Une autre touche agréable est la fonction “Section Navigator”. C’est une fenêtre flottante qui vous permet de passer rapidement d’une section à l’autre de votre mise en page.

Vous pouvez également cliquer avec le bouton droit de la souris sur n’importe quel élément dans le “Navigateur de section” et commencer à le modifier.

Navigateur de section Elementor

Aperçu Des Modifications

Lorsque vous mettez à jour votre mise en page, elle se met automatiquement à jour dans la fenêtre d’aperçu.

Ne pas avoir à actualiser manuellement un deuxième onglet de navigateur pour vérifier les modifications apportées à votre mise en page est une idée si simple, mais un gain de temps considérable pour les concepteurs et les spécialistes du marketing.

Je dois admettre qu’il a fallu un peu de temps pour s’habituer à l’endroit où tout se trouve, mais cela n’est prévu que lors du passage d’un autre constructeur de pages.

Dans l’ensemble, l’interface utilisateur initiale est propre et très facile à utiliser.

Options De Mise En Page Et Colonnes

Pouvoir créer des mises en page spécifiques est la raison d’être des constructeurs de pages.

Alors, comment Elementor est-il à la hauteur ?

Pour commencer à créer une mise en page, vous devez d’abord « Ajouter une nouvelle section » à partir de la zone de contenu.

Ajout d'une nouvelle section dans Elementor

(Nous couvrirons les éléments du modèle plus tard)

Cliquer sur le bouton violet “ajouter une nouvelle section” fait apparaître une petite option de mise en page.

Nouvelles options de disposition de section

Cliquez simplement avec le bouton droit sur le bouton de la colonne pour n’importe quel élément et vous aurez la possibilité d’ajouter une colonne supplémentaire.

comment ajouter une nouvelle colonne dans Elementor
Section à 3 colonnes dans Elementor

Et comme les colonnes sont contenues dans des sections, vous pouvez facilement les empiler pour créer des mises en page plus complexes.

Colonnes Elementor contenues avec des sections

Une autre fonctionnalité utile est la possibilité de créer des colonnes supplémentaires en faisant glisser et en déposant des éléments en place.

Tout ce que vous avez à faire est de faire glisser l’élément à l’aide du bouton “colonne”, et vous pouvez le presser pratiquement n’importe où.

comment ajouter une colonne supplémentaire dans Elementor

Jusqu’ici, tout va bien. Utiliser Elementor semble être une explosion.

Mais qu’en est-il du réglage de la largeur ?

Encore une fois, assez simple.

Survolez simplement un élément pour révéler la bordure , puis faites glisser le côté pour augmenter/diminuer la largeur.

Comment ajuster la largeur de colonne dans Elementor

Enfin, il y a un élément ‘Inner Section’ dans la barre latérale (qui par défaut est de 2 colonnes) si vous préférez le faire de cette façon.

Élément de section intérieure dans Elementor

Édition Et Style Forcé

Maintenant, allons un peu plus loin et parlons de l’expérience d’édition / de style.

Les versions précédentes d’Elementor avaient cette chose ennuyeuse où vous ne pouviez modifier que des éléments à partir de la barre latérale.

C’est maintenant dans un passé lointain.

Et permettez-moi de faire une note rapide ici – nous reviendrons à votre section de révision Elementor commandée dans un instant.

Je tiens à souligner qu’Elementor est l’un des meilleurs constructeurs de pages, notamment en raison des mises à jour constantes. Nous parlerons plus en détail de leur mise à jour la plus récente tout au long de cet article, mais laissez-moi vous donner un exemple : 

La mise à jour Elementor 3.0 est livrée avec de nombreuses améliorations de performances, car il s’agissait d’une grande plainte de certains clients dans le passé.

C’est ce que vous obtenez avec Elementor.

Revenons maintenant à la modification des éléments de la page.

L’édition d’éléments est désormais aussi simple que ce à quoi vous vous attendez d’un constructeur de pages aussi populaire qu’Elementor.

Par exemple, l’édition et le style de texte peuvent être effectués soit en ligne, soit à partir de la barre latérale.

édition de texte en ligne et dans la barre latérale dans Elementor

Pourquoi proposer deux façons d’atteindre le même objectif ?

Parce que les gens sont des créatures d’habitude. De cette façon, le constructeur prend en charge tous les flux de travail auxquels les gens sont habitués.

Vous pouvez également accéder aux menus ‘Style’ et ‘Avancé’ sans avoir à quitter le même onglet.

Formatage de style avancé dans elementor

De mon point de vue, je préfère de loin cette approche à l’édition de texte car je peux visualiser ma mise en page et mon texte « en direct » .

D’autres éléments – comme les images – ne peuvent être manipulés qu’à partir de la barre latérale, mais cela est parfaitement logique car vous pouvez prévisualiser vos modifications au fur et à mesure que vous les apportez.

Coiffant

Elementor mérite également des éloges supplémentaires pour ses options de style de texte.

Cela peut sembler une chose triviale, mais j’apprécie vraiment le fait qu’ils vous donnent autant de contrôle sur le fonctionnement des éléments de texte.

Vous ne disposez pas seulement d’options pour la taille de la police, le gras, l’italique et le souligné.

Non.

Elementor vous permet de modifier des éléments tels que l’espacement des lettres, la hauteur des lignes et même de définir une ombre portée pour votre texte.

D’accord, les ombres portées sont un peu 2002, mais j’ai toujours un faible pour elles.

Et puis vous devez hocher la tête en appréciant le fait qu’Elementor inclut également des options de style de texte sous la forme de modes “Blend” comme la luminosité, l’éclaircissement, l’assombrissement, etc.

Un constructeur de page gratuit qui vous donne ce niveau de contrôle sur votre typographie est pratiquement inconnu.

Je dois l’aimer.

Style Forcé

Mais il y avait des problèmes, comme pourquoi mes en-têtes étaient-ils bleus ?

En entrant dans le menu “Paramètres “, il est devenu évident qu’Elementor a ses propres options de style, ignorant complètement le style de mon thème.

Style forcé dans Elementor

Je ne sais toujours pas pourquoi Elementor vous imposerait un jeu de couleurs par défaut.

Idem pour les polices. J’aime mes polices.

Ne touchez pas aux polices, d’accord ?

Elementor a pris en compte les commentaires des utilisateurs, vous êtes donc maintenant averti que vos paramètres de thème pourraient être piratés, et vous pouvez également désactiver les schémas de couleurs par défaut d’Elementor.

Ainsi, si vous activez un thème qui reconnaît Elementor (Hestia par exemple), vous obtiendrez cette fenêtre contextuelle qui vous permettra d’empêcher Elementor de remplacer les paramètres de votre thème.

Styles par défaut des éléments

Et nous pouvons revérifier le menu “Paramètres” pour le confirmer.

Soigné!

palettes de couleurs désactivées dans Elementor

Si vous rencontrez un problème où Elementor a pris le contrôle de votre style de thème par défaut pour les polices et les couleurs, n’ayez crainte, tout n’est pas perdu !

Allez simplement dans le menu “Paramètres” et choisissez “Supprimer” pour les couleurs et les polices.

Polices globales Elementor

Et vous pouvez aller plus loin.

Dans le menu “Paramètres”, choisissez “Paramètres du tableau de bord”.

Paramètres du tableau de bord dans Elementor

Maintenant, vous n’êtes plus qu’à deux clics de souris d’arrêter le détournement de style d’Elementor dans son élan.

Paramètres de style globaux dans Elementor

Ah le drame !

Et regarde.

Je ne veux rien enlever à Elementor ici – c’est génial que vous puissiez même définir différentes couleurs/polices pour des pages individuelles – je ne suis tout simplement pas trop enthousiaste à l’idée de les définir par défaut.

Cependant, avec la dernière mise à jour d’Elementor (Elementor 3.0, publiée le 30 septembre 2020), ils ont ajouté encore plus d’options de style.

Options De Conception Globales

Dans Elementor 3.0, vous avez accès à un système de conception global.

Fondamentalement, c’est un moyen d’unir toutes vos pages sous un même parapluie de style, avec des fonctionnalités telles que les polices globales, les couleurs et quelques autres fonctionnalités.

“Paramètres du site” est le tableau de bord que vous pouvez utiliser pour trouver la plupart de ces options, et c’est une bouffée d’air frais pour les concepteurs Web utilisant Elementor.

Éléments / Widgets

Parlons donc des éléments réels (ou widgets) dans Elementor.

liste des éléments de base dans Elementor

Ce sont les petits blocs de construction que vous utilisez pour assembler votre contenu , et Elementor propose une bibliothèque généreuse parmi laquelle choisir.

Si vous avez la version Pro d’Elementor, vous aurez également accès à ces widgets supplémentaires :

Éléments Elementor Pro

Il est également agréable de voir qu’Elementor prend en charge les widgets WordPress standard , ainsi que tous les widgets tiers que vous avez peut-être installés.

Widgets WordPress dans Elementor

Dans l’ensemble, ce n’est certainement pas une mauvaise sélection mais c’est loin d’être complet.

Surtout par rapport à certains autres constructeurs de pages WordPress.

La question est, qu’est-ce qui manque?

Eh bien, il peut parfois être difficile de savoir jusqu’au moment où vous devez effectuer une action particulière.

Comment trouvez-vous des idées pour un addon pour Elementor ?

Trouvez quelque chose que vous n’aimez pas et demandez à votre développeur de créer une solution pour résoudre ce problème 🙂

Gagner Du Temps Avec Les Widgets

Lors de la création d’une mise en page complexe pour un nouveau site, il peut être très utile de déposer un groupe d’éléments pré-stylés.

Par exemple, dans Thrive Architect , je peux rapidement déposer un élément d’appel à l’action pré-stylé comme celui-ci :

Élément d'appel à l'action des pré-styles Thrive Architect

Bien sûr, le design lui-même est assez basique, mais c’est plus que suffisant pour la plupart des gens.

Et, plus important encore, il n’a fallu qu’une seconde pour tomber sur la page .

À ses débuts, Elementor avait l’habitude de lutter avec cela. Il ne comportait pas la même quantité d’éléments prédéfinis, et si nous sommes honnêtes, ce n’est pas encore tout à fait là.

En ce qui concerne les ressources ou les modèles, Elementor peut être en retard sur des concurrents comme Thrive Architect ou Divi Builder.

Oui définitivement. Elementor est un choix phénoménal, surtout si vous êtes un développeur et un concepteur Web expérimenté qui souhaite plus de contrôle sur son flux de travail.

Mais cela ne veut pas dire que c’est parfait. Nous visons un examen équitable d’Elementor, alors tenez compte du fait que Divi a une quantité incomparable de modèles de page, et Thrive Architect a des fonctionnalités et des widgets qui conviennent mieux aux spécialistes du marketing.

Il a du mal à trouver son centre d’intérêt .

On peut avoir l’impression d’essayer de satisfaire tout le monde.

Mais ça s’améliore à chaque mise à jour.

Une autre solution potentielle pour un manque perçu ou réel de modèles consiste à utiliser quelque chose comme le plugin Envato Elements .

Vous obtenez des centaines de “kits” de modèles gratuits et de blocs que vous pouvez importer directement dans Elementor pour une utilisation ultérieure.

Élément Envanto Elementor

N’oubliez pas, cependant, que cela peut avoir un impact sur le backend de votre site. Mélanger autant d’éléments provenant de nombreux plugins peut rendre votre site difficile à charger. Alors n’en faites pas trop.

Cela dit, je pense qu’Elementor couvre très bien les bases et si cela ne vous dérange pas d’installer une poignée de plugins supplémentaires, il fait un excellent travail pour gérer tout le reste.

Continuons maintenant avec notre revue Elementor.

Widgets Globaux

Comme vous pouvez vous y attendre de la part de n’importe quel constructeur de page de nos jours, Elementor vous permet de créer des “widgets” personnalisés à partir de vos éléments de contenu.

(Ceux-ci sont différents des modèles de page, que nous aborderons bientôt.)

Alors disons que j’utilise une “boîte d’icônes” et que je l’ai stylisée exactement comme je l’aime.

Widget de boîte d'icônes dans Elementor

Si je voulais l’utiliser à nouveau à l’avenir, je peux enregistrer cet élément (maintenant personnalisé) dans ma bibliothèque.

Tout ce que vous avez à faire est de faire un clic droit sur l’élément, puis de cliquer sur “Enregistrer en tant que modèle” .

Vous serez alors présenté avec une fenêtre contextuelle.

Entrez un nom, cliquez sur “Enregistrer” et votre élément personnalisé sera ajouté à votre bibliothèque.

Comment enregistrer un widget en tant que modèle dans Elementor
Éléments globaux dans elementor

L’élément que vous avez enregistré aura également une bordure jaune pour indiquer qu’il s’agit d’un widget global.

À ce stade, vous pouvez utiliser le widget global sur n’importe quelle page (ou même à nouveau, sur la même page) en accédant à l’onglet du widget global.

Liste globale des widgets Elementor

D’accord, c’est ainsi que cela fonctionne, mais soyons pratiques.

Et si vous souhaitez apporter des modifications à votre widget global ?

Eh bien, si vous cliquez sur le widget, vous remarquerez quelques éléments dans le volet de gauche.

apporter des modifications aux widgets globaux dans Elementor

Tout d’abord, le widget global est verrouillé .

Cela signifie que vous ne pouvez pas le modifier ou apporter des modifications de style comme vous le feriez avec un élément normal.

Vous pouvez déverrouiller temporairement l’élément en cliquant sur le bouton “Modifier”, ce qui appliquera vos modifications à ce widget global sur TOUTES vos pages.

Et si vous souhaitez apporter des modifications au widget sans appliquer ces modifications globalement ?

C’est là qu’intervient la “dissociation “.

Dissociation globale du widget Elementor

Cliquer sur ce bouton convertira effectivement votre widget global dans sa forme normale, “élémentaire”.

Vous remarquerez que la bordure jaune redevient bleue et que vous pouvez apporter des modifications comme vous le feriez normalement dans Elementor.

Éditeur de widget global Elementor

Et ce qui est génial avec l’utilisation de widgets globaux avec Elementor, c’est qu’ils peuvent être utilisés pratiquement n’importe où sur votre site.

Si vous n’avez plus besoin d’un certain widget, il est tout aussi facile de le supprimer.

Rendez-vous simplement sur votre tableau de bord WordPress, cliquez sur « Modèles » , « Modèles enregistrés » , puis mettez en surbrillance le widget que vous souhaitez envoyer à votre corbeille numérique.

modèles enregistrés dans Elementor

Codes Abrégés

Codes abrégés Elementor

Les shortcodes Elementor fonctionnent sur les pages, qu’elles aient été créées ou non avec Elementor.

Et il y a même un widget WordPress dédié pour eux.

Widget WordPress de la bibliothèque Elementor

En utilisant cela, vous pouvez facilement concevoir des “appels aux actions” dans Elementor, puis les afficher globalement dans votre barre latérale.

Voici un exemple de Copyblogger.

Élément global Elementor dans la barre latérale sur Copyblogger

Dans l’ensemble, Elementor gère très bien les widgets globaux.

En fait, il le fait bien mieux que certains autres constructeurs de pages “premium”.

La fonction de code court facilite le mélange d’éléments de plug-in, élargit votre ensemble d’outils et vous aide à personnaliser les pages.

Modèles De Section

Cela fait un peu suite à la fonctionnalité “Global Widgets” que nous venons de couvrir ci-dessus, mais les “Sections” fonctionnent un peu différemment.

Alors, qu’est-ce qu’un « modèle de section » exactement ?

Il s’agit essentiellement d’un conteneur, mariant des éléments individuels dans une section donnée pour vous donner le contrôle sur le groupe dans son ensemble.

Exemple de modèle de section dans Elementor

Pour m’éviter d’avoir à recréer les mêmes sections encore et encore, je peux simplement les enregistrer en tant que ‘Modèle de section’.

enregistrer en tant que modèle dans Elementor

Nous sauvegardons toute la section car mon appel à l’action est composé de plusieurs éléments individuels.

Donc, je vais juste lui donner un nom et cliquer sur “Enregistrer”.

Elementor Enregistrez votre section dans la bibliothèque

Maintenant, je peux essentiellement ajouter cette section à n’importe quelle page en quelques clics.

Cool.

Mais voici où les choses sont devenues un peu confuses.

Contrairement aux widgets globaux, les modèles de section n’apparaissent pas sous l’onglet “Global”.

éléments globaux dans Elementor

Alors, où Elementor les cache-t-il ?

Il existe deux façons d’importer des sections et, comme je l’ai découvert, elles se comportent toutes les deux très différemment :

  1. Le widget de modèles
  2. Le bouton Ajouter un modèle
comment trouver des modèles dans Elementor

La méthode du bouton “Ajouter un modèle”

  1. Cliquez sur le bouton “Ajouter un modèle” dans l’espace de travail principal.
  2. Cliquez sur l’onglet “Mes modèles”
  3. Choisissez votre modèle
  4. Cliquez sur ‘Insérer’
insertion de modèles enregistrés dans Elementor

Vous allez maintenant voir tous les modèles que vous avez enregistrés dans Elementor, y compris les modèles de “Section”.

Cliquez sur ‘Insérer’ et la section apparaîtra sur votre page. Aussi simple que cela.

Une note rapide ici est que si vous pouvez accidentellement importer les paramètres de document du modèle.

Ou, en termes simples, vous allez accidentellement importer beaucoup de crasse qui pourrait (et va probablement) gâcher votre mise en page.

Mais Elementor vous en avertit à l’avance :

Importer les paramètres du document dans Elementor

L’avantage d’ajouter une section de cette façon est que vous pouvez immédiatement y apporter des modifications avant de l’enregistrer à nouveau.

modèle d'édition dans Elementor

Tout est assez simple, tout fonctionne comme on peut s’y attendre.

La méthode ‘Template Widget’

Cela m’amène à notre deuxième option.

Curieusement, cela ne fonctionne pas de la même manière que la fonction “Ajouter un modèle”.

Cette fois, nous allons insérer le modèle de section à l’aide du ‘widget Modèle’ du panneau latéral.

Widget de modèle dans Elementor

Comme pour tout autre widget Elementor, vous devez d’abord le faire glisser et le déposer sur la page.

Après cela, il vous demandera de sélectionner votre modèle enregistré.

Dans ce cas, nous recherchons notre modèle de section enregistré .

Voici maintenant une bizarrerie aléatoire – le widget de modèle ne vous montre pas de liste de modèles de section tant que vous n’avez pas tapé quelque chose dans le champ de recherche :

Widget de modèle dans Elementor

Vous devez “Entrer 1 ou plusieurs caractères” pour que quoi que ce soit apparaisse ici.

Recherche de widget de modèle dans Elementor

C’est un choix UX assez bizarre du point de vue de l’utilisateur.

Évidemment, si vous avez des centaines de sections enregistrées, cela a du sens.

Mais même dans ce cas, si vous ne vous souvenez pas du nom de votre section enregistrée, vous devrez quitter Elementor, accéder à votre tableau de bord et trouver le nom de la section enregistrée sous “Modèles”.

Le modèle de section se chargera… mais c’est là que les choses deviennent un peu déroutantes.

Cette fois, les modèles de section sont traités comme un seul bloc , donc pour apporter des modifications, il faut cliquer sur le bouton “Modifier le modèle”.

Modification du bloc de modèle dans Elementor

Et une fois que vous avez cliqué sur “Modifier le modèle”, la section s’ouvre dans un éditeur séparé dans un nouvel onglet du navigateur.

C’est ici que vous devez apporter les modifications souhaitées, puis enregistrer la section du modèle.

Non seulement cela, mais tous les modèles importés à l’aide de «l’élément de modèle» sont automatiquement considérés comme «globaux» .

Mais – et c’est un gros MAIS – contrairement aux widgets globaux, ces modèles ne peuvent pas être dissociés .

Il m’a fallu un certain temps pour comprendre cela car Elementor ne m’a donné aucune indication que ceux-ci seraient traités différemment.

Très perturbant.

Voici donc l’essentiel :

Si vous voulez une section statique et non liée, vous devrez utiliser le bouton “Ajouter un modèle”.

Sinon, utilisez le widget de modèle.

Modèles De Pages

Qu’est-ce qu’un constructeur de page sans quelques modèles de page entière, hein ?

Encore une fois, il existe deux façons de charger un modèle de page de page dans Elementor.

  1. À partir du bouton “Ajouter un modèle” dans l’espace de travail principal
  2. Depuis le widget “Modèle” dans la barre latérale
ajouter des modèles dans Elementor

Les modèles de page souffrent du même problème que les modèles de section – l’utilisation du widget de modèle vous laisse avec un seul élément qui doit ensuite être modifié dans une fenêtre d’édition séparée pour changer quoi que ce soit.

Nous allons donc contourner cela en option.

Je suis sûr que les développeurs ont une raison de gérer les modèles de cette façon, mais je n’y comprends rien.

Elementor est livré préchargé avec un tas de modèles conçus par des professionnels, que vous pouvez utiliser immédiatement.

Pour consulter les modèles disponibles, cliquez sur le bouton “Ajouter un modèle” :

À partir de là, cliquez pour prévisualiser un modèle individuel, et si vous aimez ce que vous voyez, vous pouvez le déployer sur votre page en cliquant sur “Insérer” .

NB Une chose que j’ai remarquée lors de l’insertion d’un modèle est que si vous avez une tonne de contenu existant sur la page, le chargement peut prendre un certain temps.

Une fois le modèle chargé, vous constaterez probablement qu’il ne ressemble en rien à l’aperçu que vous avez vu.

insertion du modèle Elementor

Cela se produit car Elementor est limité aux limites de votre thème.

Fondamentalement, si votre thème dit “le contenu va ici !”, c’est là que le contenu va.

Zone de contenu Elementor

Quoi ensuite?

Afin d’utiliser correctement un modèle de page complète, vous devez d’abord disposer d’un modèle de page pleine largeur (ou vierge) avec lequel Elementor peut travailler.

Un modèle pleine largeur conserve l’en-tête et le pied de page de votre thème, tandis qu’un modèle vierge est exactement cela, vierge.

Il n’y a pas de bon ou de mauvais à utiliser, cela dépend simplement de ce que vous essayez d’accomplir.

Maintenant, je vais être direct avec toi.

Dans la première version de cette revue, j’ai lancé une diatribe épique sur le fait qu’Elementor n’avait pas cette fonctionnalité intégrée, ainsi que sur les moyens de la contourner.

Peu de temps après, devinez ce qui s’est passé ?

C’est vrai, ils sont allés l’ajouter dans .

Et même s’il est toujours amusant de supprimer une section entière de votre article, j’étais toujours ravi de voir que nous sommes tous sur la même longueur d’onde. (Sans jeu de mots.)

Pour y accéder, cliquez sur le bouton “Paramètres de la page”, puis recherchez le menu déroulant “Mise en page” :

paramètres de page dans Elementor
paramètres de mise en page dans Elementor

Vous pouvez désormais choisir entre « Pleine largeur », « Elementor Canvas » et tout autre modèle inclus avec votre thème.

Note

L’option ‘Elementor Canvas’ n’est qu’un modèle vierge. Pour une raison quelconque, ils ont décidé de devenir fantaisistes avec le nom 😛

Alors réessayons avec l’option ‘Canevas’ sélectionnée.

option de canevas dans Elementor

C’est plutôt ça, Elementor !

Maintenant que les éléments techniques sont terminés, qu’en est-il des modèles de page réels ?

Honnêtement, j’ai été assez impressionné par les dessins.

Ils sont propres, professionnels et faciles à utiliser.

Dans une itération précédente de cette revue, j’étais lyrique sur le fait qu’il y avait un bon mélange de modèles, mais qu’ils pourraient devenir sujets à une utilisation excessive.

Mais c’est seulement si :

  1. Vous faites très peu pour personnaliser le modèle pour votre propre usage
  2. Vous ne mettez jamais à niveau vers Elementor Pro

Elementor fait «l’erreur» d’essayer d’être le constructeur de pages WordPress parfait pour tout le monde sur Terre.

Ce qui signifie qu’ils ne pourront jamais satisfaire tout le monde, peu importe leurs efforts.

Bibliothèque de modèles dans Elementor

Si vous dépendez de pages de destination ou de vente prédéfinies, les modèles Elementor Pro devraient vous convenir.

Mais si, comme moi, vous êtes heureux de créer vous-même des pages de destination, vous pouvez simplement enregistrer vos propres modèles de page pour les réutiliser encore et encore.

Enfin, vous pouvez également importer les modèles d’autres personnes.

Cependant, encore un point avant de continuer avec l’examen d’Elementor. Bien que les modèles de page soient excellents et que, pour certaines personnes, les modèles de page n’aient aucune importance, Elementor a commencé à prendre du retard par rapport à ses concurrents.

Thrive Architect est destiné aux spécialistes du marketing, de sorte que leurs modèles de page de destination sont plus complexes.

Divi vient de faire sortir Elementor du parc, mettant plus de 2000 modèles de page individuels à votre disposition. 

Donc, si les modèles de page sont importants pour vous, Elementor n’est peut-être pas toujours le meilleur choix.

Réactivité

Un peu comme la plupart des constructeurs de pages aujourd’hui, Elementor est réactif par défaut, de sorte que votre conception s’adaptera automatiquement à différentes tailles d’écran.

Elementor est à la hauteur des normes du marché des constructeurs de pages permettant aux utilisateurs de prévisualiser leur site en direct, sur différentes tailles d’appareils, en appuyant simplement sur un bouton.

Et ce qui m’a encore plus surpris, c’est que vous pouvez apporter des modifications indépendantes pour chaque appareil .

Pour illustrer ce que je veux dire, j’ai deux titres ici:

Titres dans Elementor

Si je passe à l’aperçu pour “Mobile”, mes en-têtes sont plus ou moins les mêmes.

Aperçu mobile dans Elementor

Mais pour l’amour des arguments, disons que je ne suis pas satisfait de l’espacement entre eux sur les appareils mobiles

C’est vraiment facile à corriger dans Elementor.

  1. Sélectionnez l’élément que vous souhaitez ajuster
  2. Cliquez sur ‘Avancé’
  3. Ajouter une marge pour l’élément
  4. Terminé!
Modification de l'aperçu mobile dans Elementor

Et voici la vraie magie.

Lorsque je reviens à l’aperçu de mon bureau, Elementor n’a pas appliqué les mêmes modifications à la disposition de mon bureau.

titres dans Elementor

Sérieusement, comment ne pas aimer ça ?

Si vous vous êtes déjà battu avec une conception réactive et que vous avez eu du mal à rendre votre contenu beau sur n’importe quel appareil, cela change vraiment la donne .

Conseil De Pro

Vous pouvez également appuyer sur ‘Cmd + Shift + M’ sur un Mac ou ‘Ctrl + Shift + M’ sur un PC pour parcourir les aperçus de l’appareil.

Mais les gars… c’est encore mieux.

Non seulement vous pouvez contrôler le style de différents appareils, mais vous pouvez également masquer complètement l’élément .

paramètres réactifs dans Elementor

ET cela ne se limite pas à des éléments uniques, cela fonctionne également avec des sections.

Bien que ce degré de contrôle sur votre page soit également présent dans d’autres constructeurs de pages, Elementor a été le premier à le réaliser, et il continue de fonctionner avec l’un des moyens les plus simples d’effectuer une édition réactive.

Générateur De Thème

Vous savez quand vous trouvez un thème que vous aimez vraiment, mais que vous devez encore en modifier certains aspects pour qu’il soit parfait ?

Surtout l’en-tête ou le pied de page, car ils ne ressemblent jamais vraiment à ce que vous voulez.

Et si… il y avait une sorte d’outil qui vous permettrait de créer des en-têtes, des pieds de page et d’autres éléments de mise en page personnalisés ?

Et si vous pouviez ensuite les déployer sur l’ensemble de votre site en quelques clics de souris ?

Oui, oui, je suis en train de parler d’ Elementor Theme Builder .

Alors, comment ça marche?

Comme d’habitude, Elementor reste simple et agréable – vous le lancez depuis votre tableau de bord WordPress :

Générateur de thème Elementor

Ensuite, il vous suffit de cliquer sur “Ajouter un nouveau”, de choisir un type de modèle et de cliquer sur “Créer un modèle”.

Pour les besoins de cet examen, nous allons créer un nouvel en-tête.

création d'un type de modèle d'en-tête dans Elementor

Vous pouvez ensuite choisir de créer votre propre en-tête à partir de zéro ou d’utiliser l’un des modèles d’en-tête par défaut pratiques que vous pouvez ensuite redéfinir à votre guise.

modèles d'en-tête dans Elementor

Et en quelques clics de souris, vous pouvez créer un logo qui vous ressemble davantage.

modèle d'en-tête modifié dans Elementor

Ensuite, tout ce que vous avez à faire est de cliquer sur “Publier” et d’utiliser la fonction “Ajouter une condition” pour indiquer à Elementor où vous souhaitez déployer votre nouvel en-tête :

Hey presto – votre nouvel en-tête est publié sur chaque page de votre site.

Vous pouvez suivre exactement le même processus pour créer un nouveau pied de page élégant pour l’ensemble de votre site.

Et si vous faites une erreur, vous pouvez toujours sauvegarder et modifier les “Conditions d’affichage” de l’en-tête.

Ainsi, vous pouvez désormais adapter n’importe quel thème à votre volonté de conception.

Mais ça va mieux. Avec la nouvelle mise à jour, Elementor 3.0, le générateur de thèmes vous offre une tonne d’options de personnalisation supplémentaires en rendant l’intégralité du site disponible dans un seul tableau de bord.

Avec le nouveau générateur de thèmes, vous pouvez apporter des modifications avancées à :

  • En-têtes
  • Pieds de page
  • pages
  • Des postes
  • Fiches produits
  • Pages d’erreur

Et bien plus encore, selon ce dont vous avez besoin. C’est une grosse mise à jour pour un outil déjà puissant, et le contrôle supplémentaire qu’il donne à l’utilisateur régulier est remarquable.

Certainement un plus dans notre revue Elementor.

C’est plutôt cool, Elementor. Bien fait.

Eh bien, nous avons assez bien chronométré la mise à jour de cette revue, car Elementor a récemment déployé son constructeur de fenêtres contextuelles.

Yay!

Remarque : ceci n’est disponible que dans la version Pro.

C’est une excellente initiative de leur part pour plusieurs raisons :

1. Cela montre qu’ils écoutent les demandes de fonctionnalités des clients
2. Vous n’aurez plus besoin d’un plugin séparé pour créer des popups

Alors, comment l’utilisez-vous?

Vous supposeriez que cette fonctionnalité serait disponible sous forme de widget, mais vous devez revenir au tableau de bord WordPress pour la trouver… sous les modèles.

modèles de popup dans Elementor

Maintenant, la chose étrange est que vous démarrez le processus de création de popup à partir du tableau de bord WordPress au lieu d’Elementor… mais vous modifiez le popup depuis l’espace de travail Elementor normal.

comment ajouter un nouveau popup dans Elementor
comment créer un nouveau popup dans Elementor

Il semble juste qu’il serait plus logique de l’intégrer dans l’interface elle-même, non ?

Bien sûr, le raisonnement derrière l’emplacement du générateur de popup est probablement basé sur la fréquence à laquelle le développeur Web moyen crée un popup ?

Une fois par semaine peut-être ?

Et vous pouvez toujours utiliser la nouvelle fonctionnalité « Finder » pour revenir au tableau de bord lorsque vous en avez besoin.

Mais je m’égare.

options pour afficher les popups dans Elementor

Il existe des dizaines de modèles de popup différents parmi lesquels choisir , avec quelque chose qui convient à presque tout le monde, y compris les types de spécialistes du marketing.

Une bonne idée est que vous pouvez choisir la catégorie de popup que vous souhaitez dans un menu déroulant :

  • Barre inférieure
  • Classique
  • Voler dans
  • Plein écran
  • Bonjour Bar
  • Faites glisser

Cliquez simplement sur le modèle de votre choix, puis cliquez sur le bouton vert “Insérer” comme illustré ici :

comment insérer une fenêtre contextuelle dans Elementor

Une autre option consiste à fermer la fenêtre de la bibliothèque et vous êtes ensuite amené directement à l’éditeur Elementor.

À partir de là, vous pouvez concevoir votre propre popup à partir de zéro, si vous le souhaitez vraiment :

Concevoir une fenêtre contextuelle à partir de zéro dans Elementor

Vous obtenez un nombre vertigineux d’options de conception qui vous permettent de modifier non seulement le contenu de la fenêtre contextuelle, mais également ses dimensions, sa forme, sa palette de couleurs, etc., etc.

pop-up dans Elementor

Certaines fonctionnalités très intéressantes de l’onglet “Avancé” incluent la possibilité d’empêcher les visiteurs de fermer la fenêtre contextuelle avec la touche d’échappement et de désactiver le défilement de la page jusqu’à ce que vous interagissiez avec la fenêtre contextuelle.

Paramètres contextuels dans Elementor

Cela fait appel au tout petit peu de Sith en moi, mais j’espère que ces fonctionnalités ne sont pas abusées.

Après tout, certaines personnes sont plus remplies de Sith que d’autres. *toux*

Vous obtenez également des dizaines d’animations d’entrée avec lesquelles jouer sous l’onglet principal des paramètres contextuels – “Lightspeed” est mon préféré actuel.

Paramètres d'animation contextuelle dans Elementor

Une fois que vous êtes satisfait de la mise en page de votre popup, vous pouvez cliquer sur “Publier”.

C’est ici que vous découvrirez les différents paramètres permettant de contrôler le comportement de votre nouvelle création :

Conditions – vous choisissez où vous voulez que la fenêtre contextuelle apparaisse, par exemple une page par rapport à l’ensemble de votre site. Vous pouvez également définir plusieurs conditions pour la même fenêtre contextuelle.

Déclencheurs – c’est ce qui provoque le déclenchement de la fenêtre contextuelle en premier lieu. Tous les suspects habituels sont couverts, y compris “au défilement”, “au clic” et “à l’intention de sortie de la page”, entre autres.

Règles avancées – a des paramètres pour couvrir des choses comme afficher la fenêtre contextuelle uniquement après que votre visiteur a lu x nombre de pages, ou a visité votre site x nombre de fois, par exemple.

Paramètres avancés contextuels dans Elementor

Intégration de répondeur automatique ?

Ainsi, vous pouvez créer des popups étonnants et les configurer pour qu’ils se déclenchent de dizaines de manières différentes.

Dans quelle mesure le constructeur de popup s’intègre-t-il avec MailChimp, GetResponse ou Aweber ?

Idéalement, ce serait une affaire pointer-cliquer.

Mais ce n’est pas.

Oui, vous pouvez intégrer n’importe lequel des répondeurs automatiques ci-dessus avec la fenêtre contextuelle… il vous suffit d’obtenir une clé API, puis de déterminer les éléments de formulaire de votre fenêtre contextuelle que vous devez modifier pour que cela fonctionne.

Ou bien vous pouvez utiliser un plugin comme Mailoptin , bien que je ne l’aie pas testé personnellement. Il vient juste d’être recommandé par les gentils gens d’Elementor, et je leur fais confiance 🙂

Ce serait bien d’avoir une fonctionnalité de répondeur automatique directement dans Elementor car plus de plugins = plus de risques que les choses tournent mal.

Les Champs Personnalisés

D’accord, nous savons que c’est un pur territoire de nerd mais nous devons le couvrir.

Pourquoi?

Parce qu’Elementor rend la gestion de ces choses super facile.

Et si vous êtes même un peu intéressé par le commerce électronique, vous devez en savoir un peu plus sur le fonctionnement des données dynamiques et des champs personnalisés.

Cela est également parfaitement logique si vous créez des sites affiliés, et vous comprendrez pourquoi lorsque nous verrons comment vous utilisez réellement des champs personnalisés et des données dynamiques dans ce générateur de pages.

Une fois que vous avez installé les deux plugins ci-dessus, il est temps de créer vos types de publication personnalisés.

Mais attendez… que sont les types de publication personnalisés ?

Ce sont essentiellement des types de messages qui ne correspondent pas à votre mise en page standard.

Des exemples typiques de cela seraient les pages de produits d’un magasin de commerce électronique, ou peut-être le portefeuille d’un artiste qui doit inclure les prix et d’autres informations.

Ce sont les types de messages pour lesquels vous devez ajouter des informations supplémentaires d’une manière qu’une installation standard de WordPress ne prend pas en charge.

Alors, allons-y et configurons des types de publication personnalisés pour Dave’s Bike Emporium.

Nous le faisons à partir du tableau de bord WordPress, en utilisant le plugin Customer Post Type UI.

type de publication personnalisé dans Elementor

Une fois que vous avez ajouté un nouveau type de publication, vous verrez que vous avez une nouvelle option de menu dans votre tableau de bord WordPress.

Dans cet exemple, c’est “Vélos ; parce que… eh bien….Dave vend des vélos.

option de menu après l'ajout d'un type de publication personnalisé dans Elementor

Ensuite, nous devons ajouter une taxonomie pour nos publications personnalisées.

Une taxonomie est essentiellement un moyen de regrouper des éléments de données similaires en un seul endroit.

Pour cela, nous appelons notre taxonomie “biketype” .

Nous devons également l’attacher à notre type de message personnalisé “Vélos”.

taxonomie de publication personnalisée dans Elementor

Nous devons maintenant ajouter différentes sous-catégories (Nouveaux types de vélos) dans notre structure de publication personnalisée :

sous-catégories pour le type de publication personnalisé dans Elementor

D’accord, c’est le genre de message personnalisé qui est pris en charge, mais comment ajoutons-nous les détails du produit ?

C’est là que les champs personnalisés avancés (ACF) entrent en jeu.

Quand allons-nous savoir comment utiliser ce matériel dans Elementor ?

Patience Padawan….patience.

Voici les champs personnalisés que nous avons créés en ajoutant de nouveaux “groupes de champs” dans ACF :

comment créer des champs personnalisés dans Elementor

L’astérisque rouge à côté de chaque “Libellé” signifie qu’il s’agit d’un champ obligatoire, juste au cas où vous vous poseriez la question.

Désormais, lorsque vous cliquez sur “Ajouter un nouveau” sous votre type de publication personnalisé “Vélos”, vous obtenez cet écran :

exemple de données de type de publication personnalisées dans Elementor

Une fois que vous avez ajouté des exemples de données ici, il est temps de commencer à obtenir et de créer un modèle de publication unique dans Elementor.

Remarque : Vous faites cela à partir de « Modèles » sur votre tableau de bord, puis de « Ajouter un nouveau ».

Vous pouvez choisir d’utiliser l’un des modèles élégants d’Elementor ou de faire cavalier seul avec une mise en page pratique.

Nous avons choisi l’approche manuelle car nous avions déjà conçu un en-tête de base pour Dave’s Bike Emporium plus tôt.

Le premier élément de contenu dynamique que nous ajoutons à notre page de modèle est une image d’arrière-plan.

Pour ce faire, cliquez sur la section sur laquelle nous voulons travailler et accédez à l’onglet “Style”.

De là, nous cliquons sur le type “Arrière-plan”, puis sur le bouton de données “Dynamique”.

Nous ajoutons également un widget dynamique “Titre de publication” de la catégorie de widgets “Unique” – ceux-ci étaient appelés “Éléments de thème” jusqu’à ce qu’une mise à jour récente change cela.

En fait, si vous n’avez pas utilisé Elementor depuis quelques mois, vous pourriez vous sentir un peu perdu.

Petit reproche, mais voilà.

L’ajout du widget ‘Post Title’ insère automatiquement le nom du premier vélo de nos types de messages personnalisés – le “Hustle 2000”.

Cette fin de choses fonctionne plutôt bien.

Mais qu’en est-il du style d’autres parties de votre mise en page avec des données dynamiques ?

Ajoutons une boîte à icônes, puis utilisons des champs personnalisés pour y faire glisser des données.

Une fonctionnalité que j’ai vraiment appréciée est la possibilité de prévisualiser votre conception finale avec différentes données avant d’appuyer sur le bouton de publication.

De cette façon, vous pouvez tester que votre modèle fonctionne pour chacun de vos articles/produits/éléments de portefeuille personnalisés, etc.

Enfin, cliquez sur “Publier” lorsque vous êtes prêt, puis choisissez l’endroit où vous souhaitez appliquer le modèle, c’est-à-dire l’ensemble de votre site par rapport à certains types de publications ou de pages.

Alors, dans quelle mesure Elementor gère-t-il les types de publication personnalisés, les champs personnalisés et les données dynamiques ?

Honnêtement, une fois que vous avez compris leur structure, la conception de ces modèles de pages est un jeu d’enfant .

Même les débutants complets pourraient avoir des pages dynamiques opérationnelles en un après-midi.

Les Inconvénients

Mais ce n’est pas parfait.

Pourquoi?

Eh bien, pour des raisons étranges, Elementor oublie certains champs de données lorsque je quitte une page.

Cela s’est produit même après la mise à jour de la page et la vérification des aperçus.

Pour être juste, cela pourrait être quelque chose qui me manque, mais si tel est le cas, nous mettrons à jour cette revue à nouveau à l’avenir.

D’autres reproches ?

La disposition du menu de données dynamiques est désordonnée et pas vraiment intuitive.

Ce que nous entendons par là, c’est que lorsque vous choisissez votre champ ACF pour déposer des données dans la page, vous devez cliquer dessus à nouveau pour choisir votre clé dans “Paramètres”.

… puis un autre sous-sous-menu pour ajouter du texte avant ou après les données dynamiques.

C’était juste maladroit, même si cela fait vraiment le travail.

Annuler Et Historique Des Révisions

D’accord, c’est un domaine que j’avais hâte de couvrir.

Nous faisons tous des erreurs lors de la conception des mises en page. Les choses bougent. D’autres choses sont supprimées.

Ou vous vous déconnectez mentalement pendant quelques secondes et faites quelque chose de catastrophiquement stupide… mais vous ne vous souvenez plus quoi.

Ça arrive.

Mais que se passe-t-il si vous voulez simplement annuler une action ?

Cela ne devrait pas être trop difficile, non ?

Dans les versions précédentes d’Elementor, l’absence de fonction “Annuler” était un gros problème pour moi.

Je commence à soupçonner que l’équipe d’Elementor parcourt les critiques de produits et trouve les défauts les plus flagrants de leur produit… puis les corrige rapidement.

Est-ce qu’ils me traquent….?

Elementor est passé de l’absence de véritable fonction “Annuler” à la version 2.5

Le .5 est que vous pouvez utiliser CTRL + Z pour annuler manuellement vos modifications les plus récentes, mais au-delà de cela, vous devez vous fier à la fonction “Historique” et à l’onglet “Révisions”.

Les deux autres options pour annuler votre “travail manuel” sont toutes deux disponibles via le bouton “Historique”.

Option d'historique dans Elementor

En cliquant sur “Historique”, vous accédez à un écran avec deux onglets distincts : “Actions” et “Révisions”.

Les actions sont les modifications que vous avez apportées au cours de votre session de conception en cours. Pour annuler la modification que vous venez d’apporter, passez votre souris dessus et vous verrez une option “revenir en arrière”.

J’aime cela parce que c’est assez similaire à ce que j’ai l’habitude de voir dans d’autres programmes de conception comme Photoshop.

historique des actions dans Elementor

Si vous cliquez sur l’onglet “Révisions”, vous verrez une liste des modifications remontant jusqu’à 30 jours.

Une fois que vous avez trouvé la révision que vous recherchez, cliquez simplement sur le bouton vert “Appliquer” .

Cela fonctionne très bien, assez juste.

Mais…

Premièrement, ce n’est pas aussi simple que de cliquer sur un bouton.

Cela nécessite de naviguer dans les menus et de prévisualiser différentes révisions avant même de trouver la bonne.

Une sorte de système de nommage logique aiderait à empêcher que cela ne soit une nuisance.

Deuxièmement – et c’est le véritable atout – cette fonctionnalité est basée sur le système de révisions de WordPress, ce qui signifie que les révisions n’apparaissent qu’à chaque fois que vous appuyez sur le bouton Enregistrer/Mettre à jour.

Fondamentalement, si vous n’avez pas enregistré vos modifications depuis un moment et que vous gâchez vraiment quelque chose, la partie est terminée.

Ce qui se traduit généralement par des déchirures de cheveux, des grincements de dents et une remise en question de votre place dans l’univers.

Conseil De Pro

Avoir un mois de révisions peut sembler une bonne idée, mais elles peuvent vraiment accaparer les ressources et ralentir votre site.

Comment?

Parce que chaque révision enregistrée ajoute plus d’encombrement et de gonflement à votre installation WordPress, augmentant la taille de la base de données qui exécute le spectacle.

Je n’ai pas testé le plugin moi-même, je vous conseille donc de faire une sauvegarde avant de l’exécuter.

Mais on me dit qu’il fait un travail solide pour nettoyer l’historique des révisions (ainsi que d’autres peluches de la base de données).

Bien que ce ne soit pas exactement un facteur décisif – et j’aime beaucoup la fonction d’historique des révisions – cela me laisse perplexe qu’un constructeur de page aussi bien pensé manque d’une approche plus visuelle pour gérer les révisions de page/site.

Pourtant, pour un examen équitable d’Elementor, ils font néanmoins du bon travail.

Copier Le Style Et Copier Coller

Si vous avez parcouru le monde des sites Web et des créateurs de pages pendant un certain temps, vous comprendrez à quel point cela peut parfois être fastidieux.

Pas le processus de conception et de mise en page – c’est à peu près toujours le côté amusant.

L’ennui commence lorsque vous devez mettre à jour le style de plusieurs éléments ou sections de votre site.

Habituellement, à cause d’un petit changement que vous avez apporté, vous devez maintenant le répercuter sur le reste de votre site.

Entrez des heures de travail pas très amusant.

Bien sûr, vous pouvez écrire une pile de CSS personnalisés pour cela… ou vous pouvez espérer une solution pointer-cliquer à la place.

Elementor a évidemment entendu les cris des développeurs souffrant de RSI lorsqu’ils ont introduit les fonctionnalités Copy Style et Copy Paste à la mi-2018.

Alors, comment fonctionnent ces fonctionnalités ?

Eh bien, disons que vous venez de créer un nouvel élément dont vous êtes plutôt satisfait :

Copier le style et copier coller

Mais vous souhaitez recréer ce style ailleurs dans votre conception.

comment copier le style de boîte d'icônes dans Elementor

Urrghhh… super, maintenant je dois entrer manuellement et mettre à jour le style de tous les autres éléments !

Ou je pourrais simplement utiliser la fonction “Copier le style” d’Elementor à la place.

Tout ce que vous avez à faire est de cliquer avec le bouton droit de la souris sur l’élément source – celui dont vous souhaitez copier le style – et de choisir “Copier”.

Ensuite, faites un clic droit dans l’élément de destination et choisissez “Coller le style”.

Si vous n’aimez pas les modifications que vous avez apportées, faites simplement un clic droit à nouveau et “Réinitialiser le style”.

comment réinitialiser le style dans Elementor

Est-ce facile ?

Encore une fois, cela peut sembler une fonctionnalité triviale pour certains, mais cela vaut son pesant d’or si et quand vous avez besoin de changer le style d’un tas d’éléments différents.

Alors, qu’en est-il de la fonctionnalité “Copier-Coller” que j’ai mentionnée plus tôt ?

Elementor propose une interface complète de type glisser-déposer, qui fonctionne vraiment très bien.

Mais que se passe-t-il si vous souhaitez simplement copier une colonne ou une section entière dans une autre partie de la page ?

Vous pouvez recréer les éléments dans une nouvelle section, puis raccourcir les choses en appliquant la fonction “Copier le style”.

Ou vous pouvez simplement copier et coller la section entière sur une nouvelle partie de votre page.

C’est exactement ce que nous allons faire.

Mettez en surbrillance la section ou l’élément que vous souhaitez copier, dans ce cas nous copions une section entière, et sélectionnez “Copier”.

Fonctionnalité de copie dans Elementor

Ensuite, faites défiler jusqu’à la partie de votre page que vous souhaitez placer et sélectionnez “Coller”

Coller la fonctionnalité dans Elementor

Travail accompli!

Belle fonction de gain de temps, n’est-ce pas ?

Fonction Copier Coller dans Elementor

Qu’est-ce que c’est ? Vous voulez pouvoir copier et coller des sections entières sur une autre page ?

Aucun problème.

Copiez simplement votre élément ou section comme nous l’avons fait dans l’exemple précédent,

Ensuite, quittez votre tableau de bord WordPress. Ouvrez la nouvelle page dans Elementor et cliquez avec le bouton droit de la souris à l’endroit où vous souhaitez placer le contenu copié.

Cette petite fonctionnalité signifie être capable d’ ajouter des sections entières à d’autres pages en quelques secondes au lieu de (potentiellement) des heures.

Nous n’allons pas devenir hyperboliques ici et décrire l’une ou l’autre de ces fonctionnalités comme des “changeurs de jeu”.

Mais une fois que vous vous serez habitué à les utiliser, vous aurez du mal à travailler autrement.

Open Source

Remontons l’ambiance. 🙂

L’une des plus grandes différences entre Elementor et les autres constructeurs de pages est sans aucun doute qu’il est open source.

Ça veut dire… euh… Google, qu’est-ce que ça veut dire ?

Open source : désigne un logiciel dont le code source original est mis à disposition gratuitement et peut être redistribué et modifié.

Étant donné que le code est disponible gratuitement, il permet aux utilisateurs de corriger les bogues, d’améliorer les fonctionnalités existantes et même d’introduire des fonctionnalités entièrement nouvelles dans le logiciel.

En conséquence, le développement est généralement plus rapide qu’avec les constructeurs de pages « internes ». Et la plupart des gens conviennent que l’open source est la voie à suivre.

Cela ouvre également les portes à des plugins tiers utiles.

Les effets de ceci sont déjà évidents lors de la recherche de « Elementor » dans le référentiel de plugins WordPress.

Ce sont tous des plugins tiers conçus pour améliorer Elementor, et beaucoup d’entre eux sont gratuits.

Alors que certains d’entre eux offrent des améliorations mineures, d’autres donnent pratiquement des super pouvoirs à Elementor.

Un bon exemple de cela est Essential Addons For Elementor .

Addons essentiels pour Elementor

Ce plugin ajoute une pile de nouveaux widgets à la bibliothèque Elementor et plus de 100 “blocs” prêts à être insérés dans vos mises en page.

Il y a beaucoup d’autres plugins Elementor que j’aimerais inclure ici, mais cela prendrait un article entier.

Hmmm….restez à l’écoute sur celui-là…peut-être.

Bien que ce soit un peu compliqué d’avoir à installer des plugins sur des plugins, j’ai toujours été fan de cette approche car elle maintient le produit de base maigre pour ceux qui n’ont pas besoin de toutes les cloches et sifflets supplémentaires.

Soutien

Je ne pense pas avoir jamais vu autant d’éloges pour le support que j’ai vu avec Elementor.

Là où cela serait normalement dû à un support de chat en direct de premier ordre, ce n’est en fait pas le cas ici.

En fait, Elementor n’offre pas de support de chat en direct .

Au lieu de cela, il a quelque chose d’encore mieux.

Une communauté active et enthousiaste d'”élémentoristes” à votre entière disposition.

J’ai fait référence à cette communauté à plusieurs reprises tout au long de la rédaction de cet avis, et je continuerai sans aucun doute à le faire aussi longtemps que j’utiliserai Elementor.

C’est incroyable de voir à quelle vitesse cette communauté s’est développée ! La dernière fois que j’ai vérifié, il y avait moins de 5 000 membres.

À l’heure actuelle, il y a plus de 30 000 Elementorists qui ont probablement déjà répondu à toutes les questions que vous pourriez avoir sur le plugin.

Si une recherche échoue, il suffit de demander dans le groupe.

C’est une communauté collaborative et vous obtiendrez généralement des réponses dans l’heure qui suit la publication.

En dehors de cela, j’ai trouvé leur chaîne YouTube super utile .

Chaîne Youtube d'Elementor

Elementor comporte de nombreuses pièces mobiles et cela peut être écrasant lorsque vous commencez à l’utiliser, en particulier si vous n’avez jamais utilisé de générateur de pages auparavant.

À mon avis, leurs vidéos sont le point de départ idéal car elles couvrent toutes les fonctionnalités de base de l’outil.

Ils ont même des listes de lecture dédiées aux débutants, comme celle de « Démarrer », et leur « Comment faire en une minute » est un autre choix solide pour les débutants.

Ils ont également une documentation détaillée , si vous êtes plutôt un lecteur.

SI pour une raison quelconque vous avez encore besoin d’aide, il existe une option VIP, mais elle n’est disponible que pour les membres Pro.

Support technique Elementor

Pour être honnête, je pense que c’est juste compte tenu de la qualité des options d’assistance gratuites à votre disposition.

Le support premium est essentiellement un système de billetterie.

Bien sûr, j’ai fait une demande pour tester sa fiabilité pour cet examen.

Comme prévu, c’était stellaire.

Dans l’ensemble, vous ne pouvez vraiment pas vous plaindre.

Et si vous le faisiez, je suis sûr qu’ils prendraient soin de vous 😉

Les autres fonctionnalités importantes de la version Pro d’Elementor incluent :

  • Un constructeur de formulaire visuel
  • Intégration WooCommerce
  • Générateur de pop-up et modèles
  • Le générateur de thème

Est-Ce Qu’Elementor Vous Convient ?

Maintenant que j’ai couvert toutes les différentes fonctionnalités et fonctions d’Elementor, en pesant le pour et le contre et en donnant mon expérience en cours de route, parlons de VOUS.

Comme pour tout outil, Elementor ne sera pas le bon choix pour tout le monde , donc je veux savoir à qui exactement ce constructeur de page convient.

Blogueurs À Petit Budget

Je vais juste sortir et le dire.

Elementor est un rêve humide pour les blogueurs à petit budget. Je veux dire, allez… c’est 100% gratuit !

Oui, il existe une version Pro.

Et oui, comme je l’ai déjà mentionné, il offre quelques ajouts utiles.

Mais ce n’est pas votre produit “freemium” habituel.

Dans la plupart des cas, le freemium signifie avoir accès à une petite part du gâteau. Une tranche truffée de restrictions lourdes et souvent ennuyeuses et/ou de publicités intrusives.

Elementor vous donne accès à la PLUPART du gâteau sans rien enlever de significatif au produit. A mon avis, c’est 100% utilisable sans passer en Pro .

Cela signifie-t-il que vous ne devriez pas mettre à jour ?

Eh bien, pas tout à fait .

Comme je l’ai dit plus tôt, la version payante présente certains avantages certains, mais ce sont des choses dont vous pouvez absolument vous passer si… eh bien…

Blogueurs Débutants

Elementor convient-il aux débutants ?

Malgré la légère courbe d’apprentissage que j’ai vécue, probablement parce que je connaissais trop bien le fonctionnement de Thrive Architect  , je pense toujours que c’est un GRAND constructeur de pages pour les débutants .

Bien sûr, si vous n’avez jamais utilisé de constructeur de page auparavant, il vous faudra un certain temps pour vous y habituer, mais je pense que la même chose peut être dite pour n’importe quel constructeur de page ayant les mêmes capacités.

Il y a eu des cas où les choses n’avaient tout simplement pas de sens — les modèles globaux et non globaux étant un bon exemple .

Mais dans la plupart des cas, une simple publication dans le groupe Facebook a rapidement dissipé ma confusion.

Dans l’ensemble, si vous êtes débutant et que vous recherchez un constructeur de pages qui vous offrira le moins de frictions avec le plus de flexibilité, Elementor est un excellent choix.

Marketing De Haut Niveau

J’en ai parlé plus tôt dans l’examen, mais je voulais en dire plus ici.

Elementor n’est pas destiné aux spécialistes du marketing, ce qui signifie qu’il lui manque quelques fonctionnalités .

Des choses sur lesquelles nous, en tant que spécialistes du marketing, pourrions compter d’un constructeur de pages.

Cela dit, Elementor a progressé à pas de géant.

Un parfait exemple en est l’intégration des répondeurs automatiques les plus populaires via API :

Intégration de l'API des répondeurs automatiques dans Elementor

Donc, si vous êtes un utilisateur de GetResponse, Drip, Mailchimp, ConvertKit (et autres), vous n’aurez pas à compter sur le piratage d’Elementor pour le faire jouer au ballon.

Un domaine sur lequel il tombe toujours est qu’il n’y a aucun moyen d’exécuter des tests A/B sur des popups ou des opt-ins .

C’est vraiment dommage étant donné que vous pouvez intégrer Elementor à la plupart des plateformes de marketing par e-mail/répondeur automatique, mais votre capacité à tirer le meilleur parti de leurs fonctionnalités est limitée.

Mais ce sur quoi je voudrais me concentrer ici, ce sont les choses positives.

Oui, Elementor a des défauts, mais c’est toujours un excellent constructeur de pages pour les spécialistes du marketing à presque tous les niveaux.

Extensions Elementor tierces : un tout nouveau monde de fonctionnalités

Jusqu’à présent dans notre examen d’Elementor, je me suis concentré exclusivement sur les fonctionnalités et les offres “essentielles” d’Elementor. C’est-à-dire des produits qui proviennent directement de l’équipe Elementor.

Cependant, l’un des avantages d’Elementor est que vous n’êtes pas limité à l’utilisation des outils du développeur. Au lieu de cela, l’équipe Elementor a créé Elementor de manière ouverte avec de nombreuses API afin que d’autres développeurs puissent s’appuyer sur Elementor.

Il y a deux grandes façons dont cela vous aide et rend Elementor plus utile :

  1. Les développeurs tiers peuvent coder des extensions spécifiquement pour Elementor. En règle générale, ceux-ci ajouteront de nouveaux widgets, modèles, options de conception, fonctionnalités, etc.
  2. Les développeurs peuvent ajouter la prise en charge d’Elementor à leur plugin, même si leur plugin n’est pas spécifiquement conçu pour Elementor. Par exemple, un plugin de don peut créer un widget Elementor spécial pour ajouter un formulaire de don à vos conceptions. Ou, un plugin d’adhésion peut ajouter une nouvelle option à Elementor qui vous permet de restreindre l’accès à une section ou à un widget.

Et voici le détail clé pour comprendre:

En raison de la popularité d’Elementor, Elementor possède de loin le plus grand marché d’extensions et le plus grand nombre d’intégrations.

Dans l’ensemble, je pense que c’est un point très fort en faveur d’Elementor par rapport aux autres constructeurs simplement parce qu’il libère tellement de flexibilité et d’utilité.

💰 Prix Elementor

Ensuite, passons en revue tout ce que vous devez savoir sur la tarification d’Elementor.

Version gratuite

Pour commencer, Elementor a une version gratuite sur WordPress.org. En termes de plugins de construction gratuits, je pense qu’Elementor est l’une des meilleures options que vous trouverez.

Non seulement le plugin principal offre déjà plus de fonctionnalités que la plupart des autres outils gratuits, mais vous pouvez également profiter du grand nombre de modules complémentaires Elementor tiers gratuits.

Néanmoins, si vous souhaitez accéder aux meilleures fonctionnalités, vous voudrez acheter Elementor Pro.

Tarification Elementor Pro

Voici les prix d’Elementor Pro – notez qu’il existe également une licence à trois sites de 99 $ qui ne figure pas dans le tableau des prix principal :

Tarification d'élément

En termes de prix pour Elementor Pro , Elementor a une dynamique un peu intéressante :

  • Si vous n’avez besoin d’un constructeur que pour un seul site ou pour un petit nombre de sites, Elementor Pro est l’un des constructeurs les moins chers que vous trouverez.
  • Si vous souhaitez créer plus de 25 sites avec Elementor Pro, c’est l’un des constructeurs les plus chers.

Parce qu’Elementor Pro ne coûte vraiment cher que lorsque vous créez plus de 25 sites, c’est quelque chose qui n’affectera vraiment que les indépendants ou les agences qui créent des sites clients.

Les agences sérieuses ne devraient avoir aucun problème avec le prix en raison de la valeur offerte par Elementor. Cependant, si vous êtes un pigiste solo avec un budget serré, il existe des alternatives Elementor moins chères.

Tarification du site Web Elementor Cloud

Une autre option pour utiliser Elementor consiste à payer pour le service de site Web Elementor Cloud .

Encore une fois, ce service vous donne accès à toutes les fonctionnalités d’Elementor Pro et inclut l’hébergement de votre site Web. 

Si vous pensez que ce service sera bénéfique pour votre site Web (comme je l’ai expliqué ci-dessus), la proposition de valeur est plutôt bonne :

Le site Web Elementor Cloud ne coûte que 99 $ par an pour un site Web, qui comprend déjà le prix des fonctionnalités Elementor Pro.

Tarification du site Web Elementor Cloud

Cela signifie que vous ne payez essentiellement que 50 USD pour la partie hébergement de l’équation, soit moins de 5 USD par mois pour héberger votre site Web sur l’infrastructure Google Cloud.

Tant que vous restez dans les limites (100 000 visiteurs par mois), je pense que c’est la meilleure offre, surtout pour les non-techniciens.

👍👎 Avantages et inconvénients d’Elementor

Alors que nous approchons de la fin de notre examen d’Elementor, récapitulons certains des avantages et des inconvénients de l’utilisation d’Elementor .

👍 Avantages

  • Fonctionnalités de premier ordre – Elementor possède l’une des meilleures listes de fonctionnalités de tous les constructeurs – constructeur de thème, constructeur de popup, widget de formulaire, constructeur WooCommerce, etc.
  • Meilleures options de conception de sa catégorie – Elementor propose également les meilleures options de conception de sa catégorie avec des tonnes d’options pour la conception réactive, l’espacement, les animations, etc.
  • Interface rapide et utile – bien que les préférences d’interface soient subjectives, je pense qu’Elementor possède l’une des meilleures interfaces du marché. Vous disposez également de nombreux outils utiles tels que la prise en charge du clic droit, le mode navigateur, le mode recherche, etc.
  • Énorme marché d’extensions tierces – cela facilite l’ajout de nouveaux widgets, fonctionnalités, options de conception, etc.
  • Prise en charge solide de WooCommerce – Elementor Pro offre une excellente prise en charge de WooCommerce. Les nouveaux widgets Panier et Paiement vous donnent également un contrôle total sur les pages de conversion de votre boutique.
  • Excellente version gratuite – la plus puissante de tous les constructeurs gratuits que j’ai utilisés.
  • Site Web Elementor Cloud – c’est une solution géniale pour les personnes qui ne veulent pas s’occuper des tracas de l’hébergement. Je pense que c’est particulièrement bien pour les utilisateurs non techniques, mais tout le monde peut en bénéficier.
  • Des prix bon marché pour quelques sites – si vous n’avez besoin que d’un constructeur pour un seul site (ou même jusqu’à ~ 25 sites), Elementor Pro est l’un des constructeurs les moins chers que vous trouverez.
  • Énorme communauté – La popularité d’Elementor facilite la recherche d’aide sur YouTube, les groupes Facebook, etc. Cela s’ajoute au support officiel que vous obtenez d’Elementor.

👎 Les moins :

  • Pas de licence illimitée et des prix élevés pour de nombreux sites – si vous êtes une agence ou un indépendant, vous n’aimerez peut-être pas les prix élevés et le fait qu’il n’y a pas de licence de site illimitée comme Divi ou Beaver Builder ( bien que la licence de 1 000 sites soit la même comme illimité pour la plupart des gens ).
  • Pas d’option à vie ou de réduction de renouvellement – de même, certaines personnes pourraient ne pas aimer qu’il n’y ait pas d’option de paiement à vie comme vous en avez avec Divi, Oxygen, Brizy et certains autres constructeurs. Il n’y a pas non plus de remise de renouvellement comme celle que vous obtenez avec Beaver Builder.
  • Considérations sur les performances – vous pouvez absolument créer des sites à chargement rapide avec Elementor, mais Elementor peut affecter les performances de votre site si vous ne faites pas attention. Assurez-vous simplement que vous mettez en œuvre les meilleures pratiques en matière de performances. L’équipe Elementor fait également du bon travail pour améliorer ses performances.

🆚 Elementor VS Divi Builder

Si vous envisagez Elementor, vous envisagez probablement également d’autres grands constructeurs de pages tels que Beaver Builder et Divi Builder .

Elementor contre Divi Builder

Voici mes réflexions sur Elementor vs Divi Builder :

Avantages Elementor :

  • Meilleure interface – bien que cela soit subjectif, je préfère personnellement de loin l’interface d’Elementor à Divi.
  • Meilleure prise en charge de WooCommerce
  • Générateur de fenêtres contextuelles
  • Meilleure prise en charge du contenu dynamique – alors que Divi prend en charge le contenu dynamique, je préfère la façon dont Elementor Pro le gère.
  • Meilleur widget de formulaire
  • Plus grand marché d’extensions tierces
  • Version gratuite – Divi n’en a pas.
  • Moins cher pour un seul site

Les avantages de Divi Builder :

  • Plus de modèles
  • Tests A/B intégrés – cela peut être intéressant pour le marketing.
  • Mode filaire – cela permet l’édition backend.
  • Moins cher pour de nombreux sites – La licence de site illimitée de Divi Builder est moins chère si vous créez plus de 3 sites.
  • Option de licence à vie

🙋 FAQ sur la révision d’Elementor

Pour terminer notre revue Elementor, passons en revue certaines FAQ que vous pourriez avoir.

L’hébergement Elementor en vaut-il la peine ?

Ça dépend. D’un point de vue monétaire, je pense que le site Web Elementor Cloud offre un excellent rapport qualité-prix. Cependant, vous devez être conscient qu’il ne vous donne pas autant d’accès/de contrôle que l’hébergement traditionnel.

Selon vos besoins, cela peut être bon ou mauvais. Pour les personnes non techniques ou les personnes qui ne veulent pas penser à l’hébergement, je pense que le site Web Elementor Cloud est une excellente idée.

Pour les utilisateurs avancés qui veulent des outils comme WP-CLI, des tâches cron, un accès à la base de données, etc., je recommanderais d’utiliser un hébergement “réel” – voici nos choix pour le meilleur hébergement WordPress .

Elementor ralentit-il votre site ?

Comme tout constructeur de page, Elementor ajoute du poids par rapport à l’utilisation de l’éditeur WordPress natif. Cependant, vous pouvez toujours créer des sites à chargement rapide avec Elementor tant que vous l’utilisez de manière intelligente et mettez en œuvre les meilleures pratiques de performance WordPress.

Elementor est-il bon pour les débutants ?

Oui, Elementor est une excellente option pour les débutants car vous pouvez tout personnaliser en utilisant le glisser-déposer au lieu d’avoir besoin de connaître le code.

Elementor est-il compatible SEO ?

Oui, Elementor est aussi convivial pour le référencement que tout autre éditeur WordPress. Assurez-vous simplement que vous utilisez un plugin WordPress SEO. Yoast SEO et Rank Math proposent tous deux des intégrations Elementor dédiées, mais tout plugin SEO devrait fonctionner correctement.

Quel est le meilleur thème à utiliser avec Elementor ?

Si vous envisagez d’utiliser les fonctionnalités de création de thèmes dans Elementor Pro, vous devez utiliser le thème gratuit Elementor Hello . Sinon, je recommande de l’associer à des thèmes comme GeneratePress , Kadence  ou Astra .

🏁 Réflexions finales sur Elementor

Dans l’ensemble, je pense qu’Elementor est le meilleur plugin de création WordPress pour la plupart des gens . 

Cela ne veut pas dire que c’est le meilleur pour chaque personne . Mais si je devais faire une recommandation par défaut pour les utilisateurs de WordPress, ce serait Elementor.

J’ai couvert ces raisons ci-dessus, mais permettez-moi de récapituler rapidement ce que je pense être les raisons les plus convaincantes de choisir Elementor :

  • Plein de fonctionnalités – Elementor Pro a tout ce dont vous avez besoin pour créer des sites Web complets et efficaces, y compris la création de thèmes, la création de fenêtres contextuelles, des formulaires, des intégrations, etc.
  • Options de conception de premier ordre – Elementor est au sommet du jeu lorsqu’il s’agit de vous offrir des tonnes d’options de conception pour créer le design exact que vous souhaitez.
  • Excellent rapport qualité-prix – la version gratuite est très performante et Elementor Pro est l’option la moins chère si vous ne construisez qu’un seul site ( ou quelques sites ). La nouvelle option Cloud Website offre également un excellent rapport qualité-prix, en particulier pour les personnes non techniques qui ne souhaitent pas s’occuper de l’hébergement.
  • Énorme communauté – parce qu’Elementor est le constructeur le plus populaire, il a une énorme communauté et de nombreuses ressources d’apprentissage. Il existe également des tonnes d’extensions et d’intégrations tierces.

Il y a des raisons pour lesquelles vous pourriez être plus heureux avec un constructeur différent, que j’ai essayé de mettre en évidence ci-dessus. Ce n’est certainement pas qu’Elementor est le seul bon plugin de construction. Par exemple, j’ai remarqué que les développeurs Web ont tendance à préférer des options comme Beaver Builder ou Oxygen.

Mais encore une fois, pour la majorité des utilisateurs de WordPress, je recommande Elementor car il fait tout au moins assez bien.

Si vous avez déjà un site WordPress, vous pouvez essayer d’installer la version gratuite, puis de passer à Elementor Pro pour plus de fonctionnalités.

Et si vous n’avez pas encore lancé votre site ( ou si vous vous sentez dépassé par la gestion de votre site ), alors je vous recommande d’envisager le service Elementor Cloud Website . Non seulement cela simplifie grandement tout, mais il offre également un excellent rapport qualité-prix car vous ne payez que 99 $ par an pour héberger votre site et accéder à toutes les fonctionnalités d’Elementor Pro.

Notez cet article s’il vous plait

0%

User Rating: Be the first one !

About deklerk

Check Also

contenu ia

Comment le contenu de l’IA peut améliorer votre référencement et les résultats de votre entreprise

À moins que vous ne viviez sur une île déserte depuis plusieurs années, vous avez …

créer un site sur shopify

Comment créer un site Web Shopify?

La propriété d’une entreprise de commerce électronique réussie n’a jamais été aussi facile qu’elle ne …

jobs étudiants

24 meilleurs jobs étudiants en ligne pour que les étudiants gagnent de l’argent

J’adorais aller à l’université, mais personne ne parle de tous les temps morts que vous …

hébergeurs web

Top 4 des meilleurs hébergeurs Web avec support WordPress rapide en français

WordPress est l’un des CMS les plus populaires pour la création de sites Web, car …

plateformes de ecommerce

14 Meilleures plateformes de commerce électronique pour créer une boutique en ligne en 2023

Posséder un site Web de commerce électronique est l’étape la plus cruciale que les entreprises doivent franchir, …

mails rémunérés

Lires des mails rémunérés: Bonne astuce pour gagner de l’argent?

L’un des moyens simples faciles, fiables et gratuits pour gagner de l’argent en ligne . Et aussi arrondir …

greenPanthera

GreenPanthera avis : Site rémunérateur fiable ou arnaque ?

Si vous avez eu à lire mes articles précédents , vous constaterez que je partage …

Maximiles

Maximiles avis : Mon avis et témoignages sur ce site rémunérateur

Sur ce blog , j’ai souvent parlé de plusieurs façons de gagner de l’argent et parmi celle-ci …

ipsos i-say

Avis Ipsos i-say (2023): Que vaut ce site de sondages rémunérés

ipsos i-say est sans doute l’un site de sondages rémunérés que vous connaissez très. Surtout pour ceux qui …

Vinted Avis (2023): Est-il le meilleur site de friperie en Europe?

En quelques années seulement , Vinted, véritable machine de guerre de la seconde main made …

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *