Page Header Options

Homey allows you to choose from six different Page Headers. Each Page Header has been developed for specific needs. 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.

 

Image 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.

 

1. Title: Add the main title you want to appear above the image
2. Subtitle: Add the subtitle you want to appear above the image
3. Image: Click on + Add Media to select the image that you want to display on the header. Recommended image size 200o x 600 px
4. Height: Set up the header height for desktop computers
5. Height Mobile: Set up the header height for mobile devices
6. Overlay Color Opacity: This setting is used to darken the image and make the text more readable
7. Banner search: Enable or disable the search on the header. If you enable the search you have the option to select from the horizontal or vertical search system
8. Fullscreen: Enable or disable
9. Transparent Header: Enable or disable

Half Search Header

 

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

 

1. Title: Add the main title you want to appear above the image
2. Subtitle: Add the subtitle you want to appear above the image
3. Image: Click on + Add Media to select the image that you want to display on the header. Recommended image size 200o x 600 px

Video 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.

 

1. Title: Add the main title you want to appear above the image
2. Subtitle: Add the subtitle you want to appear above the image
3. MP4 File: Upload the video file in MP4 format
4. WEBM File: Upload the video file in WEBM format
5. OGV File: Upload the video file in OGV format
6. Image: Click on + Add Media to select the image that you want to display as video placeholder. This image will be used to replace the video on mobile devices. Recommended image size 200o x 600 px
7. Height: Set up the header height for desktop computers
8. Height Mobile: Set up the header height for mobile devices
9. Overlay Color Opacity: This setting is used to darken the image and make the text more readable
10. Banner search: Enable or disable the search on the header. If you enable the search you have the option to select from the horizontal or vertical search system
11. Fullscreen: Enable or disable
12. Transparent Header: 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 computers 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 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. 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

 

To display a Property Slider 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
2. Transparent Header: Enable or disable

Slider Revolution Header

 

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

 

1. Title: Add the main title you want to appear above the image
2. Subtitle: Add the subtitle you want to appear above the image
3. Revolution Slider: Select the slider form the drop-down menu
4. Banner search: Enable or disable the search on the header. If you enable the search you have the option to select from the horizontal or vertical search system
5. Transparent Header: Enable or disable

Google Maps Header

 

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

 

• Map Data: City (pre-selected) Choose where map show listings
• Select City: Select a city where the map has to be started. You can select multiple cities or keep all un-select to show from all cities
• Fullscreen: Enable or disable