Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Sidebar – Choose the Styling of the Sidebar and Containing Modules

Sidebar – Choose the Styling of the Sidebar and Containing Modules

If you have been configuring settings for your website via the Theme Customizer, you might have noticed “Header”, “Menus” and a few other setting panels offer exhaustive settings. That’s primarily there are more aspects to deal with that in the case of the sidebar.

The sidebar is the easier to configure and offers fine-grain control over the display under a few options too.

Let’s gets started with it!

Navigate to your website admin, browse to Appearance > Customize > Sidebar.

Background Color

To change the sidebar background can have a larger design impact than it appears. It could be an absolutely necessary change to blend the sidebar with your overall design. Or it might be valuable to draw user’s attention to your sidebar.

To change the background color for the sidebar, click over the “Select Color” button under the “Background Color” label in the Sidebar panel to choose the color.

Padding (px)

If there’s any place where spacing matters the most, then that’s Sidebar without a doubt. Minute changes to the padding can make huge differences in terms of design and customer response.

You can add padding space for the Top, Right, Bottom and Left side of the Sidebar. Just click over any of the input under the “Padding (px) label inside the Sidebar panel to change the padding in respective order.

You can alternatively click on the chain icon to link these padding inputs together. After clicking it, you can add padding to any input box to add the same padding into all the others.


You can also set the configuration for the widgets used in the sidebar. Following are the available configuration options.

Background Color

Each widget has its own background color that could either be same as of the sidebar or completely different from it. It all depends upon the business needs, and design combination you’re looking for.

For changing the widget background color, just click over the “Select Color” button under the “Background Color” label in the Sidebar panel to choose the color.

Padding (px)

The widget padding is different from that of the sidebar. The sidebar padding provides spacing to the overall sidebar. Whereas the widget padding is for each of the widgets to have the padding you set up here.

To set the padding, use the input boxes under the “Padding (px)” label within the Widgets section of the Sidebar panel. The padding is set absolutely the same way we have set for the sidebar.

Margin Bottom (px)

Unlike padding, you can only enter margin for the bottom of sidebar widgets. As sidebar widgets tile one over another so a bottom margin does the job. Besides, you already get padding options for each sidebar widget as well in the setting above.

To change the bottom margin, just click over the input box under the “Margin Bottom (px) label in Sidebar panel and add a number to add a bottom margin.

Titles Border Color

The border color for the sidebar titles can be customized to blend, match or contrast with the overall design. To change the color of the borders, just click over the “Select Color” button under the “Titles Border Color” label in the Sidebar panel. 

Titles Margin Bottom (px)

If you want a cleaner design, one of the aspects to consider is an appropriate bottom margin for the titles. More margin isn’t good neither is less margin. Whatever makes the sidebar look cleaner and well spaced is the right margin to go with.

For changing the margin, just use the slider under the “Titles Margin Bottom (px)” label in Sidebar panel to do so. 

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?