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

Want to showcase your photos or products in an eye-catching format on your WordPress site?

Placing images side by side can help you do that!

Aligning two or more images horizontally not only looks more appealing but also allows you to fit more visuals within a compact space.

In this guide, I‘ll share the most effective ways to put images side by side in WordPress.

After 15+ years as a WordPress professional, I‘ve found that the block editor and Envira Gallery provide the easiest methods for effortlessly creating side-by-side image layouts.

Let‘s look at how each option works, so you can choose the right one for your needs.

Why Putting Images Side-by-Side is a Good Idea

Before we dive into the step-by-step instructions, here are some key reasons why displaying images side-by-side can benefit your WordPress site:

Boosts Visual Appeal

Placing images next to each other simply looks more aesthetically pleasing than awkwardly stacking them vertically. The visual flow feels smoother.

It adds style and beauty to your pages, which makes content more inviting.

Allows More Images in a Smaller Space

You can fit double the images in the same area by putting two side-by-side instead of above and below each other.

This makes the most of your valuable real estate, especially on smaller screens.

Facilitates Easy Comparison

When you want to showcase similarities or differences, putting images side-by-side makes it easier for viewers to compare them.

For example, before-and-after photos or product variant shots. The differences are evident at a glance.

Provides Flexibility in Layout

Having images side-by-side gives you more flexibility with page layouts.

You can alternate between vertical and horizontal alignments for more visual interest.

Improves Reader Experience

According to studies, horizontal scrolling is easier than vertical scrolling.

Side-by-side images in a gallery format enhance reader experience and reduce friction.

Convinced about using side-by-side images in your content? Let‘s look at how to implement them the easy way.

Method #1: Using the WordPress Block Editor

The block editor has made it really simple to put images side-by-side in WordPress without writing any code.

Here are the steps to follow:

1. Add the Gallery Block

First, open the post or page where you want to add your gallery.

Click the Plus (+) icon to open the block inserter.

Search for Gallery and click it to add the block.

2. Upload or Select Images

Inside the gallery block, click Upload to add new images from your computer.

Or click Media Library to choose existing images.

Select 2 or more images that you want to place side by side.

3. Images are Automatically Placed Side-by-Side

WordPress will automatically display two images side-by-side within the gallery block.

If you add a third image, WordPress will resize them evenly to fit three across.

4. Adjust the Number of Columns

To control the number of images per row, use the Columns setting in the Gallery toolbar.

For example, setting it to 3 will show 3 images side-by-side before going to a new row.

5. Customize Settings and Styles

From the Gallery sidebar, adjust image sizes, spacing, captions, cropping, and styling options.

6. Save and Preview Your Image Gallery

Once done, click Publish or Update to save changes and preview the result.

That‘s all you need to quickly place images side-by-side using the block editor gallery.

The only limit is less control over fine-tuning spacing and styling. For that, a gallery plugin is better.

Let‘s look at that next…

Method #2: Using the Envira Gallery Plugin

For greater control over image spacing, margins, and lightbox effects, a dedicated gallery plugin like Envira Gallery is ideal.

It lets you create highly customizable responsive image galleries in just a few clicks.

Here are the steps to use it:

1. Install and Activate Envira Gallery

If you don‘t already have the plugin, install and activate Envira Gallery in your WordPress dashboard.

2. Create a New Gallery

Go to Envira Gallery > Add New to start creating a gallery.

Give your new gallery a descriptive name.

3. Upload and Add Images

Use the Select Files buttons to upload new images to your gallery.

You can also add existing images from your media library.

4. Set Columns for Side-by-Side Alignment

Under Gallery Settings, set the ideal Number of Columns so images sit side-by-side.

For example, setting it to 2 will show 2 images per row.

5. Adjust Spacing and Lightbox

Tweak the Gallery Margin spacing and enable the Lightbox if needed.

6. Embed Gallery in your Content

On the page or post, add the Envira Gallery block and select your created gallery.

It will display the images side-by-side per your settings.

7. Publish and View Results

Once done, click Publish or Update to see your gallery live.

The benefit of using Envira Gallery is having fine-grained control over gallery settings and styles.

You can reuse created galleries across multiple pages with different layouts.

Now that you‘ve seen how to use the block editor and Envira Gallery, let‘s go over some pro tips and best practices…

Tips for Displaying Side-by-Side Images Effectively

When publishing side-by-side images on your WordPress site, keep these tips in mind:

Pick Images of Similar Shapes and Sizes

Choose images with consistent orientations and dimensions for the best alignment.

Avoid mixing portrait and landscape images right next to each other.

Find the Right Balance of Images Per Row

Balance image size and number per row based on content width.

Too many small images per row looks cluttered. Too few looks bare.

Write Useful Captions and Alt Text

Well-written captions and alt text provide helpful context for your images.

Ensure text succinctly describes the image contents.

Select Relevant Images to Compare

When placing images side-by-side for comparison, ensure they are closely related and make logical sense together.

For example, two entirely unrelated images can confuse readers.

Allow Sufficient Spacing Between Images

Don‘t cram images too close together. Leave adequate spacing between them viamargins.

Whitespace improves visual appeal and prevents a crowded look.

Maintain Visual Weight and Harmony

Combine images with similar visual weight and importance.

Don‘t place tiny icons next to large hero photos.

Crop Images to Match Dimensions

Use photo editing tools to resize/crop images to identical dimensions before uploading for consistent alignment.

Use Lightboxes Selectively

Linking every thumbnail to open a lightbox can be disruptive. Use selectively for chosen images only.

Consider Responsive Behavior

Test that your side-by-side gallery adapts well to mobile screens without horizontal scrolling.

Alternate With Vertical Images

Mixing horizontal and vertical alignments adds more visual interest to your content.

Write Useful Context

Well-written surrounding content provides meaning and context for related images.

By keeping these tips in mind, you can effectively arrange images for an aesthetically-pleasing look and feel.

Next, let‘s look at some examples of how side-by-side images are commonly used.

Common Examples of Side-by-Side Image Layouts

Here are some popular use cases where placing images horizontally can improve page layouts and content:

Before and After Comparisons

Placing before and after images side-by-side makes it easy to showcase transformations:

Image credit: WPBeginner

App and Software Screen Captures

Tutorials often use side-by-side screenshots to explain interface workflows clearly:

Image credit: WPMUDev

Product Photos and Variants

Showcasing product colors, angles, sizes, etc. side-by-side helps customers make buying decisions:

Image credit: Burrow

Process Step Illustrations

Placing graphics/photos of stages and steps side-by-side simplifies complex processes:

Image credit: Neil Patel

Location Comparisons

Juxtaposing images of two locations side-by-side (e.g. old and new) shows differences:

Image credit: RomeWise

Fashion and Styling

Styling images positioned horizontally showcase clothing/accessory pairings:

Image credit: Fine Art America

There are endless possibilities for creatively aligning images side-by-side to suit your content needs.

Now let‘s go over a few considerations to bear in mind.

Key Considerations for Side-by-Side Layouts

While horizontal image alignments provide impact, here are a few factors to keep in mind:

Mobile Responsiveness

Side-by-side images stack vertically on smaller screens. Ensure the mobile layout remains usable.

Lengthy Galleries

Pagination can help split long galleries across multiple pages. Don‘t overwhelm readers.

Overuse

Too many adjacent images packed together can be visually distracting. Use judiciously.

Context Clarity

Without sufficient context, stand-alone images may puzzle readers. Add descriptive captions.

Load Times

Allow large images to fully load before stacking to prevent layout shifts. Improve perceived speed.

Whitespace

Generous spacing between images enhances aesthetics. Don‘t cram them together.

Media Queries

Use CSS media queries to tweak alignments and sizes for mobile views.

Performance

Multiple high-res images can impact page speed. Compress and optimize them.

Selective Use

Assess if side-by-side format suits your content goals for chosen images. Avoid forcing it.

Review Structure

Ensure overall page structure aligns with content hierarchy when interspersing images.

With these factors considered in your design and content process, you can smartly pull off side-by-side images.

Now let‘s go over some alternative options for alignment.

Other Ways to Align Images Side-by-Side

Aside from the block editor and Envira Gallery, here are some other approaches you can use to position images horizontally in WordPress:

HTML and CSS Code

For ultimate layout flexibility, you can use HTML and CSS to align images by:

• Wrapping images in <div> tags
• Floating images left or right
• Using flexbox or CSS grid alignment

But this requires coding knowledge and custom work.

Page Builder Plugins

Drag-and-drop page builders like Elementor have modules to easily add and align images side-by-side.

You get good customization but it ties your content to the page builder theme. Migrating can get tricky.

Image Shortcodes

Gallery plugins like NextGEN have [nggallery] shortcodes that output responsive image grids.

Shortcodes are fast but offer limited styling control unless you know CSS.

Custom CSS Classes

Add custom CSS classes to images and align them via stylesheet rules.

Quick and easy but limited flexibility.

So for most users, the block editor or Envira Gallery provide the best no-code options.

But page builders and shortcodes work too if you need more layout power.

Let‘s wrap things up…

Final Thoughts on Displaying Images Side-by-Side

Placing images side-by-side can add visual appeal to your WordPress content while also using space efficiently.

The block editor provides a quick way to achieve this with its Gallery block.

For more control over spacing, styles, and responsive settings – Envira Gallery is the best plugin option.

Just be selective about choosing appropriate images for alignment and provide useful context with captions.

Testing the mobile layouts and site performance with multiple images is also advised. Used judiciously, side-by-side visual content can deliver stunning results!

I hope this detailed guide helped you learn how to easily put images side-by-side in WordPress. Feel free to ask any questions in the comments!