Using Predefined Sidebars

Last Updated on

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

x
Note: Before adding a sidebar, make sure your page template is set to Default Template in Page Attributes drop down section. If you have Full Width template enabled, the sidebar won’t be visible.

 

To add sidebar to all pages and posts, follow the steps below:

1
From the WordPress left dashboard, go to Appearance > Customize.

 

2
From the customizer left dashboard, go to Sidebar menu.

 

 

3
In Sidebar popup select the Layout.

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:

Setting Description
Widgets TitleSet styles for widgets title (font, size, color, letter spacing, etc).
Widgets TextSet styles for widgets text (font, size, color, margins, etc).
Widgets LinkSet styles for widgets links (color for normal links and on hover).
Widgets ContainerSet styles for widgets container (background color, border, content alignment, etc).
DividerSet 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.

1
From the WordPress left menu, go to the Appearance > Widgets page.

 

2
In the Widgets page, drag and drop one of the widgets into one of the sidebars.

 

3
Configure the widget settings and click on the Save button.

 

Selecting Widgets from the Dropdown List

To add widgets:

1
From the WordPress left menu, go to the Appearance > Widgets page.

 

2
Click on one of the widgets.

 

3
From the dropdown list click on one of the sidebars. Then click on the Add Widget button so that widget will be added to the selected sidebar.

 

4
Configure the widget settings and then click on the Save button.

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.

x
Note: Post Options section will appear on the page backend only after you install the plugin Advanced Custom Fields PRO. It’s bundled with Jupiter X and can be installed via Jupiter X > Plugins as described in this article.

 

For example, you want to show a sidebar on the Contact page only:

1
From the WordPress left menu, go to Pages and open Contact page to edit.

 

2
In Post Options section, open the Main tab and set Layout setting to the one with the sidebar.

 

3
Then set a sidebar area in the Sidebar Primary setting.

If you selected Double Sidebar layout, set sidebar areas in Sidebar Primary and Sidebar Secondary settings.

 

4
Save the changes clicking on the Update button on the right side in the page editor.

 

If you experience any issues with the sidebar set up, please contact our support team for help.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket