Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

WordPress Columns Block for Gutenberg Overview

ABOUT THE AUTHOR

I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

File Widget WordPress for Gutenberg Editor
Prew post
  • Feb 25, 2020
  • 3 min read
  • 343

WordPress Columns Block for Gutenberg Overview

From this quick overview, you will find out more about the WordPress Columns block for Gutenberg editor. We will also learn how to customize this block.

Let’s start it with a quick survey of the responsive columns in WordPress. When you’ve clicked on the “+” icon and added a block, you become able to choose between 5 layout variations.

If you have chosen two columns of different sizes, you’re probably looking forward to creating a page with the main part and a sidebar. You may also select a three-columned layout as well.

add a WordPress Columns Block

You can also choose the two equal columns, in case you are going to divide your page into the two main parts. That’s what we are going to do in this overview. It can work with the product items page, where one side is a products’ layout and the other is a sidebar.

add two columns

Additionally to the layout, you can pick the alignment. However, keep in mind that the alignment will be applied only to the Gutenberg editor Columns block. You can make the block full-width as well.

set alignment

As an example, take a look at the Columns tab, where you can set a number of Columns in your block. We will come back to the two columns later.

two more columns

Coming back to the customization sidebar, here’s one more tab to set some options for the responsive columns WordPress plugin. In the Color settings tab, you can choose the text color and the color of the column’s background.

choose the background color

Adding Elements Inside the WordPress Columns Block

Now let’s start adding new blocks inside the Gutenberg editor Column block. To cut a long story short, you may add any internal block you want. In our example, we’ve chosen the Paragraph block, accompanied by the Image block.

add a paragraph inside

That is how your responsive Columns WordPress block will look with no customization. To make your section look more stylish, you can edit each of the inner elements separately.

WordPress Columns Block

Starting with the image element, you can choose one of the styles: default, which repeats the default image size, or rounded.

style up the image inside WordPress Columns Block

In the Image settings tab, you can write down an Alt text, which is quite important if you want to increase the traffic of your website. Set image size and its dimensions.

set the alt text

As for the text inner block, here everything is also quite simple. All the text settings are available: font size, text color, the color of the background and the opportunity to set a drop cap.

set the text color

As a last step, you can traditionally add an advanced option – additional CSS class for the Gutenberg editor Column block.

add css class for WordPress Columns Block

The Column block can be used as a parent element for any other block. Keep in touch with our latest updates and tutorials and learn more about Gutenberg blocks!

3
Appreciate
WordPress Button Widget - Detailed Overview
Next post
File Widget WordPress for Gutenberg Editor
Prew post
WordPress Button Widget - Detailed Overview
Next post

Get Gutenix Subscription

Create unlimited websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.