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.
This time we’re looking at the Shelter site, as of October 2023. Like the first two it’s actually quite a simple layout and I wouldn’t say that the design of it is particularly finessed but they are easy to use and accessible. I’m sure they change their content and layouts a lot and therefore having a setup that’s very flexible is preferable to something that looks pixel-perfect but is a pain to alter.
Here’s what it looks like:
There’s a couple of bits and bobs in there that would require a bit of custom code to tweak the layout of the default WordPress blocks – namely the negative top margins on the red arrow and the call-to-action blocks:
Having a few elements that break out of their containers like that makes the design feel a bit more dynamic and interesting. It’s a fairly common design feature but it’s not always very compatible with Content Management Systems (CMSs) that have to cater for a wide variety of users and skill levels. At the time of writing, WordPress blocks don’t allow negative margins because that might lead to a bit too much chaos, so for the time being I’ll just add a bit of CSS code via the Customizer to add in a negative margin-top to those elements.
There’s a couple of forms in there – a tiny donation one and an email newsletter signup. I’ll use GravityForms for those, but you could use any of the other popular WordPress form builder plugins.
If you’ve gone through the first couple of posts in this series then you’ll hopefully see that the trusty Media & Text and Columns blocks can get us most of the way there:
MEDIA & TEXT
FULL WIDTH GROUP [Heading, Paragraph]
PARAGRAPH
IMAGE (WIDE WIDTH)
COLUMNS [ 3 columns with simple paragraph links in ]*
FULL WIDTH GROUP [Media & Text]
COLUMNS [ 2 columns, Paragraph in first, Paragraph and Gravity Form in second]
FULL WIDTH GROUP [ 4 columns – Heading, Separator, Paragraph | 3 x Image, Paragraph, Paragraph ]
COLUMNS [2 columns – Paragraphs, Gravity Form]
* This isn’t necessarily the best way of doing this and wouldn’t look so good on a mobile. You would add them all as one list and use the column-count CSS property to do this properly, but that requires a bit more specialist coding knowledge than the average WordPress user might have
Here’s my version that I made in 10 minutes:
My 10 minute version hasn’t paid much attention to the mobile version. Although it probably looks OK as it is, it could definitely be tweaked.
