How to Put Images Side by Side in WordPress (3 Ways)

Visual content plays a crucial role in capturing the attention of online users. What a single image can convey often requires hundreds of words. Besides, images can evoke emotions and enhance the overall aesthetics.

One effective way to showcase images is by placing them side by side. This technique is particularly helpful in comparing multiple products, presenting before and after images, and telling a story.

In this article, we’ll show you three easy ways how to put images side by side in WordPress.

Method One: Using the Gallery Block

WordPress comes with the default Gallery block. You can present images side by side with the block in the following ways.

Step 01: Add the Gallery Block to WordPress

Simply open a post or page. Find the Gallery block in the Gutenberg block library by pressing the plus (+) button. Add it to the editor.

Find and add the Gutenberg Gallery block to WordPress

Click the Upload button to add fresh images from your local storage to the side. Or, you can upload them from your existing files by clicking the Media Library button.

Upload images from local storage or media library

For this tutorial, we’ll upload images from the Media Library. Select the images you want to add. Hit the Create a new gallery button at the end.

Create a new gallery

Once images are added to the editor, you’ll see them appearing side by side. Next, you can customize the settings and stylizations of the Gallery block using the respective options on the right sidebar.

Images displayed side by side using the Gutenberg Gallery block

Note: If your images are not displayed side by side by default, select the entire block by clicking the Gallery icon on the toolbar. Specify the column numbers on the right sidebar.

Set column number for the Gallery block

Method Two: Using the Columns Block

The Column block allows you to divide your content into multiple columns. You can add other blocks to add different types of content within each column.

Step 01: Add the Column Block to Your Site

Add the Column block to your editor following the same method described above.

Add the Column Block to Your Site

Select the column layout as you like. You can display an equal number of images side by side, corresponding to the number of columns you add. We’ve selected the two-column layout for the block.

Select a column layout

Add the Image block by hitting the plus (+) button within the Column block.

Add the Image block to the Column block

Upload an image the same way we showed you above.

Note: As this is the Image block, you can add only one image, unlike the Gallery block.

Upload image to the column block

In the same way, add the Image block again to the second column.

Add multiple images to the column block

You can see the second image has appeared next to the first one. You can now add alternative texts and other settings for the images one by one.

Multiple images are displayed using the column block

Method Three: Using the TableBerg Block

TableBerg is a block-based table-builder plugin. Using it, you can also create columns and display images side-by-side. Follow the steps explained below after installing and activating the plugin.

Install and activate the TableBerg plugin

Step 01: Add the TableBerg Block

The plugin comes with a TableBerg block. Add it to your editor.

Add the TableBerg block to your post or page

You may select multiple rows if you want. But we’ll explain today’s tutorial with a single row and multiple columns.

Select a row and columns for the table

TableBerg allows you to add different types of blocks to the cells of the table. Add the Image block to the table cells.

Add the image block to the TableBerg cells

Upload an image to the table cell the same way we showed you in the above two methods.

Upload image to the table

Keep adding images to other columns of the table using the Image block. Hope you can do it alone.

Keep adding images to other columns of the table

See the image below. We have displayed three images side by side within the table created with the TableBerg block.

Images displayed side by side with the TableBerg table

# Remove the table border

You can see a border around the table. To remove it, click the TableBerg icon three times on the toolbar. Go to Styles tab > Border on the right sidebar. Put the value zero (0) to define the table border size.

Remove the table border

Thus, you can display images side by side on WordPress websites.

Conclusion

Showing images side by side is highly advantageous, whereas visual comparison between different products, options, features, and variations is essential. Hope you can do it alone today with this tutorial.

You can do more on your site by creating different types of tables using the TableBerg plugin. Take a look at how to create Amazon product comparison table in WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

Early Bird Offer Is Live Now!
This is default text for notification bar