CRÉER DES MISES EN PAGE PERSONNALISÉES AVEC ELEMENTOR
Vous souhaitez créer vos propres mises en page personnalisées dans WordPress ? Elementor est un générateur de pages WordPress qui fonctionne par de simples glisser-déposer. Ce qui vous permet de créer facilement des mises en page personnalisées sans avoir de connaissances en html/css.
Dans cet article, nous allons voir comment créer facilement, en quelques clics, des mises en page WordPress personnalisées à l’aide de celui-ci.
POURQUOI ET QUAND AVEZ-VOUS BESOIN D’UNE MISE EN PAGE PERSONNALISÉE ?
De nombreux thèmes, gratuits ou payants sont proposés avec de multiples choix de mise en page pour différents types de pages. Cependant, il arrive qu’aucune de ces mises en page ne réponde à vos besoins.
Si vous savez comment coder en PHP, HTML et CSS, vous pouvez créer vos propres modèles de pages 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 et ne peuvent donc arriver à leurs besoins. J’irais même plus loin en disant que même en ayant ces connaissances, un constructeur de page peut s’avérer un gain de temps conséquent dans la création de nos modèles de pages.
De ce fait, ne serait-il pas formidable si vous pouviez simplement créer des mises en page à l’aide d’une interface de type « 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.
Il possède une interface utilisateur intuitive qui vous permet de créer des mises en page avec une prévisualisation en direct de vos modifications. Il est fourni avec de nombreux modules prêts à l’emploi pour tous les types d’éléments de conception web.
Il existe plusieurs modèles pré-conçus par des professionnels que vous pouvez charger instantanément et utiliser comme point de départ. Il fonctionne avec tous les thèmes WordPress compatibles avec la norme et est compatible avec tous les plugins WordPress courants.
Cela dit, voyons comment créer des mises en page WordPress personnalisées avec Elementor.
Démarrer avec Elementor
Avant de commencer, nous vous conseillons de faire l’acquisition de Elementor PRO. Il s’agit de la version payante du plugin gratuit Elementor, qui vous donne accès à de nombreuses fonctionnalités supplémentaires, de nombreux thèmes et à un an d’assistance. (49$ / an).
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, vous devez visiter le menu « Elementor > Réglages » afin de configurer les paramètres du plugin.
Dans les paramètres généraux, vous pouvez choisir pour quels types de posts vous souhaitez activer Elementor. Sur la capture ci-dessus, vous pouvez par exemple observer, que nous avons défini Elementor pour les pages et posts, mais pas pour nos custom posts types « Plugins & Partenaires ». Libre à vous, de les activer pour les types de posts de votre choix.
Vous pouvez également définir si vous préférez qu’Elementor utilise par défaut les couleurs et les polices définies dans votre CSS, ou si vous souhaitez utilisez ceux proposés par Elementor par défaut. Si vous souhaitez utiliser ceux définis dans votre fichier CSS, ne cochez pas les cases.
Pour définir les utilisateurs ayant accès à Elementor, cliquez sur le menu « Elementor > Gestionnaire de roles« .
Vous pouvez exclure ou inclure des rôles d’utilisateur qui peuvent utiliser Elementor lors de la rédaction de messages ou de pages. Par défaut, il n’est activé que pour les administrateurs.
N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres.
Créer une mise en page WordPress personnalisée avec Elementor
Vous devez d’abord créer une nouvelle page (ou un nouveau post) sur votre site WordPress. Sur l’écran d’édition de l’article, vous remarquerez le nouveau bouton « Modifier avec Elementor« .
En cliquant dessus, vous lancerez l’interface utilisateur d’Elementor où vous pourrez modifier votre page en utilisant le générateur de page par glisser-déposer d’Elementor.
Vous pouvez maintenant ajouter des sections et construire votre page à partir de zéro, ou vous pouvez vous servir des modèles existants.
AJOUTER UN MODÈLE DEPUIS LA BIBLIOTHÈQUE ELEMENTOR
Les modèles sont un moyen plus rapide de vous aider à démarrer. Elementor est fourni 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 » (petite icone entourée de gris représentant un dossier).
Une fenêtre contextuelle s’ouvrira alors, dans laquelle vous pourrez voir les différents modèles disponibles. Vous pouvez alors rechercher un modèle similaire à celui que vous avez en tête pour la mise en page de votre page ou post.
Cliquez maintenant sur le modèle de votre choix afin de le sélectionner, et cliquez ensuite sur le bouton : « Insérer » situé en haut à droite afin de le charger sur votre page.
Le modèle en question se chargera alors dans votre page.
MODIFIER LES SECTIONS D’UNE PAGE
Vous pouvez maintenant commencer à modifier le modèle pour qu’il corresponde à vos besoins. Il vous suffit de pointer et de cliquer sur un élément pour le sélectionner, et Elementor vous montrera les différents paramètres disponibles dans la colonne de gauche.
Parlons maintenant de la façon dont fonctionnent les mises en page d’Elementor.
Les mises en page d’Elementor sont construites à 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.
AJOUTER UN WIDGET
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.
Il vous suffit de sélectionner un widget et de le déposer dans votre section ou colonne. Il existe un large éventail de widgets disponibles qui couvrent tous les éléments de conception web courants auxquels vous pouvez penser.
Vous pouvez ajouter des images, du texte, des rubriques, des galeries d’images, des vidéos, des cartes, des icônes, des témoignages, un curseur, des carrousels, et bien d’autres choses encore.
Vous pouvez également ajouter des widgets WordPress par défaut et même les widgets créés par d’autres plugins.
Si jamais vous n’arrivez pas à retrouver la barre de Widgets, il suffit simplement de cliquer sur le carré blanc en haut à droit :
Une fois que vous avez terminé vos modifications, vous pouvez cliquer sur le bouton « Enregistrer » pour les sauvegarder, ou « publier » pour mettre en ligne.
NB : La sauvegarde d’une mise en page (enregistrer comme modèle) ne permettra pas de publier la page sur votre site WordPress. Il s’agit simplement d’enregistrer votre mise en page.
Créer vos propres modèles dans Elementor
Elementor vous permet d’enregistrer vos propres modèles de mises en page personnalisées dans votre bibliothèque de modèle. De cette façon, vous pouvez réutiliser vos propres modèles pour créer de nouvelles pages encore plus rapidement à l’avenir.
Il vous suffit de modifier la page que vous souhaitez enregistrer comme modèle avec Elementor, et ensuite dans l’interface de création d’Elementor, cliquez sur l’icône avec une flèche vers le le haut, à côté du bouton d’enregistrement, puis sélectionnez « Enregistrer comme modèle« .
Une fenêtre va alors s’ouvrir, dans laquelle on vous demandera de donner un nom à votre modèle, une fois le nom défini, vous pourrez alors cliquer sur le bouton « Enregistrer« .
RÉUTILISER UN MODÈLE ENREGISTRÉ
La prochaine fois que vous créerez une mise en page personnalisée, vous pourrez sélectionner un des modèles préalablement enregistrés dans l’onglet « Mes modèles« .
EXPORTER UN MODÈLE ENREGISTRER VERS UN AUTRE SITE
Vous pouvez également exporter ce modèle et l’utiliser sur d’autres sites WordPress en utilisant Elementor.
Vous devrez vous rendre sur la page « Mes modèles » pour voir vos modèles enregistrés. Cliquez sur les 3 petits points à droit du modèle, et cliquez ensuite sur « Exporter » dans le menu qui s’ouvre.
IMPORTER UN MODÈLE ELEMENTOR
Après avoir téléchargé votre fichier de modèle, vous pouvez vous rendre sur la page de la bibliothèque d’un autre site WordPress en utilisant Elementor, cliquez sur la petite flèche en haut à droite, et importez ensuite votre modèle.
Voilà, nous avons fait un premier tour d’Elementor, axé principalement sur la création et la mise en page d’une page ou d’un post. Nous réaliserons d’autres tutos plus poussés à l’avenir pour rentrer plus en détail sur l’un ou l’autre aspect. Nous espérons que cet article vous a aidé à apprendre comment créer des mises en page personnalisées avec Elementor.
