From this quick overview, you will find out more about the Gutenberg editor Columns block. We will also learn how to customize this block.
Let’s start it with a quick take-a-look 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.
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.
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.
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.
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.
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.
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.
Starting with the image element, you can choose one of the styles: default, which repeats the default image size, or rounded.
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.
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.
As a last step, you can traditionally add an advanced option – additional CSS class for the Gutenberg editor Column block.
We hope you liked our simple and quick Gutenberg editor Columns block overview. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!