Hero Media Header Options for Pages
WPRentals allows you to manage the Hero Media Header globally from the theme options, or individually for specific pages.
Global Hero Media Header
The global Hero Media Header is set from Theme Options → Header → Hero Media Header.
More details: Global Hero Header Media Options
The global Hero Media Header applies to pages that have the header type set to Global in the page Appearance Options.
Important: Property pages, dashboard pages, and Half Map layouts do not use the same custom page Hero Media Header behavior.
Custom Hero Media Header for Specific Pages
You can overwrite the global Hero Media Header for a specific page from the page editor.
- Go to Pages → All Pages.
- Edit the page where you want to change the Hero Media Header.
- Scroll to the Appearance Options section.
- Find the Select header type option.
- Change the option from Global to the custom header type you want to use.
- Update the page.
Available Custom Header Types
The page-level Hero Media Header options are:
- Global – uses the global setting from Theme Options.
- None – removes the Hero Media Header from that page.
- Image – uses a custom image as the hero header.
- Theme Slider – displays selected listings in the WPRentals Theme Slider.
- Revolution Slider – displays a Slider Revolution module by alias.
- Google Map – displays a map as the hero header.
- Video Header – displays a self-hosted video as the hero header.
Video as Hero Media Header
Select Video Header if you want to use a self-hosted video as the Hero Media Header for a specific page.
The video header supports the following self-hosted video formats:
- MP4
- WEBM
- OGV
You can also add a cover image. This image is useful for devices or browsers that do not support video playback in the header.
Available video header options include:
- Fullscreen or fixed height display.
- Custom video height.
- Title over image/video.
- Subtitle over image/video.
- Overlay color.
- Overlay opacity.
Example of a page using a video Hero Media Header:
Image as Hero Media Header
Select Image if you want to use a custom image as the Hero Media Header for a specific page.
Available image header options include:
- Header image upload.
- Fullscreen or fixed height display.
- Background style: Cover or Contain.
- Title over image.
- Subtitle over image.
- Image height.
- Overlay color.
- Overlay opacity.
The parallax effect for image and video headers is managed globally from Theme Options → Header → Hero Media Header → Parallax effect for image/video header media?.
Example of a page using an image Hero Media Header:
Theme Slider as Hero Media Header
Select Theme Slider if you want to display selected listings in the Hero Media Header.
The listings used in the Theme Slider are managed from Theme Options → Header → Hero Media – Theme Slider.
In this section, you can:
- Select the listings that should appear in the slider.
- Add listing IDs manually, separated by commas.
- Set the auto-cycling time between slider items.
- Choose the slider design type.
Note: For performance reasons, the dropdown may show only the first listings. If the listing you need is not visible in the dropdown, use the field for listing IDs and add the listing IDs separated by commas.
More details: Theme Options > Theme Slider for Hero Media
Example of a page using Theme Slider as Hero Media Header:
Map as Hero Media Header
Select Google Map if you want to display a map as the Hero Media Header for a specific page.
For the page-level map header, you can set:
- Map center latitude.
- Map center longitude.
- Zoom level.
- Map height when closed.
- Map height when open.
- Whether to force the map at the closed size.
- ByPass fit bounds, if you want to use your custom coordinates and zoom settings.
Leave the custom map fields empty if you want the page to use the general map settings from the theme options.
The main map settings are managed from Theme Options → Map Configuration.
More details: Theme Options – Map Configuration Settings
Example of a page using a map as Hero Media Header:
Revolution Slider as Hero Media Header
Select Revolution Slider if you want to display a Slider Revolution module as the Hero Media Header for a specific page.
- Create the slider/module in the Slider Revolution menu.
- Copy the slider/module Alias.
- Edit the page where you want to display it.
- In Appearance Options, set Select header type to Revolution Slider.
- Paste the alias in the Revolution Slider Name field.
- Update the page.
The alias must match the Slider Revolution module alias exactly.
Slider Revolution documentation: Slider Revolution Help Center
Example of a page using Revolution Slider as Hero Media Header:
Transparent Header Settings per Page
The transparent header option makes the menu/header background see-through. This is usually used when the page has a visual Hero Media Header, such as an image, video, or slider.
You can manage the transparent header for each page from Edit Page → Appearance Options → Use transparent header.
The available options are:
- Global – uses the global transparent header setting from Theme Options.
- No – disables the transparent header for that page.
- Yes – enables the transparent header for that page.
Important: Avoid using a transparent header when the page has no Hero Media Header or when the header design does not provide enough contrast behind the menu. If the menu is hard to read, disable the transparent header for that page.
Example of a page with transparent header enabled:
Hero Media Header and Search Form
The Hero Media Header controls the visual area at the top of the page, such as an image, video, map, Theme Slider, or Revolution Slider.
The search form is controlled separately from Theme Options → Search. This applies even when the search form appears over the Hero Media Header.
If you remove the Hero Media Header by setting the page header type to None, the theme Hero Media Search will not display over that area. In this case, you can add a search form inside the page content with the WPRentals Search Form Builder for Elementor or with the Advanced Search shortcode.
Help to understand Search Form Settings – https://help.wprentals.org/article/advanced-search-options/
None Header Type and Elementor Custom Hero Sections
Select None when you do not want to use the theme Hero Media Header on that page.
This option is useful when you want to create your own hero section directly with Elementor. You can edit the page with Elementor and build a custom hero area using Elementor containers, background images, background videos, headings, buttons, and other Elementor widgets.
Important: When the page header type is set to None, the theme Hero Media Header is removed from that page. Because of this, the theme Hero Media Search will not display over the header.
If you are creating a custom hero section with Elementor and you also need a search form inside that hero area, use the WPRentals Search Form Builder for Elementor. This widget allows you to create a custom search form and place it directly inside your Elementor hero section.
More details: WPRentals Search Form Builder for Elementor
You can also use the Advanced Search shortcode if you prefer to add a theme search form inside the page content instead of using the Elementor Search Form Builder.
More details: Advanced Search Shortcode for Elementor or WPBakery