Building the Home Page Header

The Home Page uses a very spe­cif­ic Head­er Ele­ment. It takes advan­tage of almost all of the fea­tures the head­er ele­ment pro­vides. Includ­ing Fea­tured Image back­ground, merged with site head­er and cus­tom Nav­i­ga­tion loca­tion and col­ors. Get to know more about the Head­er Ele­ment here:

Head­er Ele­ment Overview

The Merged Site Header Element

To edit the head­er go to: Appear­ance > Ele­ments –> Home Page Hero — Merged. To note this head­er has been designed specif­i­cal­ly around the image. We now cov­er the dif­fer­ent set­tings and their pur­pose. This should pro­vide you enough under­stand­ing on how to manip­u­late the head­er for your own content.

Page Hero Tab Settings

• Hero Con­tent > Basic HTML markup con­sist­ing of span tag sub­head­ing, H1 tag for main head­ing and an anchor tag using GP But­ton class.
• Ele­ment Class­es > None
• Con­tain­er > Set to contained
• Padding Desk­top > Notable the 30% RHS padding is cre­at­ing a safe zone to stop the page hero con­tent from over­lap­ping the RHS of the image.
• Padding Mobile > Sep­a­rate padding to allow the text to span the head­er element.
• Back­ground Image > Uses the Fea­tured Image and set to cen­tred. The fea­tured images is dis­abled in the page content.
• Col­ors > no back­ground col­or or over­lay. Text col­ors have been adjust­ed for the head­ing. All col­ors left as default respect the cus­tomiz­er settings.

Site Header Tab Settings

• Merge with Con­tent > Merged
• Off­set Site Head­er Height > Set to 169px on desk­top and 50px on Mobile. These val­ues are the rough height of the Site Head­er and Mobile Head­er. This stops our con­tent from mov­ing under the nav­i­ga­tion and site header.
• Col­ors > Back­ground is set to a trans­par­ent white and Site Title and Tag Line remain as default and respect the col­ors set in the Customizer.
• Nav­i­ga­tion Loca­tion > Default
• Nav­i­ga­tion Col­ors > Checked and back­ground is set to transparent.

Display Rules

This Head­er is set to dis­play on the Front Page. This is the stan­dard term for the page has been assigned in Dash­board > Set­tings > Read­ing –>Your Home Page Displays.

Frequently asked questions

How to change the background Image?

The Head­er Ele­ment uses the Fea­tured Image back­ground. Sim­ply change the fea­tured image with­in the post edi­tor on the home page.

How to change the Heading and Sub heading?

Edit the head­er ele­ments hero con­tent. The font styles and sizes are set with­in the Cus­tomiz­er > Typograpghy settings

How to adjust the containment of the text?

The cur­rent head­ing and sub­head­ing are con­tained, so it does not over­lap the dark­er part of the image on the right hand side. This is done by adding addi­tion­al padding to the right hand side of the head­er ele­ment. Remove or change the padding to suit your requirements.

How to change the navigation colors?

In the Site Head­er tab you are giv­en col­or con­trols for the head­er and the nav­i­ga­tion. These over­ride the col­ors set in the cus­tomiz­er. To note: the col­ors in the cus­tomiz­er will still apply to the Sticky Navigation.

How to use this header element on other pages?

If you want an exact copy of this head­er then you can sim­ply add more pages, posts or tem­plates to the Dis­play Rules. But see­ing as the home page would deserve some pret­ty spe­cif­ic head­lines, you prob­a­bly want to make a copy of it and change the con­tent for your needs. Of course you can do this man­u­al­ly or use the Dupli­cate Post plu­g­in — just make sure to edit the plu­g­in set­tings and include Elements.