5. Widgets

INTRODUCTIONWidget Areas

Our themes have several default widget areas, that can display widgets on both desktop and mobile devices.
https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/12/widget-areas.png

The following are default widget areas in the theme:

  • Sidebar
  • Sidebar Shop
  • Footer
  • Header Left
  • Header Right
  • Header Menu
  • Header Logo
  • Header Logo Responsive
  • Responsive Menu

Sidebar, Sidebar Shop, and Footer widget areas display on both desktop and mobile devices.

Header Left / Right / Menu / Logo widget areas display only on desktop devices (note that you can set responsive breakpoint in Customize >Header and footer >Responsive header panel).

Header Logo Responsive, and Responsive menu widget areas display on smaller / mobile devices (below responsive breakpoint you set in Responsive header panel).

Widgets added to Header Logo Responsive widget areas will display next to logo on mobile devices.

https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2023/08/logo-responsive.png

Widgets added to Responsive Menu widget areas will display within the mobile menu.

https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2023/08/menu-responsive.png

SECTION 01Custom Widget Areas

Sidebar Manager plugin comes prepacked with the theme, and allows you to create custom widget areas that replace default ones.

In order to create custom widget area navigate to Appearance >Sidebar panel on your dashboard.

Click on the ‘Add New’ button, and then fill the following fields:

  • Enter custom widget area’s name (it should not be the same as the name of default widget area).
  • In ‘Sidebar to replace’ field select which default widget area you want to replace.
  • Then in ‘Add Display Rule’ field select on which pages you want this custom widget area to show.

Once you save the changes, navigate to Appearance >Widgets panel, and add widgets to your new widget area.

https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/12/custom-widget-area.png

SECTION 02Homepage Widgets

Demos that have multiple homepages will most likely have different custom widget areas assigned to those homepages.

Here is how it works:

Once you select your homepage, go to Appearance > Widgets and check if that homepage has its own custom widget area.

If it does, you have two options – first is to move widgets from this custom widget area to a corresponding default area.

Other solution would be to simply assign that custom widget area to display on all pages by selecting them in Appearance > Sidebars panel.

https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2024/02/widgets.gif

*Example is from Renata theme, but the process is the same for all of our themes.

SECTION 03Widgets

Widgets included with the theme are BB Gallery, BB Recent Comments, BB Recent Posts, BB Text Image, BB Time, BB Weather, BT Button, BT Icon, and BT Service.

SECTION 04BB Text Image

You can use this widget to display text and images in one of the widget areas.
https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/12/bb-text-image.png

SECTION 05BT Icon

You can insert custom icon with link here - usually used in header.
https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/11/bt-icon.png

SECTION 07BB Recent Comments

Recent comments with avatars.
https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/11/BB_recent_comments.png

SECTION 08BB Recent Posts

Recent posts with featured image thumbnails.
https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/11/BB_recent_posts.png

SECTION 09BB Weather

In order to get Openweather API Key please follow the steps from the following article – https://openweathermap.org/appid.

https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/11/bb-weather-new.jpg

SECTION 10BB Time

https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/11/BB_time.png

SECTION 11BT Button

Button element with icon and link.
https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/11/bt-button.png

SECTION 12BT Service

Service element with icon and link.
https://documentation.bold-themes.com/codi/wp-content/uploads/sites/83/2022/11/bt-service.png