Example of Blocks Design

This page shows some examples of using blocks when creating a page. More uses three columns, and within each column, an icon block at 82px and some paragraphs of text. An alternative design might use images instead of icons, or a “cover” image block to combine image and text

Columns block

A columns block, containing three columns, each containing an icon block, heading block and some paragraphs of text.

Reusable blocks

This combination of columns, buttons and text for the BASP site, which was planned for the front page has been saved as a “reusable block” called “Front page icons (new)”. You will also find a saved “abstract submission button” saved as a reusable block a similar way.

Button blocks

Block options

You can change various settings for a block. These settings vary depending on type of block.

The settings for the button block allows you to select colour, fill type, rounded corners etc. If you don’t see the panel on the right of the editor with options for a block click the “cog icon” in the top right to show or hide the block options

Columns

Columns can block can be used as a design tool to show paragraphs, images, or various combinations of blocks side by side. This was used to create the three columns in the ‘front page icons block’ above.

Media and Text Block

But for a distinct section where there is an image, with some text to left or right, I would recommend the “Media and Text” block. This one gives nicest layout which adapts depending on the width of the screen, and allows easy swapping of text and image.

To add some text, click on the page, and start typing, or use the plus button and add a new paragraph block.

After making a heading, there is an option to select heading level H1 is already used by the main title of the page. Most headings will be the default H2 level. Some subheadings may be H3 or occasionally H4. This gives the page an accessible structure and consistent appearance.

Heading H2: Headings

Heading H3: Use real heading blocks

Please use real ‘heading blocks‘. Click plus, and add a heading block, or any existing paragraph can be converted into a heading.

Heading H4: Avoid using size as a substitute for headings

Please do avoid the temptation to write a heading by using a paragraph of text highlighted in bold, or to manually change the font size to make a fake heading. This makes for inconsistent heading sizes and less accessible website. Instead add a new heading block, or click on any existing paragraph of text and change it into a heading block.

Heading H4: Converting a paragraph to a heading

Existing line of text can be converted by clicking on the paragraph, and clicking on the “paragraph” symbol in the floating icon bar. This allows you to change an existing paragraph into a proper heading, or a list, or into various other predefined styles.

Back to H2 again: Lists

• Convert paragraphs to lists
• In a similar way
• Just like this

Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.

Tables

Tables include a couple of predefined styles, outline and stripes, and have options for turning on or off styling of top and bottom rows as heading and footer. Here is a table with outline, and a green baground.

Item	Cost
Widget cost	£70
Booking fee	£30
Tax	£20
Total	£120

Here’s a stripes table with headers and footers turned on

Item	Cost
Widget cost	£70
Booking fee	£30
Tax	£20
Total	£120

Using the Block path to access settings

Here we are nesting some blocks inside the cover block. Here we have added some “paragraph blocks”, and then a “button block” using the “plus” button.

When editing, you may find it hard to click and select the correct outer block. So, where you are using nested blocks, look out for the ‘path‘ of block types at the bottom of the editor page. eg.

“Document –> Cover –> Button Group –> Buttons”.

Clicking on the names of the types of blocks in the path at the bottom of the editor allows you to select from a nested set of blocks based on the current cursor position, and will allow you to access the settings in one of the outer blocks.

Animation

Many blocks have an “animation option” which provides some animated options to have a block or item slide or bounce into view (similar to powerpoint animation options). The animations are activated when the user scrolls down the page an. This animation option applies to many blocks.

Quotation Block