Home page banner with video background for Vantage and HireBee themes

By Avatar of artem February 13, 2021
Mods

Home page banners for Vantage and HireBee themes designed to display an image on the background.

You just need to set the Featured Image for the Home Page.

By default it looks like this:

Default HireBee home page banner image
Default HireBee home page banner

Actually, you can display a video as well, but it’s not so obvious and below it will be explained how to.

While ClassiPress theme has a Customizer option to upload a video instead of image, the Vantage and HireBee still require some more actions.

We will use the Gutenberg block editor and only one “Cover” block.

  1. Create reusable block from your existing home page content

    Group all existing blocks and add group to reusable blocks. Give it a name, for instance “Welcome banner”. And remove it from the page.

  2. Add new Cover block

    Create new a “Cover” block and upload your video file in it.

  3. Add your reusable block inside the cover block

    Don’t set the title for cover block, delete it and add your own reusable block.

  4. Configure cover block

    Set the Focal point, Minimum height, Overlay color or gradient. Opacity. Almost done!

  5. Add custom CSS snippet

    Following CSS snippet needs to make the cover block take full width of the banner section. Add it to Additional CSS section of the Customizer.

.home-cover>.row {
  max-width:initial;
}
.home-cover,
.home-cover>.row>.columns {
  padding:0;
}

That’s it!

The result see below:

The video on the background of the home page banner

PS: It Should add that this works for ClassiPress as well and can be used for ClassiPress versions 4.0-4.1, which don’t have Header Media options in Customizer.

Like