Multiple Columns in Gutenberg

by Oct 2, 2023WordPress Tutorials - WP Tutorials, Gutenberg, WordPress Blocks

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

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.
Column Block in Gutenberg
  1. 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.
Multiple Columns in Gutenberg
  1. 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.
Adding Content to a Gutenberg Column
  1. 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.
Editing a Column Width in WordPress
  1. 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.
Column Block Settings
  1. 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.
Column Block Color Settings
  1. 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.
Re-ordering columns
  1. 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.
Removing a Column in Gutenberg
  1. 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.
Updating a post after setting the column block.

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.


Copyright ByRivers Tech LLC/ WP-Tutoring.Com All Rights Reserved.

  • Get Expert WordPress Help Right Now!

  • Please enter your phone number so we can fully discuss your needs.
  • This field is for validation purposes and should be left unchanged.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Access Our WordPress Training Academy Videos

View our FREE WordPress 6.4 Course.  Learn about the exciting new features available in this release!