Hero Banner Element

This article introduces the Hero Banner element in GemPages v7 and offers guidance on using it effectively.

Note: For optimal functionality, please upgrade to version 7 of GemPages.

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.

set up hero banner with gempages editor v7

Step 2: Feel free to drop the other elements, such as the Heading, Button, etc., over the Hero Banner as you wish.

add elements to hero banner

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

To begin, choose a content arrangement for your banner. You have three options for content placement: center, left, or right. Additionally, you can select the vertical positioning of the content, opting for top, center, bottom, or expanded display options.

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.
color banner source in hero banner element
2. Image

There are three options for you to change the banner image 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.

image banner source in hero banner

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)

To design your Hero Banner on different screens, check out this article.

Hit “Show more” to bring up more properties of the background.

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

In this section, you can choose how the background image behaves when the page is scrolled:

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.

Note: In case you want to create a Hero Banner with a parallax scrolling effect, you can choose the “Fixed” option at this point.

e. Preload

Enabling this option will automatically pre-load the banner when the user scrolls near the section containing it.

3. Video

For video banner source, you have two options to choose from:

Youtube: Add a video source from Youtube. Please note that this element supports both YouTube Shorts and long YouTube videos, offering versatile content choices.

youtube shorts — The hero banner element supports YouTube Shorts now.

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.

Note: Turn on the “Loop video” switch to have the video restart from the beginning once it reaches the end.

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

When setting up your banner, you can customize how your video or image displays:

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:

What did you think about this content?

Your comments

Irrelevant: Unexpected or off-topic information.

Inaccurate: The information doesn’t match the product.

Needs small fixes: There are typos or broken links.

I have suggestions: I’d like to suggest improvements for this page.

Email*

Invalid email address.

Something went wrong. Please try again later.

By submitting your email address and comments, you consent to the collection and use of your information as outlined in our Privacy Policy and agree to our Terms of Service.