skip to Main Content

Comment créer des mises en pages personnalisées sur WordPress avec Beaver Builder

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Voulez-vous apprendre à créer des mises en pages personnalisées sur WordPress? Beaver Builder vous permet de créer vos propres mises en page sans écrire de code. Dans ce tutoriel, nous allons étudier Beaver Builder et vous montrer comment créer des mises en pages personnalisées sur WordPress avec ce plugin.

Plugin de mise en page Beaver Builder

Pourquoi et quand vous avez besoin de mises en pages personnalisées

Beaucoup de thèmes WordPress premium disposent de mises en page pour différentes sections d’un site Web. Cependant, il arrive qu’une mise en page intégrée ne puisse pas répondre à vos besoins.

Vous pouvez créer des templates personnalisés de page sur WordPress en créant un thème enfant, puis ajouter vos propres templates de page. Mais vous aurez besoin d’une connaissance en PHP, HTML et CSS pour que cela fonctionne.

C’est là que Beaver Builder entre en jeu . C’est un plugin de conception de page drag and drop sur WordPress. Il vous aide à créer votre propre mise en page personnalisée sans écrire de code.

Résumé sur Beaver Builder

Beaver Builder est très facile à utiliser et adéquat pour les débutants. En même temps, il est livré avec des fonctionnalités incroyables pour créer des pages avec un aspect professionnel.

Il fonctionne avec tous les thèmes WordPress et a des tonnes de modules que vous pouvez simplement utiliser sur votre page (par drag and drop). Vous pouvez créer tout type de mise en page que vous voulez et configurer comme bon vous semble.

Dans ce tutoriel de Beaver Builder, nous allons vous montrer comment l’utiliser pour créer des mises en page personnalisées sur WordPress.

Commençons.

Configuration de Beaver Builder

Vous devez d’abord acheter le plugin Beaver Builder. C’est un plugin payant, à partir de $99 pour les sites illimités.

Ensuite, vous devez installer et activer le plugin.

Après l’activation, allez sur la page Settings »Page Builder pour entrer votre clé de licence.

Beaver licence du plugin WordPress

Après avoir entré votre clé de licence, vous serez maintenant prêt à créer vos mises en page.

Créer votre première mise en page personnalisée avec Beaver Builder

Il suffit de créer une nouvelle page dans WordPress en allant sur Pages »Add New. Vous remarquerez un nouvel onglet ‘Page Builder’ dans l’éditeur WordPress.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Editeur de page WordPress beaver plugin

Cliquez sur l’onglet ‘Page Builder‘ pour lancer « Beaver Builder« . Si c’est la première fois que vous utilisez Beaver Builder, vous verrez alors une fenêtre de bienvenue vous offrant une visite guidée.

A ce moment, vous pouvez cliquer sur le bouton ‘Non Merci de sauter l’étape‘. Après cela , vous devez cliquer sur le bouton Templates dans le menu du haut.

Beaver Template WodPress plugin

Beaver Builder propose des templates conçus par des professionnels pour vous aider à démarrer directement.

Ne vous inquiétez pas, vous pouvez personnaliser le template autant que vous le souhaitez. C’est juste un moyen rapide pour vous aider à démarrer avec une mise en page.

Choisir une mise en page Beaver plugin WordPress

Lorsque vous sélectionnez une mise en page, Beaver Builder la charge dans la fenêtre de prévisualisation. Déplacez votre souris sur un élément et Beaver Builder le surlignera.

Vous pouvez simplement cliquer sur l’icône de la clé sur un élément en surbrillance pour le modifier.

Modifier une mise en page

Beaver Builder affiche un popup avec des paramètres différents que vous pouvez modifier. Vous pouvez changer le texte, la couleur, le fond, la police, la marge, etc.

Vous pouvez aussi cliquer sur un élément dans l’aperçu en direct et vous pourrez le déplacer autour de la page.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Les mises en page de Beaver Builder sont conçues en rangées. Vous pouvez glisser-déposer pour réorganiser les rangées. Vous pouvez également supprimer ou ajouter une nouvelle rangées.

Il suffit de cliquer sur le bouton Layouts Row, puis sélectionnez le nombre de colonnes que vous voulez dans votre rangée.

Ajouter une ligne Beaver Plugin WordPress

Beaver Builder ajoutera la rangée à l’aperçu en direct sur votre site.

Vous pouvez ajouter des éléments à votre rangées en utilisant des modules basiques ou avancés et des widgets. Ces modules vous permettent d’ajouter les éléments les plus couramment utilisés comme des boutons, des titres, des textes, des images, des diaporamas, des audios, des vidéos, etc.

Il suffit de sélectionner un élément et de le faire glisser vers la rangée que vous venez d’ajouter. Cliquez sur un élément pour modifier ses propriétés.

Vous pouvez également enregistrer une rangée ou un module à réutiliser plus tard sur d’autres pages. Cliquez sur le bouton « Enregistrer en tant que » lors de la modification d’une rangée ou d’un module.

Comment sauvegarder le module

Cliquez sur le bouton « Terminé » lorsque vous avez fini de modifier votre page. Beaver Builder affiche un popup avec des boutons pour « Publier » ou « Enregistrer votre page en tant que brouillon« .

Fenêtre de dialogue Beaver Plugin WordPress

Vous pouvez également réutiliser une mise en page entière pour d’autres pages sur votre site WordPress. Il suffit d’ouvrir la page avec la Concepteur de page, puis cliquez sur le bouton Outils sur la barre supérieure.

Beaver Builder va vous afficher une popup. Vous pouvez enregistrer la page en tant que template, ou de créer rapidement une page dupliquée avec la même mise en page.

Sauvegarder une mise en page Beaver plugin WordPress

Gérer les templates de mise en page sur Beaver Builder

Chaque licence Beaver Builder vous donne droit de l’utiliser sur des sites Web illimités. Mais comment déplacer vos templates de page d’un site WordPress à un autre?

Beaver Builder stocke les modèles créés par des utilisateurs dans un type de publication personnalisé appelé templates. Il est caché par défaut, mais vous pouvez le rendre visible en allant sur Réglages »Page Builder et en cliquant sur l’onglet Templates.

Il suffit de cocher la case à côté de l’option ‘Enable Templates Admin’ et de cliquez sur Enregistrer les paramètres du template.

sauvegarder une mise en page Beaver tableau de bord WordPress

Vous remarquerez qu’un nouvel élément de menu appelés Templates apparait dans votre tableau de bord WordPress. Toutes les mises en page que vous enregistrez en tant que templates apparaîtront sur cette page.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Comme c’est un type de publication personnalisé, vous pouvez facilement exporter vos templates Beaver Builder en utilisant la fonctionnalité intégrée d’exportation de WordPress.

Visitez la page Tools »Export et sélectionnez Templates. Cliquez sur le bouton « Télécharger le fichier d’exportation » et WordPress enverra un fichier XML que vous pouvez télécharger.

Exporter des templates WordPress

Maintenant, connectez-vous au site de WordPress où vous voulez importer les templates. Allez sur Settings »Import et cliquez sur WordPress.

Vous serez invité à télécharger et installer le plugin importateur. Après quoi, vous serez en mesure de simplement télécharger votre fichier templates.xml et de l’importer.

Voilà tout! Nous espérons que ce tutoriel vous a aidé à créer des mises en page personnalisées sur WordPress en utilisant Beaver Builder. Si vous avez des commentaires, ou alors des suggestions, nous vous prions de nous faire part dans la section dédiée.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
2 Partages
Partagez
Tweetez
Enregistrer2