The Home Page uses a very specific Header Element. It takes advantage of almost all of the features the header element provides. Including Featured Image background, merged with site header and custom Navigation location and colors. Get to know more about the Header Element here:
The Merged Site Header Element
To edit the header go to: Appearance > Elements –> Home Page Hero – Merged. To note this header has been designed specifically around the image. We now cover the different settings and their purpose. This should provide you enough understanding on how to manipulate the header for your own content.
Page Hero Tab Settings
- Hero Content > Basic HTML markup consisting of span tag subheading, H1 tag for main heading and an anchor tag using GP Button class.
- Element Classes > None
- Container > Set to contained
- Padding Desktop > Notable the 30% RHS padding is creating a safe zone to stop the page hero content from overlapping the RHS of the image.
- Padding Mobile > Separate padding to allow the text to span the header element.
- Background Image > Uses the Featured Image and set to centred. The featured images is disabled in the page content.
- Colors > no background color or overlay. Text colors have been adjusted for the heading. All colors left as default respect the customizer settings.
Site Header Tab Settings
- Merge with Content > Merged
- Offset Site Header Height > Set to 169px on desktop and 50px on Mobile. These values are the rough height of the Site Header and Mobile Header. This stops our content from moving under the navigation and site header.
- Colors > Background is set to a transparent white and Site Title and Tag Line remain as default and respect the colors set in the Customizer.
- Navigation Location > Default
- Navigation Colors > Checked and background is set to transparent.
Display Rules
This Header is set to display on the Front Page. This is the standard term for the page has been assigned in Dashboard > Settings > Reading –>Your Home Page Displays.
Frequently asked questions
How to change the background Image?
The Header Element uses the Featured Image background. Simply change the featured image within the post editor on the home page.
How to change the Heading and Sub heading?
Edit the header elements hero content. The font styles and sizes are set within the Customizer > Typograpghy settings
How to adjust the containment of the text?
The current heading and subheading are contained, so it does not overlap the darker part of the image on the right hand side. This is done by adding additional padding to the right hand side of the header element. Remove or change the padding to suit your requirements.
How to change the navigation colors?
In the Site Header tab you are given color controls for the header and the navigation. These override the colors set in the customizer. To note: the colors in the customizer will still apply to the Sticky Navigation.
How to use this header element on other pages?
If you want an exact copy of this header then you can simply add more pages, posts or templates to the Display Rules. But seeing as the home page would deserve some pretty specific headlines, you probably want to make a copy of it and change the content for your needs. Of course you can do this manually or use the Duplicate Post plugin – just make sure to edit the plugin settings and include Elements.