If you are creating a special page or a landing page, you may want to hide the sidebars to avoid the clutter on the page and focus on the main content.
Code can be added to the HTML of the individual Page to hide the sidebars. This particular article is explaining how to hide the sidebars when you are using a custom design created with the Design Lab. If you are not using a responsive theme, please see the Landing Page article section on hiding sidebars.
First, create a New Page and add the content for the page. Then, click to the HTML tag to add the code. You will choose the code from below based on the number of columns in your design.
Design Lab Theme with Two Columns
<style>
/* Two Column Right - Hide Sidebar */
.col-sm-4 {
display: none;
}
/* increase width of remaining column */
.col-sm-8 {
width: 100%;
}
</style>
<style>
/* Two Column Left - Hide Sidebar */
.col-sm-4 {
display: none;
}
/* increase width of remaining column */
.col-sm-8 {
width: 100%;
left: 0;
}
</style>
Design Lab Theme with Three Columns
<style>
/* Three Column Layouts - Hide Sidebars */
#sidebar1, #sidebar2 {
display: none;
}
/* increase width of remaining column */
.col-sm-8 {
width: 100%;
left: 0;
}
</style>
Paste the code at the top of your Page and click Publish or Save. Please note you will not be able to switch back to the Rich Text tab after adding the code. To see your Page before publication, use the Preview feature.
Updated 13 March 2019
You may also want to check out these other articles:
- For tips on customizing the Design Lab, see the article on editing the design Style.
- To add unique fonts to your design, check out the article on Design Lab Fonts.
- To upload and embed non-YouTube files, check out this article.