[V6] Hero Banner Element

In this article, you will learn about the Hero Banner element and how to use it to create a banner for your page to catch visitors’ attention.

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 Banner 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 want.

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)

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

Configure the Settings Tab

When clicking on the Hero Banner element, you will find its configuration options in the left sidebar, including the Settings and Design tabs.

1. Image

There are three options for you to upload your image:

Replace 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 Src: This option allows you to input the image link.

GemPages’ limit for each uploaded image is 3 megabytes (MB). If your image file is larger than 3MB, kindly upload it on the Shopify server, then copy and paste the image link. Find the detailed instructions here.

Image Quality: This option allows you to decide how your image will be compressed – Lighter or Lightest. However, it’s only available for images uploaded on our server – the UCare CDN.

2. 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.

Please note that the custom URL should include “https://” for the link to function properly. For instance, it should be “https://www.gempages.net” instead of “gempages.net.”

Open in: You can decide how the link will be opened at this point:

Current Tab: The link will open in the existing browser tab or window.
New Tab: The link will open in a new browser tab or window.

3. Dimension

Fixed mode: Turn on this option to adjust your banner automatically based on image dimensions. By turning on this switch, you will have the option to determine the position of the content: Top, Middle, or Bottom.

Alt Tag: Input your preferred alt tag for SEO purposes. Please note that this option is only available when the fixed mode is on.

Otherwise, if you keep the Fixed mode off, input the number into the Height field to modify the height of your banner. “Auto” means that the image is kept in the original size.

4. Overlay

You can create an overlay effect for the Hero Banner image at this point. Find a detailed guide on adding an overlay effect on your hero banner here.

5. Extra Class

If you wish to customize the element in a particular way, kindly use this field to add a class name and refer to it in the CSS file.

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article.