Using Predefined Sidebars
Sidebars are containers to hold widgets. They are usually used to display information other than the main content of a web page. Note that there is no difference between a sidebar and a widget area. Sometimes, when talking about pages for example, we call it sidebar, but other times, like when talking about footer sections, we call it a widget area. The Jupiter X provides 8 default sidebar areas.
In this article, we’ll explain the process of adding a sidebar to a page. It does not matter if the page is a blog post or portfolio item, the process is the same.
In this article
Adding a Sidebar globally
To add sidebar to all pages and posts, follow the steps below:
You can choose as a Single Sidebar layout so the Double Sidebar where you can display two sidebar areas on the left or on the right side of the page. Also there is an Opposing Sidebar layout which allows you to show two sidebars on left and right sides of your content.
You’ll see two sidebar options: Primary Sidebar and Secondary Sidebar.
From the drop down menu, select the sidebar area you want to show on pages.
If you selected Single Sidebar layout, you should choose the area in Primary Sidebar option. If it’s Double Sidebar or Opposing Sidebar layout, you need use both – Primary Sidebar and Secondary Sidebar.
Adding Exceptions for different post types
In Sidebar popup there is an Exceptions setting which allows to edit sidebar for different post types: Page, Blog, Search, Shop, Archive, Portfolio.
For example, if you want to change sidebar layout for single blog posts, you need select Blog as an exception and configure the sidebar settings to the ones you need.
Styling a Sidebar
In Sidebar popup there is a Styles tab where you can style the widgets added in your sidebars.
The items that you can edit are listed in the table below:
|Widgets Title||Set styles for widgets title (font, size, color, letter spacing, etc).|
|Widgets Text||Set styles for widgets text (font, size, color, margins, etc).|
|Widgets Link||Set styles for widgets links (color for normal links and on hover).|
|Widgets Container||Set styles for widgets container (background color, border, content alignment, etc).|
|Divider||Set divider between widgets and between sidebars (style border, color, etc).|
Adding Widgets to a Sidebar
Sidebar/widget areas are empty columns by default so you’ll need to add widgets to them in order to display information.
Selecting Widgets from the Dropdown List
To add widgets:
Adding Sidebar to specific pages
If you’d like to show sidebar on specific pages only and not on all pages/posts, you can do this in the page editor in Post Options section.
For example, you want to show a sidebar on the Contact page only:
If you selected Double Sidebar layout, set sidebar areas in Sidebar Primary and Sidebar Secondary settings.
If you experience any issues with the sidebar set up, please contact our support team for help.