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 1: Using the Gallery Block
- Method 2: Using the Columns Block
- Method 3: Using the Tableberg Block
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