Sidebars are a great way to add information to your page that otherwise might not fit the page. They call also be used to share your social media, highlight some content or simply improve the navigation by including recent posts links, categories, tags, forms, etc. The page designer lets you include your previously created widgets inside this area.
To add a sidebar to your page, go to the page designer and add a new Sidebar module.
Content settings
This is the place to change all things related to the content of the sidebar.
Content
This module uses widget ready areas. Here you have to choose your custom widget areas. To learn more about adding widgets, click here.
Link
If you want that the element opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Background
Add a background color, gradient, image or video to your module.
Admin label
You can modify the module’s label for easier identification.
Design settings
Layout
Choose the side of the page where the sidebar will be and if you want to show a border that separates your page content from the sidebar.
Text
Pick if the text is light or dark, according to your background.
Title Text
Customize the appearance of the title.
Body Text
Customize the appearance of the body text.
Sizing
Adjust the width of the module.
Spacing
Customize margins and padding sizes.
Border
Define the border’s corner, style, color, and width.
Box Shadow
Here you can enable box shadow.
Filters
Adjust the hue of the module as a whole.
Animation
Give an animation style to the module, like fading or sliding when it appears.
Advanced settings
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.
Use Case
As an example, we are going to add a widget with our recent posts to the sidebar.
First, we added a Specialty section to the page with the option of the sidebar on the right.
Then, we added the following style:
Layout orientation: right
Show border separator: Yes
Title font weight: semi bold
Titles color: #12876f
Title text size: 34px
Body text color: #030e72
