Question posted in
The full documentation can be found here.

Aligning images in a single line in wordpress divi theme

I have a screenshot below which I have to replicate in WordPress. I am using WordPress Divi theme.

1st Image:

enter image description here

2nd Image:

enter image description here

enter image description here

enter image description here

Problem Statement:

I am wondering which option I should select in the New Module section of wordpress (2nd Image) so that I am successfully able to align images in a single line (1st image).

Tags:

2

Answers


  1. 0

    Obviously, you have to choose the Image module to insert an image. Insert each image in a separate Image module.
    But before that, make sure you have inserted a row and all of these modules are inserted into that particular row.

    Login or Signup to reply.
  2. 0

    Two primary options come to mind:

    1. You can create a single image as a composite of the 7 images (logos) you show in your first example image. A potential disadvantage of this is the sizing and spacing will be fixed. Although, that could also be to your advantage, since the whole composite image can resize somewhat responsively, it might work just fine.

    2. If you want to have 2 or more images in a Column stacked horizontally (as opposed to the default vertical stacking), you can add the following Custom CSS to the page (go to Page settings in Divi Builder; then the Advanced tab, then Custom CSS) on the Row into which you’ve put the images (seven of them, in your example).

    .imageStack .et_pb_image {
  display: inline-block;
  vertical-align: top;
}

    Shown here:

    enter image description here

    On the Row in which you want the images to stack horizontally, go to Advanced tab, then the CSS ID / Classes, and put in the class imageStack.

    Shown here:

    enter image description here

    As for your second image … it sounds like you didn’t know you need to use the Image module. In your case, with method #2 above, you’ll be using 7 image modules. The trick is then getting them to not stack vertically. Using method #2 above will achieve that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search