Announcement Bar

An announcement bar is a short snippet where you can showcase a message to your site. Using an announcement bar on your website is one of the easiest ways to draw visitors' attention.

#

Example of Announcement Bar on website
  • This is a fixed section so you cannot delete or add a new section Announcement Bar.
  • If you don’t want to display it, you can hide this section.

Configure section Announcement Bar

Content Announcement Bar

In the theme editor (Customize), click section Announcement Bar then locate Content Announcement. Here you can make the necessary configurations.

#

Config content for Announcement Bar
  • Announcement text : Fill in information for Announcement.
  • Link : Fill in link for Announcement.

Announcement Bar Settings

In the theme editor (Customize), click section Announcement Bar then locate Announcement Settings. Here you can make the necessary configurations.

#

Settings for Announcement Bar
  • Show Announcement : Disable you want to hide Announcement bar.
  • Home page Only : Enable if you only want to display on the home page.
  • Show Close Button : Show a hidden button so users can hide the bar.
  • Show Divider : Show separation border.
  • Text Uppercase : Enable if you want text to be in uppercase.

Announcement Bar Style

In the theme editor (Customize), click section Announcement Bar then locate Announcement Style. Here you can make the necessary configurations.

#

Style for Announcement Bar
  • Font Size(px) : Set font size for text.
  • Background Color : Set background for section.
  • Text Color : Choose a color for text on bar.
  • Text alignment : Config text align for bar content.

General Configuration

In the theme editor (Customize), click section Announcement Bar then locate General Configuration. Here you can make the necessary configurations.

#

general configuration for Announcement Bar
  • Padding top : Set padding top for section.
  • Padding bottom : Set padding bottom for section.
  • Container : Set container for content section.
  • Extended Classes Section : Enter additional css class for section.
Check
No recent searches
No results for ""