• Caractéristiques
  • Modèles
  • Tarification
  • French
  • Caractéristiques
  • Modèles
  • Tarification
  • French
Ops ! Votre widget recherché n'a pas été trouvé ! Avez-vous une idée ? Si c'est le cas, Soumettre ici

Comment utiliser Elementor pour créer un site web (8 étapes faciles)

how to use elementor

La création d'un site web ne nécessite plus d'être expert en codage ou d'engager des développeurs coûteux. Grâce à des outils tels que ElementorGrâce à WordPress, l'un des constructeurs de sites Web les plus populaires, tout le monde peut créer des sites Web professionnels et visuellement époustouflants en quelques étapes seulement.

Mais si Elementor est puissant, le fait de le combiner avec une boîte à outils avancée telle que Element Pack fait passer votre site web au niveau supérieur.

Que vous conceviez un site de marque personnelle, une page d'entreprise ou un portefeuille en ligne, Element Pack propose une vaste bibliothèque de widgets, de modèles et de modules complémentaires pour rendre le processus plus rapide, plus facile et plus personnalisable.

Qu'est-ce que Elementor ?

How to Use Elementor to Build WordPress Website

Elementor est un leader Constructeur de site web WordPress qui permet aux utilisateurs de concevoir facilement des pages et des sites web époustouflants.

Contrairement aux outils traditionnels de conception de sites web, Elementor offre une interface conviviale, par glisser-déposer, qui le rend accessible même à ceux qui n'ont pas de connaissances en matière de codage.

Avec plus de 12 millions d'installations actives, Elementor est devenu un outil incontournable pour les débutants comme pour les professionnels.

L'une de ses caractéristiques les plus remarquables est son éditeur en direct, qui vous permet de voir les changements en temps réel au fur et à mesure que vous construisez votre site. Qu'il s'agisse de simples pages de renvoi ou de sites web entièrement fonctionnels, Elementor est la solution la plus populaire pour créer des designs conformes à votre vision.

Comment Elementor fonctionne-t-il sur WordPress ?

Elementor s'intègre parfaitement à WordPressLe site Web de la Commission européenne, qui a été mis à jour en 2008, améliore ses capacités en permettant aux utilisateurs de contrôler tous les aspects de la conception de leur site.

Une fois installé et activé, Elementor remplace l'éditeur traditionnel de WordPress par son éditeur visuel intuitif, qui vous permet d'ajouter et de personnaliser des widgets de contenu tels que des titres, des images, des formulaires, etc.

Alors que la Elementor page builder offre des caractéristiques robustes, son modèle de tarification freemium la rend encore plus attrayante. Les version gratuite comprend des widgets et des modèles de base, idéaux pour les petits projets des débutants.

Pour les fonctionnalités avancées, telles que les modèles premium, les effets d'animation et le contenu dynamique, l'application Version Pro est disponible.

Elementor a lancé le Planificateur de site AIqui automatise la structure des sites web et la planification du contenu afin de rationaliser le processus de conception. La plateforme introduira davantage de fonctionnalités alimentées par l'IA pour renforcer la personnalisation et améliorer l'expérience utilisateur, rendant la conception de sites web plus rapide et plus efficace.

Cependant, même la version Pro a des limites, c'est pourquoi de nombreux utilisateurs choisissent d'améliorer leur expérience de Elementor avec Element Pack. Ce plugin propose une bibliothèque complète de widgets, de modules complémentaires et de modèles préconçus, ce qui en fait l'extension idéale pour Constructeurs de sites WordPress Elementor.

Modèle de tarification Elementor

La structure tarifaire de Elementor suit un modèle freemium :

  • Version gratuite: Fonctionnalités de base telles que les widgets essentiels, l'édition par glisser-déposer et une bibliothèque de modèles limitée.
  • Elementor Pro: Fonctionnalités avancées telles que l'intégration de WooCommerce, les feuilles de style CSS personnalisées et les modèles premium. Le prix de Elementor Pro commence à $59 par an.

Pour ceux qui cherchent à maximiser leur installation Elementor sans se ruiner, Element Pack Lite (une version gratuite de Element Pack) offre des fonctionnalités étendues et est disponible sur le site Dépôt WordPress

Pour des fonctionnalités plus avancées, vous pouvez passer à la version version premium de Element Pack.

Comment utiliser Elementor pour créer un site Web gratuitement ?

Maintenant que vous avez bien compris ce qu'est Elementor et comment il fonctionne, nous allons passer en revue le processus de création de votre site Web, étape par étape.

Nous supposons que votre site web WordPress est déjà opérationnel. Cela étant fait, passons à la première étape.

Étape 1 : Installer et activer Elementor

La première étape de la création de votre site web WordPress consiste à installer et à activer l'application Elementor page builder

  • Connectez-vous à votre panneau d'administration WordPress. C'est là que vous gérerez votre site web et installerez les plugins nécessaires à la création d'un site époustouflant.
Dashboard of WordPress website
  • Dans le menu de gauche du tableau de bord de WordPress, cliquez sur Plugins et cliquez sur Ajouter un nouveau. Cela ouvrira le dépôt de plugins, où vous pourrez rechercher Elementor.
Adding New Plugin on WordPress website
  • Dans la barre de recherche située dans le coin supérieur droit, tapez Elementor. Le document officiel Constructeur de site WordPress Elementor apparaîtra dans les résultats de la recherche.
  • Cliquez sur le bouton Installer maintenant à côté du plugin Elementor. Ce processus peut prendre quelques secondes, en fonction de votre vitesse Internet.
Searching Elementor Plugin on Plugin Search Box
  • Une fois installé, cliquez sur le bouton Activer bouton. 
Activating Elementor Plugin on WordPress Website
  • Sélectionnez ensuite l'option "Sauter".
Hello Elementor Theme
  • Appuyer sur la touche Continuer avec Hello Theme option. 
Using Hello Elementor Theme on WordPress Website
  • Cliquez maintenant sur le bouton Sauter option. 
Elevating WordPress Website with Elementor Pro Features
  • Sélectionnez l'option Sauter option.
Completing Elementor Signup
  • Sélectionnez à nouveau l'option Sauter option.
skip notifications

Enfin, vous pourrez utiliser le panneau d'édition de Elementor pour concevoir et développer votre site Web.

Elementor editor panel

Vous verrez apparaître un nouvel élément de menu appelé Elementor dans le tableau de bord de WordPress. C'est là que vous accéderez aux réglages, commencerez à concevoir et gérerez vos modèles.

Elementor on your WordPress dashboard

Étape 2 : Installer et activer Element Pack

Bien que Elementor offre un ensemble important de fonctionnalités pour la création de sites web, sa version gratuite présente certaines limites. 

C'est là que Element Pack afin d'améliorer votre expérience. 

Que vous utilisiez le logiciel gratuit Element Pack Lite ou en passant à la version premium pour bénéficier de fonctionnalités avancées, cette extension élargit considérablement vos possibilités de conception.

Voici comment l'installer et l'activer :

  • Connectez-vous à votre panneau d'administration WordPress et naviguez vers Plugins > Ajouter un nouveau.
  • Dans la barre de recherche, tapez "Element Pack.”
  • Localisez le plugin développé par BdThemes et cliquez sur Installer maintenant.
Adding Element Pack Pro Plugin to your WordPress Website
  • Une fois installé, cliquez sur Activer pour activer le plugin.
Activating Element Pack Plugin

Nous vous conseillons de commencer par la version gratuite pour explorer ses capacités. Vous pourrez toujours passer à la version Pro pour bénéficier de fonctionnalités avancées au fur et à mesure que votre site web se développera.

Étape 3 : Choisir un modèle pour votre site web

Concevoir un site web à partir de zéro peut être décourageant, mais avec la Element Pack's Grâce à la vaste bibliothèque de modèles du site, vous pouvez rapidement commencer à utiliser des mises en page préconçues adaptées à vos besoins. 

Ces modèles vous permettent de gagner du temps tout en conservant un aspect professionnel, que vous créiez un portfolio, un site web d'entreprise ou une boutique de commerce électronique.

Pour utiliser le modèle de Element Pack, vous devez activer la bibliothèque de modèles dans l'éditeur. 

  • Se rendre à l'adresse suivante Element Pack > Autres réglages
Managing Elementor Settings to Use Element Pack
  • Sélectionnez l'option Bibliothèque de modèles (dans l'éditeur) et l'activer. 
Enabling Template Library in Editor in Element Pack

Pour que vous puissiez accéder au Pack Elementor avec l'éditeur, vous devez activer le conteneur. 

Pour cela, 

  • Naviguez jusqu'à Elementor > Paramètres et sélectionnez l'option Caractéristiques
Enabling Elementor Container Feature
  • Faites défiler vers le bas jusqu'à la rubrique Conteneur, activer et Enregistrer les modifications
Activating Container in Elementor Settings and Saving Changes

Désormais, la bibliothèque de modèles de Element Pack est disponible dans l'éditeur de Elementor.

Une fois activée, 

  • Naviguez vers votre tableau de bord WordPress et ouvrez la page que vous souhaitez modifier ou créez une nouvelle page. 
Edit Page To Design with Elementor and Element Pack
  • Cliquez sur Editer avec Elementor pour lancer l'éditeur visuel.
Select Edit with Elementor
  • Dans l'éditeur, sélectionnez Element Pack.
Access Element Pack Template Library with Elementor
  • Sélectionner Element Pack Modèles parmi les options proposées. Une bibliothèque de modèles conçus par des professionnels s'affiche alors.
Preview 100+ Element Pack Templates
  • Utilisez la barre de recherche ou les filtres pour trouver des modèles par type (par ex, Le portefeuille, Entreprises, Commerce électronique).

Chaque modèle est réactif et personnalisable, ce qui garantit un fonctionnement transparent sur tous les appareils.

  • Passez la souris sur un modèle pour voir une Avant-première bouton. Cliquez dessus pour voir la conception et la mise en page en détail.
Preview Template You Want to Add to your WordPress Page
  • Une fois que vous avez trouvé un modèle qui répond à vos besoins, cliquez sur Insérer pour l'ajouter directement à votre page.

Pour cet article, nous allons sélectionner un modèle de portefeuille. 

Click Insert Option to Add Template to your WordPress Page
  • Attendez quelques secondes pour que le modèle se charge dans l'éditeur.
View the Element Pack Template in your WordPress Page
  • Remplacez le texte et les images par votre contenu. La fonction "glisser-déposer" permet d'ajuster facilement les éléments tels que les titres, les images et les boutons.

Avantages de l'utilisation des modèles Element Pack

  • Gain de temps: Les modèles préconçus vous permettent d'éviter le long processus de conception.
  • Polyvalence: Choisissez parmi une gamme de styles adaptés à différents secteurs d'activité.
  • Finition professionnelle: Les développeurs l'ont créé en tenant compte des tendances modernes en matière de design, ce qui garantit l'aspect soigné de votre site web.

Étape 4 : Personnaliser la mise en page de votre site web

Une fois que le modèle que vous avez choisi est en place, il est temps de le faire vôtre en personnalisant la mise en page et la conception.

Elementor et Widgets Element Pack offrent la possibilité d'ajuster chaque élément, garantissant ainsi que votre site Web reflète votre style et votre objectif uniques.

Utilisation de la fonction "glisser-déposer" pour la personnalisation de la mise en page

  • Cliquez sur une section, une colonne ou un widget pour modifier sa position.
Drag and Drop Customization with Element Pack and Elementor
  • Utilisez l'interface "glisser-déposer" pour déplacer les éléments à l'endroit de votre choix sur la page.
  • Redimensionnez les colonnes en faisant glisser les poignées des colonnes pour créer la présentation de votre choix.
  • Ajoutez de nouvelles sections ou colonnes en cliquant sur le bouton Ajouter une section (+) dans la barre d'outils de Elementor.
Adding New Element in your WordPress Page
  • Utilisez le menu contextuel pour supprimer ou dupliquer des widgets et des sections pour plus d'efficacité.
Deleting Unnecessary Element in Elementor Page Builder

Utiliser des widgets clés pour la personnalisation

Element Pack propose des widgets avancés qui rehaussent votre design :

  1. Onglets avancés
    • Ajoutez des zones de contenu élégantes et à onglets pour organiser l'information de manière claire.
  • Personnalisez les titres, le contenu et les styles des onglets directement dans les paramètres du widget.
  1. Widget Carrousel
  • Mettez en valeur des images ou des témoignages dans un format diaporama accrocheur.
  • Ajustez les effets de transition, la vitesse et les options de navigation en fonction de l'esthétique de votre site.
  1. Widget tableau des prix
  • Créer des tableaux de prix attrayants pour les services ou les produits.
  • Mettez en évidence des plans spécifiques en ajoutant des badges ou en soulignant les colonnes avec des couleurs uniques.

N'hésitez pas à explorer plus de 290 widgets et éléments - expérimentez-les pour maximiser leur potentiel.

Étape 5 : Ajouter des fonctionnalités interactives avec Element Pack

Les éléments interactifs sont essentiels pour maintenir l'intérêt des visiteurs et améliorer leur expérience de navigation.

Avec Element PackVous pouvez ajouter sans effort des widgets dynamiques et interactifs tels que des accordéons, des curseurs et des galeries qui feront ressortir votre site Web.

Pourquoi les fonctionnalités interactives sont importantes

Les éléments interactifs ne se contentent pas d'être attrayants :

  • Ils encouragent les utilisateurs à explorer votre contenu.
  • Ils améliorent l'expérience globale de l'utilisateur (UX).
  • Ils permettent de présenter l'information de manière claire, structurée et attrayante.

Ajout d'accordéons pour une information compacte

Les accordéons sont parfaits pour les FAQ, les détails sur les produits ou les guides étape par étape. Voici comment les ajouter :

  • Dans l'éditeur Elementor, naviguez jusqu'à l'élément Element Pack Widgets section.
  • Faire glisser le Accordéon sur votre page.
Adding Accrodian to WordPress Page From Element Pack
  • Ajoutez vos titres et descriptions pour chaque section.
Adding Title and Description to Accrodion
  • Ajustez l'icône, la typographie et l'espacement pour qu'ils correspondent à la conception de votre site.
  • Utiliser le Onglet Style pour personnaliser les couleurs, les bordures et les effets de survol.
Styling Accrodion from Style Tab
  • Activer ou désactiver la possibilité de garder plusieurs sections ouvertes simultanément.

Prévisualisation en direct et test de vos fonctionnalités

  • Prévisualisez votre site et cliquez sur les éléments interactifs pour vous assurer qu'ils fonctionnent correctement.
Preview your Website to View Interactive Elements
  • Utilisez des images compressées et des effets rationalisés pour maintenir des temps de chargement rapides.

Étape 6 : Optimisez votre site web pour les mobiles et les tablettes

Dans le paysage numérique actuel, il est essentiel de veiller à ce que votre site Web soit attrayant et fonctionne de manière transparente sur tous les appareils. Elementor et Element Pack facilitent la création d'un design responsive qui s'adapte parfaitement aux smartphones, aux tablettes et aux ordinateurs de bureau.

Pourquoi l'optimisation mobile est-elle cruciale ?

  • Un site web réactif améliore l'expérience de l'utilisateur (UX) et stimule le classement dans les moteurs de recherche.
  • Assurer la compatibilité avec les petits écrans permet de fidéliser les visiteurs et de réduire les taux de rebond.

Utilisation des outils d'édition mobiles de Elementor

  • Passer de l'un à l'autre Bureau, Tabletteet Mobile vues.
Preview Your Website to View Changes with New Elements
  • Redimensionnez les colonnes, ajustez le rembourrage et modifiez la taille des polices pour vous assurer que le contenu s'intègre bien.
  • Utiliser le Cacher/Afficher pour n'afficher que les éléments pertinents pour des appareils spécifiques.
  • Prévisualisez les modifications en temps réel à l'aide de l'éditeur réactif pour vous assurer que tout est parfait.
Mobile preview of website built using Elementor

Comment Element Pack améliore-t-il la réactivité des mobiles ?

Element Pack sont conçus pour s'adapter de manière transparente à tous les appareils :

  • Widgets qui se redimensionnent automatiquement: Widgets populaires tels que Onglets avancés, Carrousel d'imageset Formulaires ajustent automatiquement leurs dimensions pour un affichage optimal.
  • Points d'arrêt personnalisés: Element Pack prend en charge les points de rupture personnalisés de Elementor, ce qui vous permet de contrôler avec précision l'affichage du contenu sur différentes tailles d'écran.
  • Éléments tactiles: Les fonctions interactives, telles que les curseurs et les accordéons, sont optimisées pour les gestes tactiles.

Conseils pratiques pour l'optimisation mobile

  • Simplifier la navigation : Utiliser les outils de Element Pack Méga menu pour créer des menus compacts et adaptés à la mobilité.
  • Optimiser les images : Compression des images et utilisation de Elementor Incrustation d'arrière-plan pour créer des visuels époustouflants sans ralentir votre site.
  • Test Tap Targets : Veillez à ce que les boutons et les éléments cliquables soient suffisamment grands pour être facilement touchés sur les petits écrans.
  • Vérifier la typographie : Utilisez des tailles de police modulables pour une meilleure lisibilité sur tous les appareils.

Testez votre site web sur plusieurs appareils

  • Réactivité des tests : Utiliser la fonction Elementor Changements dans l'aperçu et tester votre site sur des appareils réels.
  • Compatibilité avec les navigateurs : Veillez à ce que votre site web s'affiche correctement sur les navigateurs les plus courants tels que Chrome, Safari et Edge.

Étape 7 : Améliorer la fonctionnalité de votre site web

La fonctionnalité de votre site web peut faire ou défaire sa convivialité. Tandis que Elementor fournit des outils de personnalisation robustes, Element Pack Pro passe à la vitesse supérieure avec des fonctionnalités avancées qui améliorent les performances de votre site web et l'expérience des utilisateurs. 

Voyons comment intégrer ces outils et rendre votre site plus dynamique et fonctionnel.

Qu'est-ce qui rend Element Pack Pro spécial ?

  • Widgets avancés: Accéder à des widgets tels que Postes dynamiques, Méga menuet Formulaires avancés pour répondre aux besoins complexes des sites.
  • Contenu dynamique: Créer des pages qui affichent un contenu personnalisé en fonction des interactions de l'utilisateur.
  • Amélioration de la convivialité: Des outils tels que Formulaires de connexion/enregistrement, Calendriers des événementset Constructeurs de fenêtres contextuelles rationaliser l'engagement des utilisateurs.

Étape 8 : Publier et entretenir votre site web

Après tous vos efforts de conception et de personnalisation, il est temps de donner vie à votre site web ! La publication de votre site web est une étape cruciale, mais sa maintenance permet de s'assurer qu'il reste fonctionnel, sécurisé et à jour. 

Voici comment franchir les dernières étapes de votre parcours de création de site web en utilisant Elementor et Element Pack.

Contrôles finaux avant la publication

Avant de publier, assurez-vous que tout est prêt sur votre site :

  • Conception adaptée: Utilisez les outils d'édition réactifs de Elementor pour vérifier que votre site est parfaitement adapté aux ordinateurs de bureau, aux tablettes et aux téléphones portables.
  • Navigation et liens: Tester tous les liens internes et externes pour s'assurer qu'ils fonctionnent correctement.
  • Widgets et fonctionnalités: Vérifiez à nouveau que tous les Widgets Element Pack (par exemple, les méga-menus, les galeries interactives et les formulaires) fonctionnent comme prévu.

Publication de votre site web

Voici comment faire vivre votre site web :

  • Aller à la page Tableau de bord WordPress.
  • En vertu de la Pages localisez les pages que vous avez conçues.
  • Cliquez sur Editer sur chaque page, puis cliquez sur Publier ou Mise à jour.
Publish Your Website
  • Vérifiez le site en visitant son URL pour vous assurer que tout s'affiche correctement.

Maintenir votre site web avec Element Pack

La maintenance est essentielle pour assurer le bon fonctionnement de votre site et offrir une excellente expérience aux utilisateurs. Voici quelques conseils pour tirer le meilleur parti de Caractéristiques de Element Pack pour faciliter les mises à jour :

Utiliser l'édition en direct pour des retouches rapides

  • Elementor vous permet de modifier instantanément le contenu, la présentation ou le style.
  • Avantage : mise à jour des offres saisonnières, des événements ou des éléments du portefeuille en toute simplicité.

Mises à jour régulières des widgets

  • Element Pack publie régulièrement des mises à jour avec des corrections de bugs, de nouveaux widgets et des fonctionnalités améliorées.
  • Maintenez vos plugins à jour pour garantir la compatibilité et la sécurité.

Contrôler les performances

  • Utilisation outils et des plugins pour surveiller la vitesse et le temps de fonctionnement de votre site web.
  • Optimisez les images et les scripts pour maintenir des temps de chargement rapides, en particulier sur les appareils mobiles.

Planifier les rafraîchissements de contenu

  • Mettez régulièrement à jour les widgets de contenu dynamique (comme les blogs ou les portfolios) pour que votre site reste pertinent.

Partager votre site web avec le monde entier grâce à Element Pack

  • Partagez le lien de votre site web sur les plateformes de médias sociaux.
  • Utiliser les outils de Element Pack widget social pour afficher vos flux de médias sociaux, ce qui permet aux visiteurs de se connecter plus facilement.

Conclusion

Nous vous félicitons ! Vous avez réussi à créer un site web professionnel en utilisant Elementor et Element Pack

Grâce à ces outils puissants, vous avez accès à tous les gadgets dont vous avez besoin pour créer un site visuellement époustouflant et hautement fonctionnel, qu'il s'agisse d'une image de marque personnelle, d'un portfolio ou de votre entreprise. 

De la sélection du modèle parfait à l'ajout d'éléments interactifs, en passant par la personnalisation des mises en page et la garantie de la réactivité, Elementor et Element Pack ont rendu le processus de création de sites web simple et agréable.

Que vous ayez opté pour la version gratuite de Element Pack ou que vous ayez débloqué tout le potentiel de la version premium Pro, vous disposez désormais d'un site web dynamique, facile à gérer et à entretenir.

N'oubliez pas que votre site web est une entité vivante. Grâce à des mises à jour régulières, à du nouveau contenu et à une maintenance intelligente, vous pouvez garder votre site frais et attrayant pour vos visiteurs. 

La facilité d'utilisation de Elementor, combinée aux améliorations de Element Pack, continuera d'être votre arme secrète pour créer, développer et maintenir un site web qui se démarque.

Prêt à faire passer votre site web à la vitesse supérieure ?

Si vous ne l'avez pas encore fait, explorez Element Pack Pro pour bénéficier de fonctionnalités encore plus puissantes et d'options de personnalisation qui vous aideront à repousser les limites de la conception et de la fonctionnalité de votre site web.

Visitez le site Site web Element Pack Pro ou consulter le site Element Pack Lite version sur le dépôt WordPress pour commencer dès aujourd'hui !

Laisser une réponse

Table des matières

Copyright © 2025 BdThemes. Tous droits réservés.

Money Transfer Logo