Banner

How to add section Banner to website

A Banner is a prominent image or content on a website, positioned strategically to grab attention. It's used to convey key messages, promote products, or highlight important campaigns.

Demo of Banner on website

In the theme editor (Customize), Add section Banner.

How to add new banner to section

Each block will be 1 banner. You can add banner by adding block.

Add new banner to section

After adding the new block, You can configure the banner according to your requirements.

Content Banner

In the theme editor (Customize), click section Banner, Click the block you want to edit. Here you can make the necessary configurations.

Config block

Title : Fill in the title for the banner.
Subtitle : Fill in the subtitle for the banner.
Description : Fill in the description for the banner.
Banner image : Choose a photo as a banner.

Banner Settings

Config banner size

Aspect Ratio : Set ratio for banner.
Image Size : set the size attribute for the img tag. See more about the sizes attribute .
Image height : Set height for banner.
Image height mobile : Set height for banner on mobile.
Link for image : Enable if you want the image to have a link.

Button Banner

In the theme editor (Customize), click section Banner, Click the block you want to edit, then locate Button. Here you can make the necessary configurations.
If you want to display the button, you need to fill in the text for the button.

Config button on banner

Show Icon Button : Enable to display the icon for the button.
Button link : Fill in the link for the button.
Button text : Fill in the text for the button.
Button style : Select button style.
Button color : Select button color.
Button size : Select button size.

Card Settings

In the theme editor (Customize), click section Banner, Click the block you want to edit, then locate Card Settings. Here you can make the necessary configurations.

Config content on banner

Card layout : Choose a layout for the card.
Content alignment : Choose content alignment for the card.
Hover style : Choose hover style for the banner.
Hover effect : Choose hover effect for the banner.

Color

In the theme editor (Customize), click section Banner, Click the block you want to edit, then locate Color. Here you can make the necessary configurations.

Config color for banner

Title Color : Configure title color.
Subtitle Color : Configure subtitle color.
Description Color : Configure description color.

Title Font Size (px) : Configure font size for title. Set value -1 to apply default settings from theme.
Subtitle Font Size (px) : Configure font size for subtitle. Set value -1 to apply default settings from theme.
Description Font Size (px) : Configure font size for description. Set value -1 to apply default settings from theme.

Spacing

In the theme editor (Customize), click section Banner, Click the block you want to edit, then locate Spacing. Here you can make the necessary configurations.

Config spacing for banner

Content Padding (px) : Configure padding content. Set value -1 to apply default settings from theme.
Content Padding Mobile (px) : Configure padding content on mobile. Set value -1 to apply default settings from theme.
Title Spacing (px) : Configure spacing for title. Set value -1 to apply default settings from theme.
Subtitle Spacing (px) : Configure spacing for subtitle. Set value -1 to apply default settings from theme.
Description Spacing (px) : Configure spacing for description. Set value -1 to apply default settings from theme.
Button Spacing (px) : Configure spacing for button. Set value -1 to apply default settings from theme.

Build block on section

Layout slider

You can display block layout grid or slider.If you want to use layout slider see Section Slider Layout

Switch slider or grid

Layout grid

If you use layout grid. Click the block you want to edit, then locate Block Attributes. Here you can make the necessary configurations.

Set the width of the block on screen devices

We utilize the Layout grid in Bootstrap a modern responsive grid system, to deliver exceptional flexibility and consistency in web page layouts.

Other configurations of section

You can see the documentation for other section configurations such as: Heading, container, background, animation, padding...