# Sidebars

{% embed url="<https://www.youtube.com/watch?v=rXa6J4VpmA0>" %}

Kalium offers extensive options to customize the sidebars on your website, allowing you to create the perfect layout for your content. The sidebar settings can be accessed by navigating to **Appearance -> Customizer -> Sidebars** in your WordPress dashboard. Below is a detailed guide to the different customization options available for sidebars in Kalium.

### Sidebar Types

Kalium provides two distinct types of sidebars, each offering different design capabilities:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F689uyLGdBjgRd8b8lEHw%2Fsidebars-1.jpg?alt=media&#x26;token=7f72f6a7-ec96-4bae-baf6-aa044762807f" alt="" width="321"><figcaption></figcaption></figure>

* **Type 1:** This is a traditional sidebar without any background or border. It's ideal for a clean, minimalist look.
* **Type 2:** This type allows you to add more design elements, such as a background, border, border radius, and shadow, giving you greater control over the appearance of your sidebar.

### Sidebar Options

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Flra8uEl3x2LYaJYTS2tf%2Fsidebars-2.jpg?alt=media&#x26;token=33f53db2-1822-46a5-aff5-c842999c52f6" alt="" width="334"><figcaption></figcaption></figure>

#### Sidebar Width

You can set the width of the sidebar as a percentage of the overall page width. This allows you to control how much space the sidebar occupies relative to the main content area.

#### Sidebar Gap

This setting controls the gap between the sidebar and the main content. Adjusting this can help to create a more balanced layout.

#### Inner Spacing *(Type 2)*

Allows you to define the inner spacing (padding) within the sidebar or widget if they are separated. It’s useful for ensuring that your sidebar content has enough breathing room.

#### Widget Vertical Spacing

This option sets the gap between individual widgets within the sidebar. It helps maintain consistent spacing and a clean look.

#### Separate Widgets *(Type 2)*

Allows you to separate each widget within the sidebar, giving them a distinct appearance.

#### Mobile Position

This setting lets you choose whether the sidebar should appear at the top or bottom of the page when viewed on mobile devices.

### Sticky Sidebar

Kalium offers a sticky sidebar feature that keeps the sidebar visible as the user scrolls down the page. You can toggle this feature on or off and customize it with the following options:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FlZkoyHgSnffBJGQWJiSX%2Fsidebars-3.jpg?alt=media&#x26;token=525488d4-5ed5-4b7a-8a1d-bf3a018db5f9" alt="" width="329"><figcaption></figcaption></figure>

* **Sticky Behaviour:**&#x20;
  * Entire Sidebar: The entire sidebar remains sticky.
  * Widget&#x73;**:** Set the number of the bottom widgets that you want to remain sticky.
* **Offset from Top:** This setting controls the distance from the top of the page when the sidebar becomes sticky.

### Responsive Visibility

You can control whether the sidebar is visible on different devices by toggling the respective options:

* Desktop
* Tablet
* Mobile

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fqk3Sxr4kw9rMnp5E8bCY%2Fsidebars-4.jpg?alt=media&#x26;token=2c12e881-1cf9-456f-9d52-320800933fec" alt="" width="330"><figcaption></figcaption></figure>

***

### Style

The Style tab provides a range of customization options that allow you to style the sidebar's text and container to match your website's design.

#### Text

* **Title and Text Color:** Customize the color of the sidebar titles and text.
* **Links Color and Hover Color:** Set the color for links and the color that appears when hovering over them.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Flce7RqQa4nkJwY5t61rp%2Fsidebars-5.jpg?alt=media&#x26;token=5837e50c-c3e9-4bc5-8b70-728f6f590e55" alt="" width="331"><figcaption></figcaption></figure>

#### Container *(Type 2)*

* **Background Color:** Choose a background color for your sidebar container.
* **Border Width, Type, and Color:** Define the border's width, style, and color for the sidebar or widgets if separated option is on.
* **Shadow:** Add a shadow effect to the sidebar for a more dynamic look.
* **Border Radius:** Customize the corner rounding (radius) of the sidebar’s border.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FXq8XoKji8ON9aHxcrHJj%2Fsidebars-6.jpg?alt=media&#x26;token=62a42cc1-f7ab-45f0-a9d1-f05a28bb4d36" alt="" width="323"><figcaption></figcaption></figure>