Merch Styling

The Home Page Con­tent

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­rate­Press edi­tor styles we now have a much bet­ter front end rep­re­sen­ta­ti­on whilst we are edi­t­ing. Allo­wing 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 Struc­tu­re

Let's begin with loo­king at the hier­ar­chy.

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

H2 Hea­dings

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 custom CSS using an Addi­tio­nal CSS Class of:

lar­ge-hea­ding

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 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­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 Cate­go­ries

Built using a Columns Block set to two columns. 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 columns 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 cate­go­ry

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

Custom Link Sty­ling

Hope­ful­ly you noti­ced the custom style link. This is achie­ved using custom 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 Pro­duc­ts

After our Tit­le Block we sim­ply add a Woo­com­mer­ce: Newest Pro­duc­ts Block. You can adjust the num­ber of pro­duc­ts 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 columns and rows shown by the block. Fil­te­ring your pro­duc­ts by taxo­no­my can also be app­lied.

Call to Action (CTA) Rows

Once again the Columns 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 columns. To get around this to dis­play une­qual sized columns we added some simp­le CSS Clas­ses.

Addi­tio­nal CSS ClassResul­ting style
for­ty-six­ty-columnsa 40% / 60% two column row
six­ty-for­ty-columnsa 60% / 40% two column row
mobi­le-column-rever­seRever­se the order of the two columns 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 edi­tor

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 sty­ling.

First off we need to make this row extend to the edge of the con­tai­ner ( out­si­de 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-columns
    a 60% / 40% two column row
  • column-ban­ner
    this makes necessa­ry pad­ding adjust­ments
  • cen­ter-ver­ti­cal
    ver­ti­cal­ly centring any con­tent pla­ced wit­hin one of the CTA Columns
  • bg-grey
    App­lies the grey back­ground color

Edi­t­ing 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.

Chan­ging the rows back­ground 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 choo­se.

Can i use a dif­fe­rent 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