Comment utiliser Elementor Page Builder avec WordPress

Lorsque nous parlons des constructeurs de pages WordPress, le plus populaire et celui avec le plus grand nombre d'installations actives et la plus grande communauté est certainement Elementor. Jusqu'à présent, il y a plus de 8 millions de sites construits avec Elementor. Il est recommandé par de nombreux experts pour sa facilité d'utilisation, sa vitesse et ses énormes possibilités lors de la création de sites WordPress.

J'ai testé la version Pro d'Elementor et créé une page de destination. Il est livré avec la fonctionnalité glisser-déposer et fonctionne avec n'importe quel thème et vous pouvez utiliser tous les widgets gratuits, Pro et WordPress en même temps. Lisons cet article pour en savoir plus sur l'installation et la configuration d'Elementor avec WordPress.

Pourquoi choisir Elementor Page Builder ?

Elementor est l'un des premiers et l'un des constructeurs de pages WordPress les plus avancés du marché à l'heure actuelle. Il dispose également d'un énorme écosystème et de nombreux petits auteurs créent des modules complémentaires et des modèles utiles que vous pouvez utiliser pour réduire le temps nécessaire au résultat final.

Dans le cas d'Elementor, le résultat final peut être un site vraiment génial, bien conçu avec toutes les fonctionnalités dont vous avez besoin ou dont vous pourriez avoir besoin. Vous ne trouverez aucun type de site WordPress que vous ne pouvez pas créer en utilisant Elementor. Si vous avez besoin de fonctionnalités supplémentaires, elles peuvent être facilement implémentées avec des codes courts.

Caractéristiques de Elementor Page Builder

La version gratuite d'Elementor est livrée avec un nombre limité d'éléments, mais avec la version Pro, vous obtenez des modules complémentaires tels que QI, Ultimate Add Ons, etc. En outre, vous disposerez de nombreux éléments et modèles utiles pour créer facilement votre site. .

Il ne serait pas juste de laisser de côté le module complémentaire Crocoblock pour Gutenberg et Elementor, qui est l'un des outils préférés de la plupart des utilisateurs d'Elementor car il étend les fonctionnalités d'Elementor natif.

Elementor a divisé ses fonctionnalités en 4 catégories.

1. Widgets de base

Les widgets de base sont fournis avec la version gratuite et ils sont tout à fait suffisants pour créer un site Web époustouflant qui ne nécessite pas d'options avancées telles que la table des matières, le portfolio ou le formulaire. De plus, dans la version gratuite, vous ne pouvez pas créer de menu d'en-tête/de navigation et vous devrez peut-être trouver un thème WordPress sympa avec le menu de navigation que vous aimez.

2. Widgets professionnels

Les widgets Pro avec Elementor Pro couvrent presque tous les aspects et tous les widgets dont vous pourriez avoir besoin pour créer tout type de site Web. Ajoutez et choisissez des publications dans différentes catégories, types de publications ou répertoriez simplement les dernières, les tableaux de prix, la galerie, la boîte à rabat, les réseaux de médias sociaux faciles à intégrer, divers carrousels de médias, Lottie Widget et HotSpot (je parlerai de celui-ci plus tard).

3. Éléments du thème

Les éléments de thème sont également fournis avec Elementor Pro et ils sont importants pour créer toutes les pages de modèles et un seul modèle de publication bien sûr. Comme vous le savez, certaines pages sont remplies de manière dynamique avec du contenu tel que Catégorie, Balise, Auteur, etc.

Pour ces pages, vous devez créer un modèle en utilisant des éléments de thème. Il en va de même pour le Single Post, où vous pouvez concevoir un beau modèle pour vos messages qui sera utilisé par tous les messages sans avoir besoin de les créer à chaque fois. Ajoutez simplement le contenu comme vous en avez l'habitude et vous avez terminé.

4. Widgets WooCommerce

Et le dernier mais non le moindre, les widgets WooCommerce. Ces widgets vous permettent de créer à nouveau des éléments similaires à Theme Builder, les pages de modèles et le modèle de produit unique en utilisant facilement les éléments WooCommerce.

Prix ​​et plans d'Elementor Page Builder

Elementor Pro est livré avec 5 plans différents, tous contiennent le même constructeur de pages Elementor Pro et des fonctionnalités telles que :

• Éditeur en direct par glisser-déposer
• Conception réactive
• Plus de 90 widgets basiques et professionnels
• Plus de 300 modèles de base et pro
• Générateur de thème

Le forfait le plus bas est Essentiel pour 1 site au prix de 49 $. Avec ce plan, vous bénéficiez d'une assistance Premium, ce qui signifie que vous pouvez vous attendre à une réponse en 24h. Le prochain plan est Avancé et il couvre une licence pour 3 sites au prix de 99 $ avec le même type de support.

Le plus populaire est probablement Expert à 199 $ pour 25 sites. De plus, vous obtiendrez un profil d'expert Elementor, où vous pourrez publier vos projets terminés dans Elementor et obtenir de nouveaux clients.

Un avant le sommet est Studio pour 100 sites au prix de 499 $ et là, vous bénéficiez d'un avantage supplémentaire de l'assistance VIP, ce qui signifie que vous avez la priorité et que vos tickets recevront une réponse en 30 minutes. Il en va de même avec le plan Agence le plus cher pour 1000 sites au prix de 1000 $.

Tous les plans sont annuels et si vous vous demandez ce qui se passe avec les sites si votre abonnement expire, la réponse est que les sites auront la même apparence qu'avant, mais vous ne pourrez pas modifier ou utiliser les éléments et les modèles d'Elementro Pro.

Configuration requise pour le système/l'hébergement d'Elementor

Selon la page des exigences système d'Elementor, il devrait fonctionner même avec 128 Mo de PHP, MySQL 5.6 ou supérieur ou MariaDB 10.0 ou supérieur. En outre, il devrait fonctionner avec n'importe quel PHP 7+. À des fins de test, j'ai utilisé VultrHF avec 2 Go de mémoire PHP.

Bien sûr, vous auriez besoin de la dernière version de WordPress et de tous les autres plugins à jour.

Installer et configurer Elementor Page Builder

L'installation de la version gratuite d'Elementor est la même que pour tout autre plugin sur le référentiel de plugins WordPress, accédez à votre tableau de bord WordPress → Plugins → Ajouter un nouveau, recherchez Elementor, installez et activez le plugin.

Pour la version Pro, vous devez acheter le plan qui créera automatiquement un compte chez Elementor. Lorsque vous vous connectez, vous verrez le bouton de téléchargement pour télécharger la dernière version Pro.

Pendant que vous êtes toujours connecté au tableau de bord Elementor, connectez-vous à votre tableau de bord WordPress → Plugins → Ajouter un nouveau et sélectionnez Télécharger, parcourez le fichier téléchargé d'Elementor Pro depuis votre ordinateur, installez-le et activez-le.

Lorsque vous avez terminé dans la barre latérale gauche de votre tableau de bord WordPress, accédez à Elementor → cliquez sur Licence → cliquez sur le bouton Connecter et activer.

Lorsque vous cliquez dessus, vous êtes automatiquement redirigé vers votre tableau de bord sur Elementor pour l'activer. Cliquez sur le bouton vert Activer et vous avez terminé. Votre Elementor Pro est connecté et activé.

Après l'activation, vous verrez la confirmation que votre Elementor est actif. Cependant, si vous avez construit le site sur un domaine de staging et que vous ne souhaitez pas acheter une autre licence pour le live, vous pouvez facilement déconnecter le compte sur le staging et l'activer sur le domaine live.

Il est temps de commencer à utiliser Elementor et de créer votre site Web. Ma suggestion est d'utiliser le thème Hello d'Elementor spécialement conçu pour Elementor.

Pour ce faire, commençons par créer une page « Homepage » et éditons-la avec Elementor. Allez dans Pages → Ajouter un nouveau, nommez-le Page d'accueil et publiez-le, puis cliquez sur le bouton Modifier avec Elementor.

Sur la page Modifier, vous verrez des éléments que vous ne pouvez pas modifier car la mise en page est définie par défaut. Pour utiliser Elementor sur un canevas vide, choisissez Elementor Full Width ou Elementor Canvas en cliquant sur l'icône d'engrenage dans le coin inférieur gauche.

Avant de commencer à créer le site, assurez-vous de cliquer sur l'icône du hamburger dans le coin supérieur gauche et définissez tous les paramètres globaux nécessaires pour le reste du travail.

Les paramètres du site sont assez similaires à la configuration du thème. Ici, vous pouvez sélectionner les couleurs globales, les polices que vous utiliserez et la typographie complète du site pour chaque balise HTML.

En plus de cela, vous pouvez définir le style de bouton global, l'en-tête, le pied de page, le CSS personnalisé si nécessaire, et tout ce dont vous avez besoin pour en définir et conserver comme ça sur l'ensemble du site pour maintenir également la cohérence.

La deuxième option est Theme Builder, qui vous permet de créer des pages de modèles et des modèles de publication/produit uniques, qui seront automatiquement utilisés par la page, la publication ou le produit généré dynamiquement. Comme chaque thème WordPress doit avoir des fichiers modèles pour afficher tout ce qui précède, Elementor vous permettra de le faire sans écrire même une seule ligne de code.

La dernière option est les préférences utilisateur, où vous pouvez configurer votre environnement de travail dans Elementor, rien qui n'affecte le site lui-même mais votre interface utilisateur en tant qu'administrateur.

Pour lancer votre site, tous les widgets disponibles sont placés dans la barre latérale de gauche et tout peut être modifié visuellement et par glisser-déposer. Si vous souhaitez un moyen plus simple de le faire, vous pouvez commencer par utiliser l'un des blocs ou modèles prédéfinis en cliquant sur l'icône du dossier.

L'icône du dossier ouvrira une fenêtre contextuelle dans laquelle vous pourrez voir des blocs et des modèles prédéfinis, ainsi que ceux que vous avez enregistrés auparavant. Vous pouvez également enregistrer un bloc ou un modèle entier que vous avez créé et le réutiliser sur une autre page interne. Il est assez courant d'utiliser votre bloc enregistré pour des témoignages, un appel à l'action spécifique qui ne devrait pas être affiché sur chaque page mais sur certaines.

Il y a encore une chose que vous devez savoir lorsque vous commencez à créer un site Web sans aucune expérience préalable, il est facile à utiliser, assez intuitif et sans aucune expérience préalable en quelques jours, vous serez plus que capable de créer vous-même un beau site Web , je peux dire même à l'allure professionnelle.

Cependant, votre site doit avoir fière allure sur toutes les tailles d'appareils, et de la même manière que vous avez modifié la version de bureau, vous pouvez modifier toutes les autres tailles. Veuillez noter que les éléments et les widgets ne peuvent être ajoutés qu'à la version de bureau et vous pouvez ensuite tromper le look sur des tailles plus petites.

En outre, vous pouvez facilement définir la visibilité du widget ou de la section sur différents appareils, de sorte que vous puissiez avoir un contenu différent dans une section similaire en laissant une section visible sur un bureau mais masquée sur une tablette et un mobile. De même, un autre caché depuis un bureau mais visible sur tablette et mobile.

Pour modifier les versions mobile et tablette, cliquez sur l'icône mode réactif en bas de la barre latérale gauche, cela affichera votre site sur mobile. Et en plus, vous pouvez basculer entre différentes tailles d'écran.

Pour plus de clarté, j'ai ajouté deux sections où l'une est masquée sur mobile et tablette et l'autre section est masquée sur le bureau. Veuillez consulter l'exemple ci-dessous.

Le résultat final est sur mobile.

Et le résultat final sur le bureau n'a qu'une section mais la différente.

Performances du générateur de pages Elementor sur Cloudways

Elementor fonctionne assez bien et obtient un score de 100 sur GTMetrix et les autres outils de test affichent de très bonnes performances. Veuillez noter que je n'ai optimisé aucune image pour avoir exactement la même taille de page et les mêmes images pour tous les tests que nous avons effectués.

– Résultats d'Elementor sur GTMetrix

– Résultats d'Elementor sur Pingdom Tools

– Résultats d'Elementor sur WebPageTest

Sommaire

Si vous avez besoin d'un constructeur de pages intuitif et facile à utiliser, Elementor peut couvrir tous les aspects nécessaires pour créer un site Web agréable. Il n'est pas si difficile de créer des sites au pixel près à partir de la conception si vous avez des connaissances en CSS.

Avec l'immense communauté et des centaines de modules complémentaires et de plugins externes étendant les fonctionnalités de base d'Elementor, je ne vois aucun type de site Web qui ne peut pas être construit à l'aide d'Elementor.

Nous voyons souvent à quel point Elementor est gonflé, beaucoup de code inutile se charge, il est difficile à optimiser mais comme vous pouvez le voir à partir des tests, il semble qu'Elementor fonctionne assez bien sur Cloudways. J'ai testé la page de destination avec 25 images à l'intérieur et 7 sections + en-tête et pied de page, ce qui est supérieur à la moyenne pour la page d'accueil.

Une autre grande chose à propos d'Elementor est que la courbe d'apprentissage n'est pas raide mais assez légère et qu'en quelques minutes seulement, en utilisant des modèles ou des blocs prédéfinis, vous pouvez avoir un site Web très bien conçu et d'apparence moderne.