August 22, 2020

How to put blocks side by side in WordPress

WordPress Tutorials

the website architect

By

adding headings side by side in gutenberg

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.

editing side by side columns with wordpress

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.

selecting column size in gutenberg

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.

headings side by side in gutenberg

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.

selecting layout in wpbakery

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.

choosing column size in wpbakery

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.

making columns in wordpress elementor

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.

adding block beside each other in elementor

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.

By

the website architect profile picture

I'm The Website Architect, just another web developer in Toronto, Canada. I'm passionate about Web Design, WordPress, and anything to do with websites. My goal is to make the Internet a more beautiful and usable place, one design choice and website at a time.