Find The Right SEO Service For Your Business

We cover the full spectrum of SEO services from local SEO to international SEO. Choose the SEO service right for you and call us today for a free confidential chat about your digital marketing.

SEO

SEO Services →

Digital Marketing Service →

Digital PR Service →

Ecommerce SEO →

Organic SEO Services →

Image Optimisation →

URL Structure Optimisation →

Internal Linking →

Page Speed Optimisation →

User Experience Optimisation →

Free SEO Audit

Find out why your website isn't ranking on the top of Google and what actionable steps you can take, with our free no obligation SEO audit.

Free SEO Audit →

How To Align Images In A Single Row

By Paul - SEO Consultant
Categories: Divi

How to align multiple images horizontally in a single row on WordPress – Divi

This quick guide will walk you through how to align images next to each other in a single row.

Prerequisites

Ensure you’re ready with:

  • A WordPress website with Divi Theme installed.
  • Basic familiarity with Divi Builder.
  • Some understanding of HTML and CSS for tweaks beyond Divi’s built-in options.

Step 1: Setting Up Your Section in Divi Builder

Start by logging into your WordPress dashboard and navigating to the page where you want to add the text and image section. Open the page in Divi Builder.

  1. Add a New Section: Click on the blue plus button to add a new section and select “Regular” from the options.
  2. Insert a Row: Choose a row structure.
  3. Add Image Modules: In the single column, add a “image” module. 

    Step 2: Applying Custom CSS Class To The Row You Want To Align The Images In

    To apply custom CSS:

    1. Go to Row Settings: Click on the cog icon on the row you want to use.
    2. Click Advanced Tab: Here click CSS ID & Classes, then copy and page “images-under-text” in the CSS Class as shown in the picture below.

    css

    images-under-text

     

    CSS To align images in divi row

    Step 3: Applying The Custom CSS Code To Your Theme Options

    Now for it to work whenever you want to use it in a CSS Class go to theme options custom CSS:

    1. Go to the wordpress admin page: Click on DIVI, then theme options.
    2. Scroll down to custom CSS: Then copy and page this code to align three images underneath a text box or edit it to align images as you see fit.

    css

    .images-under-text .et_pb_image {
    display: inline-block; /* Aligns the image modules side by side */
    width: 33.33%; /* Each image takes up one-third of the row */
    vertical-align: top; /* Ensures images align at their tops if they have different heights */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    }
    .images-under-text .et_pb_text {
    width: 100%; /* Ensures the text module spans the full width of the row */
    margin-bottom: 20px; /* Adds space between the text and the images */
    }

    Align Images in a single row in divi

    This CSS ensures each image uses the full width of each column and aligns them correctly.

    Step 4: Review and Adjust Responsiveness

    Divi is designed to be responsive, but checking how your new layout looks on different devices is a good practice. Use Divi’s built-in visual builder to toggle between desktop, tablet, and mobile views, making adjustments as needed.

    • Adjusting for Mobile: If the images look too small on mobile, consider setting them to stack vertically rather than horizontally. You can easily adjust this under the Design tab for each image module by changing the width and overriding global settings on mobile views.

    Step 5: Save and Preview Your Page

    Once you’re satisfied with how everything looks, don’t forget to save your changes. Click the green Save button, then preview the page to ensure everything looks as expected in a live environment.

    Final Thoughts

    Styling a text and image section using Divi Builder provides both flexibility and power, allowing you to create professional and appealing layouts without extensive coding knowledge. Remember, the key to a successful layout in Divi lies in balancing custom CSS with the robust options that Divi already provides. Experiment with different designs and configurations to see what works best for your content and aesthetic preferences. Happy designing!

    Align Images in a single row in divi
    Tags:

    First Place SEO, International House, 4 Maddox St, London W1S 1QP

    02071128794

    First Place SEO Agency London

    Is local seo better than google ads for small businesses - First Place SEO
    Jul 21 2025

    Is Local SEO Better Than Google Ads for Small Businesses?

    Compare Local SEO and Google Ads for UK small businesses. Learn ROI, speed, cost, and how combining both improves your visibility and lead generation.

    Why your google business profile isnt brining you leads - First Place SEO
    Jul 17 2025

    Why Your Google Business Profile Isn’t Bringing You Leads

    Not getting leads from your Google Business Profile? Learn why and get a free expert audit to fix your listing and start converting more customers.

    How do i know if an seo company is ripping me off - First Place SEO
    Jul 10 2025

    How Do I Know If an SEO Company Is Ripping Me Off?

    Spot red flags in your current SEO service. Learn what honest, results-driven SEO should look like. Compare agencies and protect your marketing budget.

    What should be in a local seo proposal - First Place SEO
    Jul 07 2025

    What Should Be in a Local SEO Proposal?

    Looking to improve local visibility? See what every local SEO proposal should include. Includes keyword strategy, GBP optimisation, timeline, and tracking...
    Can i just pay for local seo once - First Place SEO
    Jul 03 2025

    Can I Just Pay for Local SEO Once?

    Think one-time local SEO is enough? Learn why ongoing updates, reviews, and citations are key to staying visible on Google Maps and local searches.

    Local SEO London Businesses Guide 2025 - First Place SEOLocal SEO London Businesses Guide 2025 - First Place SEO
    Jun 30 2025

    Local SEO London Businesses Guide 2025

    Improve your local search visibility in London with this 2025 Local SEO guide. Learn practical steps for Google rankings, backlinks, content, and analytics.

    Is Submitting Your Business to Local Directories White Hat SEO - First Place SEO
    Jun 26 2025

    Is Submitting Your Business to Local Directories White Hat SEO?

    Learn whether local business directory submissions support white hat SEO. See how accurate listings, NAP consistency and trusted platforms improve local search...
    How to Find Keywords for Local SEO - First Place SEO
    Jun 23 2025

    How to Find Keywords for Local SEO

    Learn how to find high-impact local SEO keywords for UK businesses using tools like Semrush, Keyword Planner, and competitor analysis techniques.

    How Much Does Local SEO Cost - First Place SEO
    Jun 19 2025

    How Much Does Local SEO Cost in the UK?

    Explore local SEO pricing in the UK, what services you get at each level, and how to choose the right package for your business with full transparency.

    how to dominate local seo - First Place SEO
    Jun 16 2025

    How To Dominate Local SEO

    Boost your local visibility with proven strategies to improve rankings, earn trust, and attract more customers in your area with First Place SEO.

    Request a call back about your SEO

    Fill out our enquiry form and we will be in touch.

    Consent To Contact You Regarding Your Enquiry