Hero Grid


The Hero Grid is a set of five boxes near the top of the page, just below the menu bar. Each box is basically a big button that links to another page, post, product or event on the website. It's a great way to highlight important items on your site. 

 


How to Add a Hero Grid


  • Click the Page Setup button
  • Under Page Hero select the option for Grid



  • Click the pencil icon at the upper-left corner of a Hero Grid box to edit where it links to on your site




  • Be sure to select the corresponding Button Type for the content that you're linking to (Event button type links to an event, Post button type links to a post, etc.)
  • Search for & select the destination that you're linking to. For example, to link to a store page you'd set the button type as 'page' and select 'store'



  • You can edit the image on a Hero box by going to its destination page and changing the media item.  For example, to change the image on the 'Store' hero box, you'd go directly to the store page itself, click the gear icon to edit the page, then set your media item (under the 'Sharing and Search' section):



**Note  - Hero Grid images should have an 83:100 aspect ratio to appear without clipping on desktop screens, and should fit inside a 55:100 aspect ratio box to avoid clipping on mobile devices. 


Hero Image


If you have high-quality and high-resolution images, the Hero Image can be a striking alternative to the hero grid format. It features a large image spanning the width of the page's content. You can add multiple images to create a hero image slideshow. You can also embed links behind each image, linking them to other pages on your website. 


 

Hero Images can also be Supersized to span the width of the entire screen:



How to Add a Hero Image


  • Click the Page Setup button
  • Under Page Hero select the option for Image
  • Click the pencil icon at the upper-left corner of a Hero Image space to edit the image and link
  • Choose your image and configure details (title position, supersize, title, link), then hit Save:



  • Add as many images as needed for your Hero Image slideshow.  When done, hit the main Save button at the bottom:



Hero Video


A Hero Video is a video that streams in a loop at the top of the page. It can be Supersized like a hero image, however you cannot embed a link. Here is an example: 


https://starwars.usetopscore.com/en_us/hero-video



How to Add a Hero Image


  • Click the Page Setup button
  • Under Page Hero select the option for Video
  • Click the pencil icon at the upper-left corner of a Hero Video slot to Edit 
  • Input a YouTube link to the video you'd like to use, hit Save


Pro Tip - Videos with slower-moving content and lots of action work best!