Merch Styling

Building the Home Page Header

This is the excerpt

The Home Page uses a very spe­ci­fic Hea­der Ele­ment. It takes advan­ta­ge of almost all of the fea­tures the hea­der ele­ment pro­vi­des. Inclu­ding Fea­tured Image back­ground, mer­ged with site hea­der and cus­tom Navi­ga­ti­on loca­ti­on and colors. Get to know more about the Hea­der Ele­ment here:

The Merged Site Header Element

To edit the hea­der go to: Appearan­ce > Ele­ments –> Home Page Hero – Mer­ged. To note this hea­der has been desi­gned spe­ci­fi­cal­ly around the image. We now cover the dif­fe­rent set­tings and their pur­po­se. This should pro­vi­de you enough under­stan­ding on how to mani­pu­la­te the hea­der for your own content.

Page Hero Tab Settings

  • Hero Con­tent > Basic HTML mark­up con­sis­ting of span tag sub­hea­ding, H1 tag for main hea­ding and an anchor tag using GP But­ton class.
  • Ele­ment Clas­ses > None
  • Con­tai­ner > Set to contained
  • Pad­ding Desk­top > Nota­ble the 30% RHS pad­ding is crea­ting a safe zone to stop the page hero con­tent from over­lap­ping the RHS of the image.
  • Pad­ding Mobi­le > Sepa­ra­te pad­ding to allow the text to span the hea­der element.
  • Back­ground Image > Uses the Fea­tured Image and set to cent­red. The fea­tured images is dis­ab­led in the page content.
  • Colors > no back­ground color or over­lay. Text colors have been adjus­ted for the hea­ding. All colors left as default respect the cus­to­mi­zer settings.

Site Header Tab Settings

  • Mer­ge with Con­tent > Merged
  • Off­set Site Hea­der Height > Set to 169px on desk­top and 50px on Mobi­le. The­se values are the rough height of the Site Hea­der and Mobi­le Hea­der. This stops our con­tent from moving under the navi­ga­ti­on and site header.
  • Colors > Back­ground is set to a trans­pa­rent white and Site Tit­le and Tag Line remain as default and respect the colors set in the Customizer.
  • Navi­ga­ti­on Loca­ti­on > Default
  • Navi­ga­ti­on Colors > Che­cked and back­ground is set to transparent.

Display Rules

This Hea­der is set to dis­play on the Front Page. This is the stan­dard term for the page has been assi­gned in Dash­board > Set­tings > Rea­ding –>Your Home Page Displays.

Frequently asked questions

How to change the background Image?

The Hea­der Ele­ment uses the Fea­tured Image back­ground. Sim­ply chan­ge the fea­tured image wit­hin the post edi­tor on the home page.

How to change the Heading and Sub heading?

Edit the hea­der ele­ments hero con­tent. The font styles and sizes are set wit­hin the Cus­to­mi­zer > Typo­grapghy settings

How to adjust the containment of the text?

The cur­rent hea­ding and sub­hea­ding are con­tai­ned, so it does not over­lap the dar­ker part of the image on the right hand side. This is done by adding addi­tio­nal pad­ding to the right hand side of the hea­der ele­ment. Remo­ve or chan­ge the pad­ding to suit your requirements.

How to change the navigation colors?

In the Site Hea­der tab you are given color con­trols for the hea­der and the navi­ga­ti­on. The­se over­ri­de the colors set in the cus­to­mi­zer. To note: the colors in the cus­to­mi­zer will still app­ly to the Sti­cky Navigation.

How to use this header element on other pages?

If you want an exact copy of this hea­der then you can sim­ply add more pages, posts or tem­pla­tes to the Dis­play Rules. But see­ing as the home page would deser­ve some pret­ty spe­ci­fic head­lines, you pro­bab­ly want to make a copy of it and chan­ge the con­tent for your needs. Of cour­se you can do this manu­al­ly or use the Dupli­ca­te Post plugin – just make sure to edit the plugin set­tings and inclu­de Elements.

Item added to cart.
0 items - CHF 0.00