Image banner

Image banner

What is an image banner section?

An image banner section is a prominent design element often placed at the top of a webpage or within a layout. It features a visually appealing image or a series of images combined with text, buttons, or other elements. The goal of this section is to capture visitors' attention and effectively communicate key messages or branding information.

How to Set Up an Image Banner Section:

1. Navigate to the template section and add the "Image Banner" section.

2. Expand the section width to fit your design needs.

3. Upload the beginning image and any additional images. You can select images from your files or explore free image options.

4. Adjust the image transparency if needed.

5. Set the image height to Small, Medium, or Large.

6. Define the banner headline and position it according to your preference: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, or Bottom right.

7. Align the content to Left, Center, or Right.

1. Turn on or off the banner headline feature as needed.

1. Choose a color scheme for the banner section.

1. For mobile views, set the content alignment to Left, Center, or Right.

1. Adjust the spacing above and below the banner using the section spacing slider.

1. Optionally, add custom CSS to apply unique styles.

Adding and Customizing Blocks:

1. Add a heading block and customize the text and heading size (Small, Medium, or Large).

2. Add a text block to include a summary or subheading with style options such as Body, Subtitle, or Uppercase.

3. Configure buttons by adding a main button and supportive button. Set their labels, URLs, and styles (Primary, Secondary, Outline).