About the Hero Banner element
The Hero Banner is a basic element that allows you to create a large and typically full-width banner image positioned at the top of your website pages. Besides, by using the Hero Banner, you will have the option to layer the other elements on top of it to add content to your big banner.
From the GemPages Dashboard, open a template to edit. You can quickly find the Hero Banner element on the left sidebar of the Editor, under the Media section. Drag & drop the element to any position you prefer.
Next, feel free to drop the other elements such as Heading, Button, etc. over the Hero Banner as you wish.
Click on the Hero banner to reveal the configurations on the left sidebar including the Settings and Advanced tabs.
Configure the Settings tab
Layout
To begin, choose a layout of the content inside the banner, from the six layouts corresponding to 1 to 6 columns.
There are 2 modes for setting the width of the column at this point:
- Fill column: The width of the columns is evenly distributed, and you can adjust the width ratio of the columns by dragging the slider in the Custom layout.
- Fit content: The width of the columns auto-adjusts to the content inside the column.
Background
There are three options for you to upload your image:
- Change Image: Hover over the image and click on “Change Image”. This option lets you choose an image from your computer to upload.
- Browse Gallery: You can pick one from the gallery which contains all of your uploaded images.
- Image Source: This option allows you to input the image link.
Preload: By enabling this option the banner will be automatically pre-loaded when the user scrolls near the section containing that banner.
Hit “Show more” to bring up more properties of the background:
Scale
- Cover: The image uploaded will color the entire background of the Hero Banner.
- Contain: The image uploaded will maintain its original size and the rest of the section will follow the color code set up in the color tab.
Position
Adjust the position of the image in 9 different positions: top left, top-center, top right, middle left, middle-center, middle right, bottom left, bottom-center, bottom right.
Repeat (For Contain background size only)
Repeat the background image to fill up the background in 3 styles: Fill, Vertical only, and Horizontal only.
By default, your image is set to the fourth option: No repeat.
Attachment
Scroll: The background image scrolls with the page.
Fixed: The background image does not scroll with the page
Local: The background image will scroll with the element’s content.
For more information, please refer to this article: CSS background-attachment Property.
Size
Fit height to content: Enable this option to automatically adjust the height of your hero banner based on the uploaded image and the content within it.
Height: If you choose to disable the “Fit Height” option, specify your desired height for the hero banner in the designated field.
Content width: Input a value for width content in pixels or percentages.
Content position: Decide the position of the content within the hero banner: Top, Middle, or Bottom.
Link
Pick link: Select this option to send visitors to a destination page. The link picker window will appear to select the link to add. There are two options for you at this point: enter the link to the Custom URL field or choose from the tabs below.
- Pages, Collections, Products, and Articles: internal links to other pages of your store.
- Scroll to: this option allows you to leap to a specific section of the current page. For more information, please check out the article about anchor links.
- Email: Visitors can send emails to your address with the subject and body pre-filled.
- Phone: Shows your visitors your phone number and the option to call.
Overlay states
Customize the overlay effect of the Hero Banner in both its default state and when it is hovered over.
Opacity: Adjust the opacity of the entire section. A lower numerical value corresponds to a higher level of transparency.
Color: Pick a color from the palette for the overlay color.
Effect
Select an effect to apply to the hero banner when it is hovered over. You have the option to choose between None (No effect) and Zoom. The Zoom effect allows the banner will be zoomed in during the duration of time.
Once you have chosen the Zoom effect, additional customization options will become available.
- Zoom level: Adjust the slider to reach your preferred zoom level in percentage.
- Zoom time: Determine the duration for the zoom effect to reach the desired zoom level.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
How to create a Slideshow with the Hero Banner element?
The Hero Banner element is also used to design a slideshow on your webpage. By blending the Hero Banner with the Carousel element, you can easily create an impressive slideshow that captures customer attention. To learn how to do this, check out the instructional video below:
And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!