How To Align Images In A Single Row

By firstplaceseo.co.uk
Published:
Tags:
Categories: Divi

h 3 Table Of Content

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!

    Benefits and strategies of internal linking for seo
    Jun 11 2024

    Benefits and Strategies of Internal Linking For SEO

    Learn the benefits and strategies of internal linking for SEO. internal linking improves page authority and your site’s search engine rankings.

    What is internal linking?
    Jun 10 2024

    What Is Internal Linking?

    What is internal linking? We explain it and the best practices, advanced techniques, & strategies to optimise your website’s internal links...
    optimise images for seo
    Jun 09 2024

    How to Optimize Images for SEO?

    15 ways on how to optimise images for SEO with our comprehensive guide. Techniques for alt text, file names, compression, responsive images.

    What is keyword density?
    Jun 09 2024

    What Is Keyword Density?

    Learn what keyword density is and how to calculate it, the ideal percentage, and tips to avoid keyword stuffing your content.

    Optimise Your Content with Header Tags
    Jun 09 2024

    Optimise Your Content with Header Tags

    We cover best practices, common mistakes, and tips for using H1, H2, H3 tags to Optimise Your Content with Header Tags for top search rankings

    How to use headers for SEO?
    Jun 09 2024

    How To Use Header Tags For SEO?

    Learning how to use header tags for SEO properly can make your content more user-friendly. This guide provides a straightforward overview.

    What Is On Page SEO
    Jun 09 2024

    What Is On Page SEO?

    On-page SEO, also known as on-site SEO, is the practice of optimising individual web pages to improve rankings in search engines for more traffic.

    What are meta descriptions
    Jun 09 2024

    What Are Meta Descriptions and How To Use Them?

    Meta descriptions are brief summaries of web pages shown in search engine results pages (SERPs) improving click-through rates (CTR).

    How to track keyword rankings
    Jun 07 2024

    How to Track Keyword Rankings

    Learn how to track keyword rankings effectively with the best tools and strategies. Improve your SEO efforts with our comprehensive guide.

    What are LSI Keywords
    Jun 06 2024

    What Are LSI Keywords?

    LSI keywords enhance your page’s SEO & ranking by providing context & relevance to primary keywords. Learn how to find & use them...