Text block

What do web editors use a text block for?

Text blocks are used for simple blocks of text on a basic page. 

Which layout can text blocks be used in?

Text blocks can be used in any one to four column layout and on a coloured background. If you move blocks or change the background colour after a block has been place, remember to update the block to reset the accessibility colours.

This block has a secondary text auto flow option to give the appearance of being in a multi-column layout when still in a one column layout. By default the content will be displayed in one column but you can split the text into multiple columns automatically without using a multi-column layout. Text will automatically flow to fill the number of columns specified. If you want specific chunks of text split in a specific way it will be best to use text blocks in multi-column layouts.

Who can use text blocks?

Builders and Super Builder can create and edit text blocks.

Text block tutorial Text block examples

Text block tutorial

Step-by-step instructions

  1. Choose “Text” in the add custom blocks menu.
  2. Title: This is an administrative title that will be used to identify the block and not displayed on the website. 
  3. Header: The is an optional field to display a header above the body text. 
    • Header will be set as an H2 by default but you have the option to change it. Note: Only use H1 if this is being used as a header/title for the page. H2 for any section header. H3 to break up content within the section. Never mix and match header sizes, this will confuse screen readers and make the site less accessible.
    • You will have a choice of heading colours depending on the choice of background colour selected. 
  4. Body: This is an optional field to display a chunk of text using a WYSIWYG (what-you-see-is-what-you-get) text editor where you can type or copy paste text into. If you copy paste make sure you always clean the formatting after you paste. Do this by highlighting the text and clicking on the clear formatting icon (Tx) on the top ribbon.  This will remove any unnecessary formatting copied over from a word doc or pdf file.
  5. Text Colour: You can change the text colour depending on which background colour you are using. Try not to mix and match too many colours - only use this to highlight a piece of text.
  6. Columns: This is where you can select 2-4 columns for the text to automatically flow into columns. 
  7. Click on "Add block" or "Update" to save the block.

Text block example - One column layout

Praesent lobortis lacus vestibulum, venenatis nisi sed, malesuada odio. Aenean quis rhoncus diam. Integer non euismod est. Mauris placerat purus metus, quis pulvinar tellus vulputate nec. Praesent fermentum ultrices metus et dictum. 

Text block example - Two column autoflow

Praesent lobortis lacus vestibulum, venenatis nisi sed, malesuada odio. Aenean quis rhoncus diam. Integer non euismod est. Mauris placerat purus metus, quis pulvinar tellus vulputate nec. Praesent fermentum ultrices metus et dictum. Donec id blandit libero, a varius nisi. Vivamus iaculis dui eget tempus commodo. Sed purus arcu, efficitur eu dictum id, dictum non nibh. Quisque sapien est, maximus tincidunt molestie in, facilisis at turpis. Nullam mollis, sem id eleifend tristique, augue ante hendrerit urna, quis faucibus diam massa quis urna. Mauris odio sem, ultrices non pretium vitae, luctus a neque. Curabitur rutrum in dui interdum semper. In lobortis, lectus id fermentum molestie, nisl erat varius leo, vel luctus elit erat sit amet dui. Mauris venenatis dapibus dolor at molestie. Mauris tempor efficitur justo vel tincidunt.

Text block example - Three column autoflow

Praesent lobortis lacus vestibulum, venenatis nisi sed, malesuada odio. Aenean quis rhoncus diam. Integer non euismod est. Mauris placerat purus metus, quis pulvinar tellus vulputate nec. Praesent fermentum ultrices metus et dictum. Donec id blandit libero, a varius nisi. Vivamus iaculis dui eget tempus commodo. Sed purus arcu, efficitur eu dictum id, dictum non nibh. Quisque sapien est, maximus tincidunt molestie in, facilisis at turpis. Nullam mollis, sem id eleifend tristique, augue ante hendrerit urna, quis faucibus diam massa quis urna. Mauris odio sem, ultrices non pretium vitae, luctus a neque. Curabitur rutrum in dui interdum semper. In lobortis, lectus id fermentum molestie, nisl erat varius leo, vel luctus elit erat sit amet dui. Mauris venenatis dapibus dolor at molestie. Mauris tempor efficitur justo vel tincidunt.

Text block example - Four column autoflow

Praesent lobortis lacus vestibulum, venenatis nisi sed, malesuada odio. Aenean quis rhoncus diam. Integer non euismod est. Mauris placerat purus metus, quis pulvinar tellus vulputate nec. Praesent fermentum ultrices metus et dictum. Donec id blandit libero, a varius nisi. Vivamus iaculis dui eget tempus commodo. Sed purus arcu, efficitur eu dictum id, dictum non nibh. Quisque sapien est, maximus tincidunt molestie in, facilisis at turpis. Nullam mollis, sem id eleifend tristique, augue ante hendrerit urna, quis faucibus diam massa quis urna. Mauris odio sem, ultrices non pretium vitae, luctus a neque. Curabitur rutrum in dui interdum semper. In lobortis, lectus id fermentum molestie, nisl erat varius leo, vel luctus elit erat sit amet dui. Mauris venenatis dapibus dolor at molestie. Mauris tempor efficitur justo vel tincidunt.

Four column layout

Title H3

Nullam bibendum nulla turpis, vel dapibus orci bibendum sed.

Title H3

Nunc in ante pretium, mollis tellus ut, pulvinar neque.

Title H3

Suspendisse nec libero id felis luctus consectetur.

Title H3

Mauris sit amet consequat mi, eu vestibulum mauris. 

Two column layout

Text block in the 70% column

Proin a placerat ex. Fusce ac eros id tellus pellentesque interdum. Vestibulum ac sem imperdiet, iaculis arcu a, finibus nulla. Sed tempor tellus in mauris varius finibus. Nulla luctus, nibh sed vehicula accumsan, massa tellus aliquet mauris, tincidunt posuere orci odio non leo. Duis semper quam nulla, in maximus sapien sagittis quis. Duis tincidunt nunc id mauris placerat, sed venenatis libero ultricies. Suspendisse vehicula maximus egestas

Buttons in the 30% column

Add a button here Add another button

Text elements and styling

This is just a placeholder headline. (H1, default styling)

This is just a placeholder headline. (H2, default styling)

This is just a placeholder headline. (H3, default styling)

This is just a placeholder headline. (H4, default styling)

This is just a placeholder headline. (H5, default styling)
This is just a placeholder headline. (H6, default styling)

This is just a placeholder headline. (H1, OC Red Header)

This is just a placeholder headline. (H2, OC Red Header)

This is just a placeholder headline. (H3, OC Red Header)

This is just a placeholder headline. (H4, OC Red Header)

This is just a placeholder headline. (H5, OC Red Header)
This is just a placeholder headline. (H6, OC Red Header)

This is just a placeholder headline. (H1, OC White Header)

This is just a placeholder headline. (H2, OC White Header)

This is just a placeholder headline. (H3, OC White Header)

This is just a placeholder headline. (H4, OC White Header)

This is just a placeholder headline. (H5, OC White Header)
This is just a placeholder headline. (H6, OC White Header)

This is just placeholder text. (default style)

This is just placeholder text. (Font size 18)

This is just placeholder text. (Font size 20)

This is just placeholder text. (Font size 22)

This is just placeholder text. (Font size 24)

This is just placeholder text. (Font size 26)