How to Easily Put Images Side by Side in WordPress

When we first started blogging, getting images to line up often felt more frustrating than fun.

But we soon realized that placing images side by side isn’t just about making things look good—it actually helps readers understand and enjoy the content more.

Over time, we’ve picked up some simple techniques to make this process easier, and placing visuals next to each other has become one of our go-to ways to build beautiful photo galleries.

In this tutorial, we’ll walk you through two easy methods for displaying images side by side—one using the built-in WordPress block editor, and the other with the Envira Gallery plugin.

By the end, you’ll be able to improve your content layout and create a more engaging experience for your visitors.

Why Add Images Side by Side in WordPress?

Adding images side by side can enhance the visual appeal of your WordPress website by creating a more interesting layout.

Side-by-side images can also help make efficient use of your website space, allowing you to fit more visuals within a limited area.

For example, if you have a photography website, then arranging images side by side will help you make full use of your WordPress page by displaying pictures in an aesthetically pleasing way.

Additionally, sometimes, you may want users to compare two images on your WordPress blog. Placing them side by side will make it easier for people to analyze and understand the differences between the images.

Having said that, we’ll show you two easy ways to place images next to each other. The best method depends on what you need.

For most simple cases, the built-in WordPress block editor works perfectly. If you want to create more advanced photo galleries with extra features, then using a plugin is the better choice.

You can use the links below to jump to the method you prefer:

• Method 1: Add Images Side by Side in WordPress Using the Block Editor
• Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)
• Bonus: Align Images in WordPress
• Frequently Asked Questions About Adding Images Side by Side

Method 1: Add Images Side by Side in WordPress Using the Block Editor

If you are looking for a simple way to add images side by side using the Gutenberg block editor, then this method is for you.

The block editor offers a Gallery block functionality that lets you easily display images in rows and columns.

Step 1: Add the Gallery Block

First, you’ll need to create a new post/page or edit an existing one to open the content editor. Once you are there, click the ‘Add Block’ (+) button at the top left corner of the screen to open up the block menu.

From here, simply locate and add the Gallery block to the page or post.

Step 2: Upload Your Images

After that, you can easily add images to your gallery block from the computer by clicking the ‘Upload’ button.

You can also select images from your WordPress media library by clicking on the ‘Media Library’ button.

As you can see, we’ve added 2 images to our Gallery block, and WordPress has automatically positioned them side by side.

If you decide to add a third image, then you must click the ‘Add’ button from the block toolbar at the top.

This will open the media library from where you can add a third image to your Gallery block. Once you do that, you’ll see that WordPress has now simply resized the images to automatically place them side by side.

Step 3: Adjust the Gallery Columns

However, if you decide to place a fourth image in the Gallery block, it will be placed under the other images.

To fix this, you can change the number of columns for your gallery. This setting controls how many images will appear side-by-side in each row.

For instance, if you want two images side by side and two more beneath them, you can set the Columns to 2.

You can also crop images so that they align, adjust image sizes, link them to different pages, and change the background color from the block panel.

For detailed instructions, see our beginner’s guide on how to create an image gallery in WordPress.

Step 4: Publish Your Changes

Once you are done, don’t forget to click the ‘Update’ or ‘Publish’ button to store your changes.

Now, just visit your website to view the images side by side.

Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)

While the built-in Gallery block is perfect for simple layouts, you’ll need a plugin if you want to create more advanced photo galleries with features like beautiful lightboxes, albums, and social sharing options.

For this, we recommend Envira Gallery. It’s the best WordPress gallery plugin on the market, and in our experience, it’s incredibly easy to use while offering powerful features.

For more details about its features, you can take a look at our Envira Gallery review.

Step 1: Install and Activate Envira Gallery

First, you’ll need to install and activate the Envira Gallery plugin. For more details, check out our step-by-step guide on how to install a WordPress plugin.

Step 2: Create a New Gallery and Upload Images

Upon activation, head over to the Envira Gallery » Add New page from your WordPress dashboard.

Once you are there, you will have to give your new gallery a title. We’ve called ours ‘Example Gallery’.

After that, upload the images you want to use from the computer by clicking the ‘Select Files From Your Computer’ button.

To upload images from the media library, click the ‘Select Files from Other Sources’ button.

Step 3: Edit Image Metadata (Optional)

Once you’ve uploaded the images, scroll down to the Gallery section to view them.

From here, you can give your images a title and alt text.

The title appears when a user hovers over the image and also displays below the image in the lightbox, which is the full-screen pop-up view.

To edit the title and alt text, click the ‘Edit’ button on an image in the gallery.

You can then change the title of your image and enter alt text, which is helpful for your WordPress site’s SEO.

If your title describes the image, then you can simply repeat it for the alt text.

Once you are done, please make sure you click the ‘Save Metadata’ button before closing the window.

If you fail to do so, then any changes you made won’t be saved in the gallery.

Step 4: Publish Your Gallery

Finally, scroll back to the top of the page and click the ‘Publish’ button to save the image gallery you just created.

After that, head over to the WordPress page or post where you want to add it.

Step 5: Add the Envira Gallery Block to a Post or Page

Once you are there, click the ‘Add Block’ (+) button at the top left corner of the screen to open the block menu.

From here, locate and add the Envira Gallery block to the page/post.

Next, you’ll have to select the gallery that you created from the dropdown menu in the block itself.

Step 6: Configure Layout and Publish

To display the images in the gallery side by side, go to the block panel at the right corner of the screen.

From here, scroll down to the ‘Select Layout’ section and choose the number of columns from the dropdown menu. Your images will now be displayed side by side on the WordPress page.

You can also change the gallery margins, enable a beautiful animated filtering effect (known as Isotope), and configure lightbox settings from the block panel.

Once you are done, don’t forget to click the ‘Publish’ or ‘Update’ button to store your settings.

Now, you can visit your website to view the images displayed side by side.

The user can now click on any image to see the full-sized version in a lightbox.

Moreover, they can scroll through the images using the lightbox, too.

If you want to add more images to your gallery, then you can go back to it by visiting the Envira Gallery » All Galleries page in your WordPress dashboard.

Once you are there, simply click on the name of your gallery to edit it.

Any changes you make to your gallery will appear wherever you’ve placed it in your posts, pages, or sidebars. You don’t need to add it to these again.

Bonus: Align Images in WordPress

When you are adding two images side by side, they must align together to create a cohesive and visually appealing look.

Even if you are adding a single image to your WordPress blog, you will still want to align it with your content to create a visual balance.

You can easily align images in the WordPress block editor by clicking the ‘Align’ button in the toolbar above the block.

This will open some options from where you can shift your image to the right or left, make it the same width as the container, or use the full-width option so that the image’s width is the same as the rest of the page.

Other than that, you can also use the Column block to align your image with the content. To do this, you will have to select the 50/50 variation.

Once you do that, you can add an image block that perfectly aligns with your content.

Additionally, you can also wrap text around the image, use the group block, add the cover block, or do so much more to align images together or separately.

For more information, see our beginner’s guide on how to align images in the WordPress block editor.

Frequently Asked Questions About Adding Images Side by Side

Here are some questions that our readers have frequently asked about adding images side by side in WordPress:

How do I put an image and text side by side in WordPress?

The best way to place an image next to text is by using the Columns block.

First, add the Columns block and choose a layout, like 50/50. Then, you can add an Image block into one column and a Paragraph block into the other. This gives you a clean, side-by-side layout.

What is the best way to align images of different sizes side by side?

While the Gallery block is great for uniform images, the Columns block offers more flexibility for different sizes. You can use it to create a 70/30 or other custom layouts.

For more advanced control, a plugin like Envira Gallery allows you to create custom grids that can handle various image dimensions gracefully.

Will my side-by-side images stay next to each other on mobile devices?

Typically, no. Most modern WordPress themes are responsive, which means that image blocks placed side-by-side on a desktop will automatically stack vertically on smaller screens.

This is done to ensure the images are large enough to be seen clearly on a phone, providing a better user experience.

We hope this tutorial helped you learn how to put images side by side in WordPress. You might also want to go through our guide on how to change block height and width in WordPress and our guide on adding tables in WordPress posts and pages.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.