Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Supprimer la barre latérale du modèle de page standard de Divi n’est pas un problème en utilisant Divi Builder. Cependant, étant donné que le modèle par défaut apparaît toujours sur des pages telles que 404 et les archives, vous souhaiterez peut-être supprimer entièrement la barre latérale de votre modèle.

Cela peut se faire de plusieurs manières. Vous pouvez masquer les barres latérales globalement ou pour des modèles individuels avec CSS uniquement. Vous pouvez également masquer les barres latérales en modifiant les fichiers de modèle réels avec un sous-sujet.

Aujourd’hui, je vais vous montrer les différentes façons de masquer les barres latérales globalement et pour des modèles individuels. 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!

Comment supprimer les barres latérales de Divi

Abonnez-vous à notre chaîne Youtube

Supprimer les barres latérales par page avec les paramètres de page Divi

Cette première méthode ne vous permet pas de supprimer les barres latérales globalement, mais j’ai pensé que cela valait la peine d’être mentionné.

Si vous n’utilisez pas Divi Builder et que vous souhaitez simplement modifier votre mise en page par page, lors de l’édition de votre page, trouvez simplement la case Paramètres de page Divi en haut à droite et sélectionnez la largeur totale de votre mise en page.

C’est une bonne solution pour la plupart des sites. Cependant, aucun autre modèle comme les pages d’archive de publication et de portfolio ne peut être traité avec ce correctif. Ces modèles doivent être modifiés à l’aide de CSS ou pour éditer des fichiers de modèles.

Masquage global de la barre latérale uniquement avec CSS

Pour masquer la barre latérale globalement ou sur le site, tout ce que vous avez à faire est d’ajouter du CSS personnalisé à votre fichier enfant style.css. Ou allez dans Divi → Options de conception et collez le CSS dans le champ CSS personnalisé.

Tout d’abord, ajoutez le CSS suivant pour masquer la ligne de séparation gris clair entre le contenu et la barre latérale:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

Ensuite, ajoutez ce CSS pour étendre votre zone de contenu en pleine largeur:

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
	float: none !important;
}
}

Enfin, ajoutez ce CSS pour masquer la barre latérale:

/*** Hide Sidebar ***/
#sidebar {display:none;}

Dans l’ensemble, votre CSS devrait ressembler à ceci:

/*** 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;
}
}

Vos pages et articles auront une mise en page pleine largeur comme suit:

Masquer la barre latérale pour des modèles spécifiques à l’aide de CSS

Au lieu d’utiliser l’extrait de code CSS ci-dessus pour masquer globalement la barre latérale, vous pouvez utiliser les extraits de code suivants pour masquer la barre latérale dans des modèles spécifiques.

Remarque: l’un des extraits de code CSS suivants doit être utilisé avec le CSS qui supprime la ligne de séparation et ajuste la largeur de la section de contenu:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
	float: none !important;
}
}

Utilisez ce CSS personnalisé pour masquer la barre latérale de toutes les pages d’archive:

/*** Hide Sidebar for archive pages ***/
.archive #sidebar {display:none;}

Utilisez ce CSS personnalisé pour masquer la barre latérale de toutes les pages:

/*** Hide Sidebar for all pages ***/
.page  #sidebar {display:none;}

Utilisez ce CSS personnalisé pour masquer la barre latérale pour les publications individuelles (y compris les publications de projet individuelles):

/*** Hide Sidebar for single posts ***/
.single  #sidebar {display:none;}

Utilisez ce CSS personnalisé pour masquer la barre latérale pour les publications de projet individuelles uniquement:

/*** Hide Sidebar for single project posts ***/
.single-project  #sidebar {display:none;}

Utilisez ce CSS personnalisé pour masquer la barre latérale de toutes les pages d’archives de catégories uniquement:

/*** Hide Sidebar for category archive pages ***/
.category  #sidebar {display:none;}

Utilisez ce CSS personnalisé pour masquer la barre latérale uniquement pour les pages d’archive des catégories de projet:

/*** Hide Sidebar project category archive pages ***/
.tax-project_category  #sidebar {display:none;}

Utilisez ce CSS personnalisé pour masquer la barre latérale pour 404 pages uniquement:

/*** Hide Sidebar for 404 pages ***/
.error404  #sidebar {display:none;}

Désactivez globalement la barre latérale en éditant le fichier sidebar.php

Il est toujours préférable d’éditer vos fichiers de thème Divi Utilisez un sous-sujet. Lorsqu’un sous-sujet est installé et actif, collez les fichiers de modèle que vous souhaitez modifier dans le sous-dossier du sous-sujet. Désormais, si vous mettez à jour Divi, vos fichiers enfants de sujets modifiés ne seront pas écrasés.

Pour désactiver globalement la barre latérale (dans tous les modèles), ouvrez votre dossier de thème subordonné (à l’aide d’un client FTP et d’un éditeur de texte) et ajoutez un fichier avec le nom exact « sidebar.php ».

C’est ça!

Assurez-vous de ne pas ajouter de contenu au fichier sidebar.php. Chaque fois que votre sujet demande le fichier, il n’affichera plus aucun contenu ou n’affichera rien.

Ajoutez maintenant le CSS personnalisé suivant à votre fichier enfant style.css ou ajoutez-le à la section CSS personnalisé dans les options de votre thème:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
	float: none !important;
}
}

Désactivation de la barre latérale pour certains modèles

Divi a un certain nombre de modèles qui sont utilisés pour afficher différentes mises en page sur votre site Web. Certains de ces fichiers modèles incluent:

Page.php – modèle pour toutes les pages
Single.php – modèle pour toutes les contributions individuelles
Single-project.php – modèle pour tous les projets individuels
404.php – modèle pour les 404 pages

Pour désactiver la barre latérale dans l’un de ces modèles, vous pouvez accéder au fichier de modèle et retirer ce petit extrait du code PHP qui appelle la barre latérale:

<?php get_sidebar(); ?>

Si vous ne l’avez pas déjà fait, assurez-vous que votre thème enfant est installé et actif. Vous pouvez ajouter l’un des fichiers de modèle susmentionnés au dossier enfant du thème pour le modifier.

Voici un exemple de la façon de désactiver la barre latérale pour toutes les pages en éditant le fichier page.php.

Accédez à vos fichiers de thème Divi à l’aide d’un client FTP et d’un éditeur de texte et copiez le fichier page.php. Collez le fichier page.php avec tout le code dans votre dossier enfant de rubrique (assurez-vous qu’il porte exactement le même nom « page.php ».

Ouvrez maintenant le fichier page.php du sujet enfant et supprimez cet extrait de code PHP:

<?php get_sidebar(); ?>

Enregistrez vos modifications et vous avez terminé!

Désactivation des barres latérales sur vos pages d’archives

Le design Divi n’a pas de fichier de modèle d’archive séparé. Les pages d’archives des archives de catégories et de balises utilisent le fichier modèle index.php.

Copiez simplement le fichier index.php du sujet Divi parent dans votre dossier de sujet enfant et retirez le même extrait de code PHP:

<?php get_sidebar(); ?>

C’est ça!

Dernières pensées

Lors de la création d’un site Web, il est important que toutes vos pages aient la même mise en page et le même design cohérents. Donc, 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 par défaut pour toutes vos pages. Cela pourrait améliorer l’expérience utilisateur. Si quoi que ce soit, il est maintenant temps de personnaliser vos publicités de la barre latérale à votre guise.

J’espère que vous trouverez cela utile pour votre site Web et vos futurs projets.

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

De bas en haut!





Source link

Recent Posts