Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Put Images Side by Side in WordPress (Easily)

Do you want to put images side by side in your WordPress content?

Often beginners struggle to find how to put two pictures next to each other in their WordPress posts and pages.

In this step by step guide, we will show how to easily put images side by side in WordPress (without writing any code).

Putting images side by side in WordPress

Using the Block Editor to Put Images Side by Side

The easiest way to get your images side by side is to use the WordPress block editor.

The block editor has a special ‘Gallery’ block that lets you display images in rows and columns.

First, you’ll need to create a new post / page or edit an existing one to open the content editor. Once inside, click the (+) symbol to add a new block.

Creating a post and adding a block to it

Next, you need to select the Gallery block and add it to your page. You can find the Gallery block in the Common Blocks section, or you can use the search bar to quickly locate it.

Selecting the Gallery block to add to your post

Now, you can easily add images to your gallery block, by dragging them into it or by using the Upload button. You can also select images from your WordPress media library.

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

Two images in the gallery (butterflies and apple)

What if you want 3 images side by side? Here’s what happens if we add a third image. WordPress simply resizes the others to fit all 3 side by side:

Three images in the gallery (butterflies, apple, and blue flowers)

If you upload a fourth image, then WordPress will place it beneath the others.

Four images in the gallery (butterflies, apple, blue flowers, and robin)

You can change the number of images WordPress should include side by side in a single column.

First, click on the Gallery block, if it’s not already selected. On the right hand side of the screen, you’ll see the Gallery’s block settings.

Changing the settings for the gallery block

You can adjust the number of columns here to any number between 1 and 4. For instance, if you want two images side by side, and two more beneath them, you can set the Columns to 2.

Setting the gallery to have 2 columns rather than 3

It’s as simple as that!

If you want to change where an image is positioned in your gallery, just click on it. You’ll then see arrows that you can use to move it forward or backward in the gallery.

Moving an image forward or backward in the gallery

Here’s a finished gallery demo from our sample post:

The 2 column gallery in a live post

Using a Plugin to Put Images Side by Side in WordPress

If you’re using the old classic WordPress editor, or if you want to create more complex galleries than the default Gallery block, then you will need a WordPress gallery plugin.

We recommend using Envira Gallery because it is the best WordPress gallery plugin

For the sake of this tutorial, we will be using the free version of Envira, but you may want to get the Pro version to get powerful features like albums, image slideshows, etc.

First, you’ll need to install and activate the Envira Gallery plugin. If you’re not sure how, just check out our step by step guide on how to install a WordPress plugin.

Next, you can go to Envira Gallery » Add New in your WordPress dashboard.

Add a new gallery in Envira Gallery

You’ll need to give your gallery a title. We’ve called ours ‘Example Gallery’. Next, upload the images you want to use.

You can either drag and drop them into the upload box, or you can use one of the ‘Select Files’ buttons.

Give your new gallery a name

Here’s how the images look once they’ve been uploaded:

Images uploaded to Envira Gallery

You may want to give your images a title and alt text here. The title appears below your image when the user brings their mouse cursor over it.

The title also appears below the image in the lightbox popup mode, which we’ll take a look at in a moment.

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

Click the Edit button to edit an image in your gallery

You can then change the title for your image. It defaults to the image’s filename.

You should also enter alt text, as this is helpful for your WordPress site’s SEO. If your title describes the image, then you can simply repeat it for the alt text.

Setting the title and the alt text for the image

Once you’re done, please make sure you click the ‘Save Metadata’ button before clicking the X to close the window.

Click the Save Metadata button to save your changes

To add your gallery on the site, you’ll first need to publish it. Go ahead and click the Publish button on the right hand side of the screen.

Click the Publish button to publish your gallery, so you can use it on your site

Now, edit a post or page, or create a new one. Inside the content editor, click (+) to add a block to your post, and select the Envira Gallery block. You can find it in the Common Blocks section, or you can use the search bar.

Add the Envira Gallery block to your post or page

You’ll then need to click on the dropdown to select your gallery.

Select your gallery from the Envira Gallery block

You should see your gallery in place in your post.

You can adjust the settings on the right-hand side of the screen. For instance, you might want to change the column layout, or the size of the margin between images.

The Envira Gallery shown in the post editor

We decided to set our gallery to always display in two columns. We also added a wider margin between the images.

The user can click on an image to see the full-sized version in a lightbox. They can scroll through the images using the lightbox, too.

Viewing an image from the Envira gallery in a lightbox

If you want to add more images to your gallery, then you can go back to it by visiting Envira Gallery » All Galleries in your WordPress dashboard. Simply click on the name of your gallery to edit it.

Editing a gallery you've already created in Envira Gallery

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.

Tip: If you’re using the classic editor instead of the block editor, you can still use Envira Gallery.

You’ll see an ‘Add Gallery’ button above the classic editor that you can use to add an existing gallery to your post.

Adding an Envira gallery in the classic editor

You can also create a new gallery by clicking the ‘Add Media’ button then ‘Create Gallery’.

Creating a new gallery using the Media Library in the Classic Editor

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 align images in the WordPress block editor, and our comprehensive list of the must have WordPress plugins (expert pick).

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

10 CommentsLeave a Reply

  1. I’ve used HTML tables in the past. I’ll try this feature the next time I need to use more than one image in the same location.

  2. Is there a way to have “nested” galleries? Would this be an “album”? And would Envira accomplish this? Example: I need to build an artist’s website, with a dedicated page for images. I need to have a “cover” image for separate bodies of artwork (painting, sculpture, outdoor sculptures, ceramic vessels, etc.). So that when you click on it, it opens another gallery of works within a given category (paintings, small sculptures. large sculptures, etc.) And I’d like to be open those images in a slideshow format. Is there an easy way to do this? Most of the templates only allow for single image galleries (i.e. what you see is what you get, only larger, when you click on it). The only other workaround would be to link the cover image to a hidden pager each category?

    It’s frustrating to know what I want, but not how to DO IT…

    • For what it sounds like you’re wanting, you would want to take a look at Envira’s albums and that should be what you are looking for.

      Admin

  3. This looks very promising and I’ll use it in near future. I would have tried to load a 2 column table and then import pictures into it but this looks great!
    Thanks.

  4. Always good to get a suggestion. All that is on my blog already but it takes a kick up the pants to get me to utilise things. Thanks.

  5. This article help me out because I wondering if side by side to give my blog post a different look I’ll definitely using it the blog post. For sure thanks

Leave a Reply to Diana Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.