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

Construire des mises en page WordPress personnalisées avec Elementor

Concevoir vos propres mises en page dans WordPress peut être un défi pour la plupart La majorité des thèmes vous offrent une poignée d'options de mise en page Mais que se passe-t-il si aucune d'entre elles ne correspond vraiment à vos besoins ?

Beaucoup de gens supposent que la seule façon d'avancer est d'apprendre PHP, HTML et CSS Ce n'est pas très efficace si vous voulez simplement que votre site Web ait l'air unique sans connaître de code.

Voici la bonne nouvelle ! avec Élémenteur, vous pouvez créer des mises en page WordPress personnalisées à l'aide d'un éditeur glisser-déposer. Aucune modification de codage ou de thème n'est requise Si quelqu'un vous l'a dit, il ment simplement.

Dans ce guide, nous allons vous montrer comment créer des mises en page WordPress personnalisées avec Elementor« , expliquez comment les mises en page fonctionnent sous le capot et partagez des conseils professionnels pour que votre site soit superbe tout en continuant à fonctionner rapidement. »En cours de route, vous verrez comment Additions maîtres peut surcharger Elementor avec des widgets, des modèles et des options de conception supplémentaires.

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

La plupart des thèmes WordPress gratuits et premium sont livrés avec plusieurs mises en page Cela pourrait suffire si vous êtes heureux de vous en tenir à un seul modèle.

Mais si vous voulez :

  • Page d'accueil qui ne ressemble en rien à la valeur par défaut de votre thème ?
  • Page de destination personnalisée pour un lancement de produit ?
  • Conception de billets de blog avec des barres latérales collantes, des barres de progression de lecture ou une boîte d'auteur sophistiquée ? Les articles longs se lisent également mieux avec un autocollant table des matières WordPress plugin ainsi, les lecteurs peuvent sauter entre les sections sans défilement sans fin.
  • Grille de produits WooCommerce qui correspond réellement à votre marque ?

Vous êtes doué avec les codes ? alors c'est facile Mais, tout comme la plupart des utilisateurs vous ne connaissez pas le codage ? alors c'est un revers majeur.

Mais plus maintenant Elementor permet de concevoir exactement ce que vous voulez Et lorsqu'il est combiné avec le Éléments de Additions maîtres, vous obtenez des widgets créatifs supplémentaires comme onglets avancés[TRADUCTION], des galeries dynamiques, ou des titres animés Et que mon ami va bien au-delà de ce que la plupart des thèmes ou même Elementor seul peuvent fournir.

Pourquoi Elementor

Démarrer avec Elementor

D'abord, installez et activez le plugin gratuit Elementor du référentiel WordPress.

Une fois activé, vous trouverez une nouvelle option appelée “Modifier avec Elementor” sur vos pages et vos publications En cliquant dessus, vous lancez l'éditeur Elementor.

Après l'ouverture de l'éditeur, voici ce que vous verrez :

  • A gauche, vous verrez le panneau widget (titres, images, boutons, etc).
  • A droite, vous verrez un aperçu live de votre page.

À partir de là, vous pouvez faire glisser n'importe quel widget et commencer à construire.

Conseil professionnel : Elementor Pro débloque des fonctionnalités avancées telles que les modèles Theme Builder, contenu dynamique et WooCommerce Si vous souhaitez sérieusement créer des mises en page WordPress personnalisées complètes, Pro vaut la peine d'être mis à niveau.

Installez et activez le plugin Elementor à partir du tableau de bord WordPress

Devriez-vous obtenir Elementor Pro ?

Alors que la version gratuite est suffisamment puissante pour vous faire passer par un simple site web Mais pour créer vos mises en page WordPress personnalisées de rêve, voici quoi Élémenteur Pro déverrouille :

  • Générateur de thèmes (en-têtes, pieds de page et pages d'archives personnalisés)
  • Modèles WooCommerce
  • Widgets avancés comme Forms et Posts
  • Conditions d'affichage (contrôle où les modèles apparaissent)

Si vous êtes sérieux au sujet de la conception de mises en page à l'échelle du site, Elementor Pro en vaut la peine Et avec Additions maîtres[TRADUCTION], vous pouvez pousser ces mises en page plus loin sans acheter plusieurs plugins séparés En fait, les parties du site que les gens supposent avoir besoin de Pro (pro) comme le pied de page (footer) ; libre avec Master Addons ; voici comment modifiez le pied de page dans WordPress à l'aide d'Elementor sans mise à niveau.

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

La première étape dans la création d'une mise en page WordPress personnalisée est d'ouvrir une nouvelle page ou une nouvelle publication sur votre site WordPress La plupart des débutants négligent cela et essaient d'éditer du contenu existant Et ce qu'ils obtiennent, ce sont les restrictions de la conception par défaut de leur thème.

Commencer par une nouvelle page vous donne une table rase où vous êtes libre de l'ancien formatage et de la mise en page Sur l'écran d'édition, vous remarquerez un bouton qui dit “Edit with Elementor.” C'est là que la magie commence.

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

En cliquant sur ce bouton, vous lancez l'interface Elementor avec un générateur glisser-déposer conçu pour les personnes qui ne veulent pas coder mais qui veulent toujours un contrôle créatif complet C'est ici que vous pouvez construire une mise en page complètement à partir de zéro, en commençant par les sections vides, ou vous pouvez vous donner une longueur d'avance en utilisant l'un des modèles prédéfinis d'Elementor.

Pour de nombreux utilisateurs, la partie la plus difficile n'est pas la personnalisation, c'est de savoir par où commencer Les modèles suppriment ce barrage routier en vous donnant une fondation déjà structurée, stylisée et facile à utiliser.

Disposition de l'éditeur d'éléments

Si vous êtes nouveau dans la conception, la bibliothèque de modèles est un sauveteur En cliquant sur le bouton “Add Template”, vous ouvrez une galerie d'options conçues par des professionnels, prêtes à être déposées dans votre page Pas besoin de se demander quelle doit être la largeur d'une image de héros ou comment aligner vos titres Vous pouvez simplement parcourir une mise en page proche de ce que vous voulez.

Par exemple, si vous travaillez sur une page « Landing” », Elementor dispose de plusieurs modèles de page de destination qui semblent bien plus soignés que le message par défaut que votre thème affiche.

Une fois que vous avez trouvé un design qui vous semble correct, un simple clic sur le bouton “Insert” l'apporte dans votre page Pensiez-vous que c'est un design statique ? non, vous obtenez une structure entièrement modifiable que vous pouvez personnaliser selon vos besoins Chaque image, cap, et bouton est personnalisable Cette flexibilité est exactement pourquoi tant de personnes choisissent Elementor.

Bibliothèque de modèles d'éléments

Modifier un modèle est facile Vous passez sur un élément, cliquez dessus, et ses paramètres apparaissent dans le panneau de gauche Cette approche de conception résout une frustration commune avec l'édition WordPress traditionnelle.

Avec Elementor, ce que vous voyez à l'écran est exactement ce que vos visiteurs verront Ce retour instantané rend la conception plus rapide, moins stressante et beaucoup plus accessible.

Ce qui rend Elementor si puissant, c'est la variété de widgets qu'il propose Au lieu de se limiter aux titres et au texte, vous pouvez insérer des galeries d'images, des curseurs de témoignages, des cartes, des boutons, des carrousels ou même des formulaires provenant d'autres plugins que vous utilisez déjà.

Modification d'une mise en page WordPress personnalisée dans l'éditeur Elementor

Une fois que vous avez terminé avec votre mise en page, la dernière étape consiste à l'enregistrer Dans le panneau du bas, à côté du bouton “Publish”, vous remarquerez une petite flèche En cliquant dessus, vous révélez différentes options de sauvegarde Ceci est important car de nombreux utilisateurs s'inquiètent de publier accidentellement des travaux inachevés pour que le monde puisse les voir.

Elementor évite ce mal de tête en vous permettant de sauvegarder votre mise en page sous forme de brouillon ou de modèle sans le mettre en ligne sur votre site. Vous pouvez prévisualiser à quoi cela ressemble, revenir à votre tableau de bord WordPress ou le stocker en toute sécurité pour plus tard. De cette façon, vous gardez le contrôle lorsque votre conception sera rendue publique.

Vous concevez des mises en page qui reflètent votre marque et parlent directement à vos visiteurs Et si vous vous retrouvez à vouloir plus de widgets, d'effets ou de modèles prédéfinis que ce que fournit Elementor seul, des outils comme Additions maîtres peut étendre encore plus vos possibilités de conception Cela vous aidera à créer des mises en page qui non seulement semblent professionnelles mais se sentent également uniques à votre site.

À ce stade, vous avez votre première mise en page personnalisée en direct Mais le véritable pouvoir d'Elementor se manifeste lorsque vous dépassez les pages simples.

Comment enregistrer et réutiliser vos dispositions d'éléments personnalisées

Au lieu de recréer des designs à chaque fois, vous pouvez enregistrer vos mises en page WordPress personnalisées en tant que modèles et les réutiliser chaque fois que vous en avez besoin C'est là que la fonction d'enregistrement de modèles d'Elementor devient un véritable changeur de jeu Il ne s'agit pas seulement de commodité il s'agit de travailler plus intelligemment et de libérer du temps pour se concentrer sur le contenu, pas sur la structure.

Pour enregistrer une mise en page, ouvrez la page sur laquelle vous avez travaillé à l'intérieur de l'éditeur Elementor En bas, à côté du bouton “Publiez”, vous remarquerez une petite flèche En cliquant dessus, vous révèle plus d'options, y compris la possibilité de sauvegarder votre conception comme modèle Choisir “Save as Template” garantit que votre travail acharné ne vit pas sur une seule page ; cela devient un atout réutilisable dans votre bibliothèque.

Enregistrer sous Modèle

La prochaine fois que vous construisez une nouvelle page, vous n'avez pas à commencer avec un canevas vierge Au lieu de cela, ouvrez la bibliothèque de modèles, passez à Mes modèles et insérez votre mise en page enregistrée en un clic Plutôt que d'essayer de reproduire manuellement l'espacement, les couleurs ou la typographie, Elementor vous permet de dupliquer la structure exacte que vous avez déjà perfectionnée.

Pour de nombreux utilisateurs, la valeur réelle des modèles ne s'arrête pas à un site Web Si vous gérez plusieurs sites par exemple, un portefeuille, un projet client, ou même une boutique de commerce électronique vous pouvez aussi exporter vos modèles enregistrés et les importer ailleurs En cliquant sur l'icône à trois points à côté de votre modèle et en choisissant “Export,” Elementor crée un fichier que vous pouvez télécharger sur votre ordinateur Plus tard, vous pouvez télécharger ce même fichier sur une autre installation WordPress et apporter instantanément votre conception avec vous.

Ce workflow résout un point de douleur très réel pour les utilisateurs de WordPress : temps perdu et conception incohérente Les modèles garantissent que votre site semble cohérent et professionnel sans vous enfermer dans les limites d'un seul thème.

Vous voulez pousser vos conceptions plus loin ? Master Addons offre sa propre bibliothèque de modèles, vous permettant de sauvegarder vos mises en page WordPress personnalisées et d'exploiter une collection croissante de modèles professionnels Importez et peaufinez facilement ces conceptions en quelques secondes pour un boost transparent et créatif.

Conclusion

Construire de superbes mises en page WordPress avec Elementor est facile Et il vous donne la liberté de concevoir avec style Commencez avec des pages simples et passez au niveau du générateur de thèmes, des conditions d'affichage et du contenu dynamique pour plus de contrôle Ainsi, aujourd'hui, vous avez appris à créer des mises en page WordPress personnalisées avec elementor.

Vous voulez faire ressortir encore plus vos créations ? Master Addons apporte un flair supplémentaire avec des widgets avancés, des effets accrocheurs et des modèles prêts à l'emploi qui transforment les mises en page fonctionnelles en mises en page inoubliables Que vous créiez un blog, un portfolio ou une boutique WooCommerce, Elementor associé à Master Addons est tout ce dont vous avez toujours besoin.

Photo de Roy Jemee
Roy Jemee
Je suis Roy Jemee, Content Wrangler et Marketer chez Pixar Labs, travaillant sur Master Addons pour Elementor J'écris les tutoriels, enregistre les vidéos, et garde la documentation à jour, donc vous savez toujours comment utiliser chaque fonctionnalité Je gère aussi le support, donc si vous frappez un accroc, je suis la personne qui vous aide à y répondre de vraies réponses, de la part de quelqu'un qui utilise ces outils tous les jours.
Septembre Vente

40% de tout

Chaque plan Master Addons Pro, annuel et à vie Un code, huit jours.

00jours
00heures
00min
00sec

Se termine le lundi 14 septembre, à 23 h 59 HE

  • Personnel1 site 129 $77 $
  • Entreprise5 sites 199 $119 $
  • DéveloppeurSites illimitésMeilleur pour les agences 599 $359 $

Payer une fois. Aucun renouvellement, jamais.

Code coupon MALIFE40
Obtenez 40 % de réduction maintenant
  • Plus de 30 000 installations actives
  • 4,5/5 sur 212 avis
  • remboursement de 14 jours