About the Hero Banner Element
The Hero Banner element allows you to design a striking, full-width section at the top of your webpage that captures visitors’ attention with stunning visuals. Additionally, you can layer elements such as headings, text blocks, and CTAs to make your banner even more engaging.
How to Add the Hero Banner Element using GemPages v7
Step 1: Open a page to edit from the GemPages Editor. The Hero Banner element is quickly found on the left sidebar under the Media section. Drag and drop the element to any position you prefer.
Step 2: Feel free to drop the other elements, such as the Heading, Button, etc., over the Hero Banner as you wish.
Step 3: Click on the Hero banner to reveal the configurations on the left sidebar, including the Settings and Advanced tabs.
Configure the Settings Tab
Layout
Banner Source
You’ll have three choices for your Hero Banner source:
- Color
- Image
- Video
1. Color
Select a color from the palette or enter a hex code into the box to set your preferred background color for the banner.
2. Image
There are three options for you to change the image banner source:
- Image Uploading: This option lets you choose an image from your computer to upload.
- Link Input: This option allows you to input the image link to change the Hero Banner’s image source.
- Gallery Browsing: You can pick one image from the gallery, which contains all of your uploaded images.
For the best display, you can refer to the tooltip shown in the Image tab, under the Banner source section to find the most optimal dimensions* for the image uploaded in the Hero banner:
- Desktop/Laptop: 1920×800
- Mobile: 375×200 or 375×400
- Tablet: 1024×500
* (width*height in px)
The properties include:
a. Scale
- Cover: The image uploaded will cover 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.
b. Position
You can adjust the position of the image in nine different positions: top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, and bottom right.
c. Repeat
You can repeat the background image in three styles: Fill, Vertical only, and Horizontal only.
By default, the image is set to No repeat.
d. 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.
e. Preload
Enabling this option will automatically pre-load the banner when the user scrolls near the section containing it.
3. Video
- Youtube: Add a video source from Youtube. Please note that this element supports both YouTube Shorts and long YouTube videos, offering versatile content choices.
- Video hosting: If you opt for the Video hosting option, you can upload the video to Shopify and input the video link into the Weblink box. Please note that the result needs to be checked on the live page. For step-by-step instructions on how to upload the video to Shopify, please refer to this article.
Link
URL Source: This option allows you to direct visitors to a destination page. The link picker window will appear when you click “Insert link”. At this point, you have two options to add a link: Paste a link into the URL Source field or choose from the tabs below.
- Pages, Collections, Products, and Blog posts: Internal links to other pages of your store.
- Pop-up: Links to a pop-up that appears in your store.
- Scroll to: This option allows you to jump to a specific section of the current page. For more information, please see 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.
Size
- Video Ratio: If you choose video as the banner source, you can adjust the Video ratio as you prefer.
- Banner Ratio: Select an option from the dropdown menu. “As banner source” entails automatic adjustment of your banner according to image dimensions. Alternatively, choose “Custom” to input your preferred banner width and banner height.
Shape
You can customize the shape of your Hero Banner, including its border, corner, and shadow effect.
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
When you choose an image as the banner source, you can add a parallax scrolling effect to your Hero Banner. Parallax scrolling is a technique in which background images move slower than foreground images, creating an illusion of depth on a two-dimensional site.
SEO
Add the alternative text and image title for your Hero Banner to optimize SEO.
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: