Elementor & WordPress : Comment créer des modèles de pages personnalisées ?

Vous avez un site WordPress, et vous voulez créer des modèles de mise en page ? Nous allons vous guider pas à pas dans ce process, à l’aide d’Elementor. Connaissez-vous Elementor ? Il s’agit d’un constructeur de pages WordPress de type drag & drop. Il permet de créer facilement des modèles de page WordPress sans connaissances particulières en programmation.

Pourquoi et quand créer des modèles de pages avec WordPress ?

Que vous ayez créer votre thème vous-même, ou que vous soyez passé par un thème gratuit ou payant issu de la base de thèmes WordPress, vous aurez certainement besoin de créer des modèles pour les pages internes. Modèles que vous pourrez dupliquer en quelques clics sur toutes les pages de votre site.

Avec l’aide d’Elementor, vous pourrez grâce à son interface simple et intuitive, créer ces modèles de page à l’aide de sa superbe fonctionnalité glisser-déposer (drag’n drop), les sauvegarder, et les réutiliser à votre guise sur les autres pages de votre site.

Comment installer Elementor pour ceux qui ne l’ont pas encore 

Si vous disposez déjà du plugin Elementor ou Elementor PRO, vous pouvez passer directement à l’étape suivante de ce tutoriel.

1. Commencez par installer et activer le plugin Elementor, disponible directement depuis votre tableau de bord. Si vous ne savez pas comment installer un plugin WordPress, je vous invite à lire ce guide comment installer un plugin WordPress.
2. Maintenant que Elementor est actif, rendez-vous sur la page « Elementor > Réglages » afin de configurer correctement celui-ci.

Cette page vous permet de définir pour quel type de pages vous pourrez utiliser Elementor. Par défaut, Elementor sera actif pour les articles et les pages, mais vous pouvez définir d’autres types de pages comme vos custom posts.

Dans le sous menu « Elementor > Gestionnaire de Rôles » vous pourrez également définir quels sont les utilisateurs qui peuvent ou ne peuvent pas accéder à l’éditeur visuel. Généralement, seuls les administrateurs (vous) y ont accès, mais si vous voulez que vos équipes puissent y avoir accès, choisissez les rôles qui peuvent y accéder.

Note importante : à chaque modification, pensez à cliquer sur le bouton « enregistrer les modifications » en bas de page pour sauvegarder vos changements.

Naviguez dans les différents réglages afin de choisir comment vous voulez utiliser cet outil. Vous verrez que tous les réglages sont assez intuitifs et bien détaillés.

Maintenant que vous avez défini les réglages, nous pouvons rentrer dans le vif du sujet.

Comment créer un modèle de page avec Elementor ?

Commencez par créer une nouvelle page pour créer votre modèle, cela évitera de casser ce que vous avez déjà fait. Une fois que vous avez créer votre nouvelle page, vous verrez apparaître un bouton : « modifier avec Elementor » en haut à droite :

Cliquez dessus, et l’interface d’édition d’Elementor se lancera automatiquement :

Instinctivement, vous y découvrirez 3 zones :

1. La colonne latérale gauche, composées des widgets (ou blocs) que vous pourrez utiliser pour ajouter du contenu à votre page.
2. La barre haute (avec les gros pâtés noirs) qui constitue le menu de votre site
3. La zone centrale qui vous permettra de définir des zones de contenu.

Vous pouvez maintenant créer une première zone de contenu, ou ajouter un modèle prédéfini par Elementor. Pour ce qui est des modèles, la majeure partie d’entre eux ne sont disponibles qu’avec Elementor PRO.

Créer un modèle de page à partir d’un template Elementor

Nous allons commencer ce tuto avec un template existant de la base de données Elementor. Si vous voulez créer votre propre modèle à partir de zéro, rendez-vous à l’étape suivante.

Dans l’interface, commencez par cliquer dans la zone centrale sur l’icone grise représentant un dossier :

Une fenêtre va alors s’ouvrir, affichant la bibliothèque et les différents modèles de page disponibles.

Parcourez les nombreux modèles afin de trouver une structure qui vous plaise. En cliquant sur celui-ci, vous aurez la possibilité de le découvrir en entier et en grand :

Une fois que vous avez trouvé le modèle qui vous convient, cliquez sur le bouton « insérer » qui se situe en haut à droite. Le modèle sera alors chargé directement dans votre page.

Nous allons donc maintenant pouvoir commencer à modifier notre modèle à notre guise. Pour cela, rien de plus simple : survolez une zone de contenu avec votre souris, et vous verrez apparaître des carrés bleus autour de celle-ci. Soit sur une section, soit sur un bloc. Cliquez ensuite sur le bloc ou la section que vous souhaitez modifier afin de voir ses paramètres apparaître dans la colonne latérale gauche.

Il vous suffit alors de remplacer le texte de démonstration par le texte de votre choix. Vous pouvez également remplacer les images et icônes par d’autres.

Fonctionnement des zones de contenus d’Elementor 

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

A force d’utilisation, vous apprendrez à faire la différence entre ces éléments.

Vous pouvez ajouter n’importe quoi dans vos colonnes et sections en utilisant les widgets Elementor. Ces widgets sont différents types de blocs de contenu que vous pouvez placer dans vos sections Elementor. Pour rappel, ils sont accessibles depuis la colonne latérale gauche. Et si vous ne les voyez pas, c’est que vous êtes dans le réglage d’un bloc, il vous suffira alors de cliquez sur le petit burger menu en haut à droite de la colonne pour les retrouver :

Il suffit de sélectionner un widget et de le déposer 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.

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 sliders, des carrousels, et bien plus encore.

Une fois que vous avez fini de faire vos modifications, vous pouvez cliquer sur « publier » pour publier votre page, ou sur « mettre à jour » si votre page a déjà été publiée.

Créer un modèle de page Elementor en partant de zéro

Si vous ne souhaitez pas utiliser les modèles préconçus d’Elementor, vous avez également la possibilité de créer et d’enregistrer vos propres modèles. Ceci implique de savoir exactement ce à quoi vous voulez que votre page ressemble. En enregistrant vos modèles, vous pourrez à votre guise les réutiliser sur d’autres pages.

Pour cela, comme nous l’avons vu dans la précédente partie de ce guide, créez une nouvelle page, que vous allez éditer avec Elementor. Construisez vos blocs, sections et colonnes comme bon vous semble. Une fois votre modèle de page terminé, il suffit de sauvegarder votre modèle de page.

Dans l’interface de construction d’Elementor, cliquez sur l’icône représentant une flèche située à côté du bouton de mise à jour, puis sélectionnez « Enregistrer comme modèle ».

Une nouvelle fenêtre s’ouvre alors, dans laquelle vous devez donner un nom à votre modèle et cliquer sur le bouton « enregistrer ».

La prochaine fois que vous voudrez créer une page basée sur votre modèle de mise en page personnalisée, vous pourrez la sélectionner dans l’onglet « Mes modèles » qui se trouve comme lors de la précédente étape dans le petit dossier gris :

Sauf que cette fois-ci, vous devrez choisir l’onglet : « mes modèles » lorsque vous aurez la fenêtre proposant les modèles Elementor par défaut :

Ce qui ressemblera à ceci :

Ici vous aurez le choix d’insérer le modèle de page dans votre nouvelle page, en cliquant sur « Insérer » ou d’exporter celui-ci pour l’importer dans un autre site.

Pour gérer, importer ou exporter des modèles, rendez-vous dans le menu : « Modèles > Modèles enregistrés » de votre tableau de bord :

J’espère que ce tutoriel vous a éclairé sur les modes de création et de gestion des modèles de page avec Elementor. N’hésitez pas à nous dire en commentaire si vous avez des questions, nous nous ferons un plaisir d’y répondre.

Au travail ! 🙂