Souhaitez-vous créer une mise en page avec Elementor ? Voulez-vous créer facilement un site web WordPress avec une apparence professionnelle ? Alors vous devez Télécharger le plugin WordPress Elementor ici.

 Elementor est un constructeur visuel de pages qui propose la fonctionnalité « Drag and Drop » qui vous permet de créer facilement des mises en page personnalisées sur WordPress sans aucune connaissance en codage.

Dans ce tutoriel, nous vous montrerons comment créer facilement des mises en page WordPress personnalisées avec Elementor en quelques clics seulement. Nous vous proposons aussi de consulter les autres alternatives de ce magnifique plugin WordPress.

Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là.

créer une mise en page avec Elementor

Pourquoi et quand créer des mises en page personnalisées sur WordPress ?

Avant de vous lancer, vous avez la possibilité de découvrir sur ce plugin WordPress en consultant les articles Présentation d’un page builder WordPress : Elementor ou découvrant le Tutoriel Elementor : Présentation de l’interface 

De nombreux thèmes WordPress gratuits et premium proposent plusieurs choix de mise en page pour différents types de pages. Cependant, parfois, aucun de ces modèles de mises en page ne répond à vos besoins.

Cependant, si vous êtes un férus du PHP, HTML et CSS, vous avez la possibilité de créer vos propres modèles de page ou même créer un thème enfant pour votre site web. Mais, la majorité des utilisateurs de WordPress ne sont pas des développeurs, donc cette option ne fonctionne pas pour eux.

Découvrez aussi ces 8 plugins WordPress pour créer facilement vos mises en page

Ne serait-il donc pas génial de créer des mise en page en utilisant une interface simple (Drag and Drop) ?

C’est exactement ce que fait Elementor. Il s’agit d’un plugin WordPress de création de page qui vous permet de créer facilement vos propres mises en page WordPress personnalisées sans aucune compétence de codage.

Il dispose d’une interface utilisateur intuitive qui vous permet de créer des mises en page personnalisées avec un aperçu en temps réel. Il est livré avec de nombreux modules prêts à l’emploi pour tous les types d’éléments de conception Web.

Il propose plusieurs modèles de pages conçus professionnellement et que vous pouvez charger et utiliser instantanément comme point de départ. Cela dit, examinons comment créer des mises en page personnalisées sur WordPress avec le plugin WordPress Elementor.

Mise en route d’Elementor

D’abord, vous devrez acheter le plugin « Elementor Pro ». C’est la version payante du plugin « Elementor » gratuit qui vous donne accès à des fonctionnalités supplémentaires et à 1 an d’assistance client.

Ensuite, vous devrez installer et activer le plugin Elementor. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Après l’activation, visiter la page « Elementor > Paramètres » pour configurer le fonctionnement de ce plugin.

Elementorsettings

Ici, vous pouvez activer « Elementor » pour différents types de publications. Par défaut, il est activé pour vos articles et pages WordPress. Si vous avez des formats de publications personnalisés sur votre site web, ceux-ci apparaîtront également ici, et vous pourrez également les activer.

Vous pourrez exclure ou inclure des rôles d’utilisateurs qui peuvent utiliser Elementor lors de l’écriture des articles ou de pages. Par défaut, il est activé uniquement pour les administrateurs.

Découvrez nos 8 plugins WordPress pour gérer les rôles et les utilisateurs

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres.

Création d’une mise en page personnalisée avec Elementor

D’abord, vous devez créer une nouvelle page (ou une publication) sur votre site web WordPress. Sur la page d’édition des publications, vous remarquerez le nouveau bouton « Modifier avec Elementor » (Edit With Elementor).

Modifier avec elementor

En cliquant dessus, vous lancerez l’interface utilisateur d’Elementor où vous pourrez éditer votre page en utilisant le constructeur visuel de page dotée de la fonctionnalité drag and drop.

Drag and drop elementor

Vous pouvez maintenant ajouter des sections et créer votre page à partir de rien, ou vous pouvez encore charger un des modèles livré par défaut.

Les modèles sont un moyen plus rapide de démarrer rapidement. Ainsi, Elementor propose plusieurs modèles conçus professionnellement que vous pouvez personnaliser autant que vous le souhaitez.

Commençons par un modèle en cliquant sur le bouton « Ajouter un modèle ».

Cela affichera une fenêtre contextuelle où vous pourrez voir les différents modèles disponibles. Vous devriez rechercher un modèle qui ressemble à ce que vous souhaitez. 

Mise en page elemntor plugin

Maintenant, cliquez pour sélectionner le modèle que vous souhaitez, puis cliquez sur le bouton « Insérer » pour l’ajouter à votre page.

Elementor va charger le modèle pour vous.

Vous pouvez désormais commencer à modifier le modèle en fonction de vos besoins. Il suffit de pointer et de cliquer sur n’importe quel élément pour le sélectionner, et Elementor vous affichera ses paramètres dans la colonne de gauche.

Début de lédition de page sur elementor

Parlons maintenant de la façon dont les mises en page d’Elementor fonctionnent.

Les modèles proposés par le plugin Elementor sont construits sur des sections, des colonnes et des widgets. Les sections sont comme des lignes ou des blocs que vous placez sur votre page.

Chaque section peut avoir plusieurs colonnes et chaque section et colonne peut avoir ses propres styles, couleurs, contenu, etc…

Modification dune page avec elementor

Vous avez la possibilité d’ajouter des éléments dans vos colonnes et sections à l’aide des widgets que propose Elementor.

Ces widgets sont des types de blocs de contenu que vous pouvez placer dans les sections de vos pages.

Il suffit de sélectionner un widget et de le déposer dans votre section ou votre colonne. Il ya un vaste ensemble de widgets disponibles qui couvrent tous les éléments de conception web populaires que vous pouvez imaginer.

Element e conception avec elementor

Vous pouvez ajouter des images, des textes, des rubriques, des galeries d’images , des vidéos, des cartes, des icônes, des témoignages, des sliders, des carrousels et bien plus encore.

Consultez aussi nos 15 thèmes et modèles Elementor pour créer un site web

Vous pouvez également ajouter des widgets WordPress par défaut et même des widgets créés par d’autres plugins WordPress sur votre site web.

Une fois que vous avez terminé de créer votre ou de modifier votre mise en page, vous pouvez cliquer sur le bouton « Enregistrer » pour conserver vos modifications.

Personnalisation de la mise en page avec elementor

Remarque: L’enregistrement d’une mise en page ne publiera pas la page sur votre site web WordPress. Elle sauvegardera simplement votre mise en page.

A ce stade, vous avez la possibilité de prévisualiser votre page ou accéder au tableau de bord WordPress. Ce qui vous ramènera à l’éditeur de publication par défaut de WordPress. Vous pouvez maintenant enregistrer votre page WordPress ou la publier sur votre site web.

Publication de mise en page avec elementor

Voilà, ainsi fini la création d’une page avec le plugin WordPress Elementor.

Mais comme de nombreux constructeurs visuels de page, il propose aussi des extensions qui vous permettront de créer facilement et rapidement de nouvelles mises en page en apportant plus d’éléments de conception au plugin par défaut.

Télécharger Elementor

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. JetElements 

Ce plugin améliorera votre bundle Elementor avec une grande variété de modules, ce qui sera extrêmement utile lors de la construction de votre site Web. Des éléments puissants ont été spécialement créés pour être intégrés aux fonctionnalités d’Elementor afin de vous fournir des solutions polyvalentes et des éléments élégants.

Jetelement plugin wordpress elementor

Ses principales fonctionnalités sont : de nombreux modules utiles, contenant de nombreuses options de styles, des paramètres fonctionnels et des éléments absolument personnalisables, des éléments incroyables pour lancer rapidement votre boutique en ligne, la prise en charge des langues RTL, le support du plugin WPML et un module Contact Form 7 incroyable, qui permet d’ajouter vos formulaires de contact et de les intégrer à votre site Web.

Télécharger | Démo | Hébergement Web

2. JetMenu 

JetMenu est une extension très fonctionnelle du plugin Elementor, qui permet de créer des megamenus avec des éléments déroulants faciles à utiliser. Ce plugin ne limite pas votre imagination et a le potentiel de créer des menus étonnants et de les relooker en fonction de votre vision et de vos besoins.

Jetmenu plugin wordpress elementor

Ses principales fonctionnalités sont : Aucune connaissance dans le codage n’est nécessaire, de riches fonctionnalités qui se combinent parfaitement avec la simplicité et la clarté, une grande sélection de modules de contenu, spécialement développés pour vous aider dans la création de vos menus, une mise en page hautement responsive, et bien plus.

Si vous souhaitez pimenter les menus ou megamenus de votre site web, ce plugin WordPress est à consulter.

Télécharger | Démo | Hébergement Web

3. JetWooBuilder 

JetWooBuilder est un addon incontournable qui permet de créer des pages de produits WooCommerce à part entière avec Elementor.

Jetwoobuilder plugin wordpress elementor

Comme fonctionnalités vous y trouverez entre autres : plusieurs modèles de page de produit uniques,  de nombreux éléments visuels pour créer des pages de produit WooCommercede nombreux widgets de contenu accrocheurs, tels que Ajouter au panier, Extrait, Image, Notation, Connexes et bien d’autres, la possibilité d’afficher les taxonomies des produits et bien plus.

Télécharger | Démo | Hébergement Web

Quelques ressources utiles :

Conclusion :

Voila ! C’est tout pour ce tutoriel, j’espère qu’il vous permettra de créer des mises en page modernes et professionnelles avec le plugin Elementor.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Surtout partagez cet article sur vos différents réseaux sociaux.