Merch Styling

The Home Page Content

The home page content is built using the WordPress 5 Block editor a.k.a Gutenberg. It uses only Core Blocks and Woocmmerce Blocks. And as would be expected a little CSS has been thrown in.

Asi­de of the Hea­der Ele­ment the ent­i­re home page con­tent is built with the Block Edi­tor ( a.k.a. Guten­berg). Com­bi­ned with Gene­ra­te­Press edi­tor styles we now have a much bet­ter front end repre­sen­ta­ti­on whilst we are edi­t­ing. Allowing each ele­ment to be given spe­ci­fic styles and Addi­tio­nal CSS clas­ses means we don’t have to stray into HTML very often. In fact on this Site we never do.

Page Structure

Let’s begin with loo­king at the hierarchy.

  • Hea­der Ele­ment – This is cove­r­ed in this arti­cle
  • H2 Hea­dings
  • Shop Cate­go­ries
  • Latest Pro­ducts
  • Call to Action Row – for­ty / six­ty split
  • Call to Action Row – six­ty / for­ty split
  • Sale Pro­ducts
  • Sign Up
  • GP Foo­ter – The default The­me widgets

H2 Headings

For our lan­ding page I wan­ted some big bold H2 hea­dings. Lar­ger than what we have spe­ci­fied in our Cus­to­mi­zer. But also make them super respon­si­ve. To make this hap­pen I crea­ted some cus­tom CSS using an Addi­tio­nal CSS Class of:


Sim­ply select your Hea­ding Block, make sure it’s a H2, open the Advan­ced Drop­down in the Set­tings Side­bar and add the class to Addi­tio­nal CSS Class field. Plea­se note: You won’t see the style chan­ge in the edi­tor. Like all CSS you will find it in the Cus­to­mi­zer > Addi­tio­nal CSS. It loo­ks like this

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

So this loo­ks com­pli­ca­ted but is what pro­vi­des the respon­si­ve con­trols. If you want more infor­ma­ti­on on what this all means then check out Respon­si­ve And Flu­id Typo­gra­phy With vh And vw Units

Shop Categories

Built using a Colum­ns Block set to two colum­ns. Each column con­tains an Image, Hea­ding, Text and link block. Not­hing fan­cy and real simp­le to edit. Adding addi­tio­nal colum­ns can be done from the Column Set­tings. Crea­ting addi­tio­nal rows is sim­ply a case of dupli­ca­ting the exis­ting one. 

Making the image link to the category

Images Set­tings have a Link to Opti­on. Just set the Link to: Cus­tom URL and add your cate­go­ry link

Custom Link Styling

Hope­ful­ly you noti­ced the cus­tom style link. This is achie­ved using cus­tom CSS. To add this style to any of your in con­tent links just give the block an Addi­tio­nal CSS Class of: loud-link

Latest Products

After our Tit­le Block we sim­ply add a Woo­com­mer­ce: Newest Pro­ducts Block. You can adjust the num­ber of pro­ducts dis­play using the Block set­tings. This is achie­ved at the same time as defi­ning your lay­out. Sim­ply adjust the num­ber of colum­ns and rows shown by the block. Fil­te­ring your pro­ducts by taxo­no­my can also be applied.

Call to Action (CTA) Rows

Once again the Colum­ns Block comes into play. Out of the box the­re is no way to adjust the column widths. So wit­hin the edi­tor you’­re stuck with equal­ly sized colum­ns. To get around this to dis­play une­qual sized colum­ns we added some simp­le CSS Classes. 

Addi­tio­nal CSS ClassResul­ting style
for­ty-six­ty-colum­ns a 40% / 60% two column row
six­ty-for­ty-colum­ns a 60% / 40% two column row
mobi­le-column-rever­se Rever­se the order of the two colum­ns on mobi­le.
Add this class along with one of the above.

Plea­se note: the­se clas­ses do not app­ly the styles wit­hin the editor

Sign Up

The Sign Up form is pro­vi­ded by the Hap­py Forms plugin. The form is added to the second column 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 the­se types of CTA to break up a page. To do this we have given it our own spe­cial styling.

First off we need to make this row extend to the edge of the con­tai­ner ( out­side of the con­tent pad­ding). This is done sim­ply by selec­ting the Align Wide opti­on from the Block tool­bar. The rest requi­res some fami­li­ar CSS from our CTA Rows and a litt­le extra. here are the clas­ses it uses:

  • six­ty-for­ty-colum­ns
    a 60% / 40% two column row
  • column-ban­ner
    this makes necessa­ry pad­ding adjustments
  • cen­ter-ver­ti­cal
    ver­ti­cal­ly cent­ring any con­tent pla­ced wit­hin one of the CTA Columns
  • bg-grey
    App­lies the grey back­ground color

Editing the Form

The form can be edi­ted from the Dash­board > Hap­py Forms. If you crea­te 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­to­mi­zer > Addi­tio­nal CSS ( or to your Child The­me Style sheet if you have moved it). And edit this CSS:

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

You can of cour­se sim­ply crea­te your own clas­ses with more rele­vant names for the colors you choose.

Can i use a different form?

Of cour­se. If you want to use ano­t­her form plugin then sim­ply go about set­ting that up and repla­cing the short code with your new one.

Item added to cart.
0 items - CHF 0.00