Column

Column

Column is a vertical structural elements which has some width and height. And in HTML structures, column is an essential common layout to make the grid layouts.

Pro tip
Column is always disloyal in responsive structures, make sure you check your grids before the submission.

How to use the Column Block of The Plus Addons For Gutenberg

The Column block comes with a simple layout with customized styling options, you can create a standard layout and other block layouts too for your websites.

Configuration for Column

Column adepts it’s height from the base row or div, but width is the main selection for it. Just select width and start putting structures in it.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Column into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Column after “/” sign, eg.“/Column”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Layout

Column Width

Select width of column in here. I prefer % over px.

Vertical Position

We have given the seven types of Vertical positions for the column. Select your desired type for the column. The types we provided are:

Default
Top
Middle

Bottom
Space Between
Space Around
Space Evenly

Horizontal Position

We have given the seven types of Horizontal positions for the column. Select your desired type for the column. The types we provided are:

Default
Left
Right
Center

Space Between
Space Around
Space Evenly

Block Space

You can set the space of the block using this option.

Credit : Gutenberg, WordPress

2. Style

The Style tab is used for customizing the appearance of all the Column Block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Background

Background

Apply suitable background like color/ gradient / image to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Credit : Gutenberg, WordPress

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.