What is the smart sidebar on your website? Does it help your visitors move through your site and access your most important content faster and easier? We are going to show you how to create and customize a smart sidebar that would help you accomplish your website goals.
With our theme, you can set up and assign different sidebars to different pages, categories, and posts. This gives you endless opportunities to add value to your website. The smart sidebar is an affix (sticky) sidebar. This means that it stays in the viewport while scrolling the content. It can be enabled sitewide on all the pages that have a sidebar, assigned to a post or it can be activated on a row using the tagDiv Composer page builder.
Watch the video
Creating a new sidebar
You can create a new sidebar from three different locations.
From the Theme Panel > Template settings:
This sidebar will apply on the entire website, where you use that particular template.
From the Category settings:
The sidebar will apply only to posts that category and the category page.
On the Post Edit Section:
How to add content to your sidebars
The content on the sidebar is found in the WordPress > Appearance -> Widgets, where you can see all the existing sidebars and assign new widgets to them.
Assigning a sidebar to a template
To assign a sidebar to a specific post, category or a template, you have to use the sidebars settings for each case in particular.
First, choose the sidebar position and then click on the desired sidebar from the drop-down list.
The “default” sidebar position means the sidebar will inherit the one set on the general template.
Example: On the post template, the post will look at the primary category settings and it will try to get the position from there. If the primary category does not have a custom sidebar position, the post will load the option from Template Settings > Blog and Posts template.
Sidebars on pages
You can assign a new sidebar on a page in two different ways.
- You have to edit the page with tagDiv Composer and drag-n-drop the Widget Sidebar Element from the page builder list in the desired position:
2. You can create a sidebar by splitting a row in a 2/3 + 1/3 column layout and adding content directly into the column.
To Enable the Smart Sidebar you need to navigate to the Theme Panel > Template Settings > Smart Sidebar and activate the button.
Note: The following widgets are not supported in the smart sidebar:
- [tagDiv] Trending now
Note: The smart sidebar reverts to a normal sidebar on iOS (iPad) and on mobile devices.
Using the smart sidebar with the tagDiv Composer:
On custom built pages you have to add the td-ss-row class to the row that contains the sidebar. If you don’t add this class the sidebar present on that page will act normally (non- sticky).
Note: This option will only work on a 2/3 + 1/3 column setting. The smart sidebar will not work in a 3 column layout.