Page Header Options – favethemes

Houzez allows you to choose from five different Page Headers. Each Page Header has been developed for specific needs. For example, if I want a page with a map of properties, I would choose Properties Google Map. The section below will describe all of their options and functionalities.

To locate the Page Header Options box, edit one of your pages from the backend and check the green box in the image below.

Google Map Page Header

To display Google Map on top of your page, locate the Page Header Options box and select Header Type: Properties Google Map as displayed in the image below.

Fullscreen: Select Enable or Disable.
Select City: This option gives you the possibility to select a default city for the map. In this way, the map on this page will start from the chosen city. You can select multiple cities or keep all un-select to display properties from all cities at the same time. To select multiple cities use the CTRL button on Windows and CMD button for Mac.

Note: The zoom on map works according to the number of properties.

Google Map Page Header Mobile View

Houzez added the new Google Map header mobile switch view floating buttons. You can easily view the map and listings on one click. Please see the below screenshot:

Image Parallax Page Header

To display Image Parallax on top of your page, locate the Page Header Options box and select Header Type: Image as displayed in the image below.

Title: Enter the title you to overlay the image
Subtitle: Enter the subtitle you to overlay the image
Image: Select the image you want to upload
Image Height: Insert a value in pixels to define image height
Height Mobile: Insert a value in pixels to define image height for mobile.
Overlay Color Opacity: Select a transparency value
Banner Search: Enable or Disable
Fullscreen: Enable or Disable

Video Page Header

To display a video on top of your page, locate the Page Header Options box and select Header Type: Video as displayed in the image below.

Title: Enter the title you to overlay the video
Subtitle: Enter the subtitle you to overlay the video
MP4 File: Upload the video file in MP4 format
WEBM File: Upload the video file in WEBM format
OGV File: Upload the video file in OGV format
Video Image: Upload an image to use as a video cover. This image will be used to replace the video on mobile devices.
Image Height: Insert a value in pixels to define image height
Height Mobile: Insert a value in pixels to define image height for mobile.
Overlay Color Opacity: Select a transparency value
Banner Search: Enable or Disable
Fullscreen: Enable or Disable

Note: Upload all video formats MP4, WEBM, and OGV in order to make the video header to work correctly on all browsers.

Note for video on mobile devices

Videos can autoplay on desktop but why can you not get them to autoplay on mobile websites when the page loads? The answer is that the different OS developers intentionally disabled autoplay on mobile devices in order to protect the user’s bandwidth.

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. The autoplay is disabled to prevent unsolicited cellular download. iOS not only prevents autoplay but also preloading the video until the user initiates it. Android has disabled autoplay in versions 4.1+.

Property Slider Page Header

To display Image Parallax on top of your page, locate the Page Header Options box and select Header Type: Property Slider as displayed in the image below.

1. Fullscreen: Enable or Disable

Note: To assign properties to that slider, edit a property and look for the slider setting.

Revolution Slider Page Header

To display Image Parallax on top of your page, locate the Page Header Options box and select Header Type: Revolution Slider as displayed in the image below.

Locate the Revolution Slider dropdown menu and select the slider among the ones you have created in the Revolution Slider section of your admin panel.

Elementor Page Header

If you are using the Elementor page builder, then you can add or create your own header with background image, gradient, video, and slideshow. You can see the example here on the default demo, this header and background slider is created from Elementor.