Multiple Columns in Gutenberg

With the Columns block, you can quickly and easily adjust your page’s layout.

https://vimeo.com/347848567

Adding multiple columns in the Gutenberg Block Editor

The Columns block in WordPress's Gutenberg editor is a versatile tool that lets you create column-based layouts for your content. Here's a step-by-step tutorial on how to use the Columns block and customize its options:

Step-by-Step Tutorial on Using the Columns Block in Gutenberg:

1. Adding the Columns Block:
   1. Create or edit a post/page in your WordPress dashboard.
   2. Click on the '+' button to add a new block.
   3. Use the search bar and type in "Columns" or scroll through the available blocks under 'Design' to find the 'Columns' block.
   4. Click on it to insert it into your post or page.

2. Selecting a Column Pattern:
   1. Once you've added the Columns block, Gutenberg might offer predefined column patterns (like two equally divided columns, or a smaller column on the left with a wider one on the right, etc.).
   2. Click on your desired pattern. If you don't select a pattern, Gutenberg will default to two equal columns.

3. Adding Content to Each Column:
   1. Click inside a column to add content.
   2. You can insert any type of block within a column (e.g., paragraphs, images, videos, etc.). Simply click the '+' button inside the column and choose your desired block.

4. Adjusting the Column Width:
   1. Select the column you'd like to adjust.
   2. An editing toolbar will appear at the top. Drag the column border left or right to adjust its width, or use the percentage slider in the block settings sidebar on the right.

5. Column Block Options & Settings:
   1. Click on the overall Columns block (not just an individual column) to see its settings in the right sidebar.
   2. Under 'Block', you'll see options like:
      • Columns count: Increase or decrease the number of columns.
      • Stack on mobile: Toggle this on to stack columns vertically on mobile views for better responsiveness.
   3. You can also adjust the vertical alignment of content within columns. For instance, you can align content to the top, center, or bottom.

6. Styling & Advanced Settings:
   1. With the Columns block selected, navigate to the right sidebar.
   2. Under 'Styles', you can set background colors and text colors.
   3. If you're familiar with CSS, under the 'Advanced' tab, you can add a CSS class for further styling.

7. Reordering Columns:
   1. Hover over a column.
   2. Use the up and down arrows in the toolbar to move the column's position left or right.

8. Removing a Column:
   1. Click on the column you want to remove.
   2. Click on the three dots (more options) in the toolbar and select 'Remove Block' from the dropdown.

9. Saving & Previewing:
   1. Once you're satisfied with your columns and content, click on 'Preview' to see how it looks live.
   2. If everything looks good, click 'Update' or 'Publish' to save your changes.

That's a basic introduction to using the Columns block in Gutenberg! With practice, you'll get more comfortable with the block and its various options, and you can create visually appealing layouts for your WordPress content.