Vous cherchez un moyen de créer des mises en page personnalisées dans WordPress sans plonger dans le code ? Nous comprenons. La plupart des guides existants donnent l'impression de lire un roman ou supposent que vous êtes un expert en codage.
Nous avons remarqué que certains utilisateurs expérimentés de WordPress hésitent à utiliser des constructeurs de pages comme Beaver Builder, craignant de créer des designs maladroits ou de ralentir leurs sites.
Mais voici ce que nous avons appris en aidant des milliers de débutants : le bon constructeur de pages peut simplifier considérablement la création de sites Web tout en offrant des résultats professionnels.
Dans ce guide étape par étape, nous vous montrerons comment créer des mises en page WordPress personnalisées à l'aide de Beaver Builder. Que vous partiez de zéro ou utilisiez des modèles prêts à l'emploi, vous apprendrez à construire exactement ce que vous voulez, sans aucun codage requis.
Pourquoi utiliser Beaver Builder pour créer des mises en page WordPress personnalisées 👀
De nombreux thèmes WordPress premium sont livrés avec des mises en page prêtes à l'emploi pour différentes sections d'un site Web. Cependant, parfois, une mise en page intégrée peut ne pas répondre à vos besoins.
Vous pouvez créer des modèles de page personnalisés dans WordPress en créant un thème enfant, puis en ajoutant vos propres modèles de page. Mais vous aurez besoin de quelques connaissances en PHP, HTML et CSS pour que cela fonctionne.
C'est là qu'interviennent des outils comme Beaver Builder. C'est un plugin de constructeur de pages WordPress par glisser-déposer. Il vous aide à créer vos propres mises en page personnalisées sans écrire une seule ligne de code.
Beaver Builder est très facile à utiliser et convient aux débutants. En même temps, il est doté de fonctionnalités incroyables pour créer des pages d'aspect professionnel.
Il fonctionne avec tous les thèmes WordPress et dispose de tonnes de modules que vous pouvez simplement faire glisser et déposer sur votre page. Vous pouvez créer n'importe quel type de mise en page que vous souhaitez et la configurer exactement comme vous l'aviez imaginé.
Dans ce tutoriel Beaver Builder, nous allons vous montrer comment utiliser Beaver Builder pour créer des mises en page personnalisées dans WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour naviguer dans cet article :
- Étape 1 : Configurer le plugin Beaver Builder
- Étape 2 : Créer votre première mise en page personnalisée avec Beaver Builder
- How to Manage Page Layout Templates in Beaver Builder
Étape 1 : Configurer le plugin Beaver Builder
Tout d'abord, vous devez acheter le plugin Beaver Builder. C'est un plugin payant, dont le prix commence à 99 $ pour des sites illimités.
Ensuite, vous devez installer et activer le plugin Beaver Builder. 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 Paramètres » Beaver Builder pour saisir votre clé de licence.
Après avoir saisi votre clé de licence, vous êtes maintenant prêt à créer de magnifiques mises en page.
Étape 2 : Créer votre première mise en page personnalisée avec Beaver Builder
Tout d'abord, créez simplement une nouvelle page dans WordPress en visitant Pages » Ajouter une nouvelle page.
Avant d'ouvrir Beaver Builder, donnez un titre à votre nouvelle page et enregistrez-la en tant que brouillon.
D'après notre expérience, le constructeur de pages ne s'ouvrait pas à moins que nous ne fassions cela d'abord.
Une fois que vous avez fait cela, cliquez sur le bouton « Lancer Beaver Builder » pour commencer.
Cela ouvrira le front-end de votre page dans l'interface Beaver Builder.
Si c'est la première fois que vous utilisez Beaver Builder, vous verrez une fenêtre contextuelle de bienvenue vous proposant une visite guidée.
Ensuite, vous devez cliquer sur le bouton « + » dans le menu supérieur. Ce bouton se transformera en icône « x ». Ensuite, basculez vers l'onglet « Modèles ».
Beaver Builder est livré avec des modèles conçus par des professionnels pour vous permettre de démarrer immédiatement.
Ne vous inquiétez pas ; vous pouvez personnaliser le modèle autant que vous le souhaitez. C'est juste un moyen rapide de commencer avec une mise en page.
Lorsque vous sélectionnez une mise en page, Beaver Builder la chargera dans la fenêtre d'aperçu. Passez votre souris sur un élément, et Beaver Builder le mettra en surbrillance.
Vous pouvez simplement cliquer sur l'icône de la clé à molette sur n'importe quel élément mis en surbrillance pour le modifier.
Beaver Builder affichera une fenêtre contextuelle avec différents paramètres que vous pouvez modifier.
Vous pouvez changer la police, la couleur, l'arrière-plan, la police, le remplissage, la marge, et plus encore.
Les mises en page de Beaver Builder sont basées sur des lignes. Vous pouvez glisser-déposer pour réorganiser les lignes. Vous pouvez également supprimer ou ajouter une nouvelle ligne.
Cliquez simplement sur le même bouton « + » que précédemment et accédez à la section « Lignes ». À partir de là, vous pouvez choisir n'importe laquelle des lignes et colonnes qui vous sont présentées.
Beaver Builder ajoutera la ligne à l'aperçu en direct sur votre site.
Vous pouvez ajouter des éléments à votre ligne en utilisant les modules de base ou avancés et les widgets. Ces modules vous permettent d'ajouter les éléments les plus couramment utilisés comme les boutons, les titres, le texte, les images, les diaporamas, l'audio, la vidéo, etc.
Cliquez simplement sur le bouton « + » et accédez à la section « Modules ». Ensuite, faites glisser un élément dans la ligne que vous venez d'ajouter.
Cliquez sur un élément de conception WordPress pour modifier ses propriétés.
Vous pouvez également enregistrer une ligne ou un module pour les réutiliser plus tard sur d'autres pages. Cliquez sur le bouton « Enregistrer sous » tout en modifiant une ligne ou un module.
Cliquez sur le bouton « Terminé » dans le coin supérieur droit lorsque vous avez fini de modifier votre page.
Beaver Builder affichera une série de boutons pour publier ou enregistrer votre page en tant que brouillon.
Vous pouvez également réutiliser la mise en page entière d'une page pour d'autres pages de votre site WordPress. Ouvrez simplement la page avec Page Builder, puis cliquez sur le bouton flèche vers le bas pour accéder à « Outils » dans la barre supérieure.
Beaver Builder vous affichera une fenêtre contextuelle. Vous pouvez enregistrer la page en tant que modèle ou créer rapidement une page en double avec la même mise en page.
Comment gérer les modèles de mise en page dans Beaver Builder
Vous pouvez consulter tous les modèles que vous avez créés dans Beaver Builder » Modèles. Ici, vous pouvez gérer, prévisualiser et modifier vos modèles existants.
Un des grands avantages des modèles Beaver Builder est qu'ils sont des types de publication personnalisés. Cela signifie que vous pouvez facilement exporter vos modèles Beaver Builder en utilisant la fonctionnalité d'exportation intégrée à WordPress.
Visitez la page Outils » Exportation et sélectionnez Modèles. Cliquez sur le bouton « Télécharger le fichier d'exportation », et WordPress vous enverra un fichier XML à télécharger.
Connectez-vous maintenant au site WordPress où vous souhaitez importer les modèles. Visitez la page Réglages » Importation et cliquez sur WordPress.
Il vous sera demandé de télécharger et d'installer le plugin d'importation WordPress. Après cela, vous pourrez simplement télécharger le fichier XML de votre modèle et l'importer.
Alternative : Utilisez SeedProd pour créer un thème personnalisé
Bien que Beaver Builder soit excellent, il ne convient peut-être pas à tout le monde. Ce n'est pas grave ! Il existe d'autres excellents choix, comme SeedProd.
SeedProd est un autre constructeur de pages convivial que nous recommandons souvent. Il ne sert pas seulement à créer des pages de destination. Vous pouvez même l'utiliser pour créer des thèmes WordPress entiers. Nous l'avons utilisé à bon escient dans de nombreux projets, y compris la création de pages de destination pour OptinMonster.
Ce qui distingue SeedProd, ce sont ses options de personnalisation étendues. Elles vous permettent d'ajouter facilement des fonctionnalités intéressantes à vos pages, comme des témoignages rotatifs, des animations accrocheuses, des tableaux de prix professionnels, des blocs de fonctionnalités, et plus encore.
De plus, SeedProd dispose d'outils d'IA qui peuvent générer rapidement du texte et des images de bonne qualité pour votre site. Cela peut vous faire gagner beaucoup de temps lors de la création de vos pages.
Vous souhaitez en savoir plus ? Consultez ces avis pour voir comment SeedProd se compare à d'autres constructeurs de pages populaires :
- Elementor vs Divi vs SeedProd (Comparaison) – Lequel est le meilleur ?
- Instapage vs Leadpages vs Unbounce vs SeedProd
Nous espérons que cet article vous a aidé à créer des mises en page personnalisées dans WordPress à l'aide de Beaver Builder. Vous voudrez peut-être aussi consulter notre guide sur comment créer un site WordPress adapté aux mobiles et nos meilleurs choix d'experts des meilleurs constructeurs de thèmes WordPress.
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.
corey
cela m'aide beaucoup.
J'utilise Astra et Beaver. J'ai besoin de passer bientôt au plan Growth
est toujours au-dessus de mes compétences contrairement à Guttenberg
Support WPBeginner
Nous sommes heureux d'apprendre que notre guide vous a été utile !
Admin
Rodney Harrier
J'ai commencé à utiliser Elementor pour créer un blog. Si je passe à Beaver Builder, est-ce que je perds tout ce que j'ai fait ?
Support WPBeginner
Si vous changez de plugin, vous perdrez les personnalisations de votre premier plugin.
Admin
Pius Anthony
Cher Monsieur,
Bonne année, je regarde vos vidéos wpbeginner, c'est vraiment inspirant. Je crois que d'ici six mois, j'enseignerai à d'autres personnes.
Regard
Pius Anthony
Support WPBeginner
Glad our guides can help you start helping other people too
Admin
Krayl
Lorsque vous utilisez Beaver Builder, l'utilisez-vous uniquement sur un thème enfant ? Sinon, comment résiste-t-il aux mises à jour du thème ?
Merci l'équipe WPbeginner !
Lisa Theriault
J'ai vraiment besoin d'aide. Cela est censé être facile, mais lorsque je clique sur un module ou une ligne, rien ne se passe. J'ai essayé le glisser-déposer, la sauvegarde, etc. Nada. J'ai vérifié que les paramètres étaient corrects et que le plugin était actif. Beaver Builder apparaît sur la page pour l'édition, mais je suis évidemment un idiot. Je suis frustré, mais je suis sûr que c'est juste une bêtise. Quelqu'un peut-il proposer des suggestions ? J'ai suivi le tutoriel pour débutants et c'est vraiment facile. Quand j'essaie de le faire en mode Live... rien. S'il vous plaît, aidez-moi. Merci d'avance.
Support WPBeginner
Salut Lisa,
Essayez de modifier une nouvelle page. Si cela ne fonctionne pas, essayez de passer à un thème WordPress par défaut comme twenty seventeen, puis essayez de modifier avec Beaver Builder. Si cela fonctionne, votre thème a probablement des problèmes de compatibilité avec le constructeur de pages.
Admin
David Sharp
J'ai le même problème que Lisa. J'ai utilisé Beaver Builder il y a quelques années pour créer une page de destination, et cela a très bien fonctionné. En fait, j'utilise toujours cette même page de destination sans aucun problème. Mais aujourd'hui, j'ai essayé de créer une nouvelle page de destination en utilisant Beaver Builder, mais cette fois, Beaver Builder ne fonctionnait pas.
Voici ce qui s'est passé : J'ai créé une nouvelle page. J'ai cliqué sur l'onglet Beaver Builder. Mais au lieu de voir un bouton indiquant « Lancer Beaver Builder », j'ai été dirigé vers un écran indiquant « Déposez une mise en page de ligne ou un module pour commencer ». Malheureusement, Beaver Builder n'a pas produit de barre d'outils Beaver Builder ni aucun autre outil (comme des modules ou des lignes) pour construire la page.
Voici ce que j'ai essayé pour résoudre le problème, sans succès :
1. J'ai désactivé mes autres plugins.
2. J'ai basculé vers le thème Twenty Sixteen.
3. Je me suis assuré d'utiliser la dernière version de tout (Wordpress, Beaver Builder, etc.)
4. J'ai remarqué que si je tapais quelque chose dans la page puis cliquais sur l'onglet Beaver Builder, des outils apparaissaient. Mais quand je cliquais dessus, j'obtenais juste un cercle qui tournait.
5. J'ai essayé d'utiliser Beaver Builder sur mon site web en ligne, ainsi que sur mon site de test en localhost, mais Beaver Builder n'a fonctionné sur aucun des deux sites.
6. J'ai essayé d'utiliser un navigateur différent (Safari au lieu de mon Chrome habituel) sans succès.
Avez-vous une idée de ce qui pourrait être le problème et comment je pourrais le résoudre ?
Merci !
Support WPBeginner
Salut David,
Vous pouvez contacter le support de Beaver Builder, ils pourront vous aider.
Krayl
La même chose m'est arrivée Lisa. Je pense que c'est mon thème qui ne fonctionne pas bien avec BB. Je cherche à changer de thème pour avoir une compatibilité totale.
Yeremi Akpan
J'ai eu des problèmes similaires en utilisant Chrome, mais ils ont été résolus lorsque j'ai basculé sur Microsoft Edge.
Jesse
Je suis tellement reconnaissant pour tous les articles « comment faire » de wpbeginner. Ils sont clairs et directs, et ils me facilitent tellement la vie. Parce que j'ai pu suivre le chemin de l'e-commerce à travers Beaver Builder, je suis maintenant en mesure d'obtenir OptInMonster. Merci Syed & l'équipe.
Gabrielle
Salut, est-ce que BB génère des [shortcodes] ou du contenu HTML, lorsque vous revenez à l'éditeur normal ?
Je me demande si cela fonctionne bien, lors de la création de pages de produits pour WooCommerce.
Dr. Peter H. Markesteyn
Devrais-je créer un thème enfant (20-17) pour préserver toutes les modifications que j'apporterais avec BeaverBuilder lors d'une mise à jour ?
Anthony
Bien que ce plugin soit génial, je me demandais si vous enseigniez comment les personnaliser vous-même ? Je cherche à construire mon portfolio et savoir comment le faire soi-même serait fantastique !
Ian Gordon
Avec le plugin Beaver Builder, puis-je prendre un thème existant et créer un en-tête et un pied de page entièrement nouveaux sans modifier aucun des fichiers de modèle existants ? Mon
Sam
Comment Beaver Builder s'intègre-t-il bien avec d'autres plugins ?
Support WPBeginner
Il s'intègre bien avec la plupart des plugins. Il peut y avoir quelques problèmes avec un plugin aléatoire moins couramment utilisé, mais ils résolvent rapidement ces problèmes.
Admin
Rk bhardwaj
C'est un plugin incroyable pour rendre n'importe quel blog joli
Oliver
Beaver Builder is the best page builder plugin by the best team!
Robby
Hey, Oliver! Thanks for the kind words.
Andrew Peters
J'ADORE Beaver Builder. Je l'ai utilisé pour une douzaine de sites depuis que j'ai basculé à l'automne dernier. Je suis même en train de convertir certains de mes clients de VC à BB. C'est le feu !
Shaiful
Bonjour,
Je me demande juste, peut-il supporter des shortcodes avec un contexte conditionnel ? Comme par exemple :
[if user_loggedin]
bonjour utilisateur.
(afficher le contenu de l'utilisateur connecté créé avec beaver builder)
[else]
bonjour invité.
(afficher le contenu public créé avec beaver builder)
[/if]
Support WPBeginner
Oui, il prend en charge les shortcodes. Collez-les dans n'importe quel champ où vous pouvez insérer du texte et ils seront rendus automatiquement. Lors du placement de shortcodes sur la page, il est préférable d'utiliser le module HTML par rapport au module Éditeur de texte. Ce dernier a tendance à ajouter des balises p supplémentaires qui cassent parfois la mise en page.
Admin