Promotion bar (Standard promo banner)

The Promotion Bar feature allows you to create an attention-grabbing banner. Here's how the layout is structured:

On the left side of the promotion bar, you can include a captivating heading to immediately capture the viewer's attention. This heading can be visually divided from the rest of the content using a dividing line.

Below the heading, you can add descriptive text that provides additional information or highlights the key aspects of your promotion. This text serves to engage the viewers and convey the benefits, details, or any other relevant information.

On the right side of the promotion bar, you'll find a prominently displayed button. This button serves as a clear call-to-action, encouraging visitors to take the desired action. You have the flexibility to customize the button text to align with your specific promotion, such as “Shop Now”, “Learn More” or “Claim Offer”.

Heading settings

Settings	Description
Heading	This is a text field where you can add the heading of your banner. You can also format the text by making it bold or italic.
Font size	This is a slider that lets you adjust the font size of the heading for desktop devices. You can use it to make the font size bigger or smaller as per your requirement.
Font size for mobile	This is another slider that lets you adjust the font size of the heading for mobile devices. You can use it to make the font size bigger or smaller as per your requirement.
Font weight	This is a dropdown menu that lets you choose the font weight for the heading. You can choose from various options.
Font color	This is a color picker that lets you choose the font color for the heading. You can pick any color you like by clicking on the color circle.

Text settings

Text	Description
Description	This is a text field where you can add the description of your banner. You can also format the text by making it bold or italic, adding a link to the text, also use the option of numbered or bullet lists.
Font size	This is a slider that lets you adjust the font size of text for desktop devices.
Font size for mobile	This is another slider that lets you adjust the font size of text for mobile devices.
Font weight	This is a dropdown menu that lets you choose the font weight for text. You can choose from various options.
Font color	This is a color picker that lets you choose the font color for text. You can pick any color you like by clicking on the color circle.

Button settings

Settings	Description
Show button	Mark the checkbox to show button on promotion bar.
Button label	This option allows you to add a label to the button. *If you remove the label, the button will become invisible on the page.
Button link	To set a button link, you can enter the link URL directly into the “Button link” field or select a page from the dropdown list that appears when you click on the field.
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the “Primary button” and “Secondary button”* blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	You can choose from seven different button styles: Default button: This is the standard button style with a solid background color and text. Default button with icon Outline button: This style features a transparent background with a colored outline and text. Outline button with icon Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color. Inline button with underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable. Inline button with underline on hover — this option adds an underline to the text on hover.

Content settings

Settings	Description
Content align	You can align the description to your promotion bar. Choose: Left, Center, or Right alignment.
Background color	Choose the background color for banner by clicking on the circle and selecting a color from the color picker.
Background image	Upload an image or select free images to use as the background for the banner section.
Overlay color	Choose an overlay color to apply on top of the background image. You can adjust the opacity of the overlay as well.
Overlay opacity	Use the slider to adjust the opacity of the background overlay if the background image is chosen.

Section settings

Setting	Description
Section top space	The "Section top space" setting allows you to adjust the amount of space at the top of the section using a slider.
Section bottom space	The "Section bottom space" setting functions similarly to the "Section top space" setting but controls the space at the bottom of the section.
Enable full width section	Mark this checkbox and section will be displayed on the full width.