Search

How to Place Multiple Modules Side by Side in Divi

Sure, we can add two or more modules side by side in Divi by simply adding more columns for each module. However, there may be times when we want to place multiple Divi modules next to each other in one column, like when we want to put the author’s name, blog post date, and tags in one line when we are designing a blog post layout. Unfortunately, there are still no built-in options in Divi for that.

Rest assured, this article will show you how to place two or more modules side by side in one line. Whether it be a Text module, Image module, Blurb module, or video module can be lined side by side by adding a CSS snippet on each module. And for the button module, you can read our previous article about adding two buttons side by side in Divi as the button module needs to be given a class first.

Please note, you need to make sure the width of all modules combined not exceeding the width of the column otherwise some of the module won’t be in the same line.

Steps to Place Multiple Modules Side by Side in Divi

Step 1: Adding the Modules in Divi Builder

To get started, open up a Divi Builder by creating or editing a page using Divi Builder, or if you want to create a layout for your website posts and pages using the Divi Theme Builder you can navigate to the Divi Divi Theme Builder from your WordPress dashboard.

For demonstration, we created a simple single post layout using the Divi Theme Builder. Then we will add a picture module for the author profile picture and two text modules for the author name and post date and then line them up together in one line.

Let’s start by adding the modules in one column. Start with the image module for the author’s picture, and set the width and height of the image to 50px. Then continue to add two text modules for the author name and the post date.

Layers View on Divi Builder showing two Text modules.

Now, continue to make the content of each module dynamic. Set each module’s content as follows:

  • Small Image module: Author Profile Picture
  • First Text module: Post Author with the following Before text and style.
    • Add “<span style="color:#c1c1c1;font-size: 12px">by: </span>” to the Before text
    • Set the Text Font Weight to Bold
    • Set the Text Text Color to white (#FFFFFF)
  • Second Text module: Post Publish Date with the following Before text and style.
    • Add “<span style="color:#c1c1c1;font-size: 12px">on: </span>” to the Before text
    • Set the Text Font Weight to Bold
    • Set the Text Text Color to white (#FFFFFF)

For more information about adding dynamic content in Divi, you can read our previous article here.

Yes, as you can see from the above image, the modules are still stacking vertically. Let’s proceed to the next step to get them in line.

Step 2: Get the Modules Inline

Now, to get the modules inline, add the following CSS snippet to the Advanced tab Custom CSS Main Element of each module settings.

display: inline-block;

Now the modules are in one line, however, you may need to give them some spacing between to make it looks neat. Set the spacing for the two text modules heading to the Text Settings → Design Spacing and set the Left Margin to 10px.

If you want to move the content to the center of the column, you can do so by adding the following CSS snippet to the Column Settings → Advanced Custom CSS Main Element.

  • text-align: center;
Final results

The Bottom Line

When creating a new design with Divi — be it a page or custom theme template, you might think it would be great to place two or more modules inside a column side by side.

Unfortunately, Divi has no built-in setting options to do so. But you can still achieve it using custom CSS as we have just covered above.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.