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.
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/
How can I get it centered?
Please go to the Column Settings of the column where you have placed all the modules. Then go to the Advanced Tab > Custom CSS > Main Element and place the snippet given below:
text-align: center;
Let us know if that helps. 🙂
Hey thanks for the tutorials has always!
As a humble feedback I wanted to say that your website is awful to scroll, I’m not sure what you did there but the scrolling experience on my end feels like I’m on a trippy journey. Scrolls very fast in weird steps. On both trackpad and logitek mouse (Mac OS 12, latest Chrome).
Hey Marc,
Sometime it’s the internet that creates that issue but we are always open for the constructive feedbacks and will definitely try to improve the experience over time.
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
How can I get two dynamic links side by side inside an accordian module?
If you are nesting modules within other modules, you would first need to have those dynamic modules within a Divi Library layout, and then add the Divi Library layout to the accordion with a shortcode.