Make Multiple Divi Dynamic Content Modules Inline
Solving Another Missing Feature
As you build your Divi Theme Builder templates or as you are building layouts with custom fields, you often find yourself needing to add two or more modules with dynamic content next to each other. Maybe you are designing a blog post template and want to put the date, category, and author side by side, or maybe you want an auto-updating footer copyright year next to the site name.
The problem is that the modules stack vertical, and trying to put them into row columns doesn’t work very well either. So I’m going to show you how to add multiple dynamic content modules next to each other side by side in the same column.
▶️ Please watch the video above to get all the exciting details! 👆
Add Any Dynamic Content Modules You Need
Start by adding all of the Divi modules you need. Select the desired dynamic content for each module.
If you want to learn more about the Dynamic Content feature in Divi, please take a look at their blog. (For some reason they don’t have docs on that feature, so let me know if you want me to cover that in future tutorials).
Add The CSS To Each Module
Now for the trick that solves this issue. Go into one of the modules to the Advanced tab and open the Custom CSS toggle. Look for Main Element and type or paste the following CSS code:
display: inline-block;Adjust The Spacing of The Modules
Now of course you can adjust the spacing, because by default they will smash right up against each other. I’d recommend going in to the module settings and adding a margin left or right of 10px to some of the modules.
Thanks so much for this… your tutorials are always so helpful! I’m having issues with getting this to work when the module has longer dynamic content, like a paragraph. I can get the modules to display side by side as long as they are shorter than 1 line. But as soon as it goes beyond one line, the second module displays underneath the first. For example, I’m trying to display a summary, followed by a link, and a price. Each is it’s own custom field. I want the link to display right after the summary, as if it’s the next sentence in the paragraph. Is this possible? Thanks in advance, and let me know if you need any additional details.
Hi Laura, it’s really impossible to advise without seeing the exact context of your setup. Please share a link and any link using a tool like snipboard.io
What if I want to display a Divi button beside a module? (because I added a button from a plugin to display a restaurant menu. So they provide the code that creates a button)
I’m not sure your situation there, but you can display modules side by side with this method: https://www.peeayecreative.com/how-to-place-two-divi-buttons-side-by-side-in-the-same-column/