Comment supprimer les barres latérales de Divi

La suppression de la barre latérale du modèle de page par défaut de Divi peut être facilement effectuée lorsque vous utilisez le Divi Builder. Cependant, étant donné que les modèles de page par défaut de Divi (avec la barre latérale) s'affichent toujours sur des pages comme les 404 et les archives, vous voudrez peut-être supprimer complètement la barre latérale de votre modèle.

Le moyen le plus évident de remplacer la disposition par défaut de la barre latérale droite de Divi consiste à utiliser Divi Builder pour concevoir la page ou la publication. Cependant, si vous n'utilisez pas le Divi Builder pour une page ou une publication, il existe deux manières principales de supprimer la barre latérale. La première consiste à modifier la mise en page page par page lors de la modification d'une page ou d'un article individuel. La seconde consiste à remplacer la page ou le modèle de publication par défaut en créant un modèle personnalisé dans Divi Theme Builder.

Aujourd'hui, je vais vous montrer les différentes manières de supprimer les barres latérales sur le modèle par défaut de Divi et de remplacer les modèles avec le Divi Builder. Espérons que cela vous fournira les outils dont vous avez besoin pour créer un site Web pleine largeur conçu de manière cohérente.

Commençons!

Supprimer les barres latérales sur les pages à l'aide des paramètres de page Divi

Modification de la disposition par défaut de la barre latérale droite pour des articles ou des pages individuels

Pour les pages ou les publications qui n'utilisent pas Divi Builder, la mise en page par défaut comprend une barre latérale droite qui ressemble à ce qui suit :

Si vous ne souhaitez pas utiliser Divi Builder pour cette page ou cette publication et que vous souhaitez simplement supprimer la barre latérale page par page, recherchez simplement la zone Paramètres de la page Divi dans la barre latérale lors de la modification de votre page et sélectionnez pleine largeur (ou non sidebar ) pour votre mise en page.

Cela supprimera la barre latérale de ce message ou de cette page en particulier.

Suppression des barres latérales sur la page de la boutique WooCommerce, la page de catégorie et les pages de produits à l'aide des options de thème Divi

Si WooCommerce est installé, vous pouvez trouver quelques options dans les options du thème Divi pour modifier la mise en page des pages WC Shop, Category et Product.

Pour supprimer la barre latérale sur les pages WC Shop et Category, accédez à Divi > Options du thème. Sous l'onglet Général, recherchez l'option intitulée « Mise en page de la page de la boutique et de la page de catégorie pour WooCommerce » et modifiez la disposition en « Pas de barre latérale » ou « Fullwidth ».

Pour supprimer la barre latérale des pages de produits, accédez à Divi > Options du thème. Sélectionnez l'onglet Générateur. Sous Intégration du type de publication, sélectionnez la présentation du produit « Pas de barre latérale » dans la liste déroulante.

Suppression des barres latérales en créant des modèles personnalisés à l'aide du générateur de thèmes

La suppression des barres latérales pour chaque page/article avec les paramètres de page Divi est une bonne solution lors de la création de nouveaux articles et pages individuellement. Cependant, cela peut être assez lourd, surtout si vous décidez de supprimer les barres latérales de toutes les pages. De plus, le modèle par défaut (avec une barre latérale) s'affiche toujours sur des pages telles que les 404 et les archives. Vous pouvez donc supprimer complètement la barre latérale d'une page ou d'un modèle de publication. Pour ce faire, vous pouvez créer des modèles personnalisés à l'aide du Divi Theme Builder. Cela vous donnera un contrôle total sur les pages que vous souhaitez masquer globalement dans les barres latérales.

Theme Builder de Divi est un outil puissant pour concevoir des modèles globaux qui s'appliqueront à n'importe quelle page ou publication que vous désirez. Chaque fois que vous créez une nouvelle mise en page de corps pour un modèle, ce modèle remplacera la mise en page par défaut de Divi (qui comprend une barre latérale). Par conséquent, tout ce que vous avez à faire pour supprimer une barre latérale au niveau du modèle est de créer un nouveau modèle dans le Divi Theme Builder et de l'affecter à la ou aux pages ou aux publications de votre choix.

Création d'un modèle d'article de blog pleine largeur à l'aide de Divi Builder

Les articles de blog sont un excellent exemple où un modèle à l'échelle du site sans barre latérale peut être nécessaire. Les options de contenu dynamique intégrées de Divi vous permettent de concevoir un modèle d'article de blog qui sera appliqué à tous les articles de blog à l'échelle du site à l'aide de Divi Builder et du contenu dynamique. Une fois cela fait, tout ce que vous avez à faire est de mettre à jour le contenu réel du corps pour tous les futurs messages. Le nouveau contenu de la publication héritera de la conception du modèle personnalisé !

Voici un exemple rapide de la façon de procéder :

Tout d'abord, créez un nouveau modèle et attribuez-le à Tous les articles.

Ajoutez ensuite un corps personnalisé au modèle.

À l'aide de l'éditeur de mise en page de modèles, concevez l'intégralité de la mise en page à l'aide de Divi Builder combiné aux modules et options de contenu dynamique intégrés de Divi.

Par exemple, vous pouvez utiliser le module Titre du message pour afficher le titre du message de manière dynamique. Ou vous pouvez intégrer le titre du message en tant que contenu dynamique dans le corps d'un module de texte et l'envelopper avec des balises H1.

Vous pouvez utiliser un module d'image pour extraire l'image sélectionnée en tant que contenu dynamique.

Ou utilisez une série de modules de présentation qui intègrent des métadonnées spécifiques sous forme de contenu dynamique comme l'auteur de l'article, la biographie de l'auteur de l'article, les catégories de publication, la date de publication de la publication et le nombre de commentaires.

Plus important encore, vous devez inclure le module Post Content lors de la création de toute disposition de corps personnalisée pour votre modèle. Le module Post Content inclut la zone pour le contenu de la page ou de la publication à afficher dans la zone du corps du modèle.

Une fois le modèle créé, vous pouvez facilement créer un nouvel article de blog à l'aide de l'éditeur d'articles WordPress par défaut et faire en sorte que cet article de blog hérite de la conception du modèle d'article de blog que vous avez créé à l'aide de Divi Theme Builder.

Pour en savoir plus, consultez notre article sur la façon de concevoir un modèle de publication de blog avec le générateur de thème de Divi.

Création d'un modèle de page de produit WooCommerce pleine largeur à l'aide de Divi Builder

Si vous souhaitez supprimer la barre latérale par défaut pour les pages de produits, vous pouvez également créer un joli modèle de mise en page pleine largeur pour tous vos articles de blog. Semblable à ce que nous avons fait avec le modèle de publication de blog, vous pouvez également utiliser les modules WooCommerce (ou Woo) intégrés de Divi pour créer un modèle de page de produit personnalisé à l'échelle du site sans barre latérale.

Pour ce faire, créez simplement un nouveau modèle et attribuez le modèle à « Tous les produits ».

Ajoutez ensuite un corps personnalisé au modèle et cliquez pour créer la mise en page du corps à l'aide de l'éditeur de modèles.

Utilisez ensuite le Divi Builder pour inclure les modules Woo dynamiques afin de concevoir le modèle de page Produit.

Maintenant, vous créez un nouveau produit sur le backend à l'aide de l'éditeur de page de produit standard, le produit héritera automatiquement de la conception du modèle de corps attribué.

Pour en savoir plus, consultez notre article sur la création d'un modèle de page de produit woo à l'échelle du site.

Création d'un modèle de page d'archive pleine largeur à l'aide de Divi Builder

Theme Builder facilite également la conception de modèles de pages d'archives sans barres latérales. La clé pour créer un modèle pour une page de catégorie est de créer un nouveau modèle et de l'affecter à l'un des nombreux modèles d'archives disponibles dans Divi Builder. Par exemple, vous pouvez l'affecter à toutes les pages d'archives à l'échelle du site ou vous pouvez l'affecter au modèle de page de catégorie afin qu'il n'affiche que les pages affichant une archive de publications dans une catégorie.

Le premier élément essentiel du contenu dynamique d'un modèle d'archive doit inclure le titre de la publication/de l'archive.

Le deuxième élément essentiel du contenu dynamique est l'archive réelle des articles à afficher. Pour ce faire, ajoutez un module de blog et choisissez l'option d'affichage des articles de la page en cours.

Pour une présentation complète, consultez notre article sur la façon de créer un modèle de page de catégorie pour votre blog à l'aide de Divi Theme Builder.

Création d'un modèle de page 404 pleine largeur à l'aide de Divi Builder

Theme Builder facilite également la conception d'un modèle de page 404 pour votre site Web Divi sans la barre latérale par défaut. Une page 404 ne repose pas nécessairement sur un contenu dynamique, alors n'hésitez pas à concevoir tout ce que vous voulez à l'aide du Divi Builder.

Pour une présentation complète, consultez notre article sur la création d'un modèle de page 404 à l'aide de Divi Theme Builder.

Création d'un modèle de page de recherche pleine largeur à l'aide de Divi Builder

Theme Builder facilite également la conception d'un modèle de page de résultats de recherche pour votre site Web Divi sans la barre latérale par défaut. Comme les modèles de page de catégorie, la clé pour créer un modèle pour les résultats de recherche est de créer une zone de corps personnalisée et d'inclure les éléments suivants :

1 : Un titre de publication/d'archive en tant que contenu dynamique

2: Le module Blog pour afficher les articles de la page en cours.

3: Un module de recherche pour permettre aux utilisateurs de poursuivre leurs recherches selon leurs besoins.

Pour une présentation complète, consultez notre article sur la création d'un modèle de page de résultats de recherche pour votre site Web à l'aide de Divi Theme Builder.

Ne créez pas de modèle de corps pleine largeur pour toutes les pages, sauf si vous avez une raison spécifique

Créer un modèle personnalisé avec une disposition de corps pleine largeur pour toutes vos pages peut sembler une bonne idée au départ. Cependant, cela peut ne pas fonctionner comme prévu. Par exemple, vous pouvez limiter la zone d'utilisation du Divi Builder pour la page ou créer une zone de corps trop large pour les pages qui n'utilisent pas le Divi Builder. C'est pourquoi il est préférable de créer un modèle de page uniquement pour les pages qui ne vont pas utiliser le Divi Builder.

Pour en savoir plus, consultez la documentation sur la création d'un modèle de corps global.

Retirer la barre latérale par défaut avec CSS personnalisé

Si vous utilisez les mises en page de thème par défaut de Divi sans utiliser Divi Builder, ou si vous souhaitez vous débarrasser de la barre latérale à l'échelle du site sans avoir à la remplacer à l'aide de paramètres de page individuels ou de modèles de générateur de thème, vous pouvez utiliser du bon CSS à l'ancienne. .

Accédez à Divi > Options du thème. Sous l'onglet Général, collez le code suivant dans la zone CSS personnalisée en bas de la page :

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Dernières pensées

Lors de la création d'un site Web, il est important que toutes vos pages conservent la même mise en page et la même conception. Ainsi, si vous créez un site avec une mise en page pleine largeur à l'aide de Divi Builder, vous souhaiterez peut-être conserver cette mise en page pour toutes vos pages par défaut. Cela pourrait améliorer l'expérience utilisateur. Si quoi que ce soit, vous avez maintenant le pouvoir de personnaliser les affichages de votre barre latérale comme bon vous semble.

J'espère que cela vous sera utile pour votre site et vos futurs projets.

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

À votre santé!