Display Pro: Hero Section

Home Page

The home page uses the default header media set under Appearance → Customize → Header Media. This is used as the background image for the Front Page 1 widget area. It accepts an embedded YouTube video or a standard image. Please note that the YouTube video will not be used on mobile devices, instead the header image will be used as a fallback.

Single Pages

Single pages will show no hero image by default. To add a background image to a single page simply set a featured image for the page. To upload a Featured Image, navigate to the Edit Page screen of the post or page. Locate the Featured Image field just below the Update button. Click Set featured image and select the background image. Click Update to save changes.

Recommended minimum size for featured images is 1280px wide and 720px tall.

Archive Pages

The hero section background image can be set for taxonomies by uploading an image to your site and naming it with the following pattern: 'taxonomy_type-taxonomy_name'. For example, to set the background image for the Tech Category as seen in the demo, you would upload an image with the following name: 'category-tech'.3

Advanced usage for developers

The hero section can be switched on or off for specific page types from the theme's config.php file:

$core_hero_section = [
	HeroSection::PAGE            => true,
	HeroSection::POST            => false,
	HeroSection::PRODUCT         => true,
	HeroSection::PORTFOLIO_ITEM  => true,
	HeroSection::FRONT_PAGE      => true,
	HeroSection::ATTACHMENT      => true,
	HeroSection::ERROR_404       => true,
	HeroSection::LANDING_PAGE    => false,
	HeroSection::BLOG_TEMPLATE   => true,
	HeroSection::SEARCH          => true,
	HeroSection::AUTHOR          => true,
	HeroSection::DATE            => true,
	HeroSection::LATEST_POSTS    => true,
	HeroSection::BLOG            => true,
	HeroSection::SHOP            => true,
	HeroSection::PORTFOLIO       => true,
	HeroSection::PORTFOLIO_TYPE  => true,
	HeroSection::PRODUCT_ARCHIVE => true,
	HeroSection::CATEGORY        => true,
	HeroSection::TAG             => true,
];