Un guide d'utilisation des barres latérales avec le générateur de thème Divi

Les barres latérales peuvent être un atout crucial pour tout site Web. Divi facilite la création de barres latérales en donnant aux développeurs le pouvoir de concevoir des barres latérales entièrement personnalisées pour les modèles de publication ou de page à l'aide de Divi Theme Builder. Une fois que les utilisateurs de Divi ont choisi une structure de colonnes avec la zone de barre latérale souhaitée, ils ont la possibilité de créer du contenu de barre latérale à l'aide de zones de widgets WordPress, de modules Divi ou d'une combinaison des deux pour créer du contenu de barre latérale avec des modules Divi, ou les deux !

Dans cet article, nous allons vous donner un guide rapide sur la façon d'utiliser les barres latérales avec le Divi Theme Builder. Nous verrons comment créer correctement une zone de barre latérale pour vos modèles, ainsi que comment remplir la barre latérale avec du contenu. Cela vous permettra d'intégrer des barres latérales existantes sur de nouveaux modèles Divi ainsi que de créer de nouvelles barres latérales pour un nombre illimité de modèles sur votre site Web.

Allons-y !

Abonnez-vous à notre chaîne Youtube

Un petit mot sur l'utilisation des barres latérales avec les modèles Divi

Vous pouvez ajouter des barres latérales à n'importe quel modèle de publication ou de page sur votre site Web à l'aide de Divi Theme Builder. Le processus est le même que la création d'une barre latérale pour une mise en page spécifique à l'aide de Divi Builder. La seule différence est que la barre latérale ajoutée à un modèle sera affichée sur tous les articles ou pages attribués au modèle. Cela vous donne un contrôle global sur votre barre latérale tout au long de votre site Web.

Barres latérales WordPress vs. barres latérales Divi

Les barres latérales WordPress sont celles intégrées au modèle par défaut d'un thème Divi. Ces barres latérales s'afficheront pour les pages ou les articles dont la mise en page comprend une barre latérale et n'utilisent pas Divi Builder pour concevoir la page.

Les barres latérales Divi sont créées dans le Divi Builder et peuvent être remplies de contenu à l'aide de modules Divi, y compris les widgets WordPress via le module de la barre latérale.

Comment créer une zone de barre latérale pour votre modèle

Le processus de création d'une barre latérale pour vos modèles est assez simple.

Tout d'abord, vous devez ajouter un corps personnalisé au modèle que vous créez.

Ensuite, vous devrez créer une structure de modèle de page à l'aide de la section et des structures de lignes et de colonnes.

Par exemple, vous pouvez utiliser une ligne à une colonne en haut de la section pour afficher l'en-tête de page du modèle.

Ensuite, sous la ligne d'en-tête, ajoutez une autre ligne avec une structure qui inclut une colonne que vous pouvez désigner comme barre latérale du modèle.

Ou, vous pouvez créer une section spécialisée si vous souhaitez profiter d'une zone de barre latérale désignée avec la possibilité d'ajouter plusieurs lignes pour créer le contenu du corps principal.

Les différentes structures de colonne de section de spécialité ont une zone de barre latérale désignée indiquée par la couleur orange dans le modal.

C'est à vous de décider si vous souhaitez ou non utiliser la section spécialisée ou une section régulière pour créer la zone de la barre latérale du modèle. Si vous utilisez une section spécialisée, la zone de la barre latérale est spécialement formulée pour remplir toute cette zone de la section comme une structure de barre latérale traditionnelle. Ce qui signifie que le côté opposé (côté sans barre latérale) peut être construit en utilisant plusieurs rangées, ce qui n'est pas possible avec une section régulière. Si vous utilisez une section régulière, vous aurez l'avantage de styliser la colonne de la barre latérale avec davantage de paramètres intégrés. Donc, pour un modèle simple, en particulier celui qui utilise le module de blog pour afficher le contenu du modèle, j'utiliserais une section régulière et désignerais une colonne pour le contenu de votre corps principal (module de blog) et une colonne pour votre zone de barre latérale désignée.

Comment ajouter du contenu de la barre latérale à votre modèle

Il existe deux manières principales d'ajouter du contenu de la barre latérale à votre modèle. La première consiste à ajouter des zones de widget WordPress au modèle Divi. La seconde consiste à ajouter des modules Divi et du contenu dynamique à la barre latérale directement dans l'éditeur de mise en page de modèles. Cependant, si vous le souhaitez, vous pouvez créer une combinaison des deux en ajoutant plusieurs zones de widgets et modules Divi dans une barre latérale.

Ajout de zones de widget WordPress

WordPress (et Divi) utilisent les zones de widgets pour remplir la barre latérale déjà par défaut. Les zones Widget peuvent être trouvées en accédant au tableau de bord WordPress et en naviguant vers Apparence > Widgets. Là, vous verrez la zone de widgets de la barre latérale par défaut qui est déjà remplie de widgets.

Vous pouvez ensuite ajouter des widgets à la zone de widgets de la barre latérale que vous souhaitez afficher en tant que contenu de la barre latérale. Vous pourrez afficher toute cette zone de widget dans votre Divi Template.

Utilisation du module de barre latérale pour afficher et styliser les zones de widgets

Lorsque vous modifiez la zone de corps personnalisée de votre modèle à l'aide de l'éditeur de mise en page de modèle, vous pouvez ajouter le module de barre latérale à la colonne de barre latérale désignée.

Dans le modal des paramètres de la barre latérale, sélectionnez la zone de widget que vous souhaitez afficher.

Ensuite, vous pouvez utiliser les paramètres de la barre latérale pour styliser la zone du widget afin qu'elle corresponde à la conception de votre modèle.

Avantages de l'utilisation des zones de widgets WordPress pour le contenu de la barre latérale

Il y a quelques avantages à utiliser WordPress Widget Areas pour le contenu de la barre latérale. En voici quelques-uns qui me viennent à l'esprit :

• • Vous pouvez utiliser les barres latérales WordPress existantes (non construites avec Divi) sur les nouveaux modèles Divi. Ainsi, si vous avez un blog qui utilise la barre latérale par défaut, vous n'avez pas à vous soucier de reconstruire la barre latérale à partir de zéro lors de la création d'un nouveau modèle dans Divi Theme Builder.
  • Affichez deux barres latérales WordPress à l'aide de Theme Builder. Avec les multiples options de mise en page de Divi disponibles pour les sections régulières et spécialisées, vous pouvez désigner plusieurs colonnes pour inclure une barre latérale. Vous pouvez même créer des zones de widgets supplémentaires pour chaque barre latérale et ajouter celles à l'aide du module de la barre latérale.
  • Vous pouvez styliser les barres latérales / zones de widgets WordPress avec Divi Theme Builder. Si vous ne souhaitez pas vous fier à un CSS externe pour styliser votre menu WordPress par défaut, vous pouvez l'ajouter à une mise en page de modèle à l'aide du module de curseur et utiliser les paramètres du module de curseur pour styliser les zones de widget.
  • Utilisez des Widgets pour ajouter du contenu à votre barre latérale non disponible avec les modules Divi. Parfois, vous pouvez utiliser des widgets pour ajouter du contenu à votre barre latérale d'une manière que vous ne pouvez pas faire avec les modules Divi. Cela est particulièrement vrai si vous utilisez des plugins tiers qui fournissent des widgets personnalisés.

Ajout de modules Divi en tant que contenu de la barre latérale

Bien sûr, vous n'êtes pas limité à utiliser le module de barre latérale pour afficher le contenu de la barre latérale. Vous disposez de toute la puissance des modules Divi pour créer tout type de contenu que vous désirez. Allez simplement dans la colonne de la barre latérale désignée et ajoutez un nouveau module.

Ensuite, vous pouvez concevoir ces éléments à l'aide des paramètres intégrés de Divi pour correspondre à la conception du modèle.

Étant donné que le contenu de la barre latérale est ajouté à un modèle, vous souhaiterez profiter du contenu dynamique. Par exemple, pour un modèle de publication, vous pouvez inclure un module de blog avec des publications récentes dans votre barre latérale.

Combinaison de zones de widget WordPress avec des modules Divi dans la barre latérale de votre modèle

Vous pouvez également combiner des zones de widgets (avec tous leurs widgets) avec des modules Divi pour une mise en page plus personnalisée du contenu de votre barre latérale. Cela vous donnera la liberté d'utiliser n'importe lequel des widgets WordPress intégrés que vous aimez en plus des modules Divi.

Utilisation de plusieurs modèles pour affecter différentes barres latérales à différents modèles

Le Divi Theme Builder vous permet de créer différentes barres latérales pour différents modèles. Ceci est utile pour fournir aux utilisateurs un contenu spécifique à la page ou à la publication.

Par exemple, vous pouvez créer une barre latérale avec du contenu lié à votre blog sur le modèle « Tous les articles ».

Créez ensuite une barre latérale avec du contenu spécifiquement lié à votre boutique pour le modèle « Tous les produits ».

Dernières pensées

Espérons que ce guide rapide vous a aidé à comprendre comment créer des barres latérales pour vos modèles à l'aide de Divi Theme Builder. N'oubliez pas que vous pouvez utiliser les zones de widgets WordPress ainsi que les modules Divi pour créer le contenu de votre barre latérale. Et le générateur de thèmes vous permet de créer des barres latérales tenant compte du contenu pour différentes pages ou publications sur l'ensemble de votre site.

Quelle a été votre expérience avec la création de barres latérales pour vos templates Divi ?

J'ai hâte de vous entendre dans les commentaires.

À votre santé!