What do web editors use a Text grid block for?

A text grid is a great way to organize information that involves user choices. You can provide a header, brief description of the choice or selection and a button to help the user understand their selection. This block automatically lines up the section headers and spaces the rows and columns to create a grid effect. You can choose how many columns (2-4) you want in the grid and whether or not you want a line between the rows.

Which layout can Text grid blocks be used in?

Text grid blocks can be used in the one or two column layouts. They can be placed on colour background and have colour accessibility built in. 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.

Who can use Text grid blocks?

Builders and Super Builder can create and edit Text grid blocks.

Step-by-step instructions

1. Choose “Text Grid” 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 text grid items. 
   • 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. Columns: This is where you can select the text grid to be auto formatted into one to four columns.
5. Divider: Option to add a divider line at the bottom of each text grid item.
6. Body: This is where you will add the text grid items. Each text grid item will allow you to add a header, body and button and will display in columns if you selected columns above.
   • Header: Optional header field within the text grid that will display above the body.
     • Header will be set as an H2 by default. Note: If you used a Header above the text grid items you will want to change this header to an H3.
   • 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 (T_x) on the top ribbon.  This will remove any unnecessary formatting copied over from a word doc or pdf file.
   • Button: This is where you have the option to add up to four buttons. Style options will change depending on the background colour chosen. 
     • For internal links: start typing the name of the page or media item (pdf) in the URL field and select the page you want to link to.
     • For external link: copy paste the external link.
     • Type in the link description into the link text field.
     • For external links or pdf files: click on attributes and select new window for the target.
7. Click on "Update" to save the block.