{"id":12348,"date":"2018-01-29T14:53:27","date_gmt":"2018-01-29T19:53:27","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=12348"},"modified":"2021-10-19T10:00:54","modified_gmt":"2021-10-19T14:00:54","slug":"how-to-use-the-text-column-block-in-the-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-use-the-text-column-block-in-the-gutenberg-editor\/","title":{"rendered":"How to Use the Column Block in WordPress"},"content":{"rendered":"\n

When designing your website, you may find you want to display several elements in the same row. By default, each block will stack on top of each other in the WordPress editor. In this article we will show you how to create columns in WordPress using the Column Block and add content to those columns.<\/p>\n

How to Add a Column in WordPress<\/h2>\n
\n
Open the page or post you wish to edit.<\/li>\n
Click the Add Block button. There are two Add Block buttons, each is a + (plus) icon<\/strong>. One is above the title and one on the right side of the editor at the bottom of the page.
\n $\"Add$ <\/a><\/li>\n
Select Columns<\/strong> under the Design heading.
\n $\"WordPress$ <\/li>\n
Choose the Column Block layout you’d like to use. The WordPress editor will now show a + Add Block<\/strong> button in each column, like shown below.
\n $\"WordPress$
\n $\"Column$ <\/li>\n
Click one to select a Block to place in the column. You can only add one Block per column.
\n $\"WordPress$ <\/li>\n<\/ol>\n
How to Add Additional Columns in WordPress<\/h2>\n
To add another column to the row, hover between the columns and click the + button for Add Column<\/strong>.<\/p>\n
$\"Create$ <\/p>\n
Drag and Drop Columns in WordPress<\/h2>\n
You can also change the order of the columns.<\/p>\n
\n
Click in a column to bring up the toolbar.<\/li>\n
Click the icon with dots in 2 columns, as shown below.
\n $\"Drag$ <\/a><\/li>\n
Drag and drop the column into the new location.<\/li>\n<\/ol>\n
<\/p>\n
In our testing, the drag and drop functionality didn’t work consistently. It might be easier to use the arrow icons:<\/p>\n
\n
Click in a column to bring up the toolbar.<\/li>\n
Click the icon on the far left to Select<\/strong> Column<\/strong>.<\/li>\n
Use the arrows to move the column like shown below.<\/li>\n<\/ol>\n
$\"Swap$ <\/p>\n
<\/p>\n
If you are looking for a true drag and drop experience, check out our WordPress page builder<\/a>. You can create columns with multiple elements and all your content is drag and drop. You can move specific elements around like an image, or an entire column or row. Try for free now<\/a>!<\/p>\n
Adding Columns Using Block Patterns<\/h2>\n
A Block Pattern<\/strong> is a predefined layout created using multiple blocks. There are Block Patterns with columns available, and using one will cut down on your design time.<\/p>\n
\n
Click the + Add Block<\/strong> button.<\/li>\n
Click on Patterns.<\/strong><\/li>\n
In the dropdown, select Columns.
\n $\"WordPress$ <\/a>
\n<\/strong><\/li>\n
Click a layout to add it to the page.<\/li>\n<\/ol>\n
Example Column Block Patterns<\/h3>\n
Three columns of text<\/strong><\/p>\n
$\"Three$ <\/a><\/p>\n
Three columns of images and text<\/strong><\/p>\n
$\"Three$ <\/a><\/p>\n
Two columns of text and title<\/strong><\/p>\n
$\"Two$ <\/a><\/p>\n
Two columns of text with offset heading<\/strong><\/p>\n
$\"Two$ <\/a><\/p>\n
We hope you found this article helpful! Let us know in the comments below what else you’d like to learn how to do with columns in WordPress.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
When designing your website, you may find you want to display several elements in the same row. By default, each block will stack on top of each other in the WordPress editor. In this article we will show you how to create columns in WordPress using the Column Block and add content to those columns. […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Use the Column Block in WordPress | BoldGrid","bgseo_description":"In this article we show you how to create columns in WordPress using the Column Block. You can create a row with 2 or 3 columns.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[691],"class_list":["post-12348","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials","tag-gutenberg"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=12348"}],"version-history":[{"count":18,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12348\/revisions"}],"predecessor-version":[{"id":43953,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12348\/revisions\/43953"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=12348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=12348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=12348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

How to Add Additional Columns in WordPress<\/h2>\nTo add another column to the row, hover between the columns and click the + button for Add Column<\/strong>.<\/p>\n<\/p>\n

Drag and Drop Columns in WordPress<\/h2>\nYou can also change the order of the columns.<\/p>\n\nClick in a column to bring up the toolbar.<\/li>\n

Example Column Block Patterns<\/h3>\nThree columns of text<\/strong><\/p>\n

How to Add Additional Columns in WordPress<\/h2>\n
To add another column to the row, hover between the columns and click the + button for Add Column<\/strong>.<\/p>\n
$\"Create$ <\/p>\n