Hero Banner Element

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

Follow these steps to add a Hero Banner element to your page built with GemPages.

• From the GemPages Dashboard, locate the target page to open the editor.
• In the left sidebar, navigate to the Media section and drag & drop the Hero Banner element to your desired spot.

• (Optional) Drag other elements (e.g., Heading, Button, etc.) onto the banner for added impact.
• Click the Hero Banner to reveal its configuration panel, which includes Settings and Advanced tabs.

Configure the Settings Tab

Layout

Choose the content layout and alignment:

• Horizontal position: Left, Center, or Right
• Vertical position: Top, Center, Bottom, or Expanded (fills the full height)

Background

You can set the banner background using one of three sources:

• Color
• Image
• Video

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 change the banner image source:

• Upload Image: This option allows you to select 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. 
• Browse Gallery: You can pick one image from the gallery, which contains all of your uploaded images.

Tip: 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:

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

Video background

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

• YouTube: Add a video source from YouTube. This option supports both YouTube Shorts and long-form YouTube videos, offering a versatile range of 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. 

Note: 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 tothis article.

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

Overlay

Click Show more, then hit Add… to configure:

• Color: Pick an overlay color
• Opacity: Adjust transparency (lower values = more transparent)

Size

Choose how the banner scales:

• As banner source: Auto-adjusts based on image dimensions
• Custom: Manually set width and height

Content

Configure:

• Width: Set the maximum width for inner content
• Padding: Add spacing inside the banner
• Align: Align content horizontally (left, center, right)

Shape

Customize the shape using:

• Border: Add border styles
• Corner: Adjust the roundness of corners
• Shadow: Apply shadow effects for depth

Effect

• Hover effect: Add interactive hover styling
• Parallax scroll (for image only): Adds depth with layered movement as users scroll

Link

Once you toggle ON, you can configure the Link section:

After click: Choose from the dropdown to decide what happens after visitors click your hero banner: Open page, Scroll to, Open popup, Send email, or Make phone call.

For example, if you choose the Scroll to option, click on the Add… to select the target section from the list.

SEO

Under the SEO section, you can add the image alt text and image title to enhance the page SEO.

Align

Align the Hero Banner section itself: Left, Center, or Right.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.