Comment créer des mises en page WordPress personnalisées avec Elementor

Voulez-vous créer vos propres mises en page personnalisées dans WordPress ?

Elementor est un générateur de pages WordPress par glisser-déposer qui vous permet de concevoir facilement des mises en page WordPress personnalisées sans aucune connaissance en codage.

Dans cet article, nous allons vous montrer comment créer facilement des mises en page WordPress personnalisées avec Elementor en quelques clics.

Comment créer des mises en page WordPress personnalisées avec ElementorComment créer des mises en page WordPress personnalisées avec Elementor

Pourquoi et quand avez-vous besoin de mises en page WordPress personnalisées ?

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

Si vous savez coder en PHP, HTML et CSS, vous pouvez créer vos propres modèles de page ou même créer un thème enfant pour votre site. Cependant, la majorité des utilisateurs de WordPress ne sont pas des développeurs, cette option ne fonctionne donc pas pour eux.

Ne serait-il pas génial si vous pouviez simplement concevoir des mises en page à l'aide d'une interface glisser-déposer ?

C'est exactement ce que fait Elementor. Il s'agit d'un plugin de création de pages WordPress par glisser-déposer qui vous permet de créer facilement vos propres mises en page WordPress personnalisées sans aucune compétence en 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 direct. Il est livré avec de nombreux modules prêts à l'emploi pour toutes sortes d'éléments de conception Web.

Elementor propose plusieurs modèles conçus par des professionnels que vous pouvez instantanément charger et utiliser comme point de départ. Il fonctionne avec tous les thèmes WordPress conformes aux normes et est compatible avec tous les plugins WordPress populaires.

Cela dit, voyons comment créer des mises en page WordPress personnalisées avec Elementor.

Premiers pas avec Elementor

Tout d’abord, vous devrez acheter le plugin Elementor Pro. Il s'agit de la version payante du plugin gratuit Elementor et vous donne accès à des fonctionnalités supplémentaires et à 1 an de support.

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.

Lors de l'activation, vous devez visiter le Elementor »Paramètres page pour configurer les paramètres du plugin.

Activer Elementor pour différentes publicationsActiver Elementor pour différentes publications

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 types de publication personnalisés sur votre site, ceux-ci apparaîtront également ici et vous pourrez également les activer.

Vous pouvez exclure ou inclure des rôles d'utilisateur pouvant utiliser Elementor lors de la rédaction d'articles ou de pages. Par défaut, le générateur de pages est activé uniquement pour les administrateurs.

Ensuite, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres.

Création de mises en page WordPress personnalisées avec Elementor

Tout d’abord, vous devez créer une nouvelle page ou publier sur votre site WordPress. Sur l'écran de post-édition, vous remarquerez le nouveau bouton « Modifier avec Elementor ».

Modifier avec ElementorModifier avec Elementor

En cliquant dessus, vous lancerez l'interface utilisateur d'Elementor, où vous pourrez modifier votre page à l'aide du générateur de page glisser-déposer d'Elementor.

Vous pouvez ajouter des sections et créer votre page à partir de zéro, ou vous pouvez choisir un modèle.

Modifier une page avec ElementorModifier une page avec Elementor

Les modèles vous offrent un moyen simple et rapide de démarrer. Elementor est livré avec plusieurs modèles conçus par des professionnels 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 fera apparaître une fenêtre contextuelle où vous pourrez voir les différents modèles disponibles. Vous devez rechercher un modèle similaire à celui que vous souhaitez pour votre mise en page.

Dans notre exemple, nous examinons des modèles de pages 404.

Sélectionnez un modèle dans ElementorSélectionnez un modèle dans Elementor

Maintenant, vous devez cliquer pour sélectionner le modèle que vous aimez, puis cliquer sur le bouton « Insérer » pour l'ajouter à votre page.

Elementor va maintenant charger le modèle pour vous.

Vous pouvez maintenant commencer à modifier le modèle en fonction de vos besoins. Pointez et cliquez simplement sur n'importe quel élément pour le sélectionner, et Elementor vous montrera ses paramètres dans la colonne de gauche.

Pointez n’importe quel élément et modifiez-lePointez n’importe quel élément et modifiez-le

Comment fonctionnent les mises en page Elementor

Parlons maintenant du fonctionnement des mises en page Elementor.

Les mises en page Elementor sont créées à l’aide de sections, de colonnes et de 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.

Vous pouvez ajouter n'importe quoi dans vos colonnes et sections à l'aide des widgets Elementor. Ces widgets sont différents types de blocs de contenu que vous pouvez placer dans vos sections Elementor.

Sélectionnez simplement un widget et déposez-le dans votre section ou colonne. Il existe un vaste ensemble de widgets disponibles qui couvrent tous les éléments de conception Web populaires auxquels vous pouvez penser.

Ajouter des blocs à la mise en pageAjouter des blocs à la mise en page

Vous pouvez ajouter des images, du texte, des titres, des galeries d'images, des vidéos, des cartes, des icônes, des témoignages, des curseurs, des carrousels et bien plus encore.

Vous pouvez également ajouter des widgets WordPress par défaut et même les widgets créés par d'autres plugins WordPress sur votre site. Par exemple, si vous utilisez WPForms pour créer différents formulaires pour votre site, vous pouvez alors utiliser son widget dans Elementor.

Une fois que vous avez terminé vos modifications, vous pouvez cliquer sur la flèche à côté du bouton « Publier » pour afficher différentes options de sauvegarde.

Cliquez sur les options de sauvegardeCliquez sur les options de sauvegarde

Note: Enregistrer une mise en page ne publiera pas la page sur votre site WordPress, mais la sauvegardera.

Vous pouvez maintenant prévisualiser votre page ou accéder au tableau de bord WordPress.

Cela vous ramènera à l’éditeur de publication WordPress. Vous pouvez désormais enregistrer votre page WordPress ou la publier sur votre site Web.

Mettre à jour ou publier la page éditée avec ElementorMettre à jour ou publier la page éditée avec Elementor

Créer vos propres modèles dans Elementor

Elementor vous permet d'enregistrer vos propres mises en page personnalisées en tant que modèles. De cette façon, vous pouvez réutiliser vos propres modèles pour créer de nouvelles pages encore plus rapidement à l'avenir.

Modifiez simplement la page que vous souhaitez enregistrer en tant que modèle avec Elementor.

Dans l'interface du générateur Elementor, cliquez sur la flèche à côté du bouton « Publier ». Vous verrez maintenant plus d'options pour enregistrer votre message. Cliquez simplement sur l'option « Enregistrer en tant que modèle ».

Option Enregistrer comme modèle dans ElementorOption Enregistrer comme modèle dans Elementor

Cela fera apparaître une fenêtre contextuelle dans laquelle vous devrez fournir un nom pour votre modèle.

Après avoir saisi le nom, cliquez sur le bouton « Enregistrer ».

Enregistrez votre page dans la bibliothèqueEnregistrez votre page dans la bibliothèque

La prochaine fois que vous créerez une mise en page personnalisée, vous pourrez la sélectionner dans l'onglet « Mes modèles ».

Tout ce que vous avez à faire est de cliquer sur le bouton « Insérer » pour votre mise en page personnalisée.

Afficher la mise en page dans la bibliothèqueAfficher la mise en page dans la bibliothèque

Vous pouvez également exporter ce modèle et l'utiliser sur d'autres sites WordPress à l'aide d'Elementor.

Cliquez simplement sur l'icône à 3 points, puis cliquez sur l'option « Exporter ».

Exporter le modèle de mise en pageExporter le modèle de mise en page

De là, vous pouvez télécharger le modèle sur votre ordinateur.

Alternatives Elementor pour créer des mises en page personnalisées

Outre Elementor, il existe d'autres créateurs de pages de destination et de sites Web qui vous permettent de créer des mises en page personnalisées pour votre site.

Voici quelques-unes des meilleures alternatives Elementor que vous pouvez utiliser :

  • SeedProd est le meilleur constructeur de sites Web WordPress par glisser-déposer qui vous permet de créer des mises en page personnalisées pour vos pages de destination. Vous avez le choix entre plus de 300 modèles de thèmes ou de pages de destination. SeedProd propose également des tonnes d'options et de blocs de personnalisation pour créer des pages époustouflantes. Pour plus de détails, vous pouvez consulter notre revue complète de SeedProd.
  • Divi est un thème visuel et un constructeur de pages. Il est présent dans l'industrie depuis plus de 14 ans et offre différentes fonctionnalités pour créer des mises en page WordPress, notamment une bibliothèque de mises en page. Il existe de nombreuses options de personnalisation dans le générateur visuel et vous n'avez pas besoin de modifier de code.
  • Architecte prospère est un générateur de pages puissant et convivial pour les débutants que vous pouvez utiliser pour créer de superbes mises en page. Il est livré avec plus de 352 modèles et de nombreuses options de personnalisation. Vous pouvez utiliser son générateur visuel frontal pour modifier n'importe quel élément de la page. Pour plus de détails, consultez notre revue Thrive Architect.
  • Beaver Builder est un autre générateur de pages par glisser-déposer populaire pour WordPress. Il est facile à utiliser et vous pouvez facilement configurer des mises en page pour les pages et les publications à l'aide de Beaver Builder. Il propose également des modèles prédéfinis pour les pages de destination, mais il n'y en a pas autant qu'avec SeedProd ou Divi.

Nous espérons que cet article vous a aidé à apprendre à créer des mises en page WordPress personnalisées avec Elementor. Vous voudrez peut-être également consulter notre comparaison experte d’Elementor, Divi et SeedProd et nos choix pour les meilleurs logiciels de conception de sites Web.

Si vous avez aimé cet article, alors abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

Partagez cet article

Newsletter

Inscrivez-vous à notre newsletter pour profiter de toutes nos astuces !

Laissez une réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *