Comment réduire facilement la barre latérale dans Divi
Rendre la barre latérale pliable dans Divi permet au blog d’être mieux affiché, de sorte que les informations peuvent être mieux réparties à l’écran.
Divi est un plugin pour WordPress qui vous permet de créer des blogs et de les éditer constamment pour améliorer l’expérience du lecteur, de cette manière, vous pouvez générer de l’attrait pour votre blog .
En plus de pouvoir concevoir votre page à partir de thèmes préétablis , Divi vous donne également la possibilité de repartir de zéro et ainsi pouvoir créer votre page à votre guise. Lorsque vous travaillez avec le design Divi, gardez à l’esprit que vous pouvez le modifier par section.
Comment réduire la barre latérale dans Divi?
Eh bien, sachez d’abord que vous devrez accéder à certains codes sur la page pour pouvoir modifier cette option.
Vous devez gérer les codes suivants pour pouvoir réduire la barre latérale, le premier sera de faire disparaître la barre mais en même temps ce ne sera qu’un bouton que l’utilisateur pourra utiliser pour ouvrir et fermer la barre.
Rendre la barre latérale pliable
Écran @media uniquement et (min-KID: 981px) {
/ * Bouton développer / réduire la barre latérale * /
#db_hide_sidebar {
indice z: 10000;
rembourrage: 10px;
curseur: pointeur;
}
.db_right_sidebar_collapsible #db_hide_sidebar {
droite: 0;
}
.db_left_sidebar_collapsible #db_hide_sidebar {
gauche: 0;
}
.et_fixed_nav #db_hide_sidebar {
position: fixe;
}
.et_non_fixed_nav #db_hide_sidebar {
position: absolue;
}
#db_hide_sidebar: avant {
famille de polices: ‘ETModules’;
taille de la police: 24px;
}
.et_right_sidebar #db_hide_sidebar: avant,
.db_left_sidebar_collapsible.et_full_width_page #db_hide_sidebar: avant {
contenu: ‘\ 39’;
}
.db_right_sidebar_collapsible.et_full_width_page #db_hide_sidebar: avant,
.et_left_sidebar #db_hide_sidebar: avant {
contenu: ‘\ 38’;
}
/ * Assurez-vous que le formatage pleine largeur correspond au formatage de la barre latérale * /
.db_sidebar_collapsible.et_full_width_page .et_post_meta_wrapper: premier-enfant {
padding-top: 58px! important;
}
}
</style>
<script>
jQuery (fonction ($) {
if ($ (‘# sidebar’). length) {
if ($ (‘body.et_right_sidebar’). length) {
$ (‘corps’). addClass (‘db_sidebar_collapsible db_right_sidebar_collapsible’);
$ (‘# main-content’). prepend (
$ (‘<span id = »db_hide_sidebar» title = »Activer / désactiver la barre latérale»> </span>’) .click (function () {
$ (‘corps’). toggleClass (‘et_right_sidebar et_full_width_page’);
$ (‘# barre latérale’). toggle ();
})
);
$ (‘corps’). addClass (‘db_collapsible_sidebar’);
} else if ($ (‘body.et_left_sidebar’). length) {
$ (‘body’). addClass (‘db_sidebar_collapsible db_left_sidebar_collapsible’);
$ (‘# main-content’). prepend (
$ (‘<span id = »db_hide_sidebar» title = »Activer / désactiver la barre latérale»> </span>’) .click (function () {
$ (‘body’). toggleClass (‘et_left_sidebar et_full_width_page’);
$ (‘# barre latérale’). toggle ();
})
);
}
}
});
</script>
Il vous suffira de le copier et d’accéder à WordPress, une fois sur place, localisez la section Divi et sélectionnez » Options du thème «.
Sélectionnez l’onglet » Intégration «, activez maintenant l’option » Activer le code d’en-tête «, continuez à coller le code dans la section » Ajouter du code à la <head> de votre blog «.
Une fois le code copié, il vous suffit d’enregistrer les modifications et de mettre à jour la page en direct de votre blog pour que vous puissiez voir le changement. Une flèche apparaîtra à côté de la barre latérale vous permettant d’ouvrir et de fermer facilement la barre latérale.
Supprimez la barre de séparation entre le contenu et la barre latérale
Nous vous laissons un deuxième code avec lequel vous pouvez supprimer la barre qui divise l’espace entre le contenu du blog et la barre latérale .
Avec cette fonctionnalité, en repliant la barre latérale dans Divi, le blog paraîtra plus large lorsque le lecteur réduira la barre grâce à la flèche que vous avez placée. Le code est le suivant:
# main-content .container: avant {background: none;}
Vous devez maintenant répéter les étapes précédentes , à la seule différence que le code doit être collé dans la section » CSS personnalisé » , enregistrer les modifications et mettre à jour la page en direct de votre blog.
recommandations
De nombreux utilisateurs utilisent leur smartphone pour accéder à leurs blogs préférés, il est donc recommandé de gérer le contenu de manière à le rendre plus facile à lire . Vous pouvez également y parvenir en ajoutant un menu pliable à votre site Web .
Le contenu de votre blog doit être organisé, donc vous générez une meilleure lisibilité , cela aide de nombreuses personnes à suivre le contenu que vous publiez.
Vous pouvez ajouter différentes options à votre blog pour le rendre plus interactif , comme des formulaires de contact ou des sections de commentaires.
Désormais, nous vous conseillons que si vous avez des réseaux sociaux et que vous êtes en contact avec vos lecteurs, tenez compte de leurs recommandations, mais en gardant toujours l’essence de votre contenu .
De cette façon, vous générez de l’engagement avec le contenu que vous produisez, cela gardera toujours votre blog plein de visites, vous pouvez également utiliser des liens vers certains produits ou pages que vous recommandez et ainsi monétiser un peu votre travail.
L’ utilisation de BreadScrumb pour améliorer le référencement et attirer les visiteurs est une information importante qui vous aidera à obtenir des visites sur votre blog ou votre site Web .
Enfin, nous espérons que nos recommandations et cet article vous seront d’une grande aide pour améliorer l’affichage de votre blog.
