Sidebar less websites are the latest design trend which generally work well on mobile devices. However, sidebar is one of the essential parts of site’s layout on desktop and have large potential to convert your visitors to customers. This is especially true for ecommerce websites where you can easily promote products on the sidebar. Weebly does not offer sidebar for blogs but not for pages. In this article, we will go through step by step process of adding sitewide sidebar in Weebly for pages and blog posts.
Weebly Editor, Themes and Sidebar
Before we proceed, it is necessary to understand the followings:
- For standard pages, Weebly site editor shows preview of your live content. Due to this, your sidebar will be visible in the editor along with main content. This may cause some congestion in the editor with space crunch. However, the drag and drop experience will not be affected by adding a sidebar to your pages.
- You can add sitewide common sidebar or custom sidebar for individual pages based on your need. It is possible to add any Weebly elements in the page sidebar.
- Weebly offers a default sidebar for blog posts which you can enable or disable as you need. However, this sidebar will not appear on your pages.
Add Sidebar in Weebly Pages
There are two ways you can add sidebar to your Weebly pages:
- Sitewide sidebar that appears on all the pages
- Custom sidebar for different pages
Let us explain both the options in detail in the following sections. You can check out the live Weebly site with 8 different types of sidebar setup. If you like the layouts, download the complete theme for free and import in your site to save plenty of time.
Add Sitewide Sidebar to Weebly Pages
The process involves creating a page layout ad adding CSS to your theme. If you are not familiar, check our article on how to edit source code in Weebly to understand the basics. When you are Weebly site editor, go to “Themes” section and click on “Edit HTML / CSS” button. You can find this button on lower left corner of the screen. Since Weebly hide this button a bit, you can press “Control and +” keys to zoom the display to find the button appears clearly.
This will take you to Weebly code editor where you will see different sections. You can find all HTML page templates available for your theme under the “Header Type” section. Most of the Weebly themes offer three header types:
- header.html which will have header image on top
- no-header.html is the template for no header image
- splash.html – create a full page template (we noticed some themes do not have this template)
What we need is to create a duplicate template and enable sidebar code in that template. Let’s explain here with header.html template and you can follow the same process if you want to add sidebar to no-header.html template. Click on the header.html template and copy all the content inside the file from the right pane. Now, click on the “+” icon showing next to “Header Type” heading in the left sidebar and select “New Header Type” option.
Weebly will create a new template and rename it as “sidebar.html” or any name you like. You can see there are default HTML code and other elements in the newly created template.
Simply delete all the content inside the template and paste the copied content from header.html template. Look for {content} in the code which generally appears inside a main-wrap div section as show below.
The code will look something like below which may change based on the theme you use. Make sure to select the div section that contains {content} tag.
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>Delete the above section and replace it with the below code in the editor:
<div class="main-wrap">
<div id="main-content" class="column">
<div class="maincontent">{content global="false"}</div>
<div class="sidebarcontent">{sidebarcontent:content}</div>
</div>
</div>
It should look like below in the code editor:
Next step is to add some CSS, for that go to “main.less” file available under “Styles” section. Copy the below CSS code and paste in your “main.less” files bottom section. You can simply paste at the bottom below any existing code in the file.
/* Sidebar Layout*/
.column {
margin: 0 auto;
box-sizing: border-box;
padding: 10px;
overflow: hidden;
width: 100%;
}
.maincontent {
width: 60%;
float: left;
margin: 15px 30px 20px 25px;
padding: 15px 30px 0 25px;
border-right: 1px rgba(96, 125, 139, 0.39) solid;
}
.sidebarcontent {
width: 25%;
float: left;
margin: 30px 15px 20px 15px;
}
It will look like below in the editor:
You can see the live preview below the code section or click on the preview button to open your site in a new pop-up window. If everything looks fine, click on the “Save” button showing on top right corner of the code editor. If this is the first time you edit the code, Weebly will prompt you to save the changes as a new theme. Provide a name for your theme and save the changes. Remember, you can select this theme for another site under your account by going to “Themes” tab in the site editor when editing that site.
Adding Elements to Sidebar
Now that you have created a sitewide sidebar, it’s time to add content to your sidebar. Go to “Pages” section and create a new “Standard Page”. Click on “Header Type” option and select the “sidebar.html” page layout that you have created. You will see the editor showing two columns with main content and sidebar. Drag and drop the elements in the content and sidebar area to create your site.
You can add any default elements and custom elements from Apps to your sidebar. The content added in the sidebar will appear on sitewide for all the pages with “sidebar.html” template. Publish your site and see the beautiful sidebar in action.
Note: You can also change the header type of any existing page on your site to add sidebar to that page. The page will automatically show sidebar elements when you select “Sidebar” header type. In this way, you can show sidebar uniform on all the pages by simply changing the header type.
Creating Custom Sidebar for Different Pages
Generally, sidebar elements appear sitewide on all the pages. However, you can also show different sidebar on different pages. All you need is to add “global=”false” parameter in sidebar template tag that you have added in sidebar.html page template. Below is the complete code and you can create an additional template with the name as custom-sidebar.html. In this way, you can use both sidebar.html and custom-sidebar.html templates and select the one you need when creating your pages.
<div class="main-wrap">
<div id="main-content" class="column">
<div class="maincontent">{content global="false"}</div>
<div class="sidebarcontent">{sidebarcontent:content global="false"}</div>
</div>
</div>Whenever you want to create a page with custom sidebar, select Custom Sidebar header type. The sidebar section will show as empty and you can add your custom elements. When you create a new page with Custom Sidebar, again you will find the sidebar is empty where you can add different elements.
Sidebar for Weebly Blog Posts
Let’s first explain enabling sidebar on Weebly blog posts. This sidebar will only appear on your blog page and all individual posts.
- Login to your Weebly account and edit the site that you want to add a sidebar on your blog posts / blog pages.
- Go to “Settings” and click “Blog” section.
- Enable or disable “Blog sidebar” option.
Remember, you should have a blog page already added on your site for the blog settings to appear. Otherwise, you will not see the blog section appears under settings. Learn more on how to create a free Weebly blog and customize your settings.
Once you enabled sidebar, click on your blog page from the navigation menu inside site editor. alternatively, go to “Pages” tab and select your blog page. It will show the sidebar where you can drag and drop blog elements and other sections. Weebly offers special blog sidebar elements like author, archives, categories, feed, etc. which you can add in the sidebar.
This sidebar will still appear when you edit or create blog posts. However, you will not be able to add elements as the editor will freeze the sidebar allow you add elements only in the blog post’s content area.
Final Remarks
New design trends are good to keep your site attractive on all devices. However, stuffs like sidebar less themes do not fit all websites. Unfortunately, Weebly forces all users to use sidebar less themes and does not offer any theme with sidebar option for standard pages. As explained above, you can create a new page template and use sitewide sidebar for pages or use custom sidebar for different pages. Alternatively, you can also download our free WebSense theme that comes with 8 sidebar layouts and 6 full page layouts.
Leave a Reply
Your email is safe with us.