Making the Sidebar collapsible in Divi allows the blog to be displayed in a better way, so the information can be better distributed on the screen.
Divi is a plugin for WordPress that allows you to create blogs and constantly edit them to improve the reader’s experience, in this way you can generate attraction to your blog .
In addition to being able to design your page from pre-established themes, Divi also gives you the possibility to start from scratch and thus be able to create your page to your own liking. When you work with the Divi design, keep in mind that you can change it by section.
How to collapse the Sidebar in Divi?
Well, first you should know that you will have to access some codes on the page to be able to edit this option.
You must handle the following codes to be able to collapse the Sidebar, the first one will be to make the bar disappear but at the same time it will only be a button that the user can use to open and close the bar.
Make the Sidebar collapsible
<style>
@media only screen and (min-KID: 981px) {
/ * Sidebar expand / collapse button * / #db_hide_sidebar {
z-index: 10000;
padding: 10px;
cursor: pointer;
}
.db_right_sidebar_collapsible #db_hide_sidebar {
right: 0;
}
.db_left_sidebar_collapsible #db_hide_sidebar {
left: 0;
}
.et_fixed_nav #db_hide_sidebar {
position: fixed;
}
.et_non_fixed_nav #db_hide_sidebar {
position: absolute;
}
#db_hide_sidebar: before {
font-family: ‘ETModules’;
font-size: 24px;
}
.et_right_sidebar #db_hide_sidebar: before, .db_left_sidebar_collapsible.et_full_width_page #db_hide_sidebar: before {
content: ‘\ 39’;
}
.db_right_sidebar_collapsible.et_full_width_page #db_hide_sidebar: before, .et_left_sidebar #db_hide_sidebar: before {
content: ‘\ 38’;
}
/ * Ensure fullwidth formatting matches sidebar formatting * / .db_sidebar_collapsible.et_full_width_page .et_post_meta_wrapper: first-child {
padding-top: 58px! important;
}
}
</style>
<script>
jQuery(function($) {
if ($(‘# sidebar’).length) {
if ($(‘body.et_right_sidebar’).length) {
$(‘body’).addClass(‘db_sidebar_collapsible db_right_sidebar_collapsible’);
$(‘# main-content’).prepend(
$(‘<span id = »db_hide_sidebar» title = »Toggle Sidebar»> </span>’).click(function() {
$(‘body’).toggleClass(‘et_right_sidebar et_full_width_page’);
$(‘# sidebar’).toggle();
})
);
$(‘body’).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 = »Toggle Sidebar»> </span>’).click(function() {
$(‘body’).toggleClass(‘et_left_sidebar et_full_width_page’);
$(‘# sidebar’).toggle();
})
);
}
}
});
</script>
You only have to copy this code and access WordPress, once there, locate the Divi section and select ” Theme Options.
Select the ” Integration ” tab , now enable the option ” Enable header code “, continue pasting the code in the ” Add code to the <head> of your blog ” section.
Once the code is copied, you just have to save the changes and update the live page of your blog so you can see the change. An arrow will appear next to the Sidebar allowing you to easily open and close the bar.
Remove the dividing bar between the content and the Sidebar
We leave you a second code with which you can remove the bar that divides the space between the blog content and the Sidebar.
With this feature, by collapsing the Sidebar in Divi, the blog will look wider when the reader collapses the bar thanks to the arrow you have placed. The code is the following:
main-content .container: before {background: none;}
Now you must repeat the previous steps, with the only difference that the code must be pasted in the ” Custom CSS ” section, save the changes and update the live page of your blog.
recommendations
Many users use their Smartphones to access their favorite blogs, so it is recommended that you handle the content in a way that makes it easier to read. Another way you can accomplish this is by adding a collapsible menu to your website.
The contents of your blog must be organized, so you generate better readability, this helps many people to follow the content you publish.
You can add different options to your blog that make it more interactive, such as contact forms or comment sections.
Now we advise you that if you have social networks and you have contact with your readers, take their recommendations into account, but always keeping the essence of your content .
In this way you generate engagement with the content you produce, this will always keep your blog full of visits, you can also use links to some products or pages that you recommend and thus monetize your work a bit.
An important piece of information that will help you gain visits to your blog or website is using BreadScrumb to improve SEO and attract visitors.
Finally, we hope that our recommendations and this article will be of great help to you to improve the visualization of your blog.