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 start, select a content arrangement for the banner. You have three choices for placing the content: in the center, on the left side, or on the right side.
Arrange Content: Decide the vertical positioning of the content, choosing between top, center, bottom, or expanded display options.
Banner Source
You’ll have three choices for your Hero Banner background:
- Color Background
- Image Background
- Video Background
Color Background
Select a color from the palette or enter a hex code into the box to set your preferred background color for the banner.
Image 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.
Video Background
Enter the Youtube video link in the “Weblink” box. Turn on the “Loop video” switch to have the video restart from the beginning once it reaches the end.
Size
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
Toggle on the switch to enable the overlay effect for your banner. You will see all the options to customize the overlay effect 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.
Zoom when hover
Enable the switch to add the zoom effect for the banner when it is hovered over. 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.
Parallax scrolling
Parallax scrolling is a technique where background images move slower than foreground images, creating an illusion of depth on a two-dimensional site.
You can decide the scrolling speed in this section. Adjust the slider or enter the value into the box (from 0 to 1). If you set the speed at 0, the image will stay fixed. The scrolling speed will be equal to your scrolling speed when it’s set at 1.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
The Recommended Size For The Hero Banner Image
For the best display, the image uploaded in the Hero banner should have dimensions* as below:
- Desktop/Laptop: 1920×800
- Mobile: 420×200 or 420×400
- Tablet: 1024×500
* (width*height in px)
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!