Page Design: Columns, Spacer, etc.

Introduction #

WordPress has several features that allow content creators to maximise the impact of their work. This guide contains details of the following features:

Columns #

WordPress allows the use of columns. This allows pages to be laid out in multiple columns, as is commonly found in newspapers etc. However, care must be taken to ensure readability is maintained. The use of columns is recommended if you are laying out a page in a “tabular style”

From the block editor select Columns, and from the options select either a one, two or three-column layout. If more than three columns are required, an additional plugin will be required.

If the 33/33/33 option is selected, the result is:

The Column toolbox gives the following options from left to right:

  • Select the parent Columns block.
  • Move the column
  • Align the columns
  • Other options

It should be noted that it is possible to stack columns on a mobile device, using the option in the Settings Toolbar

Once the basic column layout is selected, text and images can be entered into each column by using the block editor. In the editing view, an empty column is highlighted as a dotted box as shown above.

In the above example, three columns of equal size are shown, where:

  • Column one contains an image above a Paragraph block.
  • Column two contains a button, linking to a group page
  • Column three, a two × two table

The options that can be applied to a column include:

  • Settings:
    • If blocks are nested with a column, the content width of the nested blocks can be controlled.
    • Adjust the width and justification.
  • Style
    • Text and background colour
    • Padding and margin adjustment
    • Addition of a block border

The Column (i.e., child) Block Toolbar can be accessed from the Columns (I.e., parent) block toolbar as required.

Spacer #

The Spacer block, allows authors to place a white block into the text to aid the reader. In the editing view example below, a spacer (100px in depth) is being added between two paragraphs. White space should not be considered wasted space, but an important addition to readability.

The Spacer block’s height can be controlled by using the settings sidebar.

Separator #

The Separator block allows a fixed-width line to be placed between blocks, the line, can either be short or wide and in any colour of the u3a palette. A separator can be used to separate ideas within a piece of text, to improve readability. By selecting Dimensions in the style sidebar, the wide space above and below the line can be adjusted either linked or separately, as shown below three separator options are available:

The three separator options, from top to bottom, Default, Wide and Dot

Page Break #

In a limited number of cases a page may become excessively long, for example, a report of a meeting or a visit report, and for ease of viewing you wish to split it into two or more pages. While a number of separate WordPress pages could be authored and linked together, a more convenient approach, for both the visitor and author is to use the Page Break block. This block effectively splits the single page into multiple sub-pages for the visitor. If the page break is inserted, the following is displayed:

By selecting 2, the visitor is taken to the second part of the page, in addition, the visitor can toggle between the “pages” with ease

What are your feelings
Updated on 20/12/2023