Image banner
Overview
The Image Banner Section Configuration provides customizable settings for creating a visually appealing banner with various content alignment, text, and background options.
Section Configuration:
| Setting |
Description |
| Image |
Select an image for the banner. |
| Parallax Effect |
Checkbox to enable a parallax scrolling effect for the background image. Default: false. |
| Video |
Upload a video to use as the background instead of an image. |
| Section Height |
Select the height of the banner. Options: small, medium, full window height. Default: small. |
| Maximum Content Width |
Set the maximum width of the content within the banner as a percentage of the page width. Range: 30%–100%. Default: 65%. |
| Content Alignment |
Align content within the banner vertically. Options: top, middle, bottom. Default: middle. |
| Desktop Text Alignment |
Align text horizontally on desktop devices. Options: left, center, right. Default: center. |
| Mobile Text Alignment |
Align text horizontally on mobile devices. Options: left, center, right. Default: center. |
| Background Overlay |
Set a color overlay or gradient for the background image or video. |
| Color Scheme |
Choose a color scheme for the banner to match the site's branding. Default: scheme2. |
Block Configration:
Each block allows for the addition of various types of content within the banner. Below are the available block types and their configurations:
Heading Block
| Setting |
Description |
| Heading Text |
Enter the text for the heading. |
| Heading Size |
Select the size of the heading text. Options: h1, h2, h3, h4. Default: h4. |
| Heading Weight |
Choose the font weight for the heading. Options: bold, semi-bold, medium, normal. Default: bold. |
| Bottom Margin |
Adjust the spacing below the heading. Range: 0–50 px. Default: 35 px. |
Description Block
| Setting |
Description |
| Description Text |
Add a description below the heading. |
| Text Size |
Select the size of the description text. Options: small, medium, large, xlarge. Default: large. |
| Text Weight |
Choose the font weight for the description. Options: bold, semi-bold, medium, normal, light. Default: normal. |
| Bottom Margin |
Adjust the spacing below the description. Range: 0–50 px. Default: 50 px. |
| Setting |
Description |
| Button Label |
Enter the text for the button. |
| Button Style |
Choose the button style. Options: primary, secondary. Default: primary. |
| Button Link |
Add a URL for the button. |
| Open in New Window |
Checkbox to open the button link in a new tab. Default: false. |
| Bottom Margin |
Adjust the spacing below the button. Range: 0–50 px. Default: 0 px. |
Caption Block
| Setting |
Description |
| Caption Text |
Add a caption for the banner. |
| Text Size |
Choose the size of the caption text. Options: small, medium, large, xlarge. Default: large. |
| Text Weight |
Set the font weight for the caption. Options: bold, semi-bold, medium, normal. Default: normal. |
| Bottom Margin |
Adjust the spacing below the caption. Range: 0–50 px. Default: 50 px. |
Spacing Configuration
| Setting |
Description |
| Top Padding |
Add padding to the top of the section. Range: 0–100 px. Default: 60 px. |
| Bottom Padding |
Add padding to the bottom of the section. Range: 0–100 px. Default: 60 px. |