Concevoir vos propres mises en page personnalisées dans WordPress peut sembler un défi de taille. Beaucoup de gens craignent que la création de designs uniques ne nécessite des compétences en codage. Cela peut être frustrant si vous souhaitez personnaliser l'apparence de votre site.
Heureusement, avec Elementor, vous n'avez pas besoin de connaître de code. Elementor est un constructeur de pages WordPress par glisser-déposer qui rend la conception de mises en page facile et intuitive. Même les débutants peuvent créer des pages époustouflantes en quelques clics.
Nous aidons nos lecteurs à personnaliser leurs sites Web avec Elementor depuis des années. Nous connaissons donc les moyens les plus simples et les plus efficaces pour que cela fonctionne pour vous.
Dans cet article, nous vous guiderons à travers les étapes pour créer rapidement et facilement 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 sont livrés avec plusieurs options de mise en page pour différents types de pages. Cependant, parfois, aucune de ces mises en page ne répondra à vos exigences.
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, donc cette option ne leur convient pas.
Alors, ne serait-il pas formidable si vous pouviez simplement concevoir des mises en page à l'aide d'une interface glisser-déposer ?
C'est exactement ce que fait Elementor. C'est un plugin constructeur 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.
WordPress + Elementor est une combinaison puissante qui offre une interface utilisateur intuitive vous permettant 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 charger instantanément 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.
Pour plus de détails, vous pouvez consulter notre avis complet sur Elementor.
Dans cet esprit, nous allons vous montrer comment créer des mises en page WordPress personnalisées avec Elementor. Voici un aperçu rapide de toutes les étapes que nous allons vous guider :
- Premiers pas avec Elementor
- Créer des mises en page WordPress personnalisées avec Elementor
- Créer vos propres modèles dans Elementor
- Astuce bonus : Alternatives à Elementor pour créer des mises en page personnalisées
Commençons !
Premiers pas avec Elementor
Tout d'abord, vous devrez acheter le plugin Elementor Pro. C'est la version payante du plugin Elementor gratuit et elle vous donne accès à des fonctionnalités supplémentaires et à 1 an d'assistance.
Ensuite, vous devrez installer et activer le plugin Elementor. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, vous devez visiter la page Elementor » Paramètres pour configurer les réglages du plugin.
Ici, vous pouvez activer Elementor pour différents types de publication. Par défaut, il est activé pour vos articles et pages WordPress.
Si vous avez des types de publication personnalisés sur votre site, ils apparaîtront également ici, et vous pourrez les activer également.
Vous pouvez exclure ou inclure les rôles d'utilisateur qui peuvent utiliser Elementor lors de la rédaction d'articles ou de pages. Par défaut, le constructeur de pages n'est activé que pour les administrateurs.
Ensuite, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.
Créer des mises en page WordPress personnalisées avec Elementor
Tout d'abord, vous devez créer une nouvelle page ou un nouvel article sur votre site WordPress. Sur l'écran d'édition de l'article, vous remarquerez le nouveau bouton « Modifier avec Elementor ».
Cliquer dessus lancera l'interface utilisateur d'Elementor, où vous pourrez modifier votre page en utilisant le constructeur de pages par glisser-déposer d'Elementor.
Vous pouvez ajouter des sections et construire votre page à partir de zéro ou choisir un modèle.
Les modèles vous offrent un moyen rapide et facile de commencer. 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 ouvrira une fenêtre contextuelle où vous pourrez voir les différents modèles disponibles. Vous devriez rechercher un modèle similaire à ce que vous souhaitez pour la mise en page de votre page.
Dans notre exemple, nous examinons les modèles de page 404.
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 chargera maintenant le modèle pour vous.
Vous pouvez maintenant commencer à modifier le modèle pour qu'il corresponde à 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.
Comment fonctionnent les mises en page Elementor
Parlons maintenant du fonctionnement des mises en page Elementor.
Les mises en page 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 comporter 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 des différents types de blocs de contenu que vous pouvez placer dans vos sections Elementor.
Il existe un large éventail de widgets disponibles qui couvrent tous les éléments de conception Web populaires auxquels vous pouvez penser. Sélectionnez simplement un widget et déposez-le dans votre section ou colonne.
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é la modification, vous pouvez cliquer sur la flèche à côté du bouton « Publier » pour afficher différentes options d'enregistrement.
Remarque : L'enregistrement d'une mise en page de page ne publiera pas la page sur votre site WordPress, mais elle sera enregistrée.
Vous pouvez maintenant prévisualiser votre page ou accéder au tableau de bord WordPress.
Cela vous ramènera à l'éditeur de contenu. Vous pouvez maintenant enregistrer votre page WordPress ou la publier sur votre site web.
Créer vos propres modèles dans Elementor
Elementor vous permet d'enregistrer vos propres mises en page personnalisées sous forme de modèles. Ainsi, 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 constructeur Elementor, cliquons sur la flèche à côté du bouton « Publier ».
Vous verrez maintenant plus d'options pour enregistrer votre publication. Cliquez simplement sur l'option « Enregistrer en tant que modèle ».
Cela ouvrira une fenêtre contextuelle où vous devrez fournir un nom pour votre modèle.
Après avoir entré le nom, cliquez simplement sur le bouton « Enregistrer ».
La prochaine fois que vous créerez une mise en page personnalisée, vous pourrez la sélectionner dans l'onglet « Mes modèles ».
Il vous suffit de cliquer sur le bouton « Insérer » pour votre mise en page personnalisée.
Vous pouvez également exporter ce modèle et l'utiliser sur d'autres sites WordPress avec Elementor.
Cliquez simplement sur l'icône des 3 points, puis sur l'option « Exporter ».
À partir de là, vous pouvez télécharger le modèle sur votre ordinateur.
Astuce bonus : Alternatives à Elementor pour créer des mises en page personnalisées
Outre Elementor, il existe d'autres constructeurs de pages 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. Il y a plus de 300 modèles de thèmes ou de pages de destination parmi lesquels choisir. SeedProd offre également des tonnes d'options de personnalisation et de blocs pour créer des pages époustouflantes. Pour plus de détails, vous pouvez consulter notre avis complet sur SeedProd.
- Divi est un thème et un constructeur de pages visuels. 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, y compris une bibliothèque de mises en page. Il existe de nombreuses options de personnalisation dans le constructeur visuel, et vous n'avez pas à modifier de code.
- Thrive Architect est un constructeur 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 constructeur visuel frontal pour modifier n'importe quel élément de la page. Pour plus de détails, consultez notre avis sur Thrive Architect.
- Beaver Builder est un autre constructeur de pages glisser-déposer populaire pour WordPress. Il est facile à utiliser et vous pouvez facilement configurer des mises en page pour les pages et les articles en utilisant Beaver Builder. Il propose également des modèles pré-construits 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 comment créer des mises en page WordPress personnalisées avec Elementor. Vous voudrez peut-être aussi consulter notre comparaison d'experts entre Elementor, Divi et SeedProd et nos choix pour les meilleurs logiciels de conception web.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Moinuddin Waheed
J'ai vu Elementor se développer depuis ses débuts, il y a sept ans.
Il offre une interface très facile à utiliser pour que chacun puisse créer des sites web visuellement esthétiques et attrayants.
Il aide également à rendre les conceptions complexes un jeu d'enfant.
Mais honnêtement, j'ai eu une mauvaise expérience en termes de chargement et de performances.
Depuis que j'ai arrêté de l'utiliser, je ne l'ai plus jamais choisi.
J'utilise SeedProd de nos jours et certains constructeurs basés sur des blocs utilisant la fonctionnalité d'éditeur de site complet.
Mais néanmoins, Elementor est très bon pour tous ceux qui débutent avec un site web WordPress.
Jiří Vaněk
La vitesse du site web est un compromis certain pour l'utilisation d'Elementor, car il vous facilite grandement la création de sites web. Lorsque WordPress a introduit Gutenberg, j'ai arrêté de l'utiliser pendant un certain temps. L'éditeur de blocs était un cauchemar pour moi. Je ne le comprenais pas et le trouvais compliqué. Puis j'ai découvert Elementor, et grâce à lui, je suis revenu à WordPress et j'étais heureux que la création de sites web via WordPress soit redevenue simple, comme avant. Oui, dans certains cas, Elementor peut ralentir le site web, mais il s'agit plus de la configuration globale du site web que d'un problème direct avec Elementor. Cependant, je crois que sans Elementor, beaucoup de gens n'utiliseraient pas du tout WordPress en raison de la complexité de l'éditeur Gutenberg.
Allin
Est-il mauvais de passer de manière répétée du personnalisateur à Elementor lors de la création d'un site web — cela affaiblit-il le site d'une manière ou d'une autre ? J'utilise le thème Astra
Support WPBeginner
Vous voudrez rester avec un seul éditeur, car changer d'un éditeur à l'autre pourrait modifier le balisage que vous avez ajouté à votre contenu.
Admin
Jiří Vaněk
Ce n'est pas une bonne pratique. Comme pour l'écriture d'un article. Si quelqu'un passe d'Elementor à Gutenberg, cela entraîne généralement des styles désordonnés et le résultat est mauvais. Il est bon de s'en tenir à une seule méthode à la fois.
Lindy Warrell
J'ai eu trop peur d'installer Elementor au cas où cela perturberait mon thème. Est-ce que ça le fait ? Sinon, je pourrais bien l'essayer car je trouve les blocs Gutenberg très limitants pour organiser ou concevoir mes propres pages.
Support WPBeginner
By default it shouldn’t, if you reach out to Elementor they can let you know how it will react with your theme
Admin
J M Das
Le Post est très utile. J'ai un site web de listes de propriétés. J'utilise le plugin Impress Listing pour cela. Comment utiliser les mises en page ou les modèles personnalisés créés ainsi, à la place de la page de liste par défaut. Les informations sur la page indiquent que les mises en page ou les modèles personnalisés doivent être ajoutés au répertoire du thème. Comment faire. J'utilise un thème enfant.
Elaine Wright
Où Elementor stocke-t-il son CSS dans l'arborescence des fichiers ? Où puis-je trouver le(s) fichier(s) qu'il modifie ?
Stocke-t-il quelque chose dans la base de données ?
J'ai cherché une réponse à cela pendant un bon moment et je n'ai rien trouvé.
Merci !
Yula
C'était extrêmement utile ! Merci ! Cela m'a épargné beaucoup de travail
Erwin
Dites-vous que vous n'avez pas besoin de créer un thème enfant lorsque vous utilisez Elementor ?
Que se passera-t-il si vous mettez à jour le thème ?
Personnel éditorial
Elementor est un constructeur de pages et ses paramètres sont stockés dans le plugin. Il fonctionnera avec n'importe quel thème.
Admin
andre
Est-il possible de modifier le thème enfant en utilisant Elementor ? Spécialement dans la mise en page des catégories.
Parce que, même si j'ai un beau design sur ma page d'accueil, lorsque je passe à la catégorie, le design ne correspond pas au style de la page d'accueil.
Monique
J'essaie de créer ma page de présentation avec des photos et une biographie. Comment puis-je commencer avec Elementor pour cela ?
David Liou
Est-ce que cela signifie que vous devez mettre à niveau votre compte vers le type professionnel ? Parce que la version personnelle ne prend pas en charge le téléchargement de modèles.
Support WPBeginner
Salut David,
Cet article concerne les sites WordPress.org auto-hébergés. Veuillez consulter notre guide sur la différence entre WordPress.org auto-hébergé et les blogs WordPress.com gratuits.
Admin
Alex
Le site résultant est-il responsive ? D'autres applications similaires se vantent de créer des sites entièrement responsive et se sont avérées être une déception totale.
Tenika
J'ai utilisé la version gratuite pour concevoir ma page d'accueil et elle est entièrement responsive. C'est un excellent plugin et il fait tout ce dont vous pourriez avoir besoin dans la version gratuite ! Il est tellement bon que je prévois d'acheter la version pro juste pour soutenir et remercier le développeur pour un plugin aussi utile.
Rodney Lacambra
Excellente présentation utilisant le constructeur de pages glisser-déposer Elementor. Je n'ai pas essayé celui-ci mais ça vaut le coup.
Cela pourrait être une excellente alternative au constructeur de pages SiteOrigin
Merci d'avoir partagé. Dans l'ensemble, c'est bien d'avoir pour créer des mises en page personnalisées avec WordPress.
~Rod
Deepak
J'utilise Elementor sur mon blog et il m'affiche l'erreur « Serveur Internet introuvable » lorsque je modifie ma page avec ce plugin.
Tenika
Vous devriez consulter leur page de support sur leur site Web. Elle contient de nombreux conseils de dépannage utiles.
Victorvijau
Merci pour la publication. Je cherchais un plugin à cet effet pour construire une page pour mon site
Merci beaucoup