Hero Block

A Hero block is usually the first thing your visitors see, making it a great spot to get them acquainted with your catchy content. Controlled by a smooth parallax scrolling and featuring a fullscreen background image or video, this is the perfect place to make a great first impression.

You can also find this block mentioned as Banner, Cover or Poster and it’s fundamentally the same concept. To learn how to use a Hero block on your site, follow the steps in this guide.

Add a Hero Block

To add a Hero block to your content click the  inserter button inside the editor and search for “hero”. Alternatively, you can just type /hero and press enter.

Add Content

Use the area inside the Hero to insert content blocks like Headings, Paragraphs, Buttons or Separators. While you have the flexibility to insert any other blocks, we recommend you to keep a low profile and leave room for the images in the background to shine too.

🌇 Add a Background Image

Use the Swap Media button from Toolbar to add your own image. It’s best to use high-resolution images that are at least 1500 pixels wide.

Because the size and shape of the Hero depend on the size and shape of the visitor’s screen device, your images will be cropped on some screens. Use the Focal Point option (see below) to change the focus of the area background image and make its main subject visible.

🎬 Add a Background Video

If you’re into motion, you can insert a self-hosted video to create a looping visual element behind your content. To add a video:

  1. Use the Swap Media button to open the Media Library.
  2. Drag your video file from your computer to Upload
  3. When you’re finished, click Select to insert.

Customize the Design

Both in the Toolbar above the selected block and in the Inspector sidebar, you can customize the design and behavior of the Hero blocks. To retain the overall logic and consistency of the Hero blocks design within a page, there are two different sets of options:

  1. Standard block-level options that apply to the selected block
  2. Page-level options that apply to all other blocks from that page

Below you can find more details on how to use those options.

To display more than one piece of content in a single space, you can use the Slideshow block instead. 

Updated on May 6, 2022

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.