Contents
- Definition of a Sidebar
- Types of Sidebars
- Sidebar Content
- Using a Sidebar
- How to Place a Sidebar on a Page
Definition of a Sidebar
A sidebar is a vertical column on a webpage that contains additional information, links, and buttons. In most cases, a sidebar includes elements such as:
- Navigation menu
- Online store catalog
- Advertisement block
- Recommendations
- Filters
- Contact form
- Social buttons
A key point when placing sidebars is to maintain optimal space: the sidebar should not take up too much room on the page. While exact dimensions may vary, a sidebar is generally visually smaller than the main content to avoid distracting users.
Types of Sidebars
Sidebars can be classified into three main types based on their location on the page:
- Left Sidebars: The most common option, as most people read from left to right. Typically, online store catalogs and filters are placed here, which helps users find the products they need more quickly.
- Right Sidebars: A less preferred option, as advertisement blocks are often located on the right, making them less noticeable. Users may ignore this part of the page, reducing the effectiveness of the ads.
- Double-Sided Sidebars: Placing sidebars on both sides can lead to the compression of the main content, making it more difficult to perceive the information. Narrow columns may force users to constantly scroll, distracting them from the main content.
Sidebar Content
A sidebar can contain various information that helps users navigate the site more effectively. Here are several key elements to include in the sidebar:
- Menu and Categorization: The sidebar can contain a catalog or set of links that allow users to navigate to other sections of the site. It is advisable to include only important links relevant to the current section to avoid distracting users from the main content.
- Announcements: The sidebar can include news feeds or announcements of publications, keeping users informed about current events without needing to click on links.
- Advertising: Advertisement blocks or affiliate materials are often placed in the right sidebar, although users may ignore this part of the page.
- Call to Action and Social Buttons: Elements that prompt users to take action, such as subscribing to a newsletter or requesting a callback, can also be placed in the sidebar.
- Filters: For convenience in product searches, filters are often placed in the left sidebar so that users can easily notice them.
Using a Sidebar
A sidebar can be beneficial for most websites, especially those viewed on desktops. However, on mobile devices, the sidebar may change its form and move up or down, turning into a standard "hamburger" menu or set of buttons. This can lead to some information being hidden behind a "more" button. It is important to remember that landing pages that require sequential study of material are best without sidebars, as they can distract users.
However, some landing pages may be filled with numerous blocks, and in such cases, having a "sticky" sidebar with navigation can be useful for users to easily return to the information they need.
How to Place a Sidebar on a Page
Placing a sidebar on a website can be done in two main ways: through web programming or using content management systems (CMS). If the page is created manually, code needs to be written for the sidebar, which requires certain skills in web programming. In the case of using a CMS, the sidebar is added using builder tools.
For example, in WordPress, there are several ways to add a sidebar:
- Create a theme with a sidebar and upload it;
- Select a ready-made theme from the catalog;
- Install a plugin to add a sidebar;
- Use the Elementor plugin for site customization.
Ready-made WordPress themes usually come with built-in sidebars, significantly simplifying the development process.