Si nous regardons en arrière, dans la dernière décennie, créer un site Web, était un cauchemar. Pour créer un site Web, il fallait apprendre au moins un langage de programmation, un cadre, un système de gestion de base de données et d’autres éléments techniques. La tâche de création de site Web n’était accessible que pour les développeurs ayant des compétences élevées en codage.

Ces jours sont révolus ! Depuis l’arrivée de WordPress et de ses constructeurs de pages populaires comme Elementor, la création d’un site Web est maintenant accessible à tous. Maintenant, vous pouvez créer vous même un site Web en utilisant WordPress et Elementor. Peu importe que vous soyez un avocat, un enseignant, un étudiant ou un entrepreneur sans aucune connaissance en codage.

Tout ce dont vous avez besoin, c’est de la détermination et de la persévérance. Maintenant, la question à un million de dollars est : savez-vous comment utiliser Elementor dans WordPress ?

Pas de panique ! Si vous ne le savez pas, WordPress Hébergement vous donne les tous éléments essentiels dans les grandes lignes de cet article !

Familiarisez-vous avec Elementor

Comment utiliser Elementor ? Le Guide étape par étape pour les débutants !

Elementor possède un grand nombre de caractéristiques et de fonctionnalités. En tant que débutant, vous devez d’abord connaître ces choses, sinon travailler avec Elementor peut vous sembler difficile.

Apprenez à connaître les fonctionnalités de base d’Elementor

Elementor vous permet de créer tout et n’importe quoi, des sites Web entiers aux pages de destination spécifiques. Vous pouvez concevoir des pages de vente, des pages promotionnelles et même des formulaires personnalisés. Si vous pouvez l’imaginer, cette plateforme peut vous aider à le concevoir.

Pour cela, Elementor est livré avec :

Elementor gratuit contre Elementor Pro

Il est évident qu’Elemento Pro offre plus de widgets, de blocs prédéfinis, de modèles et de fonctionnalités premium. Cependant, en utilisant uniquement la version gratuite d’Elementor, il est possible de créer un site Web à partir de zéro.

Comment utiliser Elementor ? Le Guide étape par étape pour les débutants !

En tant que débutant, notre recommandation est d’essayer d’abord Elementor gratuitement, puis optez pour Elementor pro si c’est vraiment nécessaire pour vous.

Qu’est-ce qui fait d’Elementor le constructeur de pages le plus populaire pour WordPress

Comment utiliser Elementor ? Le Guide étape par étape pour les débutants !

Elementor est un constructeur de pages Drag and Drop pour WordPress. Ce plugin vous aide à créer de belles pages à l’aide d’un éditeur visuel. Ce plugin WordPress est une solution tout-en-un qui vous permet de contrôler chaque partie de la conception de votre site Web sur une seule plateforme.

Fondamentalement, Elementor est extrêmement populaire car il permet aux personnes sans aucune formation technique de concevoir des sites Web aussi beaux que ceux créés par des professionnels.

Utiliser Elementor pour créer un site Web :

Pour mieux comprendre, nous avons fait une comparaison entre les meilleurs constructeurs de pages WordPress. Regardons ça!

Elementor vs Divi vs Beaver Builder – Tableau comparatif

Outre Elementor, il existe quelques constructeurs de pages WordPress populaires disponibles. Parmi ces constructeurs de pages, Divi et Beaver sont les concurrents les plus coriaces pour Elementor. C’est pourquoi nous avons créé un tableau de comparaison pour savoir si Elementor est meilleur que ces constructeurs de pages.

Comment utiliser Elementor ? Le Guide étape par étape pour les débutants !

Après avoir analysé le tableau comparatif, quel constructeur de page pensez-vous être le meilleur pour un débutant ? C’est Elementor, non ! C’est pourquoi nous avons choisi Elementor plutôt que d’autres constructeurs de pages populaires. Il est donc temps de se familiariser avec le constructeur de pages Elementor.

Présentation du tableau de bord Elementor

Pour accéder au tableau de bord Elemnetor, nous devons d’abord installer Elementor sur notre site WordPress. L’installation d’Elementor est aussi simple que bonjour. Suivez les étapes ci-dessous pour installer et activer Elementor en quelques instants.

Comment installer et activer Elementor dans WordPress ?

​​Paramètres Elementor

Après avoir activé le générateur de pages Elementor, vous vous dirigerez vers l’interface ci-dessous. Ou, allez sur votre tableau de bord WP > Elementor, pour obtenir cette interface.

Réglages :

Gestionnaire de rôle :

Différents types d’utilisateurs peuvent avoir différents niveaux d’accès à votre site Web, en fonction de leur rôle. Si vous avez la version Pro, vous pouvez également limiter l’accès des utilisateurs uniquement au contenu.

Outils:

Tableau de bord / Dashboard Elementor

C’est ici. Notre très attendu tableau de bord Elementor. Faisons un tour dedans.

C’est l’interface où vous pouvez concevoir votre page avec des éléments glisser-déposer et voir l’aperçu en direct de votre site.

De plus, vous pouvez faire disparaître le panneau du module en cliquant sur la flèche qui apparaît sur le côté droit du panneau.

De cette façon, vous obtiendrez un aperçu complet de votre page.

Comment utiliser Elementor avec WordPress ?

Comme nous l’avons dit précédemment, Elementor est livré avec un générateur de pages par glisser-déposer et un générateur de thèmes. Nous allons donc maintenant apprendre à utiliser ces deux constructeurs et éventuellement créer un modèle à l’aide d’Elementor.

  1. Comment utiliser Elementor Page Builder ?

2. Comment utiliser Elementor Theme Builder ?

3. Comment créer une fenêtre contextuelle dans Elementor ?

Donc, fondamentalement, notre tutoriel va commencer à partir de cette section. Plus tôt, nous avons découvert Elementor, maintenant, nous allons travailler avec lui de manière concrète.

Comment utiliser Elementor Page Builder ?

Pour vous montrer comment utiliser le constructeur de pages Elementor, nous allons maintenant créer une page d’accueil pour un site WordPress. Suivez les étapes ci-dessous et essayez de concevoir votre propre page d’accueil.

Étape 01 : Créer une nouvelle page

Étape 02 : Choisissez un modèle approprié pour la page d’accueil de votre site Web de voyage

Elementor est livré avec de nombreux modèles prédéfinis gratuits et professionnels, vous n’avez même pas besoin de créer les pages. Vous pouvez simplement choisir un modèle existant pour démarrer.

Étape 03 : Ajoutez un en-tête à votre page d’accueil

Après avoir inséré les modèles, la page sera prête et vous pourrez la personnaliser pour l’utiliser pour votre site WordPress.

L’en-tête aide à afficher l’identité de votre marque instantanément une fois que vos visiteurs accèdent à votre site Web. Après avoir personnalisé l’en-tête, nous allons maintenant personnaliser le corps de la page d’accueil.

Étape 04 : Mettez en valeur les installations de votre hôtel

Une fois que vous avez terminé avec l’en-tête, il est temps de concevoir la partie principale de la page d’accueil.

Étape 05 : Ajouter une vidéo et un témoignage

Étape 06 : Ajouter un formulaire de contact

Étape 07 : rendez-le réactif sur toutes les plates-formes

Aperçu de notre page d’accueil

Voici la vue finale de notre page d’accueil que nous venons de créer. Et c’est ainsi que vous pouvez utiliser le générateur de pages Elementor pour créer instantanément n’importe quelle page, y compris la page d’accueil, la page de contact, la page de fonctionnalité ou toute autre page.

Comment utiliser Elementor Theme Builder ?

Le générateur de thèmes Elementor change la donne pour quiconque connaît les constructeurs de pages, car il vous permet de créer des en-têtes, des pieds de page et d’autres contenus dynamiques personnalisés pour votre site Web. Il vous permet même de remplacer certains aspects de votre thème WordPress, afin que vous puissiez conserver ce qui fonctionne et apporter les modifications que vous souhaitez !

Dans cette section, nous allons vous montrer comment vous pouvez créer de beaux en-têtes avec le générateur de thèmes Elementor.

Remarque : le générateur de thème Elementor est disponible dans sa version pro. La version gratuite est livrée avec une fonctionnalité très limitée.

Étape 01 : Choisissez un type de modèle

Remarque : Elementor en version gratuite ne comprend que des modèles de section et de page. La version Pro comprend plusieurs catégories de modèles supplémentaires, notamment le widget global, l’en-tête, le pied de page, le single et l’archive.

Étape 02 : Personnalisez votre en-tête dans Elementor

Vous pouvez choisir de concevoir votre propre en-tête ou vous pouvez choisir l’un des préfabriqués de la bibliothèque de modèles Elementor.

Si cette étape vous semble familière, c’est parce qu’il s’agit exactement du même éditeur que nous avons utilisé pour créer une page complète plus tôt. Maintenant, utilisez cette expérience ici pour créer un en-tête pour votre site Web.

Après avoir personnalisé votre en-tête et cliqué sur le bouton « Publier », si vous le souhaitez, vous pouvez définir les conditions d’affichage de votre en-tête.

Remarque : Vous pouvez également suivre ces mêmes étapes pour créer des pieds de page pour votre site Web. Assurez-vous simplement de choisir « Pied de page » comme type de modèle lorsque vous concevez votre pied de page à l’aide du générateur de thèmes Elementor.

Comment créer une fenêtre contextuelle ou popup dans Elementor ?

Créer un popup avec Elementor est super facile. Vous pouvez concevoir votre popup avec l’interface visuelle d’Elementor où tout est glisser-déposer. Votre travail devient plus facile car Elementor propose également des modèles de popup prédéfinis. Vous pouvez simplement sélectionner un modèle, le publier et définir le déclencheur. C’est ça!

Remarque : le générateur de thème Elementor n’est disponible que pour sa version pro.

Étape 01 : Ajouter un nouveau fichier

Remarque : Si vous préférez créer la fenêtre contextuelle à partir de zéro, vous pouvez simplement fermer la bibliothèque de modèles pour ouvrir l’éditeur Elementor.

Étape 02 : Personnalisez la fenêtre contextuelle

Après avoir inséré une fenêtre contextuelle prédéfinie dans votre éditeur, il est temps de personnaliser cette fenêtre contextuelle. Sur l’éditeur Elementor, vous pouvez personnaliser la fenêtre contextuelle. Vous pouvez remplacer le contenu par défaut par votre propre contenu.

Une fois que vous avez terminé, cliquez sur le bouton PUBLIER.

Étape 03 : Définir les conditions d’affichage et les déclencheurs

À l’étape suivante, il vous sera demandé de définir les conditions d’affichage et les déclencheurs. Il existe également une option pour définir des règles avancées.

Si vous souhaitez afficher la fenêtre contextuelle lorsqu’un utilisateur clique sur un bouton, ouvrez l’onglet Déclencheurs et activez l’option Au clic. Cliquez ensuite sur Enregistrer et FERMER.

Étape 04 : Liez le popup à une page

Créez une nouvelle page/publication et modifiez-la avec Elementor (vous pouvez également modifier une existante).

Avant de cliquer sur le bouton Publier/Mettre à jour, vous pouvez d’abord prévisualiser votre page pour voir si la fenêtre contextuelle fonctionne déjà.

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

Dans cette section, nous nous concentrerons principalement sur deux sujets différents. Ils sont,

Alors lançons le bal.

Comment personnaliser la page produit WooCommerce dans Elementor ?

Avant de pouvoir personnaliser votre page de produit WooCommerce, vous devez installer et activer WooCommerce sur votre tableau de bord WordPress. Vous devrez également ajouter quelques produits à votre site WordPress. Pour ce faire, vous pouvez demander de l’aide à partir de ce guide de configuration de WooCommerce (étape par étape).

Après la configuration, vous pouvez concevoir votre page produit. Suivez ces étapes.

Étape 01 : Créer le modèle de produit unique

Étape 02 : Choisissez un modèle de page de produit préconçu ou créez-en un à partir de rien

Étape 03 : Ajoutez différents widgets de produits pour personnaliser votre page

Il est maintenant temps de construire les éléments qui composeront votre page produit. Suivez la capture d’écran ci-dessous pour concevoir votre page produit. Vous pouvez ajouter ou supprimer tout widget dont vous avez besoin.

Étape 04 : publier la page

Cela pourrait ressembler à l’image ci-dessous.

Comment importer un modèle Elementor à partir d’un fichier JSON ?

Elementor vous permet d’importer un modèle à partir d’un fichier JSON. Pour vous permettre de le faire, il existe deux façons disponibles. Apprenons comment ils fonctionnent !

1. Via la bibliothèque de modèles

Rechargez le modèle en cliquant sur l’icône de rechargement si le modèle que vous venez d’importer n’apparaît pas. Passez votre souris sur un modèle et cliquez sur le bouton Insérer pour le charger dans le canevas Elementor.

2. Via le gestionnaire de modèles

Ce sont les deux façons d’importer un modèle Elementor à partir d’un fichier JSON. Vous pouvez choisir l’une ou l’autre des façons de faire votre travail.

Avantages et inconvénients de l’utilisation d’Elementor Page Builder dans votre site WordPress

Il est évident que tout a aussi son côté sombre. Mais en termes d’Elementor, ce n’est pas vraiment le côté obscur. Au lieu de cela, nous pouvons dire qu’il a certaines limites qui pourraient être améliorées au fil du temps. Quels sont les limites d’Elementor ?

Eh bien, avant cela, vérifions ses avantages en un coup d’œil.

Avantages de l’utilisation d’Elementor dans WordPress

C’est un plugin gratuit ! La plupart des utilisateurs peuvent entièrement créer leurs sites sans avoir à passer à la version pro.

Pour un plugin gratuit, il dispose d’un très large éventail de fonctionnalités. La fonctionnalité définie sur la version gratuite rivalise avec de nombreux plugins payants.

L’éditeur en temps réel vous permet d’apporter des modifications à votre site et de voir ce qui se passe en temps réel, vous n’avez donc pas à faire des allers-retours entre plusieurs écrans.

Vous pouvez modifier et afficher plusieurs versions de votre site, ordinateur de bureau, mobile et tablette, et apporter des modifications uniques à chacune de ces versions.

Inconvénients de l’utilisation d’Elementor dans WordPress

Elementor est un éditeur puissant, mais avec toutes les options de flexibilité et de personnalisation, il peut être difficile de tout faire correctement.

Parfois, vos pages peuvent avoir des couches de superpositions de contenu différentes et il peut être difficile et long de trouver la zone que vous souhaitez modifier.

Si vous construisez votre site WordPress en utilisant Elementor, vous devrez garder le plugin installé, sinon vous perdrez toutes vos conceptions et personnalisations que vous avez faites.

Principaux compléments Elementor tiers pour améliorer votre conception

Les addons tiers sont la centrale électrique d’Elementor. Bien qu’Elementor offre plus de 80 éléments fantastiques, il est fort possible que vous souhaitiez quelque chose d’encore plus avancé et unique. C’est exactement pourquoi les développeurs tiers ont décidé d’étendre les fonctionnalités d’Elementor et de développer leurs propres addons Elementor.

En dehors de cela, vous obtiendrez de nombreux éléments spéciaux avec les modules complémentaires, par exemple, une tarification avancée, une équipe, des éléments sociaux, des éléments créatifs, des éléments de style de formulaire, un compte à rebours, etc.

En conséquence, Elementor les reconnaît désormais officiellement comme son contributeur en les présentant sur la page officielle d’Elementor. Parmi eux, voici une liste des meilleurs addons Elementor tiers que vous pouvez utiliser lors de la conception de votre site Web WordPress.

1. Modules complémentaires Premium pour Elementor : Il propose plus de 55 modules complémentaires et widgets Elementor hautement personnalisables, plus de 300 modèles Elementor prédéfinis qui vous aident à concevoir facilement un site Web en moins de temps.

2. Addons exclusifs pour Elementor : Une collection de plus de 700 blocs prédéfinis et de plus de 10 modèles utilisables vous aidera à créer vos sites Web en moins de temps et sans codage.

3. PowerPack pour Elementor : Il propose plus de 60 widgets et extensions Elementor créatifs pour améliorer votre expérience Elementor.

Ces addons vous donnent la possibilité de renforcer la conception de votre site Web avec ses fonctionnalités et mises en page étonnantes. En outre, vous pouvez créer une ambiance spéciale en utilisant les extensions Elementor.

Tutoriel gratuit : créez votre site Web de commerce électronique à l’aide d’Elementor et de Happy Addons

Créer un site Web de commerce électronique à l’aide d’Elementor est très simple. Et en mélangeant HappyAddons avec Elementor, il est plus amusant de concevoir un site Web. C’est quelque chose comme la flexibilité illimitée de concevoir selon nos exigences. Voyons comment nous pouvons concevoir facilement notre site Web de commerce électronique en utilisant Elementor et HappyAddons.

Voici les pré-requis pour créer votre site eCommerce :

  1. Choisissez votre nom de domaine et votre Hébergement WordPress
  2. Installer WordPress et WooCommerce
  3. Installer Elementor
  4. Installez enfin HappyAddons (Gratuit + Pro)

Étape 05 : Choisissez un modèle de commerce électronique

Accédez à votre tableau de bord WordPress > Pages > Ajouter un nouveau

Donnez un nom à cette page.

Définissez le modèle par défaut sur « Elementor Canvas » car nous voulons construire toute la page avec Elementor. Vous pouvez choisir Elementor Full Width, qui vous permettra de personnaliser toute la page sans le menu.

Après cela, publiez la page à partir de la barre latérale droite. Vous pouvez également le conserver comme brouillon.

Cliquez sur « Modifier avec Elementor » et vous serez redirigé vers le constructeur de page Elementor.

Cliquez sur le signe HappyAddons pour ajouter un modèle préconçu pour votre site de commerce électronique.

Choisissez un modèle prédéfini et cliquez sur l’option Insérer.

Étape 06 : Personnalisez le modèle

L’ensemble du processus de personnalisation est le même que celui que vous avez montré dans la section précédente – Comment utiliser Elementor Page Builder. Suivez les mêmes étapes pour réaliser votre conception.

Vous pouvez modifier le logo, la palette de couleurs, les liens de navigation, la copie du site Web et toute autre fonctionnalité que vous souhaitez. Vous pouvez également utiliser les widgets Elementor.

Étape 07 : publier la page

Une fois que vous êtes entièrement satisfait de la conception, de l’interface et de la fonction de votre site Web, alors il est temps de le publier en direct.

Pour prévisualiser le site, cliquez sur l’icône.

Si vous êtes satisfait du résultat, continuez et cliquez sur le bouton Publier/Mettre à jour.

Cliquez sur « Jetez un coup d’œil » pour afficher la page publiée.

FAQ sur les éléments

1. Elementor pour WordPress est-il gratuit ?

Oui, Elementor pour WordPress est téléchargeable et utilisable gratuitement. Et en même temps, Elementor a également sa version pro. Si vous souhaitez obtenir plus de fonctionnalités, de widgets, de blocs prédéfinis et de modèles, vous devrez acheter leur version pro.

2. Elementor ralentit-il votre site ?

Elementor ralentit votre site Web si vous choisissez un mauvais hébergement, utilisez des fichiers multimédias volumineux, des scripts externes et des plugins supplémentaires. Sinon, Elementor ne ralentira pas votre site Web WordPress.

3. Elementor fonctionne-t-il avec tous les thèmes ?

Oui, Elementor fonctionne avec tous les thèmes qui respectent les normes de codage de WordPress fixées par son Codex.

4. Elementor fonctionne-t-il avec d’autres plugins WordPress ?

Oui, Elementor fonctionne avec tous les autres plugins, y compris gratuits et pro, de manière transparente.

5. Combien coûte Elementor Pro ?

Elementor Pro est disponible en 3 plans d’abonnement différents. Tels que Personnel, Plus et Expert. Cela ne vous coûte que 99 $ si vous voulez une licence de trois sites Web et 199 $ pour une licence de site Web illimitée.

6. Elementor SEO est-il convivial ?

Elementor est le constructeur de pages le plus convivial pour WordPress. Il a été construit avec les normes de code les plus strictes et offre les meilleures performances lors de la création de conceptions de pages.

7. À qui appartient Elementor ?

Yoni Luksenberg. Il est le PDG et co-fondateur d’Elementor.

8. Que se passe-t-il lorsque Elementor Pro expire ?

Vous ne pourrez pas créer de nouvelles pages avec des fonctionnalités pro si votre licence pro a expiré. Mais tous vos projets existants resteront intacts et les fonctionnalités Pro que vous avez utilisées dans vos conceptions précédentes continueront de fonctionner comme avant.

9. Puis-je modifier ma page de blog avec Elementor WordPress ?

Oui, vous pouvez modifier votre page de blog avec Elementor. Vous aurez besoin du générateur de thèmes pour le modifier.

10. Puis-je créer mon propre thème avec Elementor ?

Vous pouvez concevoir chaque partie de votre thème individuellement à l’aide des modèles Elementor Pro, mais vous ne pouvez pas importer et exporter un thème complet qui combine toutes les parties du thème. Cependant, vous pouvez importer et exporter chaque partie de thème séparément.

Et vous, êtes-vous prêt à utiliser Elementor pour créer votre site web ?

Utiliser Elementor dans WordPress n’est pas si compliqué, en fait. Cela pourrait être plus amusant si vous avez un guide complet comme ce didacticiel étape par étape.

Suivez simplement ce guide, continuez à vous entraîner pour des améliorations et préparez une configuration mentale selon laquelle vous serez le maestro d’Elementor. C’est tout ce dont vous avez besoin pour utiliser Elementor et créer un site Web WordPress en quelques instants.

Si vous rencontrez des complications lors de l’utilisation d’Elementor, ou si vous avez des suggestions concernant ce guide sur l’utilisation d’Elementor dans WordPress, faites-le nous savoir via la zone de commentaires ci-dessous. À vous de jouer !