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 プラス（＋）ボタン. Add it to the editor.

をクリックする。 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 ボタンをクリックする。

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.

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.

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.

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

を追加する。 列ブロック to your editor following the same method described above.

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.

を追加する。 イメージブロック by hitting the プラス（＋）ボタン within the 列ブロック.

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.

In the same way, add the イメージブロック again to the second column.

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.

Method Three: Using the Tableberg Block

テーブルバーグ 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 そして activating the plugin.

Step 01: Add the TableBerg Block

プラグインには テーブルバーグ・ブロック. Add it to your editor.

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

TableBerg allows you to add different types of blocks to the cells of the table. Add the イメージブロック to the table cells.

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

Keep adding images to other columns of the table using the イメージブロック. Hope you can do it alone.

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

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

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

結論

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.