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

Поділитися
Вставка
  • Опубліковано 26 сер 2024
  • 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

КОМЕНТАРІ • 49

  • @cosgravehill2740
    @cosgravehill2740 2 роки тому +3

    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
      @Michelle.The.Creator  2 роки тому

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

  • @ravinderramini
    @ravinderramini 2 роки тому +2

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

  • @raedesigner3209
    @raedesigner3209 Рік тому

    Probably the best tutorial content on YT

  • @alejandroolarte
    @alejandroolarte Рік тому +1

    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.

  • @MikeBoldis
    @MikeBoldis 8 місяців тому +1

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

  • @Hirokiji
    @Hirokiji 6 місяців тому +1

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

  • @kdog24life
    @kdog24life Рік тому +1

    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
    @nickcattoncreates 2 місяці тому

    So helpful! Thanks you

  • @Mjbusinessacademy
    @Mjbusinessacademy Рік тому

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

  • @EricHillAuthor
    @EricHillAuthor 2 роки тому +1

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

  • @miriamvj
    @miriamvj Рік тому +1

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

  • @Djfmdotcom
    @Djfmdotcom 8 місяців тому +1

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

  • @robertlongoria765
    @robertlongoria765 2 роки тому +1

    First class. Well presented.

  • @elviebakes8579
    @elviebakes8579 2 роки тому

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

  • @erling5148
    @erling5148 2 роки тому +4

    Why dont you use display flex on the column?

    • @Michelle.The.Creator
      @Michelle.The.Creator  2 роки тому

      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
      @erling5148 2 роки тому +4

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

  • @gurushankar2004
    @gurushankar2004 2 роки тому +1

    Superb..Thank you so much

  • @bookaholic98
    @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.

  • @DavidHoefgen
    @DavidHoefgen 11 місяців тому

    Thanks! Very good explained! 😊

  • @ChrisPlummer101
    @ChrisPlummer101 Рік тому

    Nice, really helpful, thank you.

  • @dsha2006
    @dsha2006 Рік тому +1

    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
      @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.

  • @zvecan
    @zvecan 5 місяців тому

    Thanks very much 👍

  • @testingonline7032
    @testingonline7032 2 роки тому +1

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

    • @Michelle.The.Creator
      @Michelle.The.Creator  2 роки тому

      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.

  • @kdog24life
    @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.

  • @JPach4
    @JPach4 2 роки тому

    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
      @Michelle.The.Creator  2 роки тому

      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/

  • @datmanUK
    @datmanUK 5 місяців тому

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

  • @Effectivebasketball
    @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
      @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/