The sidebar column contains several elements from the site title to the menu and to the widgets that you can add. For this tutorial, it’s going to be the same as the free version, so we simply copied over the tutorial for you to follow here.
Everyone will have different combinations because everyone will have different websites. Basically the sidebar will contain the following:
- Site Title (or logo)
- Site Description
- Main Menu (with or without descriptions)
- Social Menu Icons
- Widget positions
Your sidebar column is also responsive for mobile viewing and will hide the various elements until you click on the toggle button next to the site title:
One thing to note though is that in mobile view, your widgets will show above the main content when you click on the toggle button. Because of this, I would recommend keeping the number of widgets as limited as possible and not to go crazy with 50 widgets.
Your sidebar will also contain a social menu location that you can setup an icon-based menu.
Adding widgets is done simply by dragging them into the “Sidebar” position. You can order them simply by dragging them above or below each other.
The Sidebar Background (Header Image)
Not really a sidebar background but more of a Header Background. This is due to the fact this theme is built from the Twenty Fifteen WordPress theme, so we’ve adopted the Header Image feature. By default, there is no background other than the white colour background, but you can add images or change the colour.
What is IMPORTANT to know is that whatever background you create, you will have to modify the colours of your other elements like the site title, menu colours, and maybe even widget colours. The reason for this is that they sit on top of the background, so if you use a background that has too much going on in it, this will make your elements hard to read.
Ultimately, you will have to play around with the right combination of backgrounds and colours to make it just right. Possibilities could include images, a pattern, or solid colours:
- Go to Appearance >> Customize >> Colours
- Look for the “Sidebar Column Background” colour setting and make your choice.
- You will probably have to go through the other sidebar based colour options to make adjustments
- If there is anything that does not have a colour setting, this may require some custom CSS being added to the Additional CSS tab of your customizer.
- Click “Save & Publish“
- Go to Appearance >> Header
- This will open the setting up where you can then upload your image.
- Just like the colour option above, you will probably need to change colours to your sidebar elements.
- Click “Save & Publish“