Tutoriels Beaver Builder en français

Que puis-je faire avec Beaver Builder ?

Vous avez installé le plugin Beaver Builder sur votre site WordPress. Et vous avez installé un thème WordPress – si vous possédez la version Pro ou Agency de Beaver Builder, vous avez peut-être installé le thème Beaver Builder et le thème enfant. Et vous vous demandez peut-être si vous devez vraiment ajouter Beaver Themer, un plug-in complémentaire premium. Voici un aperçu du plugin Beaver Builder, du thème Beaver Builder et un peu de ce que Beaver Themer ajoute si vous en avez besoin.

Plugin vs. Thème vs Beaver Themer

WordPress fait la distinction entre la zone de contenu d’une page Web et toutes les autres zones, y compris l’en-tête, la barre latérale et le pied de page, comme indiqué dans ce schéma :

Le plugin Beaver Builder vous permet de créer des mises en page complexes dans la zone de contenu de la page. Par défaut, Beaver Builder est activé pour les pages, mais il existe des paramètres permettant de l’activer pour la zone de contenu des publications et des publications personnalisées.

Un thème WordPress est un composant obligatoire d’un site WordPress. Il contrôle l’en-tête, le pied de page et les zones de la barre latérale de votre site. Pour une publication unique, il contrôle également l’affichage des informations relatives à la publication (titre, auteur, images en vedette, catégories, etc.). En fonction du thème choisi, vous pourrez également configurer ou supprimer ces zones sur des pages individuelles et des publications, à l’aide de modèles de page WordPress . Le plugin Beaver Themer vous permet de créer des mises en page dans des zones extérieures à la zone de contenu, qui sont normalement contrôlées par le thème. Vous pouvez spécifier les pages auxquelles les mises en page Themer s’appliquent et les utilisateurs pouvant les voir. Beaver Themer est un add-on qui utilise le plugin Beaver Builder pour construire ces mises en page. Voir les exemples ci-dessous. Les sections suivantes présentent les concepts de base sous-jacents aux dispositions de contenu avec le plug-in Beaver Builder, les parties de la page contrôlées par le thème et la manière dont le thème Beaver Builder s’intègre et s’améliore. Beaver Builder Plugin Le plugin Beaver Builder est un concepteur de mise en page et de style front-end qui vous offre une vue WYSIWYG de la zone de contenu au fur et à mesure que vous la développez. En commençant par l’un des modèles de présentation Beaver Builder ou une page vierge, vous pouvez facilement modifier et ajouter des modules de contenu dans des arrangements complexes de lignes et de colonnes, comme illustré dans cet exemple :

Commencez avec un modèle de présentation, des lignes prédéfinies ou une page vierge Lorsque vous créez une nouvelle page WordPress, le bouton de lancement de Beaver Builder apparaît sur les publications et les pages pour lesquelles l’éditeur WordPress Gutenberg est activé :

Vous verrez l’onglet Beaver Builder sur les publications et les pages pour lesquelles l’éditeur WordPress Gutenberg est désactivé :

Sur la page d’édition, vous verrez la barre d’administration de Beaver Builder en haut de l’écran. Cliquez sur l’icône Plus dans le coin supérieur droit et effectuez l’une des opérations suivantes pour commencer. Commencez avec une mise en page du contenu de la page et modifiez-la. Cliquez sur l’onglet Modèles, puis sur n’importe quel modèle pour l’insérer. Choisissez un type de modèle différent dans le champ Groupe pour plus de choix. Voir cet article sur les modèles de présentation pour plus d’informations.

Ajoutez une ou plusieurs dispositions de lignes prédéfinies et modifiez-les. Cliquez sur l’onglet Lignes, dans le champ Groupe, sélectionnez Lignes pré-construites, puis choisissez une catégorie et faites glisser votre sélection dans la présentation. Voir cet article sur les lignes pré-construites.

Concevez votre contenu à partir de zéro en faisant glisser des modules individuels dans la zone de contenu. Cliquez sur l’onglet Modules et faites glisser un module dans la présentation. Reportez-vous à la description de chaque module et à la section suivante pour plus d’informations sur la conception d’une structure de présentation.

Conseil : Une fois que vous ou vos clients avez ouvert une page à modifier, vous pouvez accéder à une excellente vidéo de démarrage rapide en cliquant sur la flèche orientée vers le bas dans la barre d’administrateur de Beaver Builder, puis dans Aide dans le menu Outils. Les bases de la disposition des zones de contenu Lorsque vous faites glisser des modules de contenu du panneau Contenu vers la mise en page, les lignes et les colonnes sont automatiquement créées. Au fur et à mesure que vos mises en page deviennent plus complexes, avec des colonnes à l’intérieur de colonnes, il est parfois plus facile de faire glisser les mises en page d’abord, puis les modules de contenu. Par exemple, voici une seule ligne avec trois couches de colonnes.

Pour plus d’informations sur le fonctionnement des colonnes, voir la vue d’ensemble de la disposition des colonnes . Dans la capture d’écran ci-dessus, les trois couches de colonnes se trouvent dans une seule ligne, mais vous pouvez également placer chaque couche de colonne dans une ligne différente, comme indiqué dans cette capture d’écran :

Qu’est-ce qui détermine le moment où vous commencez une nouvelle ligne dans votre mise en page ? Voir l’article sur l’utilisation des lignes pour quelques considérations.

Responsive

Beaver Builder rend les présentations attrayantes sur les appareils moyens (tablettes) et petits appareils (mobiles) sans effort supplémentaire de votre part. Vous pouvez vérifier la mise en page et ajuster les paramètres à chaque taille de périphérique en entrant en mode de modification réactif dans votre mise en page. Pour plus d’informations sur les paramètres de modification réactif, commencez par cet article de présentation sur la réactivité.

Enregistrer les mises en page de Beaver Builder pour les utiliser ailleurs

Vous pouvez enregistrer des lignes et des modules globalement, de sorte que toute modification apportée à un emplacement soit répercutée partout, ou vous pouvez enregistrer les lignes et les modules afin de pouvoir les réutiliser, mais vous pouvez les modifier différemment à chaque emplacement. Vous pouvez également enregistrer la mise en page complète en tant que modèle de mise en page , que vous pouvez utiliser sur toute autre page de votre site ou exporter pour une utilisation sur un autre site . Si vous avez l’édition Agency du plugin Beaver Builder, vous pouvez attribuer un label blanc à l’interface utilisateur Beaver Builder. Et avec n’importe quelle édition de Beaver Builder, vous pouvez créer des environnements d’édition personnalisés pour vos clients en contrôlant les modèles de présentation, les lignes et les modules disponibles.

Utiliser les mises en page de Beaver Builder pour les publications

Par défaut, le générateur de page est activé uniquement pour les pages WordPress, pas pour les publications. Lorsque vous activez des publications ou des types de publication personnalisés, vous pouvez utiliser le générateur de page pour mettre en forme la zone de contenu des publications uniques ou des types de publication personnalisés. Voir l’article sur l’ utilisation du générateur de page avec les publications pour plus d’informations. Remarque: les pages d’ index et d’ archive WordPress étant générées à la volée, vous ne pouvez pas utiliser Beaver Builder pour les mettre en page, mais vous pouvez créer des mises en page de Beaver Builder qui simulent les pages WordPress générées. Pour plus d’informations, voir l’article sur les archives WordPress générées et les dispositions de Builder de page . Ou, vous pouvez utiliser le plugin complémentaire Beaver Themer pour créer des présentations d’index, d’archives et de résultats de recherche WordPress personnalisées.

Thème Beaver Builder

WordPress nécessite l’utilisation d’un thème pour contrôler des zones de la page telles que les zones d’en-tête, de pied de page et de barre latérale. Les thèmes vous permettent un certain degré de personnalisation de l’apparence dans ces domaines. Le thème Beaver Builder propose de nombreuses options de mise en page et de style pour contrôler les zones de thème de la page, sur les grands écrans comme sur les petits appareils. En outre, le thème Beaver Builder est entièrement compatible avec les plug-ins Beaver Builder et Beaver Themer. Tous les paramètres de thème sont définis dans le personnalisateur WordPress, auquel vous pouvez accéder à partir du menu Apparence du panneau d’administration de WordPress. Le thème Beaver Builder peut être personnalisé pour les catégories générales suivantes : Paramètres prédéfinis, qui appliquent un style intégré à la page si vous ne souhaitez pas personnaliser vous-même tous les paramètres de thème. Disposition et style de l’en-tête (barre supérieure, en-tête, barre de navigation), du pied de page (widgets et barre de pied de page) et de la barre latérale. Mise en page et options pour les archives de blog, les posts uniques et WooCommerce. Paramètres de style par défaut pour Beaver Builder, tels que la couleur d’accent, les polices d’en-tête et de texte et les boutons. Une section où vous pouvez ajouter du code à la tête ou au corps de vos pages. Zones d’en-tête, de pied de page et de barre latérale dans le thème Beaver Builder L’en-tête contient deux zones distinctes : La barre du haut, une bande facultative au-dessus de l’en-tête, peut contenir une ou deux colonnes. L’en-tête principal, qui comprend le logo et la zone de navigation avec un certain nombre de choix de disposition. Certains choix d’en-tête permettent un style distinct de la zone de navigation. Le pied de page contient également deux zones distinctes, chacune facultative : Le pied de page principal, semblable à la barre supérieure, autorise une ou deux colonnes. La zone des widgets de pied de page, qui apparaît au-dessus du pied de page. Voici un diagramme montrant les sous-domaines en-tête et pied de page.

La barre latérale est facultative, mais si elle est activée, elle apparaîtra sur chaque page d’archive et de publication, ainsi que sur chaque page lorsque vous définissez le paramètre du modèle WordPress pour l’afficher. Notez que, par défaut, le thème de Beaver Builder ne contient qu’un seul menu latéral, dont le contenu apparaîtra où que vous l’activiez (toutes les publications ou pages individuelles). Vous ne pouvez pas personnaliser les widgets de la barre latérale différemment pour des publications et des pages individuelles, sauf si vous utilisez un plug-in tiers ou écrivez du code. Une autre façon de personnaliser la barre latérale consiste à utiliser le plug-in Beaver Builder pour créer un module de barre latérale dans la présentation de votre contenu.

Paramètres par défaut du thème pour Beaver Builder

Le thème Beaver Builder vous permet de définir certaines des valeurs par défaut des mises en page de Beaver Builder. Cela vous fait gagner du temps et facilite la mise en conformité de vos mises en page sur l’ensemble du site, à moins que vous ne décidiez de remplacer ce comportement. Voici quelques paramètres de thème Beaver Builder qui s’appliquent aux mises en page Beaver Builder : Couleur d’accent Définit la couleur par défaut des liens et des boutons de générateur de pages et de thème. En-têtes Définit la famille de police par défaut, la taille et d’autres propriétés de police des en-têtes dans la zone de contenu. Texte Définit la famille de police par défaut, la taille et d’autres propriétés de police du texte sans en-tête dans la zone de contenu. Arrière-plan Définit une couleur d’arrière-plan ou une image pour toute la zone de contenu. Lightbox Contrôle le comportement par défaut ou indique si les images s’ouvrent dans une lightbox lorsque l’utilisateur clique dessus. Shortcode de l’année en cours Le thème comporte un shortcode qui insère automatiquement l’année en cours, à la fois dans les zones de thème de la page et dans les présentations Beaver Builder et Beaver Themer.

Source : Traduction de l’article anglophone du site Beaver Builder