Qu’est-ce que le constructeur de pages WordPress Elementor ?

Si vous construisez un site web, vous avez probablement vu des termes comme Elementor WordPress Page Builder et website builders dans votre recherche. WordPress est une plateforme de site web très populaire, connue pour être gratuite, personnalisable et facile à apprendre.

Toutefois, les débutants peuvent se sentir dépassés par la conception d’un site web en raison des nombreux concepts et choix qu’elle implique. Heureusement, il est possible de créer un site attrayant sans savoir coder. Cet article présente Elementor, un constructeur de pages gratuit qui fait de WordPress un choix de premier ordre pour les concepteurs et les propriétaires d’entreprises.

Nous vous expliquerons le fonctionnement d’Elementor, nous vous guiderons tout au long du processus d’installation, nous vous donnerons des conseils pour obtenir des résultats optimaux et nous explorerons les meilleures alternatives telles que WonderSuite.

Qu’est-ce qu’Elementor ?

Elementor est un constructeur de pages drag-and-drop conçu pour WordPress. Grâce à son éditeur visuel, vous pouvez créer des pages époustouflantes sans avoir besoin de connaissances en codage. Il est conçu pour vous aider à concevoir des sites web dynamiques rapidement et efficacement.

Ce plugin WordPress est une solution complète. Il vous permet de gérer toute la conception de votre site web en un seul endroit. Vous pouvez personnaliser votre site web pour qu’il corresponde à votre marque. Ajoutez des effets de mouvement, choisissez parmi différentes polices et utilisez des images d’arrière-plan améliorées.

Caractéristiques principales d’Elementor

Éditeur par glisser-déposer

Ajoutez et réorganisez facilement la mise en page en glissant et déposant des widgets depuis la barre latérale. Le processus de conception est ainsi intuitif et sans code.

Prévisualisation en direct de l’édition

La fonction de prévisualisation en direct permet de visualiser instantanément les modifications apportées à la conception. Il n’est plus nécessaire de passer du mode éditeur au mode prévisualisation. Cela permet d’accélérer l’édition et l’amélioration de votre site.

Contrôles de la conception adaptative

Optimisez l’apparence de votre site web sur les ordinateurs de bureau, les tablettes et les mobiles en utilisant des paramètres spécifiques pour chaque type d’appareil. Cela garantit une expérience utilisateur transparente sur toutes les plateformes.

Modèles et blocs préconçus

Accédez à une vaste bibliothèque de modèles et de blocs conçus par des professionnels pour lancer votre processus de conception. Vous gagnerez du temps et disposerez d’options créatives.

Constructeur de thèmes

Personnalisez chaque partie de votre thème WordPress, y compris les en-têtes, les pieds de page et les pages d’archives sans codage. Vous avez ainsi un contrôle total sur l’aspect et la convivialité de votre site.

Intégration de WooCommerce

Créez et personnalisez facilement des pages de boutique en ligne avec les widgets WooCommerce. Ils vous permettent de créer un site de commerce électronique beau et fonctionnel.

Widgets globaux

Créez des widgets réutilisables pour plusieurs pages. Ils assureront la cohérence de la conception de l’ensemble des sites web et permettront de gagner du temps lors de l’ajout de boutons d’appel à l’action et de formulaires de contact.

Modules complémentaires de tiers

Utilisez des modules complémentaires tiers et des intégrations de l’écosystème WordPress pour étendre Elementor, en ajoutant plus d’options de personnalisation et de fonctionnalités pour améliorer votre site.

Pourquoi utiliser le constructeur de pages Elementor ?

Les constructeurs de pages permettent à tout un chacun de créer un site web sans faire appel à un concepteur ou à un développeur. Ces outils sont livrés avec des éléments préfabriqués qui simplifient l’ensemble du processus de création. Un bon constructeur de sites web WordPress peut vous faire gagner du temps et de l’argent.

Il vous permettra d’éviter d’engager un développeur pour coder un site HTML/CSS statique. Elementor est la plateforme de site web la plus populaire utilisée pour son éditeur « drag-and-drop », qui rend le processus de création de site web simple et accessible à tous les niveaux de compétence.

Il vous permet de concevoir, d’éditer et de personnaliser la mise en page de votre site web sans avoir besoin de coder. Il s’agit d’un moyen simple, flexible et efficace de créer des pages, ce qui en fait un excellent choix pour les débutants comme pour les utilisateurs expérimentés.

Que pouvez-vous créer avec Elementor ?

Avec Elementor, les possibilités sont infinies. Vous pouvez créer facilement des sites web complets ou des pages d’atterrissage spécifiques, y compris des pages de vente, du contenu promotionnel et des formulaires personnalisés.

Contrairement à l’éditeur par défaut de WordPress, Elementor vous offre une plus grande liberté de création et des outils puissants pour donner vie à votre vision. Si vous pouvez en rêver, Elementor vous aide à en faire une réalité.

Prix d’Elementor : Elementor est-il gratuit ?

Elementor propose des formules gratuites et payantes. Il s’agit d’une option flexible pour différents budgets et besoins de sites web.

La version gratuite d’Elementor est puissante et propose des widgets et des modèles de base, idéaux pour créer des sites web simples et fonctionnels. Elle est parfaite pour les débutants ou toute personne souhaitant un site simple.

Pour des fonctionnalités plus avancées, Elementor Pro est disponible, offrant des widgets, des modèles et des options de conception supplémentaires. Il comprend également des mises à jour premium et une assistance dédiée.

Combien coûte Elementor ?

Elementor Pro se décline en plusieurs plans tarifaires en fonction du nombre de sites que vous souhaitez créer. Ces options sont économiques tout en offrant des outils améliorés pour la conception de sites web de qualité professionnelle.

Comment installer Elementor

L’installation d’Elementor est rapide et facile, comme pour les autres plugins WordPress. Voici deux façons simples de procéder.

Installation d’Elementor via Elementor

1. Visitez Elementor et cliquez sur « Get Started ».
2. Saisissez votre adresse électronique et votre mot de passe pour créer un compte.
3. Répondez à quelques questions concernant votre site web et votre expérience en matière de construction de sites.
4. Choisissez comment vous voulez construire votre site, il y a de nombreux plans payants, mais vous pouvez aussi opter pour le plan gratuit. Pour ce guide, nous choisirons le plan gratuit.
5. Elementor nécessite un site WordPress actif, entrez donc votre nom de domaine pour vérification. Elementor vérifiera que votre site est compatible avec WordPress.
6. Une fois votre site confirmé, cliquez sur « Installer Elementor ».
7. Il se peut que vous soyez dirigé vers la page de connexion de l’administrateur de WordPress. Si c’est le cas, connectez-vous. Si vous êtes déjà connecté, vous serez dirigé directement vers la page du plugin Elementor. Cliquez sur « Installer maintenant ».
8. Après l’installation, un écran de confirmation s’affiche. Cliquez sur « Activer le plugin ».

Installation d’Elementor via le tableau de bord de WordPress

1. Dans votre tableau de bord WordPress, allez dans Plugins et sélectionnez Ajouter un nouveau.

2. Utilisez la barre de recherche pour taper « Elementor » et trouver le constructeur de sites web Elementor.

3. Cliquez sur Installer maintenant et une fois l’installation terminée, cliquez sur Activer.

Le plugin de construction de pages Elementor apparaît dans votre barre latérale. Ce menu permet d’ajuster les paramètres d’Elementor dans le back-end, mais vous l’utiliserez directement sur vos pages pour les éditer.

Impact d’Elementor sur les performances du site

Une préoccupation fréquente lors de l’utilisation d’un plugin de construction de pages comme Elementor est de savoir s’il ralentira votre site web. Elementor vise la haute performance.

Mais la façon dont vous l’utilisez peut ralentir votre site. Voyons ce qu’il faut savoir et comment optimiser votre site pour qu’il soit plus performant.

Code efficace

Elementor a un code propre et efficace. Il ne ralentira donc pas votre site. Cependant, comme tout outil, une mauvaise utilisation peut entraîner des problèmes de performance.

Par exemple, des widgets ou des images de grande taille peuvent ralentir votre site, de même qu’un contenu non optimisé, ce qui ralentit le temps de chargement des pages.

Conseils d’optimisation pour une meilleure performance

Limiter l’utilisation de widgets lourds

Elementor propose de nombreux widgets pour améliorer votre site web. Mais un trop grand nombre de widgets ou des widgets lourds (comme les carrousels, les sliders ou les arrière-plans vidéo) peuvent ralentir le temps de chargement de votre page. Faites attention aux widgets que vous incluez et supprimez ceux qui ne sont pas essentiels.

Optimisez vos images

Les images volumineuses non compressées sont l’une des causes les plus courantes de la lenteur des sites web. Compressez toujours les images avant de les télécharger. Utilisez des formats de nouvelle génération tels que WebP pour un chargement plus rapide.

Utiliser des plugins de mise en cache

Les plugins de mise en cache, comme WP Rocket ou W3 Total Cache, peuvent réduire considérablement les temps de chargement en stockant une version de votre site pour un accès plus rapide. Ainsi, les visiteurs qui reviennent sur votre site n’ont pas à le recharger à chaque visite.

Utiliser un réseau de diffusion de contenu (CDN)

Un CDN distribue le contenu de votre site sur des serveurs dans le monde entier. Il le transmet aux utilisateurs à partir du serveur le plus proche. Cela permet de réduire la latence et d’accélérer les temps de chargement, en particulier pour les visiteurs éloignés.

Minimiser les fichiers JavaScript et CSS

Réduire les scripts et les styles qui se chargent sur chaque page peut améliorer les performances de votre site. Elementor dispose d’un paramètre permettant de minimiser et de combiner les fichiers CSS et JavaScript. Cela permet de réduire les requêtes du serveur.

Mise à jour régulière d’Elementor et de WordPress

Maintenez Elementor et WordPress à jour. Cela vous permet de bénéficier des dernières améliorations de performance, des corrections de bugs et des correctifs de sécurité. L’équipe de développement d’Elementor optimise en permanence le plugin pour qu’il soit plus rapide et plus fonctionnel.

Optimisations permanentes d’Elementor

L « équipe d’Elementor donne la priorité aux performances en publiant régulièrement des mises à jour qui améliorent la vitesse et l’efficacité. Elle a ajouté des fonctionnalités permettant de ne charger que les ressources nécessaires, notamment le chargement paresseux des médias, l’amélioration du chargement des feuilles de style CSS et l’optimisation du système de gestion des ressources et du contenu. Ces améliorations réduisent l’utilisation des ressources et permettent aux sites Elementor d » être rapides et réactifs, même avec des designs complexes.

La WonderSuit de Bluehost offre une multitude de fonctionnalités : création de sites assistée par ordinateur, hébergement de 10 sites web, mise en cache, domaine gratuit, SSL, CDN, outils de sécurité et bien plus encore, le tout conçu pour une optimisation et des performances sans faille.

Comment utiliser Elementor dans WordPress

Elementor permet de donner facilement vie à vos idées de conception. Grâce à sa fonction d « édition en direct, vous pouvez voir vos modifications en temps réel pendant que vous créez du contenu pour votre site. Voici un guide étape par étape pour commencer à utiliser l » éditeur Elementor.

Tutoriel Elementor

Elementor a une interface conviviale et vous pouvez apprendre les bases en quelques minutes. L’interface intuitive d’Elementor permet de commencer à concevoir facilement et si vous avez besoin d’aide, Elementor propose une documentation complète pour vous guider à chaque étape. Suivez ce guide pour construire une base solide afin d’utiliser Elementor de manière efficace.

• Créez une nouvelle page ou un nouvel article : Commencez par créer une nouvelle page ou un nouvel article dans WordPress et cliquez sur Edit with Elementor.
• Entrez dans l’éditeur Elementor : Une fois à l’intérieur, vous verrez l’écran d’édition d’Elementor.
• Barre latérale d’Elementor : sur la gauche, une barre latérale contient tous les outils de glisser-déposer dont vous aurez besoin pour construire votre page. Avant de glisser des widgets sur votre page, vous devez connaître la structure d’Elementor. Il se compose de trois blocs de construction clés.
• Les sections : Il s’agit des blocs les plus grands qui abritent votre contenu.
• Colonnes : Dans les sections, vous pouvez regrouper le contenu en ajoutant des colonnes.
• Les widgets : Ils sont placés à l’intérieur des colonnes. Ils comprennent du texte, des images ou des boutons.

Vous pouvez faire glisser les widgets dans des sections ou des colonnes, comme indiqué par des cases bleues à l’écran.

Notez que les widgets ne peuvent pas être ajoutés à certaines zones, comme la barre de navigation.

• Glisser-déposer des widgets : Cliquez, maintenez et faites glisser un widget de la barre latérale vers la section souhaitée. Par exemple, vous pouvez faire glisser un widget vers une zone vide en bas de la page.
• Personnalisation des widgets : Recherchez des widgets spécifiques, tels que des titres et des images. Vous pouvez également rechercher des options avancées, comme du texte animé ou des carrousels. Vous pouvez personnaliser le contenu et le design de chaque widget après l’avoir fait glisser à sa place.
• Paramètres du site : Cliquez sur le menu hamburger dans le coin supérieur gauche pour accéder aux paramètres du site. Vous pouvez y définir les polices et les couleurs par défaut. Vous pouvez également configurer d’autres paramètres globaux qui s’appliquent à l’ensemble de votre site.
• Historique des révisions : Elementor dispose d’une fonction intégrée d’historique des révisions. Cliquez sur l’icône Historique en bas de la barre latérale. Vous pouvez suivre les modifications sous l’onglet Actions. Vous pouvez également revenir à des versions antérieures sous l’onglet Révisions.

Comment construire votre première page web avec Elementor

L’une des raisons pour lesquelles Elementor se distingue est sa facilité d’utilisation. Vous n’avez besoin d’aucune expérience en matière de codage pour créer votre premier site web complet. Suivez ces étapes pour créer votre première page avec Elementor :

1. Accédez à votre tableau de bord WordPress
2. Cliquez sur Pages, puis sur Ajouter un nouveau.
3. Cliquez sur Edit with Elementor pour ouvrir le constructeur de pages.
4. Charger l’éditeur : Elementor se charge. Vous pouvez alors commencer à concevoir dans l’espace de travail qu’il affiche.
5. Ajouter des widgets : Faites glisser et déposez des widgets tels qu’un titre, un éditeur de texte ou une image sur votre page. Vous pouvez facilement personnaliser chaque widget une fois qu’il est en place.
6. Publiez votre page : Une fois que votre page a l’air bien, cliquez sur l’icône de l’œil pour la prévisualiser. Lorsque vous êtes prêt, cliquez sur le bouton vert Publier.

Modèles Elementor

Elementor propose de nombreux modèles préconçus. Ils vous aident à construire rapidement votre site WordPress. Ces modèles se présentent sous deux formes : les pages et les blocs.

• Les pages sont des mises en page complètes pour des pages entières de contenu.
• Les blocs sont des sections individuelles, comme les en-têtes, les pieds de page ou les FAQ, avec des widgets préconfigurés.

Vous avez tous les droits d’utiliser l’un de ces modèles pour créer des sites web professionnels pour le contenu de votre site ou votre activité. La bibliothèque de modèles est consultable par type de page, nom de modèle ou balises dynamiques, ce qui permet de trouver facilement ce dont vous avez besoin. De plus, tous les modèles sont compatibles avec les mobiles et peuvent être ajoutés à n’importe quelle page en un seul clic.

Voici comment utiliser les modèles Elementor

• Dans l’éditeur Elementor, descendez jusqu’en bas. Il est indiqué « Ajouter un widget ici ». Cliquez sur l’icône du dossier blanc.
• Une bibliothèque de modèles s’ouvre. Pour prévisualiser un modèle, cliquez sur l’icône de la loupe ou survolez l’image.
• Cliquez sur le bouton vert Insérer pour ajouter le modèle à votre page.
• Si vous n’êtes pas encore connecté à la bibliothèque de modèles d’Elementor, vous serez invité à le faire. Elementor vous redirigera vers son site web pour vous connecter ou vous enregistrer.
• Une fois que vous vous êtes inscrit ou connecté, votre connexion sera confirmée.
• Retournez à la page que vous étiez en train de modifier et insérez le modèle que vous avez choisi.

Elementor et personnalisation

Elementor vous permet de personnaliser entièrement votre site web, ce qui vous permet de créer un site web personnalisé avec des mises en page uniques pour les blogs, les portfolios ou les témoignages. Il offre des fonctionnalités telles que des types de posts personnalisés, un code personnalisé et des options CSS flexibles. Vous pouvez également ajouter du HTML, du CSS ou du JavaScript personnalisés pour des fonctions avancées.

Avec Elementor, vous pouvez styliser l’ensemble de votre site à l’aide de widgets, de CSS spécifiques aux pages ou personnalisés, et même appliquer des polices de caractères personnalisées pour un aspect cohérent et propre à votre marque.

De plus, avec l’outil WonderStart, répondez à quelques questions rapides et regardez votre site prendre forme. Profitez d’une installation accélérée, d’une publication plus rapide et d’une personnalisation continue, vous donnant un contrôle total avec la WonderSuit de Bluehost.

Comment utiliser les fonctionnalités avancées d’Elementor

Elementor Pro débloque des fonctionnalités avancées pour améliorer votre site WordPress. La version Pro permet à Elementor de vous donner accès à de meilleurs widgets, à des constructeurs de thèmes et de fenêtres contextuelles et à des champs personnalisés. Cela vous donne un plus grand contrôle sur la conception de votre site web.

Dans cette section, nous vous guiderons dans l’utilisation de certains de ces outils avancés pour améliorer votre site.

Comment créer un Popup dans le plugin Elementor

Les pop-ups sont un excellent moyen de capturer des prospects par e-mail et de stimuler l’engagement. Le générateur de pop-ups d’Elementor simplifie le processus de création de formulaires personnalisés. Suivez ces étapes pour créer votre propre pop-up :

1. Dans votre tableau de bord WordPress, naviguez vers Templates > Popups > Add New.
2. Donnez un nom à votre modèle et cliquez sur « Créer un modèle ».
3. Choisissez un modèle dans la bibliothèque ou créez votre propre mise en page.
4. Lorsque vous êtes satisfait de la conception, cliquez sur Publier, puis sur Enregistrer et fermer.
5. Ouvrez une nouvelle page dans Elementor (appuyez sur CTRL + E sur PC ou Commande + E sur Mac pour une recherche rapide).
6. Faites glisser le widget Bouton sur votre page.
7. Dans les paramètres du bouton, cliquez sur Lien, puis sélectionnez Dynamique > Actions > Popup.
8. Choisissez Popup, puis sélectionnez Open Popup et choisissez celui que vous venez de créer.
9. Affichez votre page en direct.
10. Cliquez sur le bouton et regardez votre pop-up apparaître !

Personnaliser les pages produits de WooCommerce dans Elementor

Personnaliser les pages produits de WooCommerce avec Elementor vous permet de créer des mises en page uniques et attrayantes. Cela peut stimuler les ventes et améliorer l’expérience d’achat. Après avoir installé WooCommerce et Elementor sur votre site WordPress, ajoutez des produits. Ensuite, utilisez le constructeur par glisser-déposer d’Elementor pour créer des pages de produits personnalisées.

Vous pouvez également utiliser la fonctionnalité WonderCart de WonderSuit de Bluehost pour configurer et personnaliser facilement les pages de paiement de votre boutique de commerce électronique. Vous pouvez utiliser un modèle prédéfini ou concevoir des pages de produits personnalisées.

Vous accéderez à divers widgets de produits qui mettront en valeur vos articles pour les aligner sur votre marque. La flexibilité d’Elementor vous permet de créer des pages de produits très esthétiques et à fort taux de conversion.

Une alternative abordable à Elementor avec l’hébergement Bluehost

Voici WonderBlocks, une alternative solide à Elementor. Il dispose d’une bibliothèque complète de modèles de blocs et de pages. Il est abordable si vous achetez un hébergement chez Bluehost.

WonderBlocks propose des modèles préconçus pour votre site. Ils comprennent des images et des suggestions de texte. Ces modèles sont basés sur les informations que vous avez fournies lors du processus d’intégration de WonderStart.

Comme Elementor, il vous permet de créer de magnifiques sites web personnalisés sans codage. Vous pouvez facilement personnaliser ces modèles pour les adapter à votre marque. WonderBlocks est donc idéal pour ceux qui recherchent un constructeur de sites web à la fois économique et puissant.

FAQ