Merch Styling

Buil­ding the Home Page Hea­der

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 custom Navi­ga­ti­on loca­ti­on and colors. Get to know more about the Hea­der Ele­ment here:

The Mer­ged Site Hea­der Ele­ment

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 con­tent.

Page Hero Tab Set­tings

  • 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 con­tai­ned
  • 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 ele­ment.
  • Back­ground Image > Uses the Fea­tured Image and set to cent­red. The fea­tured images is dis­ab­led in the page con­tent.
  • 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 set­tings.

Site Hea­der Tab Set­tings

  • Mer­ge with Con­tent > Mer­ged
  • 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 hea­der.
  • 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 Cus­to­mi­zer.
  • Navi­ga­ti­on Loca­ti­on > Default
  • Navi­ga­ti­on Colors > Che­cked and back­ground is set to trans­pa­rent.

Dis­play 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 Dis­plays.

Fre­quent­ly asked ques­ti­ons

How to chan­ge the back­ground 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 chan­ge the Hea­ding and Sub hea­ding?

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

How to adjust the con­tain­ment 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 requi­re­ments.

How to chan­ge the navi­ga­ti­on 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 Navi­ga­ti­on.

How to use this hea­der ele­ment 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 Ele­ments.

    Kommentare sind geschlossen.

    Item added to cart.
    0 items - CHF 0.00