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.
Create Beautiful Tables
With Block Editor
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.
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.
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
Add the Column block 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.
Add the Image block by hitting the plus (+) button within 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.
In the same way, add the Image block 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
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.
Step 01: Add the TableBerg Block
The plugin comes with a 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 Image block 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 Image block. 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.
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.
