Wow customers at first sight with the Hero Banner element

This article will let you know about Hero Banner and its advanced usage on your site.

What is a Hero Banner?

Hero Banner is a basic element of GemPages which allows you to create a big, wide section with an inspiring image, a large catchy slogan, and a button. This section is placed on a web page, on the front or category page of an online store, or in a blog article, with the purpose of presenting an overview of the content and of enticing visitors with an attractive design.

Settings tab's parameters

  • Upload your image: You can upload an image from three different sources: 
    • From your computer: Hover on the thumbnail and click Replace image (1)
    • From Gallery: Click on Browser Gallery  (2)
    • From the Internet: Copy the link address of the image and paste in the Image Src box (3) 

  • Link: This allows you to redirect your visitors to any given URL or scroll to any section of the current page. Just insert the destination page link and select how it will show up as a new tab or current tab. 

  • Dimension: 
    • If you disable Fixed mode, you can freely modify the height of the image by manually putting a specific value (in pixel)
    • If you enable Fixed mode, the entire Hero Banner will be adjusted automatically based on image dimensions.

  • Overlay: You can create a fading overlay effect for the Hero Banner image at this option. More advanced customized Hero Banner with combination between Hover effect and Overlay effect, find it now here

  • Extra class: If you wish to customize the variant's content element particularly, please use this field to add a class name and then refer to it in the CSS file.

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: 1920x800 
  • Mobile: 375x200 or 375x400
  • Tablet: 1024x500 

* (width*height in px)

To design your own Hero Banner on different screen versions, you may find out more here.

Create a full-width Hero banner

I recommend that Hero Banner should be located in a Row element. By enabling the Full-width option, it will wrap the content of your Hero Banner in a fixed width. It means that the content will not be overlapped out of any screen. 


Create a slider with Hero Banner elements

This video tutorial will guide you on how to create a slider with three basic elements including Row, Carousel, and Hero Banner.


Create a collection list page with Hero Banner element

Using the same method we used for the Row and Hero Banner, you can create a collection list page. It can't be simpler! Just follow the instruction below, and you will be set within minutes.

  • Step 1: Drag a Row element into your page and select layout under the Settings tab. Example: 4 columns as below

  • Step 2: Drag Hero banner and Button elements into the Row. If you have more than 4 collections, to save your time you may create a similar row by right-clicking on the Row element and select Duplicate.


  • Step 3: Link the buttons with your corresponding collection page. Navigate the Pick link option under the Settings tab and select a collection under the Collections tab.


Don't forget to Save and Preview, then Publish when everything is perfect. That's it! It works like a charm! 


If you're interested in learning more about powerful, user-friendly GemPages, please feel free to figure out more articles here or reach our Support Team. We'd be happy to answer any questions you have.

Was this helpful?