How To Stack Any Divi Module Side By Side // Divi Tutorial

Learn how to stack any Divi module side by side. This can work for text, icons, images, and any module you need to stack. I'll show you how you can use a custom icon font in text modules and stack them side by side.
__________________________________________
😎 GRAB THE CSS:
michellethecre...
🌸 Elegant Icon Font Blog: www.elegantthe...
(The icon module in Divi might make this unnecessary, but if you ever want to use a custom icon font that isn't from Divi, this tutorial works perfectly.)
💻 Programs & Services Mentioned in Video
Divi // Elegant Themes: bit.ly/3mun7TN
WordPress: wordpress.org/
___________________________________________
⭐️ EXTRA RESOURCES ⭐️
✅ Need help coming up with headlines for your creative content?
Get my FREE guide Ten Simple Formulas To Write Better Headlines to help you craft the perfect headlines for your emails.
michellethecre...
✅ Looking to build a website?
Get my FREE Building a Website Checklist for tips on laying out and creating your site.
Get it here at this link: michellethecre...
👉 Check Out My Recommended Website Design Resources:
Flywheel Web Hosting: share.getf.ly/...
Divi // Elegant Themes: bit.ly/3mun7TN
*Affiliate Disclaimer:
Note this description contains affiliate links that allow you to find the items mentioned in this video and support the channel at no cost to you. While this channel may earn minimal sums when the viewer uses the links, the viewer is in no way obligated to use these links. Thank you for your support!
#MichelleTheCreator #DiviTutorial #WebTutorial

[@cosgravehill2740]

wow, great tutorial. No wasted time. No overexplaining or underexplaining. Practical and extremely helpful. Thanks Surprised you don't have more of a following.

[@Michelle.The.Creator]

Thanks for the kind words! I'm just getting started on my KZbin journey but growing a little bit each day.

[@MikeBoldis]

Thank you, your video gave me the idea how to fix one of my module alignment inside the section.

[@Michelle.The.Creator]

Glad it helped

[@Hirokiji]

Ya, awesome stuff. I left the . in front of the CSS Class, and once I removed that, they aligned.

[@alejandroolarte]

Thanks soooo much! I couldn't find a way to put an alternative Title text to the social media icons Divi gives you, so this was the perfect way I could find.

[@Michelle.The.Creator]

Glad you found it helpful!

[@kdog24life]

I also was wondering why we use the term "stack" when I think these methods may be more of alignment and overflow control. Thumbs up anyway... there's technical gems in there for folks. Thanks.

[@nickcattoncreates]

So helpful! Thanks you

[@Michelle.The.Creator]

Glad you found it helpful!

[@ravinderramini]

Thank you Michelle. I learn new thing today for Divi.

[@Michelle.The.Creator]

Glad it was helpful!

[@Michelle.The.Creator]

Glad it was helpful!

[@Michelle.The.Creator]

Glad it was helpful!

[@raedesigner3209]

Probably the best tutorial content on YT

[@Michelle.The.Creator]

That is very kind of you to say! Thanks!

[@Mjbusinessacademy]

You are a life saver!!!!!!!!!Thank you for this video and your talent

[@Michelle.The.Creator]

You are so welcome!

[@EricHillAuthor]

This was quite helpful. I haven't yet used CSS in ET, but stacking is on the list. So, thanks!

[@Michelle.The.Creator]

Good to hear it was helpful!

[@elviebakes8579]

Thank you so much Michelle, i asked , you answered and it worked like magic. i am super grateful

[@Michelle.The.Creator]

You are so welcome! I love being able to help others out 🤗

[@bookaholic98]

This was a lifesaver! Thank you. I was wondering if you knew how to resolve the icons resolving to errors? I plug in the right code, and the font is uploaded but it will eventually resolve to a little error icon.

[@gurushankar2004]

Superb..Thank you so much

[@Michelle.The.Creator]

Thanks!

[@miriamvj]

Yaaaaay! This is exactly what I was looking for. Works like a charm!!! Thanks ♥♥♥

[@Michelle.The.Creator]

I'm so glad this worked for you!

[@DavidHoefgen]

Thanks! Very good explained! 😊

[@Michelle.The.Creator]

Thanks!

[@robertlongoria765]

First class. Well presented.

[@Michelle.The.Creator]

Glad you liked it!

[@ChrisPlummer101]

Nice, really helpful, thank you.

[@Michelle.The.Creator]

You're welcome!

[@zvecan]

Thanks very much 👍

[@Djfmdotcom]

I know this tutorial is a year old but you literally saved me from pulling my hair out...thank you!

[@Michelle.The.Creator]

Ha! Glad I could help!

[@erling5148]

Why dont you use display flex on the column?

[@Michelle.The.Creator]

I could not get "display: flex" to work, but you can use "display: inline-flex". It's one of those things where I feel like there is 1000 ways to achieve the same result.

[@erling5148]

@@Michelle.The.Creator Row > Column settings > main element > display:flex; (btw i really enjoy your voice)

[@dsha2006]

Is there any way to do this without custom code? I just want to put 2 images next to each other and the images are in the left column of a 2 column page. And, I don't want to make a 3 column page because I want the text above the 2 images to span over both images.

[@Michelle.The.Creator]

Have you tried using a "Specialty Section" for this (a.k.a. the orange section)? You can have two main columns with one side being configurable with a row on top of two images.

[@JPach4]

Thanks a lot Michelle!! One more thing ... Now we have 1 column row with the modules stacked inline and centered horizontaly. This is good if all module have the same height but if not, how can I center vertically the inline modules?

[@Michelle.The.Creator]

I actually have another method for stacking modules which I taught on Darrel Wilson's channel that you might find helpful. It uses flex to stack the modules and I have some extra CSS to align modules that are different heights. Here is a link to that if you want to check it out. michellethecreator.com/stack-divi-modules/

[@kdog24life]

I feel like the social icon example might have been a distraction from the main subject... I guess I didn't catch how this example applies to ANY module? Or something was distracting me from getting that part of it.

[@testingonline7032]

What tool do you use to record the video. Its awesome

[@Michelle.The.Creator]

I do all my screen recording and tutorial editing in Camtasia. I then finish the video in Premiere Pro because it has a few features that I like that are a little more advanced than Camtasia. But I'd recommend Camtasia to anyone. I use it a lot to make recordings and how-tos for my clients.

[@datmanUK]

thank you but this is so complicated for a newbie to figure out

[@Effectivebasketball]

I wonder why not directly apply flex to the column with whatever is inside it? There is way more option and customizing options. You do create an extra class then you have to specify what element you want to modify. So many steps and I honestly need to understand the reasoning besides the optimization of CSS and yet in this case this is is not it. - as you know evil in detail. Thank you.

[@Michelle.The.Creator]

I totally agree and I actually taught this method on another person's channel earlier this year. I think I am going to release that video on my channel. This is where that tutorial currently lives: michellethecreator.com/stack-divi-modules/