WooCommerce + Elementor : créons des trucs sympas

Voulez-vous peaufiner et concevoir votre site Web WordPress sans embaucher de développeur ? Bonne nouvelle : c'est tout à fait possible avec les plugins de création de pages WordPress.

Un plugin de création de page WordPress est livré avec une interface intuitive de glisser-déposer pour créer de belles pages et sites Web personnalisés. Ainsi, quels que soient vos compétences ou votre savoir-faire technique, les plugins de création de pages facilitent la conception de votre site Web idéal sans écrire une seule ligne de code.

Maintenant, si vous vous demandez quel plugin de création de page WordPress vous devriez envisager, vous êtes au bon endroit. Dans cet article, nous passerons en revue l'une des options les plus populaires : Elementor, qui est considérée comme l'étalon-or. Elementor est le deuxième plugin WordPress le plus installé avec 2 millions d'installations actives - utilisé par environ 15,9 % des sites Web WordPress.

Nous commencerons par un bref aperçu d'Elementor et examinerons plus en détail l'interface, les fonctionnalités et les prix du plugin pour vous aider à déterminer s'il s'agit du bon choix pour votre site. Allons-y!

Plugin Elementor : un bref aperçu

Elementor est un plugin visuel de création de pages WordPress par glisser-déposer qui vous permet de créer des pages Web et des publications uniques par rapport aux modèles de page standard fournis avec vos thèmes WooCommerce ou WordPress.

Il ne nécessite aucun codage et vous permet de configurer facilement les paramètres et d'organiser le contenu et les éléments de votre page avec des outils de glisser-déposer.

Commençons par l'examen du plugin en examinant le fonctionnement de l'interface Elementor.

Comprendre l'interface du plugin Elementor

Comparé à de nombreux autres plugins de création de pages, Elementor possède l'une des interfaces les plus simples et les plus transparentes. Lorsque vous lancez le plugin pour la première fois, vous arrivez sur une page comme celle-ci :

La zone grise en pointillé est votre zone de contenu. En dehors de cette zone, votre thème habituel apparaîtra, tandis que, dans la zone pointillée, vous pouvez ajouter des widgets et créer votre propre design.

Sur le côté gauche, vous verrez des widgets, qui agissent comme des blocs de construction que vous pouvez assembler pour concevoir votre page. Sous ces widgets, vous trouverez des paramètres généraux pour prévisualiser vos conceptions, annuler les modifications ou activer le mode réactif, comme indiqué dans l'image.

Voici à quel point il est simple de glisser-déposer les éléments souhaités sur la page :

Lorsque vous déposez un élément sur votre page - Elementor divise les éléments en deux structures de mise en page, donnant deux éléments structurels différents, comme indiqué ci-dessous.

Ces éléments structuraux comprennent :

• Section : balisée avec la couleur bleue.
• Colonne : se trouve à l'intérieur de la section marquée en noir. Vous pouvez ajouter autant de colonnes que nécessaire dans la section.

Une fois que vous avez déposé l'élément, vous pouvez facilement personnaliser sa disposition en ajustant la largeur et en modifiant l'espacement et la hauteur de la colonne.

De plus, vous pouvez également choisir une structure de section adaptée à vos besoins spécifiques et ajouter d'autres éléments, comme une image, une vidéo ou une icône, dans les colonnes.

Par exemple, j'ai ajouté une image et en ai choisi une dans la bibliothèque d'images Elementor par défaut, comme indiqué ci-dessous dans l'image. Vous pouvez modifier la taille et l'alignement de l'image, ajouter une légende et lier une URL appropriée.

Pour styliser davantage les éléments, les structures ou les colonnes, vous pouvez utiliser les onglets Style et Avancé dans la barre latérale. Cliquez simplement sur le contenu que vous souhaitez styliser et cliquez sur les onglets de la barre latérale pour apporter les modifications.

Vous pouvez également naviguer des onglets à la barre latérale des éléments en cliquant simplement sur l' icône carrée affichée dans le coin droit de la barre latérale.

Ainsi, Elementor est assez facile à utiliser et avec de simples options de glisser-déposer et de personnalisation faciles - vous pouvez créer le site Web de vos rêves en un rien de temps.

Maintenant, sans prendre beaucoup de temps, passons directement aux fonctionnalités du générateur de pages Elementor.

Principales fonctionnalités d'Elementor qui en font un excellent constructeur de pages pour WooCommerce

Voici quelques excellents avantages d'Elementor qui en font l'un des constructeurs de pages les plus populaires parmi les sites Web WordPress et WooCommerce.

1. Vaste bibliothèque de modèles prédéfinis

Elementor propose une large gamme de modèles. Cliquez sur l'icône Ajouter des modèles ci-dessous pour ajouter un modèle.

Choisissez parmi plus de 300 modèles de la bibliothèque de modèles Elementor et ajoutez-les à votre page en un seul clic.

Depuis la sortie d'Elementor 2.0, ces templates se présentent sous deux formats :

• Blocs : fournissez des conceptions pour des sections spécifiques au lieu d'une page entière. Par exemple, vous pouvez ajouter une section À propos de l'entreprise ou une section de contact prédéfinie à une présentation de page existante à l'aide de blocs.

• Pages - Offrez des conceptions pleine page, que vous pouvez importer en un seul clic et modifier selon vos besoins.

Vous pouvez également enregistrer certaines de vos conceptions sous forme de blocs et de modèles pour les réutiliser ultérieurement sur d'autres pages ou sites Web, ce qui rend très pratique le maintien d'une conception de modèle commune sur l'ensemble de votre site Web.

Il supprime également les tracas liés à la création d'une nouvelle conception de page à partir de zéro à chaque fois.

2. Contrôles de conception réactifs et aperçus mobiles

L'utilisation mobile augmente régulièrement chaque mois et environ 73,1 % des concepteurs de sites Web estiment qu'une conception de page non réactive est l'une des principales raisons de l'abandon d'un site Web.

Tous les designs et pages que vous créez sur Elementor sont automatiquement réactifs et ont fière allure sur les appareils mobiles. De plus, vous pouvez rapidement prévisualiser l'apparence de votre site Web sur d'autres appareils sans sortir de l'interface.

Cliquez sur le bouton Mode réactif en bas de la barre latérale et prévisualisez les versions de bureau, mobile et tablette de votre site Web en cliquant sur les boutons mis en évidence dans les images ci-dessous.

Il vous permet de personnaliser la conception de vos pages en fonction du type d'appareil et vous permet d'afficher ou de masquer certains widgets sur certains appareils. Par exemple, si la version de bureau de votre site Web a une énorme image de héros, vous pouvez éviter d'afficher cette image sur la version mobile de votre site. Vous pouvez sélectionner cette image ou toute section que vous souhaitez masquer et les masquer sur les appareils mobiles à l'aide des commandes de conception réactives d'Elementor en un seul clic.

Par conséquent, il garantit que votre site Web est 100% réactif - il a donc fière allure sur tous les appareils, y compris les ordinateurs de bureau, les tablettes et les appareils mobiles.

3. Options de personnalisation illimitées

La personnalisation est illimitée avec Elementor, et il n'y a aucune limite à la façon dont vous pouvez concevoir votre site Web et ses éléments.

Les menus Style et Avancé de l'éditeur Elementor offrent de nombreuses options de personnalisation de style. Vous pouvez styliser le contenu selon plusieurs attributs, notamment sa couleur, sa largeur, sa taille, ses filtres CSS et sa bordure.

Dans le même temps, le menu Avancé vous permet de gérer la mise en page, les effets de mouvement, l'arrière-plan, la bordure, les attributs et d'autres facteurs, comme indiqué ci-dessous.

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

En approfondissant les options de personnalisation, Elementor vous donne un contrôle détaillé sur la conception de votre mise en page, vous n'avez donc pas à faire de compromis sur la flexibilité de votre conception en raison de l'impossibilité d'écrire du code personnalisé.

Elementor simplifie le positionnement de vos sections, widgets et colonnes exactement où vous le souhaitez grâce à de nombreuses options de contrôle intuitives.

À l'aide des commandes de mise en page du menu Avancé, vous pouvez :

• Définissez manuellement la marge et le remplissage des sections, des widgets et des colonnes.
• Choisissez la largeur de la section - par défaut, pleine largeur, en ligne et personnalisée.
• Ajustez la position du widget dans la colonne - par défaut, fixe et absolue.
• Ajustez l' écart entre les colonnes et créez un espace vide pour une mise en page propre.

Ainsi, sans aucune compétence en matière de codage, vous pouvez facilement ajuster le placement de vos widgets et personnaliser les colonnes et les sections selon vos besoins.

5. Historique complet des révisions de la progression avec annulation/rétablissement des modifications

L'une des meilleures fonctionnalités d'Elementor est qu'il vous permet de prévisualiser l' historique complet de toutes les modifications que vous avez apportées, enregistrant ainsi chaque action dans l'historique.

De plus, vous pouvez facilement annuler les modifications et revenir à la version précédente si nécessaire. De plus, chaque fois que vous enregistrez une nouvelle conception, vous pouvez facilement revenir à une toute nouvelle révision si nécessaire.

6. Laisse un code propre

Si jamais vous souhaitez désactiver Elementor à l'avenir pour une raison quelconque, vous n'avez pas à vous en soucier en laissant derrière vous des tonnes de codes courts comme le Divi Builder.

Elementor laisse derrière lui un code propre, garantissant des performances et une vitesse de page optimales.

Plus de fonctionnalités Elementor

Voici quelques fonctionnalités supplémentaires du plugin de création de pages Elementor :

• Éditeur d'en-tête et de pied de page : vous pouvez facilement modifier les en-têtes et les pieds de page de votre site avec Elementor sans aucune compétence en matière de codage.
• Édition de texte en ligne : cette fonctionnalité vous permet d'éditer du texte en direct à l'écran, ce qui facilite la modification du contenu textuel existant ou la rédaction d'articles de blog.
• RTL et prêt pour la traduction : Elementor est disponible en 23 langues traduites, et vous pouvez facilement le traduire dans d'autres langues grâce à sa prise en charge complète des langues RTL.
• Widgets WooCommerce : il fournit des widgets WooCommerce prédéfinis, tels que des listes de prix et des tableaux de prix, pour faciliter la création de sites Web de commerce électronique.
• Intégrations tierces : Elementor prend en charge les intégrations tierces, notamment ActiveCampaign et MailChimp.
• Couleurs globales et options de typographie : Elementor vous permet de définir une typographie et des couleurs globales pour créer des conceptions complètes sur toutes les pages. En outre, vous pouvez également choisir parmi plus de 800 polices Google pour la conception de votre site Web.
• Mode maintenance : vous pouvez utiliser les modèles de mode maintenance d'Elementor pour configurer votre site Web en mode maintenance.

Examen Elementor Pro

Bien que le générateur de pages principal Elementor soit open-source et gratuit, vous pouvez passer à la version Elementor Pro - qui fournit des fonctionnalités utiles supplémentaires.

Voici un bref aperçu de certaines fonctionnalités du nouveau plugin Elementor Pro :

• Il vous permet de créer un thème WordPress complet.
• Il contient des widgets plus intéressants, notamment des curseurs, des boutons de partage social, des formulaires, des comptes à rebours et des formulaires de connexion.
• Il fournit des tonnes de modèles Elementor Pro premium de haute qualité.

Ainsi, si vous voulez plus de fonctionnalités, des modèles premium et des widgets globaux, vous pouvez opter pour le plugin Elementor Pro, à partir de seulement 49 $.

Examen des prix Elementor

Si vous souhaitez créer des sites Web simples et de style basique, la version gratuite du plug-in devrait suffire à vos besoins, étant donné qu'il s'agit du constructeur de pages gratuit le plus riche en fonctionnalités.

Cependant, pour créer des sites Web plus professionnels, Elementor propose quatre plans premium avec des fonctionnalités premium, comme le support VIP et le profil expert Elementor.

Le plan Essential, Expert, Studio et Agency du plugin Elementor coûte 49 $, 199 $, 499 $ et 999 $ par an. Ainsi, Elementor s'adresse à tout le monde, et que vous soyez un concepteur Web, un développeur ou un propriétaire d'agence, Elementor fournit des fonctionnalités pour tous les besoins et toutes les demandes.

Conclusion : Verdict final

Après cet examen complet, il est sûr de dire qu'Elementor fournit toutes les fonctionnalités essentielles requises pour créer un site Web WordPress ou WooCommerce.

Il est livré avec une interface légère, simple, facile à comprendre et non gonflée, permettant aux concepteurs de sites Web sans expérience de codage de créer de beaux sites Web. Et la meilleure partie est qu'il est livré avec des plans tarifaires pour les besoins de chacun. De plus, les développeurs d'Elementor continuent de publier et de déployer de nouvelles fonctionnalités et améliorations.

Après avoir examiné la facilité d'utilisation du plugin, ses fonctionnalités globales, ses performances, son support, son interface et sa tarification, nous classons Elementor au sommet des plugins de création de pages WordPress. Alors vérifiez et essayez le plugin Elementor par vous-même et choisissez le plan adapté aux besoins spécifiques de votre entreprise.