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.
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.
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.
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.
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!