Que puis-je faire avec la Station spatiale?

OK, vous avez installé le plugin Beaver Builder sur votre site WordPress. Et vous avez installé un thème WordPress – si vous avez la version Pro ou Agence de Beaver Builder, vous avez peut-être installé le thème Beaver Builder et le thème enfant. Et peut-être que vous vous demandez si vous avez vraiment besoin d’ajouter Beaver Themer, un plugin 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
• Beaver Builder Plugin
• Thème Beaver Builder
• Quand ai-je besoin de Beaver Themer?

Plugin vs Thème vs Beaver Themer

WordPress fait une 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 diagramme:

Voici comment Beaver Builder s’inscrit dans cela.

• Le plugin Beaver Builder vous permet de créer des mises en page complexes dans le zone de  contenu de la page. Hors de la boîte, Beaver Builder est activé pour les pages, mais il existe des paramètres pour l’activer pour la zone de contenu des publications et des publications personnalisées.
• Un WordPress thème  est un composant obligatoire d’un site WordPress. Il contrôle les zones d’en-tête, de pied de page et de barre latérale de votre site. Pour une seule publication, il contrôle également l’affichage des informations de publication (titre de la publication, auteur, images en vedette, catégories, etc.). Selon le thème que vous choisissez, vous pouvez également être en mesure de configurer ou de supprimer ces zones sur des pages et des publications individuelles, en utilisant Modèles de page WordPress.
• L’ Plugin Beaver Themer  vous permet de créer des mises en page dans des zones en dehors de 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 qui peuvent les voir. Beaver Themer est un module complémentaire qui utilise le plugin Beaver Builder pour créer ces mises en page. Voir les exemples ci-dessous.

Les sections suivantes vous montrent les concepts de base sous-jacents aux mises en page de contenu avec le plugin Beaver Builder, les parties de la page contrôlées par le thème et comment le thème Beaver Builder s’intègre et améliore le plugin.

Beaver Builder Plugin

Le plugin Beaver Builder est un concepteur de mise en page et de style frontal qui vous donne 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 mise en page 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 par un modèle de mise en page ou une page vierge

Lorsque vous créez une nouvelle page WordPress, vous verrez le Constructeur de castors  en regard de l’éditeur de texte WordPress.

Conseil :  Une fois que vous ou vos clients avez ouvert une page pour l’édition, il y a une excellente vidéo de démarrage rapide à laquelle vous pouvez accéder en cliquant sur la flèche vers le bas dans la barre d’administration de Beaver Builder, puis dans le  menuOutils , cliquez sur Aide.

Sur la page d’édition, vous verrez la barre d’administration de Beaver Builder en haut de l’écran. Vous pouvez soit commencer à faire glisser des modules dans la mise en page vide, soit cliquer sur le bouton Modèles  et commencez par une mise en page prédéfinie que vous modifiez à votre guise.

Si vous ne voyez pas le panneau Contenu, lorsque vous ouvrez la page, cliquez sur le bouton De plus  dans le coin supérieur droit. Pour le fermer, cliquez sur le bouton X  icône.

Les bases des mises en page de zone 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 dans les colonnes, il est parfois plus facile de faire glisser d’abord les mises en page de lignes, puis de faire glisser des modules de contenu. Par exemple, voici une seule ligne avec trois couches de colonnes.

Pour plus d’informations sur le fonctionnement des colonnes, consultez le vue d’ensemble des mises en page des colonnes.

Dans la capture d’écran ci-dessus, les trois couches de colonnes se trouvent à l’intérieur d’une seule ligne, mais vous pouvez également placer chaque calque de colonne dans une ligne différente, comme le montre cette capture d’écran:

Qu’est-ce qui détermine lorsque vous démarrez une nouvelle ligne dans votre mise en page ? Il n’y a pas de règle stricte, mais voici quelques considérations:

• Vous souhaitez définir une couleur d’arrière-plan, une image ou une vidéo pour une ligne particulière de votre mise en page. Créez une ligne distincte pour cette section.
• Vous souhaitez enregistrer une ligne particulière afin de la réutiliser ailleurs.
• Vous avez des sections de contenu sur votre page que vous voudrez peut-être repositionner plus tard – si elles sont dans des lignes séparées, il est facile de les déplacer en les faisant glisser.
• Vous souhaitez tirer parti des fonctionnalités de marge ou de remplissage de la ligne pour positionner un bloc de contenu dans une ligne ou positionner la ligne par rapport à d’autres lignes.
• Au lieu d’une barre latérale de thème, vous souhaitez ajouter un module de barre latérale ou un autre module qui semble s’étendre sur plusieurs lignes. Pour donner à cette zone l’apparence d’une barre latérale, vous avez besoin d’une seule ligne avec des couches de colonnes, comme dans cette maquette rapide montrant une seule ligne avec deux colonnes. La colonne de gauche contient deux en-têtes couches de colonne, et la colonne de droite contient la barre latérale.

Pensez réactif

Beaver Builder rend les mises en page bien paraître sur les appareils moyens (tablettes) et les petits appareils (mobiles) sans effort supplémentaire de votre part. Cependant, si vous souhaitez plus de contrôle sur les points d’arrêt, l’empilement et l’espacement, vous pouvez modifier l’espacement séparément pour les grands, moyens et petits appareils. Commencez par ceci article de synthèse sur la réactivité.

Enregistrer les mises en page Beaver Builder pour les utiliser ailleurs

Vous pouvez enregistrer des lignes et des modules globalement, de sorte que toute modification que vous apportez à un endroit soit reflétée partout, ou vous pouvez enregistrer les lignes et les modules afin de pouvoir les réutiliser mais les modifier différemment à chaque emplacement. Ou vous pouvez enregistrer l’ensemble de la mise en page 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 Agence du plugin Beaver Builder, vous pouvez étiqueter en blanc l’interface utilisateur de 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 mise en page, les lignes et les modules qui sont à leur disposition.

Utilisez les mises en page Beaver Builder pour les publications

Par défaut, Page Builder est activé uniquement pour les pages WordPress, pas pour les publications. Lorsque vous activez des publications ou des types de publications personnalisés, vous pouvez utiliser Page Builder pour présenter la zone de contenu des publications individuelles ou des types de publications personnalisés. Voir l’article sur utilisation de Page Builder avec des publications  pour plus d’informations.

Remarque :  Parce que WordPress 
index
  et 
archive
  les pages sont générées à la volée, vous ne pouvez pas utiliser Beaver Builder pour présenter ces pages, bien que vous puissiez créer des mises en page 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 par rapport aux mises en page de Page Builder. Vous pouvez également utiliser le module complémentaire Beaver Themer pour créer des index WordPress personnalisés, des archives et des mises en page de résultats de recherche.

Thème Beaver Builder

WordPress nécessite l’utilisation d’un thème pour contrôler les 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 dispose de nombreuses options de mise en page et de style pour contrôler les zones thématiques de la page, à la fois sur les grands écrans et les appareils plus petits. De plus, le thème Beaver Builder est entièrement compatible avec les plugins Beaver Builder et Beaver Themer. Tous les paramètres de thème sont effectués dans le Personnalisateur WordPress, auquel vous pouvez accéder à partir du Apparence  dans le panneau d’administration WordPress. Le thème Beaver Builder contient des personnalisations pour les catégories générales suivantes :

• Les préréglages, qui appliquent un style intégré à la page si vous ne souhaitez pas personnaliser vous-même tous les paramètres du thème.
• Mise en page 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 publications individuelles et WooCommerce.
• Paramètres de style par défaut pour Beaver Builder, tels que la couleur d’accentuation, 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 supérieure, une bande facultative au-dessus de l’en-tête, qui 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 mise en page.
  Certains choix d’en-tête permettent un style séparé de la zone de navigation.

Le pied de page contient également deux zones distinctes, chacune facultative :

• Le pied de page principal, similaire à la barre supérieure en permettant 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-zones d’en-tête et de 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 n’importe quelle page individuelle lorsque vous définissez le Paramètre   de modèle WordPress

pour l’afficher. Notez que par défaut, il n’y a qu’une seule barre latérale dans Beaver Builder Theme, dont le contenu du widget apparaîtra partout où vous l’activez (toutes les publications ou pages individuelles). Vous ne pouvez pas personnaliser les widgets de la barre latérale différemment pour les publications et les pages individuelles, sauf si vous utilisez un plugin tiers ou écrivez du code. Une autre façon de personnaliser la barre latérale est d’utiliser le plugin Beaver Builder pour créer un module de barre latérale dans votre mise en page de contenu.

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

Beaver Builder Theme vous permet de définir certaines des valeurs par défaut pour les mises en page Beaver Builder. Cela permet de gagner du temps et facilite l’accès à la conformité dans vos mises en page à l’échelle du site, sauf si vous choisissez de remplacer ce comportement.

Voici quelques paramètres du thème Beaver Builder qui s’appliquent aux mises en page Beaver Builder :

• Couleur d’accentuation
  Définit la couleur par défaut des liens et des boutons Theme et Page Builder.
• En-têtes
  Définit la famille de polices par défaut, la taille et les autres propriétés de police des en-têtes dans la zone de contenu.
• Texte
  Définit la famille de polices par défaut, la taille et les autres propriétés de police du texte sans en-tête dans la zone de contenu.
• Historique
  Définit une couleur ou une image d’arrière-plan pour l’ensemble de la zone de contenu.
• Lightbox
  Contrôle le comportement par défaut ou si les images s’ouvrent dans une lightbox lorsque vous cliquez dessus.
• Code abrégé de l’année en cours
  Le thème a un code court qui insère automatiquement l’année en cours, à la fois dans les zones thématiques de la page et dans les mises en page Beaver Builder et Beaver Themer.

Quand ai-je besoin de Beaver Themer?

Bien que le thème Beaver offre beaucoup de flexibilité dans la personnalisation des zones de thème (en-tête, pied de page, barre latérale, informations de publication et pages d’archives générées par WordPress), si vous voulez plus de contrôle sur ces zones, alors Beaver Themer peut être bon pour vous.

Beaver Themer est un produit complémentaire pour le plugin Beaver Builder. Il vous permet de créer des mises en page Beaver Builder qui s’appliquent aux zones de votre site qui sont normalement contrôlées par le thème. Vous pouvez créer différentes mises en page pour différents emplacements – par exemple, un en-tête pour les pages de votre boutique et un en-tête différent pour le reste de votre site. Ou vous pouvez afficher les mises en page uniquement aux utilisateurs avec un certain statut (connecté, déconnecté) ou un rôle d’utilisateur (administrateur, éditeur, etc.).  Cela vous donne beaucoup plus de flexibilité et de contrôle dans les personnalisations que n’importe quel thème ne pourrait jamais fournir.

Beaver Themer est entièrement intégré au thème Beaver Builder, mais prend également en charge plusieurs thèmes populaires. D’autres développeurs ont rendu leurs thèmes compatibles avec Beaver Themer, comme décrit dans  cet article.

Types et exemples de mise en page Themer

Voici les types de mises en page Themer que vous pouvez créer, avec un exemple de chacun. Avec chaque mise en page Themer, vous avez le choix entre les emplacements et les utilisateurs auxquels elle s’applique.

Remarque :  Vous pourriez penser que les mises en page de Themer l’emportent sur le contrôle du thème d’une zone particulière de la page.  Cela signifie que pour toute page à laquelle une mise en page Themer ne s’applique PAS, les options de thème standard que vous avez définies prennent le relais. Par exemple, si une disposition Themer de type en-tête est appliquée uniquement à la page d’accueil, l’en-tête de votre thème s’applique à toutes les autres pages de votre site.

Disposition de l’en-tête

Dans cet exemple, une mise en page Header Themer a été créée avec une image de héros et s’applique uniquement à la page d’accueil. Pour les autres pages, une mise en page Themer de type en-tête différente pourrait être créée pour s’appliquer à toutes les pages à l’exception de la page d’accueil, ou vous pouvez simplement laisser votre thème prendre en charge l’affichage de son en-tête sur les autres pages.

Disposition du pied de page

Vous pouvez créer des mises en page qui apparaissent à l’endroit où votre thème affiche normalement le pied de page.

Dans l’exemple montré dans cette capture d’écran, la disposition Themer de type pied de page sur la gauche a une rangée de pied de page typique en bas et une autre ligne au-dessus qui ressemble à une zone de widget de pied de page, sauf qu’elle contient du contenu de module, pas des widgets WordPress, vous donnant plus de contrôle sur la mise en page et le style. La disposition Themer de type pied de page à droite s’applique aux pages de catégorie de produit et d’archive de produit, avec une section de service client, une zone de recherche pour les produits et une liste des produits récemment consultés. Beaver Themer a des intégrations avec WooCommerce, Easy Digital Downloads et les plugins The Event Calendar, avec des modules spéciaux qui facilitent l’affichage de ce type d’informations et limitent les emplacements dans lesquels elles apparaissent.

Mise en page singulière

Les mises en page Themer de type singulier s’appliquent aux poteaux uniques. Elles sont différentes des mises en page régulières de Beaver Builder pour les publications, en ce sens que les mises en page régulières s’appliquent à la zone de contenu, tandis que les mises en page Singular Themer s’appliquent partout sauf dans la zone de contenu. Beaver Themer prend en charge les types de publication personnalisés et les champs personnalisés utilisés dans WordPress, le plugin Advanced Custom Fields et le plugin Pods (avec un plugin supplémentaire qui s’intègre à Beaver Themer).

La capture d’écran suivante montre un exemple d’un type de publication personnalisé appelé Événements. La ligne de titre de la publication comprend deux champs personnalisés pour la date et l’heure de l’événement, et l’image en vedette de la publication est définie pour s’afficher en arrière-plan de la ligne. Dans la ligne avec deux colonnes sous le titre, la colonne de gauche affiche le contenu de la publication, et la colonne de droite affiche trois champs personnalisés (notes spéciales, où se rencontrer et une carte).

Remarque :  Une disposition Beaver Builder standard s’applique à la zone de contenu d’un message, tandis qu’une mise en page Singular Themer s’applique à partout sauf  la zone de contenu de la publication. Si vous utilisez une mise en page Singular Themer, vous ne pouvez pas utiliser une mise en page Beaver Builder standard pour le contenu de la publication, et vice versa. Dans la capture d’écran ci-dessus, la zone de contenu de publication dans la colonne de gauche utilise l’éditeur WordPress standard, avec un shortcode Beaver Builder pour insérer une ligne enregistrée pour afficher l’image avec les princesses et superposer du texte.

Mises en page d’archive pour les pages WordPress générées (Index, archive, résultats de recherche)

Normalement, vous ne pouvez contrôler que l’apparence de pages telles que la liste des publications récentes que WordPress génère via les paramètres de votre thème ou en personnalisant directement les modèles PHP WordPress ou en créant des CSS personnalisés. Beaver Themer vous permet d’appliquer les mises en page Beaver Builder à ces pages générées.

Voici un exemple de la façon dont une mise en page de type Archive a été utilisée pour créer une page d’index affichant des publications récentes pour le type de publication personnalisé appelé Événements, avec des champs personnalisés pour la date et l’heure.

Vous pouvez appliquer des mises en page de type Archive à la page d’index (liste des publications récentes), ou aux publications écrites par un auteur particulier, ou organisées par date, ou pour une catégorie ou une balise particulière. Une mise en page de type Archive peut également s’appliquer à une page affichant des résultats de recherche.

Voici un exemple de mise en page de type Archive pour une page de catégorie de produit WooCommerce. Dans cette mise en page, l’image de la catégorie apparaît sous la forme d’un arrière-plan de ligne derrière le titre de la catégorie et d’une barre de recherche, et les produits de la catégorie sont affichés dans un module Publications qui vous permet d’afficher uniquement les produits qui correspondent à cette catégorie de produits WooCommerce.

Page personnalisée 404

Vous pouvez créer une mise en page pour une page 404 personnalisée, comme indiqué dans cette capture d’écran.

Pièces

Outre les types de mise en page Themer qui s’appliquent aux emplacements de thème standard, vous pouvez créer des mises en page Themer pour des emplacements ciblés en dehors de la zone de contenu, par exemple après l’en-tête, après le titre, au-dessus du pied de page, etc.

Par exemple, vous pouvez créer une bannière de site que vous affichez sous l’en-tête sur certaines pages. Dans la capture d’écran suivante, une mise en page Themer de type partie insère un avis de bannière sur les prix d’expédition sous l’en-tête sur toutes les pages de magasin d’un site WooCommerce.