Layout Elements in Gutenberg for WordPress

Layout elements are used to help format the text or appearance of your post or page. Within Gutenberg, there is a set of blocks designated as layout elements.

These blocks include button, more, media & text, spacer, columns, button, page break and separator. This tutorial describes each layout element and what it does when applied to your page or post.

Layout Elements in Gutenberg for WordPress

Media & Text

The Media & Text  block lets you an image or audio/video element with text beside it. You can change its color and mobile device appearance.

Button

The Button block is used highlight a link or function that you wish to present to your viewers.  The button can have different colors, images, text, or short-codes added through the editor interface.

More

The More block is used in posts when you want to limit what is shown in an excerpt of the post. You would place the block after the text that you want to display in the excerpt. When the excerpt is displayed you will see a link that leads to the post labeled “Read more”.

Spacer

A Spacer is used to provide an empty space between elements within your post or page. The spacer can be adjusted in height by using the height adjust handles directly in the Gutenberg editor, or by adding a numerical value in pixels.

Text Columns

Gutenberg currently has two options for columns: Text Columns and columns. There are differences between the two though when you are working within your post.

Text Columns

If you apply a text column within your post you will see menu appear in the top left corner of the box that has the following options: Align center, Bold, Italic, Strikethrough, and link. You can add more columns by using the slider in the Block menu in the column at right.

Columns

If you select columns you do not get the menu in the top left, but the columns still apply to the formatting of your post. The main difference is location of the options for formatting the text and the column. If you click on one of the columns you will see the menu for the block change to the right. The menu includes:

• Text Settings small,medium, large, extra large, reset
• Custom size – slider to set size. You can also input a numerical value to set the size.
• Drop Cap – click on the slider to enable the text to have a larger initial letter.
• Background color – click on the drop-down menu and then select a color for the background of the column. Click on the last circle (bottom right) to select a custom color.
• Text color – click on the drop-down menu and then select a color for the text color in the column. Click on the last circle (bottom right) to select a custom color.

Page break

The Page break block allows you to separate your content into multiple pages.

More

The More block is used in posts when you want to limit what is shown in an excerpt of the post. You would place the block after the text that you want to display in the excerpt. When the excerpt is displayed you will see a link that leads to the post labeled “Read more”.

How to access the Layout Element Blocks

1. To use the element blocks you must be logged in to the WordPress Dashboard and editing (or adding a new) page or post with Gutenberg.
2. Click on the circled plus sign to the left of the area where you wish to add the block.
3. Scroll down until you see the Layout Elements option. Click on Layout Elements.
4. Select the Layout element that you wish to use.
5. When you are finished making changes to the layout element, click on Save Draft or Publish to save your changes.

Now that you know about Gutenberg and accessing different layouts, we would like to tell you a little bit about BoldGrid. The BoldGrid WordPress Website Builder Bundle also uses Blocks to create page and post content while also adds drag and drop functionality to make it easier than ever.