Layout Elements Gutenberg Blocks
Any subjective notes on these block are our opinions and others may not agree. All features for various blocks may not have been tested here.
Layout Elements
- Layout Elements Blocks come with WordPress
Columns Block
- https://gogutenberg.com/blocks/columns/
- The columns block lets you create multi-column layouts within your content area, and include other blocks inside each column.
- Up to 6 columns are supported.
- Allows all kinds of blocks with columns.
- Columns are responsive so put in proper order.
- Good for displaying an image with text but be careful of order for phones.
- To set or change number of columns be sure column options show up above block(might have to click gear upper rt of page, then click between the up and down arrows, then click gear again to get editing tools on rt back), then can change number of columns in options on the rt.
- Leaves a lot of space between sets of columns.
Column 1
column 2
column 3
Spacer Block
- Can adjust space between blocks.
- Can change height of spacer
- space below is 50px high
Separator Block
- https://gogutenberg.com/blocks/separator/
- This puts a rule between blocks.
- 3 options default, wider rule or dot
- Color and animations options were added recently.
- Advanced Gutenberg separator has more options
Media and Text Block
- Part of block is one image and other part is paragraph(s).
- Change image size with blue dot when click on image. Smaller image spreads out text. Custom link isn’t working for image.
- Attractive block on laptop but gets distorted on phone, can set to stack on phone
- can add color background and alt text
- block height adjusts with image height
This area is for text but can add other block types
Button Block
- https://gogutenberg.com/blocks/button
- add link right in the block
- 6 styles for button
- text and background color options
- advanced Gutenberg buttons have more options
More Block
- https://gogutenberg.com/blocks/more/
- The read more block is used when you want to include a short introduction on your blog homepage & archive pages, and then link the reader to the remaining part of the article.
Group Block
- allows grouping of blocks with a background
- similar to a section block but fewer options
- can’t customize width
paragraph block in a group block, followwed by an image block
Page Break Block
- Separate your content into a multi-page experience.
- Useful for pages or blogs with a huge amount of content.
- There is another paragraph below this, it went to page 2. bottom of this page has page 1, 2