This is part of a series of posts in which we’ll take a look at some page layouts from established charity websites and see how we might go about recreating something similar using the native WordPress block editor.
This is for educational purposes only – copying other sites’ designs verbatim isn’t cool, and you should always aim to fit the design around your content, not fit your content into someone else’s pre-existing design.
The purpose of these posts is to demonstrate the flexibility of the default block editor and to show that with a few custom tweaks and a few types of content block created for your individual site, you can create a wide variety of layouts and designs.
Next up we’re looking at Save The Children (as of October 2023). Their site has the distinctive condensed font in uppercase, and the red and white colour scheme of the Save The Children branding.
Again, we’re not trying to exactly replicate this page, we’re looking at some of the different WordPress content blocks to see how they can be arranged and tweaked in order to produce something visually similar.
A lot of the images have that black on white highlighted button/link style overlaid on top. Using the default Cover block and giving it bit of custom styling we can achieve something similar, but you can’t make the Cover block a clickable link without an extra plugin like this and it’s not ideal. This is where you’d typically use a tool like ACF Blocks to create a custom type of block with Image, caption, link, and caption placement fields in order to output branded ‘cards’ like these. That’s a fairly straightforward job and it means you have much more control over how they’ll look across the site.
But for the purposes of this quick demo I’m just going to stick to using the Cover block for the sake of speed and to demonstrate what you can do ‘out of the box’. I’ve made a minor CSS coding tweak to get the captions to stick to the edge of the image.
The rest is relatively straightforward – it’s using a lot of Columns, Spacer, Divider, Heading and Group blocks.
Here’s my 10 minute recreation:
Here’s a video (no audio) of how the page is put together:
A few things to note from the video:
- I adjusted the line-height of the image captions/buttons so there would not be a gap between rows if it splits into two lines
- For the Columns blocks, I added in a lot more horizontal block spacing to add in more white space between the columns.
- To replicate the STC site where a lot of the centred content is quite narrow (which is better because a lot of it is just a title or a sentence and it looks better when thin) I put all that content inside a Group block and set a max-width of 570px for it.
- In the original STC site the ‘Emergencies’ ‘Around the world’ and ‘Our UK work’ columns are all centre aligned, but I’m not sure that centre-aligning columns of text looks nice if there’s more than 3-4 lines of text.
