Beaver Builder
BeaverBuilder est un gestionnaire de contenu à blocs, comme Gutenberg et Elementor par exemple, et fonctionne globalement de la même manière, mais avec quelques différences néanmoins.
Accéder à l’éditeur de contenu
Depuis la liste de pages, ou d’autres types de contenu, si vous survolez un item, vous verrez apparaître un certain nombre d’options :
Parmis ces options, il y a Beaver Builder. Si vous cliquez dessus l’éditeur se lancera pour la page séléctionnée.
Sinon, entrez dans l’édition de la page (ou tout autre type de contenu) et cliquez sur le bouton « Lancer Beaver Builder«
L’interface Beaver Builder
BeaverBuilder (BB) présente une interface avec 3 zones :
La zone de boutons d’action
Cette zone présente 2 boutons, un en forme de liste, l’autre un classique bouton « Terminer ».
Liste des blocs
Lorsque vous cliquez sur le bouton de liste, la hiérarchie des blocs de la page apparaît.
Dans cette liste, vous pourrez réorganiser les blocs en les glissant-déposant.
Si vous cliquez sur un bloc, la zone de contenu scrollera au niveau du bloc pour que vous le visualisiez.
Si vous faites un clic-droit sur un bloc, un menu s’affiche, vous permettant d’afficher les réglages du bloc, de le dupliquer, ou de le supprimer.
Boutons d’action
Si le bouton « Terminer » n’est pas bleu, c’est qu’aucune modification attendant une sauvegarde n’a été faite. S’il est bleu, et que vous cliquez dessus, vous voyez de nouvelles options :
Les options sont assez claires, il n’est pas nécessaire de les détailler ici.
La zone d’aperçu des contenus
Cette zone présente l’élément que vous êtes en train de modifier. Elle permet aussi l’interaction avec les blocs directement, dans un mode plus visuel.
Lorsque vous cliquez sur un élément de cette zone, un bord apparaît autour du bloc et vous présente une liste d’outils.
De gauche à droite, les outils vous permettent de :
- Glisser déposer le bloc dans la zone de contenu,
- Accéder aux paramètres du bloc,
- Dupliquer le bloc,
- Modifier les paramètres de la rangée
- Supprimer le bloc
La zone de blocs et modules
Cette zone est la plus complète et complexe à aborder. Elle présente les différents blocs et modules que vous pouvez intégrer sur votre site.
Le fonctionnement est assez simple : séléctionnez le bloc souhaitez et glissez-déposez le dans la zone d’aperçus de contenus, là où vous souhaitez qu’il apparaisse.
MODULES
Blocs basiques
Ces blocs sont assez simples et permettent :
- Audio : d’intégrer un lecteur audio avec un fichier,
- Bouton : d’ajouter un bouton,
- Groupe de boutons : d’ajouter une ligne avec plusieurs boutons les uns à la suite des autres,
- En-tête : d’ajouter un titre,
- HTML : d’ajouter un élément de code HTML (à n’utiliser que si vous connaissaez le langage HTML)
- Liste : d’ajouter une liste, numérotée ou non,
- Photo : d’ajouter un fichier média,
- Éditeur de texte : d’ajouter une zone de texte complexe avec différents outils,
- Séparateur : d’ajouter une barre horizontale plus ou moins large et espacée,
- Vidéo : d’ajouter une vidéo, depuis la médiathèque ou une source externe
Média
- Diaporama de contenu : ajoute un carousel d’images ou vidéos avec du contenu
- Galerie : ajoute plusieurs images dans une galerie
- Icône : ajoute une icône, avec du texte et un lien éventuellement
- Groupe d’icônes : ajoute plusieurs icônes
- Carte : ajoute un carte Google Maps
- Diaporama : ajoute un carousel d’images uniquement
- Témoignages : ajoute une boîte de témoignages
Actions
- Appel : bouton « Call To Action » utilisé pour présenter des services
- Appel à l’action : bouton « Call To Action » utilisé pour inciter l’utilisateur à effectuer une action
- Formulaire de contact : ajoute un formulaire de contact déjà construit
- Formulaire de connexion : ajoute un formulaire de connexion déjà construit
- Formulaire d’inscription : ajoute un formulaire d’inscription déjà construit
- Menu : ajoute un de vos menus WordPress dans la page
- Rechercher : ajoute le formulaire de recherche dans le site
Présentation
- Accordéon : présente plusieurs contenu dans un accordéon qui ne déplie que la section voulue au clic sur le titre
- Onglets : présente plusieurs contenus en onglets latéraux présentant le bon contenu au clic sur le titre
- Tableau de prix : crée une boîte présantant un service avec un prix et un bouton
- Barre latérale : insère une des barres latérales de votre thème WordPress
Info
- Compte à rebours : insère un compte à rebours paramétrable
- Compteur en nombre : insère une zone présentant un chiffre clé avec une animation et différentes présentations possibles
Articles
- Carousel d’articles : présente les derniers articles en grille défilante
- Articles : présente les derniers articles en grille non défilante
- Diaporama d’articles : présente les derniers articles en diaporama
RANGÉES
Groupes de rangées
Cette liste déroulante vous permet de choisir parmis les groupes de rangées, entre celles de base, les colonnes sauvegardées, les colonnes toutes faites, et les rangées sauvegardées.
Nous nous attarderons ici uniquement sur les colonnes de base : choisissez le nombre de colonnes que vous souhaitez voir afficher dans votre page.
Une rangée avec ces colonnes est automatiquement créée, et vous pourrez alors glisser-déposer les blocs dans chaque colonne à votre convenance.
GABARITS
Les gabarits vous permettent de créer automatiquement tous les blocs de votre page suivant le template du gabarit.
Cela est très pratique pour la mise en place rapide et propre de vos contenus. Vous n’aurez alors plus qu’à modifier les contenus, images, et disposition des blocs et modules.
Si vous le souhaitez, une liste déroulante vous permet de changer de catégorie de catégorie, pour passer notamment des gabarits pour page d’accueil aux gabarits pour pages de contenu.
SAUVÉS
L’onglet « Sauvés » permet de retrouver rapidement les dispositions que vous avez souhaité sauvegarder.
Pour sauvegarder un module, il suffit de cliquer sur le bouton « Enregistrer sous » qui est visible dans les paramètres du module.
Paramétrage de modules
Lorsque vous cliquez sur un module, une zone de modification de ses paramètres apparaît à la place de la zone de sélection de modules.
Chaque module permet des paramétrages différents, mais ont tous la même structure :
Diapositive / Nom du module
Paramétrages spécifiques du module
Présentation
Paramètres de présentation du module
Style
Paramètres de style du module (couleur, police, …)
Contenu
Paramètres du contenu du module
Avancé
Paramètres avancés, comme les marges, padding, la visibilité en fonction de la taille de l’écran, une animation du module, etc.
Nous ne présenterons pas ici tous les paramètres car ils sont très nombreux et spécifiques à chaque module, mais nous vous invitons à faire des tests et vous familiariser avec les modules les plus fréquemment utilisés sur votre site.
Sauvegarder vos modifications de module ou sauvegarder le module
Une fois que vous êtes satisfait.e de vos modifications, n’oubliez pas de cliquer dans la barre inférieure des paramètres sur le bouton « Sauvegarder« . Vous pouvez aussi « Enregistrer sous… » pour sauvegarder ce module comme gabarit, pour pouvoir le réutiliser ailleurs.
Un aperçu du menu Beaver Builder général
Si vous cliquez en haut à gauche de la page un menu apparaît :
Il permet de publier la présentation, sauvegarder le gabarit, dupliquer la présentation, en avoir un aperçu…
L’édition responsive vous permet de visualiser la page sur différentes tailles d’écran.
Les révisions, et l’historique, vous permettent de revenir en arrière si jamais vous avez fait une modification non désirée.
La partie CSS et Javascript de la présentation sont limités aux développeurs experts qui voudraient ajouter des styles ou interactions personnalisées.
Les paramètres généraux permettent de régler, pour la totalité du module Beaver Builder, certains paramètres comme les tailles de contenus ou les tailles de marges.
Les présentations Themer vous renvoient sur cette page dans l’administration.
Changer la couleur de l’interface vous permet de passer en Dark Mode ou Light Mode en fonction de votre préférence.
Le menu Administration WordPress vous permet de sortir de Beaver Builder.
Aide et raccourcis clavier vous donnent une aide et des liens vers la documentation officielle.