How to Set Images Side By Side In WordPress

Side by side images with WordPress blocks, wall at gallery

Using images in your post and page content is often necessary to help emphasize your message. Visual aids draw the eye and can create powerful contrast. And when it comes to contrast, presenting images side by side is a great way to make powerful statements. In this article, you’ll learn how to set images side by side with WordPress blocks.

Create Side by Side Images Using Column Blocks

The easiest way to create side by side images (and perhaps the best way, considering your needs) is to use the all-purpose column block. Column blocks create evenly spaced, mobile responsive columns that can accept multiple kinds of content — including images, text, and more.

  1. Log into WordPress dashboard
  2. Select a post or page to edit or create new contact
  3. Use the plus sign to create a new block
    Plus sign to create block in Gutenberg
  4. Choose Columns
    Select columns

Once you have selected a column block, you can choose the orientation of the columns. You have your choice of various width ratios by percentage of the total width of your content area:

Column width ratios

For example, if you choose 50/50, you will have two evenly spaced columns dividing the total width of the area by exactly half.

How Columns Collapse And How To Avoid It

The column block provides you with perfectly placed mobile responsive columns. What does that mean? Mobile responsiveness is a design technique that ensures a website can be properly viewed and interacted with on mobile devices. In the past, many websites were designed primarily for desktop computers, resulting in a poor user experience on mobile devices.

But today, more and more people are using mobile devices to read your website, so it’s important to make sure the site layout is mobile responsive. Mobile responsive design helps to improve readability by making text and images resize automatically to fit the screen size of the device. This makes it easier for mobile users to find the information they’re looking for without having to zoom in and out or scroll around. In addition, mobile responsive design can also help improve click-through rates and conversion rates by making it easier for mobile users to navigate your website.

When in doubt, you should choose responsive.

However, if you want your images to always be side by side in all circumstances, the responsive behavior may not be desirable. If this is the case, you have a few options for a workaround.

Compose Your Images Side By Side In a Single File

Using Photoshop, or some other desktop image application, you can compose a single image file containing both of your desired side by side images aligned just the way you want. Upload this file to WordPress, and you can be certain that your desired layout will be retained.

Create a Table

The rules of mobile responsiveness apply differently when it comes to tables. Table data must always retain its initial orientation. This means a table will never collapse in a mobile view.

Creating a table is easy.

  1. When creating a new block, as described above, select table instead of column.
  2. Select 1 row, 2 columns
    Gutenberg table selection
  3. While inside a cell, click the arrow dropdown and choose inline image

You will find the arrow dropdown in your main toolbar, as seen in the image below:

arrow dropdown, inline image

Once you have selected an inline image for the table cell it will appear small, but you can adjust the width to increase the image size. However over the image and you will see the width controls:


So there you have a few ways of creating horizontally aligned images in your WordPress blocks using the Gutenberg editor. If you have any questions or comments feel free to drop them below this article. Also consider checking out the full guide on using animated gif images in WordPress.

CM
Christopher Maiorana Content Writer II

Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.

More Articles by Christopher

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!