If needed Houzez give you the possibility to create a Splash Page. The Splash Page is a static page of a Web site that the user sees first before being given the option to continue to the main content of the site (example at this page With Houzez you can create only one splash page and will have many options you can setup through the Theme Options panel. Let’s see how.

How to Create a Splash Page

In your left sidebar navigate to Pages > Add New to create a new page and from the Page Attributes box located in the right sidebar select Template: Splash Page Template and Publish the page

Splash Page Options

To customize the Splash Page content navigate to Theme Option > Splash Page. 

  1. Splash Page Layout: Select from Full Width or Boxed layouts
  2. Background Type: You can have three different background type:
    1. Background Image
    2. Background Video
    3. Background Slider
  3. Navigation: Enable/Disable splash page navigation
  4. Navigation Align: select navigation align (Left or Right)
  5. Overlay: Enable/Disable splash page overlay
  6. Overlay Image: Upload an image that you want to use as overlay. Usually is a file .png or .jpg that can be 1 x 1px or more. (You can find overlay images in images -> overlay directory)
  7. Opacity: Set the overlay opacity

Background Image

  1. Upload image: If you choose as Background Type the Background Image option, upload an image that you want to use as background page. The recommended image size is 2000 x 1000 px.

Background Slider

  1. Add/Edit Images: If you choose as Background Type the Background Slider option, upload all the images that you want to use as backgroud slider. The recommended image size is 2000 x 1000 px.
  2. Delay: Set the delay time for the slider im ms. Default delay is 7000

Background Video

  1. If you choose as Background Type the Background Video option, upload your video background in the followign format: MP4 File, WEBM File, OGV File
  2. Upload video image

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

Welcome Title

From the Theme Options sidebar navigate to Splash Page > Welcome Title.

  1. Splash Page Title: Enter title for splash page
  2. Splash Page Subtitle: Enter subtitle for splash page

Call Us

From the Theme Options sidebar navigate to Splash Page > Call Us.

  1. Font Awesome Icon: You can select an icon form the Font Awesome v.4.7 Icon library you just need to add icon code as in the default example <i class=”fa fa-phone-square”></i>
  2. Text: Add the text of your call to action
  3. Phone Number: add your phone number

Social Media

From the Theme Options sidebar navigate to Splash Page > Social Media and Enable/Disable social media.

  1. Facebook: Enter Facebook profile url
  2. Twitter: Enter Twitter profile url
  3. Google Plus: Enter Google Plus profile url
  4. LinkedIn: Enter LinkedInprofile url
  5. Instagram: Enter Instagram profile url

Logo Link

From the Theme Options sidebar navigate to Splash Page > Logo Link

  • Splash Page Logo Link: select Home Page or Custom
  • Enter Link: Add the page URL if you selected Custom link

Was this article helpful to you?