Setting up the Hero Area on the Homepage

This article refers to Inspiro Lite

In older versions of the theme, the hero area appeared automatically on your front page, and it was configurable from the Customizer. Recently, we’ve made some changes to give you more control over the elements included in the hero, so it can also be edited using the Block Editor or Elementor.

Hero Area included in Starter Sites

When importing a demo that includes a hero area at the top, this can be easily changed by editing the front page directly, either with the block editor or Elementor, depending on which demo you imported.

Block Editor demo

The hero area in this demo is created using a Cover Block, which supports images and self-hosted videos.
If you want to feature a YouTube or Vimeo video in the hero when using the block editor, we recommend deleting the cover block from the top of the front page and enabling the hero from the Customizer as explained in the next section.

Elementor Demo

In this demo, created in Elementor, the hero area supports external videos, such as those from YouTube and Vimeo. The video can be changed from the Styles tab of the first container added to the page:

Homepage Hero from the Customizer (old method)

If you prefer to use the old hero, which supports YouTube and Vimeo videos, go to Customizer > Homepage Hero Area and enable it:

Please keep in mind that the Homepage Hero Area at the top is a fixed part of the theme, so it can’t be edited from Elementor or the Block editor.
Once enabled, you’ll probably need to remove the other hero created in your editor by editing your front page using the block editor or Elementor.

Editing the Hero Area from the Customizer

You can edit the hero from the Customizer > Homepage Hero Area:

In the Media section, you can configure what the hero area displays: a video or an image.

The hero supports Vimeo, YouTube, and self-hosted MP4 video files. Vimeo and MP4 videos will also play on mobile devices, while YouTube videos will not play on mobile devices.

Video Background Support on Mobile Devices

Only self-hosted and Vimeo videos can be played automatically in the background on mobile devices. YouTube player has some limitations and doesn’t provide such a possibility.

Requirements for Video File to play on Mobile Devices (self-hosted):

The video format must be MP4 with the h.264 encoding. You can resize/convert it using Handbrake.
The video must be Muted.
We also recommended to keep your video file size small (5-20MB) to load fast enough on 3G/4G connections.

Video Not Playing on Mobile?
If your phone is in Low Power Mode (iOS), your mobile browser won’t automatically play the video to save battery.

When the hero area is created in the block editor using the Cover Block, you can add a video lightbox using the Video Popup Block by WPZOOM plugin.

This is a single-block plugin, and such plugins can be installed directly in the editor.

Just click on the ➕ button from the top-left corner, and start typing something like “video popup“.