In WordPress version 5.0, the Gutenberg editor was released that enables more options for WordPress users to edit and layout content. If you’re not used to or expecting this new editor it may ruffle some confusion feathers and stimulate some angry armpit hairs. But rest assured the Gutenberg editor is a step in the right direction for WordPress. Anyway, some new Gutenberg options include being able to add layouts using columns to put blocks and content side by side.
How to put blocks side by side in Gutenberg
To put blocks side by side in the Gutenberg WordPress editor, you first must add the columns block element. When editing a page or post, look for a black “+” box to add a new block element. In the side blocks menu, find or use the search box to find the columns block element to create the grid you need to put two blocks side by side.
Once you’ve added the columns block element by clicking the black “+” box, you can then choose between 1 of the 5 default column variations. To evenly put blocks beside each other we can use the 50 / 50 column variation.
If you chose to skip selecting a column block variation it will add the 50 / 50 column by default, effectively functioning the same as just selecting the first option (10/10 effort there WordPress).
From there your row for a column layout has been created. You can proceed to hover inside those columns and clicking “+” inside each column to add in any other block you chose. In my example, I’ll add in two heading blocks.
And just like that you have blocks side by side. Before in the old WordPress editor this would have required some custom HTML coding to setup elements side by side, but now with Gutenberg it can be some quite quickly.
If you feel Gutenberg doesn’t quite have enough functionality to achieve the layouts and styling you want, you can install the Advanced Gutenberg plugin to make Gutenberg on steroids. The plugin allows for many more blocks, styling, and color options that are not present in the default editor.
How to put blocks side by side in WPBakery/Visual Composer
If you are using the WP Bakery builder (formally known as Visual Composer in older versions) you can put blocks side by side by using the row block element. After adding in the row element look for the 3 lines on the top left to format the row into columns, as highlighted in yellow below.
After you click the format row button you can then select from any of the 12 row-column layout options. The 2 column layout (the second option) is what you can use to put 2 blocks side by side to fit the layout you desire. With these 12 default layouts, you can only have up to 6 columns which should be enough for 99% of cases. However, if you need a layout that one of the presets does not offer, you can make your own with the Custom button.
When you click the custom button it opens a small text box that allows you to manually type in the column size using fractions. So if for some reason you wanted to overwhelm users with a giant 12 column grid of screenshots from your favourite Shrek movie, you would type in the textbox “1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12” to make that 12 column layout.
How to put blocks side by side in Elementor
Elementor is a great WordPress page builder for making layouts and doing advanced styling quickly. Putting blocks side by side in Elementor is as dragging and dropping.
To begin edit the page or post you want to have side by side blocks with Elementor. Once you’re editing the page or post and have the dark gray side menu on the left, search for the Inner Section block element.
Drag and drop the Inner Section element onto a blank Elementor area to add the element to get the default 2 column layout.
You can begin to put your blocks side by side by clicking the “+” located in the columns or drag and drop another element from the left menu.
In conclusion, making elements beside each other is easy to do with any page builder your website has. There are many other website builders not mentioned in this post, but the putting blocks side by side in those is fundamentally the same – using columns. Be sure to share this post with your grandmother so she can know how to put elements beside each other in WordPress too because sharing is caring.
