Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
BasePress
Blocksy Theme
Brand Building
Bricks Builder
BunnyShell
Cloudflare
CSS
Deals
Digital Marketing
Elementor
Email Marketing
Entrepreneurship
FilterWP
Fluent CRM
Fluent Forms
Fluent SMTP
GoDaddy
Google Fonts
Gutenberg
HTML
Hydrogen Pack
JavaScript
Jetpack
Kadence Theme
LiveCanvas
Meta Box
Online Business
Oxygen Builder
OxyMade
PHP
Piotnet Forms
Piotnet Grid
Pods
SaaS
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
WooCommerce
WooFunnels
WordPress
Work From Home
WP Social Ninja
Zion Builder

How To Create A Beautiful Sidebar in Oxygen [Step by Step]

Written by:
Mohammed Wasim Akram
First Published on:
August 11, 2020
Last Updated on:
June 21, 2021
Post Categories:
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

If you're new to Oxygen Builder then you must be confused about how to set up a sidebar as there is no such option available, therefore in this post, I am going to teach you to set up and design a sidebar in Oxygen step by step.

You can check the below image for the example of the sidebar that we are going to create by the end of this tutorial.

Sidebar Example Mockup - SyncWin

Also if you want to check live sidebar then click here.

Setup A Sidebar in Oxygen

First of all, we will learn how we can set up the sidebar in Oxygen using a 3rd party free plugin called Content-Aware Sidebars which is recommended by Oxygen expert Sridhar Katakam on his blog WP Dev Design.

Install Content-Aware Sidebars Plugin

As there is no element available in Oxygen editor to set up a complete sidebar from scratch for that reason before anything else you need to install the Content-Aware Sidebar Plugin to your WordPress website.

If you are struggling with installing plugin then head over to this blog post to learn how to install a plugin on WordPress.

Add A New Sidebar to Content-Aware

Now head over to the content-aware admin menu on the WordPress Admin Dashboard then hit the add new button to create a new sidebar for your website.

Within the "Condition Tab" select the post type from "New Condition Group" dropdown to decide where you want to display your sidebar.

In this case, I am going to select the "Posts/Blog" option as I just want to showcase my sidebar on the blog posts, but if you want you can select something else from various options.

Now let's move over to the "Design Tab" and add a custom class name to the Sidebar under Style option, in this case, I would add "Global-Sidebar-Widgets".

Although there are a bunch of other options available under the Content-Aware menu which I will try to cover in a separate article later on, for now, we are good to go.

Assign The Sidebar to The Necessary Oxygen Template

Now that we have already created a sidebar within the content-aware options, so the next step is to assign that sidebar to the post template in Oxygen builder.

Now head over to the Oxygen templates section and select the blog post template or any other template where you want to assign the sidebar which I assume you already created in the first place.

Hit the +Add button on the top left of Oxygen editor, after that click on the "WordPress" menu then click on the "Sidebars" and select the available sidebar that you had already created on the content-aware.

Congratulations! we have successfully set up and assigned a plain simple sidebar to our blog posts, next we will learn how to design the sidebar to make it look more professional using some easy custom CSS.

Design The Sidebar using Custom CSS In Oxygen

Hopefully, you have followed along with the above steps and properly able to set up the sidebar to an Oxygen template, but the sidebar we have added using the free content-aware plugin has no style in it and it's just a plain sidebar.

Therefore now I will teach you how to style that plain boring sidebar to make it beautiful and professional using some custom CSS.

But before styling, the sidebar please make sure you already added some widgets to it, I usually add Category and Recent Blog Post widgets so in this post I will only show you how to style them up.

Add a New Stylesheet in Oxygen Editor

First of all the open, the Oxygen Editor then head over to the Manage option and then Stylesheets and now hit the Add Stylesheet button to add a new stylesheet.

The Navigation Should Look Like This:

> Oxygen Editor
> Manage
> Stylesheets
> Add Stylesheet button

Add CSS Codes to the Oxygen Stylesheet

Now the very first thing we need to add the same custom class to the sidebar element in Oxygen editor which we added to the content-aware sidebar CSS, in this case, I am using "Global-Sidebar-Widgets".

You just need to copy the below CSS code snippets and add them to the Oxygen stylesheet after that you can make changes as per your requirements if necessary.

Style Oxygen Sidebar Bullet Points with CSS Code Snippet

One thing I most dislike in the sidebar widget is the default bullet points, but I don't want to entirely remove them as they help to keep the individual items separate thus I will style the bullet points as per my liking.

Just copy the below CSS Code Snippet and paste it to your Oxygen Stylesheet.

/* Style Content Aware Sidebar Bullet Points */

.Global-Sidebar-Widgets ul {
  padding-inline-start: 0px;
  list-style-type: square;
  list-style-position: inside;
  }

Style The Oxygen Sidebar Widget Titles with CSS Code Snippet

The next thing I would like to style is the sidebar widget titles which look really ugly big bold, therefore we need to make it look compact and professional.

Just copy the below CSS Code Snippet and paste it to your Oxygen Stylesheet.

/* Style The Oxygen Sidebar Widget Titles */

.Global-Sidebar-Widgets
.widget-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.2em;
  color: inherit;
  font-weight: bold;
  color: #000000;
 }

Style Entire Oxygen Sidebar and its Content with CSS Code Snippet

Now it's time to style up the sidebar and its content, I personally like adding a different background color, paddings, a border, and border-radius also I would style the content typography.

Just copy the below CSS Code Snippet and paste it to your Oxygen Stylesheet.

/* Style Entire Oxygen Sidebar and its Content */

.Global-Sidebar-Widgets {
  border: 1px solid #d7e2e5;
  border-color: #e6e6e6;
  border-radius: 3px;
  font-size: 1em;
  background-color: #f2f2f2;
  padding: 20px
 }

Conclusion

In this post I have explained step by step method to set up and style a sidebar in the Oxygen template, hopefully, now you have a good amount of idea on how to set up and style the sidebar on your own so if you want you can add your own CSS and style things as you want.

If you have any feedback, question or confusion then feel free to leave a comment below.

I believe this tutorial was helpful to you and if I am right then please share this post with other fellows.

Thanks a lot for your precious time.

Become an Insider to Syncronize with Web-Success.

email Newsletter
Facebook Group
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
Join FB Group

Related Resource Posts

August 21, 2020
Disable Auto-Update Email Notifications in WordPress V5.5+

If you're annoyed with the auto-update email notifications, then in this post I am going to share step by step method to disable those auto-update email notifications using code snippets for WordPress beginners.

Read More
June 13, 2021
How to Create a Typeform Style Form with Fluent Forms

If you're looking for the process of creating a conversational form like TypeForm using the brand new feature of the most popular and powerful Fluent Forms, then stick with me as in this tutorial I am going to show you the step-by-step process of creating a basic conversational form.

Read More

Leave Your Feedback

Subscribe
Notify of
guest
2 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

Blog Categories

Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram