03. Page & Post Metabox - Title Header

Title Header Settings

As you saw in the theme preview, each page or post can have a cool title header, or not. This header can be configured in each page, under the "Title Header" metabox options. All the possibilities are clearly described and explained there, though you could take a look at the videos below to understand how simple it is to work with it.

Title Header Layout

  • Visibility - The first option is simple, you can enable or disable the title header. If disable you can select if the header is transparent or have a custom background color ( based on the Logo & Menu color selected ).
  • Normal - Simple you have a specified height of your title header, by default is 600 pixel. You can change this value based on your needs. On mobile and tablet devices I set a fixed height ( for good visualization of the content ) but if you want you can change this value with a custom css or globally or based on the page-id.
  • Full Screen - You have a full-screen title header based on the height of viewport. It is completely responsive and adapt to new viewport height when you resize the window or see the site in mobile/tablet devices. Also you can activate the "Scrollo Button to Next Section" for have a smooth scroll between the title header and the content.

Title Header Module

  • Normal - You have a simple flat background solid color. You can change the main default background color if you want.
  • Image - You can set a cover image background for your title header. Also you can select the background image position, the background repeat. The "Stretch to Fit" option in Backgroun Repeat field means that the image fits ( cover ) the width and height of the title header.

    Optionally you can activate the "Mask" feature and choose if you want a simple color mask, a mask pattern image mask or both.
  • Image Parallax - With this option you have a simple parallax effect when you scroll down the page, just you remember to upload an image. The parallax scroll effect is controlled via javascript function, then if you want increase or decrease the scroll effect you need mofify the js file. ( az_alice/_include/js/main.js )

    Optionally you can activate the "Mask" feature and choose if you want a simple color mask, a mask pattern image mask or both.
  • Video - This is a cool feature! For the first step you can select three different type of video: Self-Hosted, Vimeo and finally Youtube.

    Optionally you can activate the "Mask" feature and choose if you want a simple color mask, a mask pattern image mask or both.

    Self-Hosted-Video - If you select this option, you need insert a "Mobile Background Image Fallback". This image replace the video on all mobile/tablet devices and add a button with external link for your video. Remember this option is only visible if you navigate the site with a mobile/tablet device.

    Optinally you can upload a "Background Image" if your video don't have the autoplay. You can choose to enable or disable the audio of your video, the Autoplay and Loop. The last step is need upload two required file for cross-browser compatibility a webm and mp4 files.

    Vimeo - If you select this option, you need insert a "Mobile Background Image Fallback". This image replace the video on all mobile/tablet devices and add a button with external link for your vimeo video. Remember this option is only visible if you navigate the site with a mobile/tablet device.

    With Vimeo video you cannot set a "Background Image" here, but you can set the image if you have a Vimeo Pro Account. Also can choose to enable or disable the audio of your video, the Autoplay and Loop. The last step is need to set only the Vimeo Video ID.

    Youtube - If you select this option, you need insert a "Mobile Background Image Fallback". This image replace the video on all mobile/tablet devices and add a button with external link for your youtube video. Remember this option is only visible if you navigate the site with a mobile/tablet device.

    Optinally you can upload a "Background Image" if your video don't have the autoplay. You can choose to enable or disable the audio of your video, the Autoplay and Loop. The last step is need to set only the Youtube Video ID.

    Video Mobile Settings - Select if you want open your video in a new window or open into pop-up modal. This option is only visible if you navigate the site with a mobile/tablet devices.

  • Slider - With this option you can select between two different slider, the defaul slider theme AZ Slider or the Revolution Slider ( plugin required ).

    Optionally you can activate the "Mask" feature and choose if you want a simple color mask, a mask pattern image mask or both, but work only with AZ Slider only.

    AZ Slider - If you select this option, you can select if your text design is normal or big format. In case you use big format please don't write lot of text. You can select the animation of the slider between Fade or Slide, optionally you can select if the image have the parallax scroll.

    For create a slider is very simple in the "Slides Options" you can Add or Remove unlimited slides, with drag and drop sortings. In each slide you can upload an image and optinally insert a title, caption and wrap the text inside a link.

    Revolution Slider - If you select this option, you can select the Revolution Slider Alias. For create a slider with Revolution Slider please read the documentation included into the package of the theme.
  • Animated Pattern Background - With this option you can have a image pattern with inifinite cycle animation. You can choose 4 Animation Moveset, select the animation duration in second ( enter only number value ).
    Just you upload an image and if this image is transparent you can choose a pattern background color.
  • Title Header Text - Finally you can select if enabled or disable the Title Header text. You can choose your text design between normal or big format. In case you use big format please don't write lot of text.

    Optionally you can insert your custom heading instead the default title of your page/post, you can insert an optionally subheading and change the text color via colorpicker.

Screencast