Page Header

Page header can be inserted in the page with default template also in portfolio single and post single. Page header can be found in page settings in the third tab.

The first option is visibility, you have to select show to make all other options to appear.

  • Height – Change the height of page header, default is 500px. The number is represented in pixels.
  • Full Height – Incase you don’t want a custom height number or the default one of 500px you can transform the page header to 100% height.
  • Container – Select if you want page header to be boxed in 1170px width or not, default is on.
  • Inner Width – Change the width of content, the number is represented in %.
  • Alignment – Select the alignment of page header text.
  • Scroll Opacity – Switch on or off the scroll opacity animation, text will fade out when scrolling down, default is off.
  • Scroll Down Arrow – Switch on or off the scroll down arrow, an arrow will be displayed at the bottom of page header which can be clickable and can send you to the page/post content.
    • Scroll Down Arrow Color – Select the color of arrow, default is black.
  • Image – Select the image you want to display as page header background image.
    • Use this post/page featured image – The featured image will be used as page header, upload yours on the right of page settings.
    • Custom Image – A new option below will be displayed where you will be able to upload a custom image as page header.
    • No Image – No image will be used as page header only a plain color.
  • Image Parallax – Enable Parallax effect, parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.
  • Image Repeat – The repeat property sets if/how an image will be repeated.
    • No Repeat – The image will not be repeated.
    • Repeat All – The image will be repeated both vertically and horizontally.
    • Repeat Horizontally – The image will be repeated horizontally.
    • Repeat Vertically – The image will be repeated vertically.
  • Image Attachment – The attachment property sets whether an image is fixed or scrolls with the rest of the page.
    • Scroll – The image scrolls along with the element. This is default.
    • Fixed – The image is fixed with regard to the viewport.
    • Local – The image scrolls along with the element’s contents.
  • Image Position – The position property sets the starting position of an image.
    • Left Top
    • Left Center
    • Left Bottom
    • Center Top
    • Center Center
    • Center Bottom
    • Right Top
    • Right Center
    • Right Bottom
  • Image Size – The size property specifies the size of the image.
    • Auto – Default value. The image contains its width and height.
    • Cover – Scale the image to be as large as possible so that the background area is completely covered by the image. Some parts of the image may not be in view within the background positioning area.
    • Contain – Scale the image to the largest size such that both its width and its height can fit inside the content area.
    • Initial – Sets this property to its default value.
  • Overlay – Enable overlay for the background image, right after enabling two new options will appear.
    • Overlay Opacity – Enter the number of overlay opacity, the number can be in range of 0 and 1.
    • Overlay Color – Select the color of overlay, default is black.
  • Title – Select the title you want to display in page header.
    • Use this post/page title – The title of page header will be the page or post title.
    • Custom title – A custom option will appear where you will be able to enter a custom title for page header.
    • No title – No title will be used as page header title.
  • Title Font Family – Select the font family of title.
    • Poppins
    • Hind
  • Title Font Size – Enter the font size of title, number is represented in pixels.
  • Title Font Color – Select the color of title, default is black.
  • Title Font Transform – Select the transform of title, default is none.
    • Uppercase
    • Lowercase
    • Capitalize
  • Title Animation – Select initial loading animation for title.
    • None
    • Fade In
    • Fade In Up
    • Zoom In
  • Subtitle – Enter a subtitle which is displayed below the subtitle.
  • Subtitle Font Family – Select the font family of subtitle.
    • Poppins
    • Hind
  • Subtitle Font Size – Enter the font size of subtitle, number is represented in pixels.
  • Subtitle Font Color – Select the color of subtitle, default is black.
  • Subtitle Font Transform – Select the transform of subtitle, default is none.
    • Uppercase
    • Lowercase
    • Capitalize
  • Subtitle Animation – Select initial loading animation for subtitle.
    • None
    • Fade In
    • Fade In Up
    • Zoom In

Was this article helpful?

Yes No

Related Articles