Home Page Styling

2 January 2024

The home page is a special case compared to other pages created using the block editor. Three groups of content on this page have been styled by adding class names.

The three groups are called ‘Intro Block’, ‘Triple Links’ and ‘Working Groups’. The 3 lines icon at the top left of the WordPress editor reveals the list of blocks in use on the current page.

The style class on the Intro Block for example is shown in the advanced section of the block settings on the right-hand side. See the bottom right area where the class ‘home-intro’ has been added:

This class identifies this particular group as requiring a blue background, rounded corner and adjusted font sizes etc. Without this class the group will simply be displayed as an image and black text paragraphs on a white background. Because this block is only used once this is a more efficient route to styling than creating reusable blocks for the block editor – as shown in the other Docs/Help pages where you are reading this one!

The other two blocks on the home page for the 3 shortcuts and the working groups block have classes of ‘home-shortcuts’ and ‘home-workinggroups’ respectively.