Hero Banner
Overview
Displays a hero image with optional hover image, product slideshow, backdrop text, content, buttons, and responsive spacing controls.
Hero Image Settings
| Setting |
Description |
| Hero Image |
Main image displayed in the hero banner. |
| Hover Image |
Image displayed on hover. |
Product Slideshow Settings
| Setting |
Description |
| Show Product Slider |
Enables the product slideshow. Default: Enabled. |
| Products |
Selects products for the slideshow. Maximum: 10. |
| Slideshow Arrows |
Displays navigation arrows. Default: Enabled. |
| Button Type |
Sets the slideshow arrow button style. Default: Link. |
| Pagination |
Displays slideshow pagination. Default: Enabled. |
| Auto Play |
Automatically advances slides. Default: Enabled. |
| Slide Interval |
Controls autoplay timing from 2000ms to 9000ms. Default: 4000ms. |
Backdrop Text Settings
| Setting |
Description |
| Backdrop Text 1 |
Sets the first background text. |
| Backdrop Text 2 |
Sets the second background text. |
| Setting |
Description |
| Tagline |
Label displayed above the heading. |
| Tagline Size |
Controls tagline text size. Default: Large. |
| Tagline Weight |
Controls tagline font weight. Default: Normal 400. |
| Tagline Case |
Controls tagline text case. Default: Capitalize. |
| Tagline Family |
Controls tagline font family. Default: Default. |
| Tagline Color Style |
Controls tagline color style. Default: Body. |
| Heading |
Main section heading. Default: “Talk about your brand”. |
| Heading Size |
Controls heading size. Default: H1. |
| Heading Weight |
Controls heading font weight. Default: Normal 400. |
| Heading Case |
Controls heading text case. Default: None. |
| Heading Tag |
Sets the semantic heading level. Default: H2. |
| Heading Family |
Controls heading font family. Default: Default. |
| Heading Color Style |
Controls heading color style. Default: Default. |
| Heading Link Style |
Controls heading link styling. Default: Default. |
| Description |
Supporting text displayed below the heading. |
| Text Size |
Controls description text size. Default: Medium. |
| Text Weight |
Controls description font weight. Default: Normal 400. |
| Text Case |
Controls description text case. Default: None. |
| Text Family |
Controls description font family. Default: Default. |
| Text Color Style |
Controls description color style. Default: Default. |
| Setting |
Description |
| Button Label |
Sets the button text. |
| Button Link |
Sets the button destination. |
| Button Type |
Controls the button style. |
| Button Case |
Controls button text case. Default: Capitalize. |
| Open in New Tab |
Opens the link in a new browser tab. |
Two buttons are available with separate styling and link settings.
Layout Settings
| Setting |
Description |
| Container |
Controls the section container layout. Default: Container Fluid. |
| Width |
Controls the section content width. Default: 100%. |
| Text Alignment (Desktop) |
Controls text alignment on desktop. Default: Left. |
| Text Alignment (Mobile) |
Controls text alignment on mobile. Default: Left. |
| Color Scheme |
Controls the section color scheme. Default: Scheme 1. |
Inner Spacing
| Setting |
Desktop |
Mobile |
| Top Padding |
70px |
35px |
| Bottom Padding |
70px |
35px |
| Left Padding |
50px |
15px |
| Right Padding |
50px |
15px |
Outer Spacing
| Setting |
Desktop |
Mobile |
| Top Margin |
0px |
0px |
| Bottom Margin |
0px |
0px |
| Left Margin |
0px |
0px |
| Right Margin |
0px |
0px |
Presets
| Setting |
Description |
| Hero Banner |
Adds the Hero Banner section with its default configuration. |