The Home Page Content

Aside of the Head­er Ele­ment the entire home page con­tent is built with the Block Edi­tor ( a.k.a. Guten­berg). Com­bined with Gen­er­atePress edi­tor styles we now have a much bet­ter front end rep­re­sen­ta­tion whilst we are edit­ing. Allow­ing each ele­ment to be giv­en spe­cif­ic styles and Addi­tion­al CSS class­es means we don’t have to stray into HTML very often. In fact on this Site we nev­er do.

Page Structure

Let’s begin with look­ing at the hierarchy.

• Head­er Ele­ment — This is cov­ered in this arti­cle
• H2 Head­ings
• Shop Cat­e­gories
• Lat­est Products
• Call to Action Row — forty / six­ty split
• Call to Action Row — six­ty / forty split
• Sale Prod­ucts
• Sign Up
• GP Foot­er — The default Theme widgets

H2 Headings

For our land­ing page I want­ed some big bold H2 head­ings. Larg­er than what we have spec­i­fied in our Cus­tomiz­er. But also make them super respon­sive. To make this hap­pen I cre­at­ed some cus­tom CSS using an Addi­tion­al CSS Class of:

large-head­ing

Sim­ply select your Head­ing Block, make sure it’s a H2, open the Advanced Drop­down in the Set­tings Side­bar and add the class to Addi­tion­al CSS Class field. Please note: You won’t see the style change in the edi­tor. Like all CSS you will find it in the Cus­tomiz­er > Addi­tion­al CSS. It looks like this

h2.large-heading {
    font-size: calc(28px + (86 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

So this looks com­pli­cat­ed but is what pro­vides the respon­sive con­trols. If you want more infor­ma­tion on what this all means then check out Respon­sive And Flu­id Typog­ra­phy With vh And vw Units

Shop Categories

Built using a Columns Block set to two columns. Each col­umn con­tains an Image, Head­ing, Text and link block. Noth­ing fan­cy and real sim­ple to edit. Adding addi­tion­al columns can be done from the Col­umn Set­tings. Cre­at­ing addi­tion­al rows is sim­ply a case of dupli­cat­ing the exist­ing one. 

Making the image link to the category

Images Set­tings have a Link to Option. Just set the Link to: Cus­tom URL and add your cat­e­go­ry link

Custom Link Styling

Hope­ful­ly you noticed the cus­tom style link. This is achieved using cus­tom CSS. To add this style to any of your in con­tent links just give the block an Addi­tion­al CSS Class of: loud-link

Latest Products

After our Title Block we sim­ply add a Woocom­merce: Newest Prod­ucts Block. You can adjust the num­ber of prod­ucts dis­play using the Block set­tings. This is achieved at the same time as defin­ing your lay­out. Sim­ply adjust the num­ber of columns and rows shown by the block. Fil­ter­ing your prod­ucts by tax­on­o­my can also be applied.

Call to Action (CTA) Rows

Once again the Columns Block comes into play. Out of the box there is no way to adjust the col­umn widths. So with­in the edi­tor you’re stuck with equal­ly sized columns. To get around this to dis­play unequal sized columns we added some sim­ple CSS Classes. 

Addi­tion­al CSS Class	Result­ing style
forty-six­ty-columns	a 40% / 60% two col­umn row
six­ty-forty-columns	a 60% / 40% two col­umn row
mobile-col­umn-reverse	Reverse the order of the two columns on mobile. Add this class along with one of the above.

Please note: these class­es do not apply the styles with­in the editor

Sign Up

The Sign Up form is pro­vid­ed by the Hap­py Forms plu­g­in. The form is added to the sec­ond col­umn using a Short Code wid­get. The short code for your form is found in the Dash­board > Hap­py Forms. A com­mon design is to use these types of CTA to break up a page. To do this we have giv­en it our own spe­cial styling.

First off we need to make this row extend to the edge of the con­tain­er ( out­side of the con­tent padding). This is done sim­ply by select­ing the Align Wide option from the Block tool­bar. The rest requires some famil­iar CSS from our CTA Rows and a lit­tle extra. here are the class­es it uses:

• six­ty-forty-columns
  a 60% / 40% two col­umn row
• col­umn-ban­ner
  this makes nec­es­sary padding adjustments
• cen­ter-ver­ti­cal
  ver­ti­cal­ly cen­tring any con­tent placed with­in one of the CTA Columns
• bg-grey
  Applies the grey back­ground color

Editing the Form

The form can be edit­ed from the Dash­board > Hap­py Forms. If you cre­ate a new form you will need to update the short-code used on the front page. 

Changing the rows background color

Go to the Cus­tomiz­er > Addi­tion­al CSS ( or to your Child Theme Style sheet if you have moved it). And edit this CSS:

.bg-grey {
    background-color: #f2f3f4;
}

You can of course sim­ply cre­ate your own class­es with more rel­e­vant names for the col­ors you choose.

Can i use a different form?

Of course. If you want to use anoth­er form plu­g­in then sim­ply go about set­ting that up and replac­ing the short code with your new one.