5 Creative Ways to Use Divi’s Built-In Margin and Gutter Controls

Posted on June 21, 2016 by in Divi Resources | 119 comments

5 Creative Ways to Use Divi’s Built-In Margin and Gutter Controls

Welcome to Day 22 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


When it comes to using Divi’s built-in Advanced Design Settings there are three controls that, once understood, can be used to stunning effect over and over again. They are your margin, padding, and gutter controls. First, let’s tackle margin and padding using the diagram below. The best way to describe the difference between margin and padding is that padding is the inner space of an element while margin is the outer space of an element.

margin-padding-diagram

image via stackoverflow

The two images below are a great illustration of the difference between padding and margin. The first image is a button with 20px of padding added to all sides. As you can see, it has increased the space within the button. The second example is that same button with the 20px added instead to its margin, opening up space around the button instead of inside it.

padding-button

20px padding added to button

margin-button

20px of margin added to button

Gutter is the same thing as margin, but the term is used to refer to the space between columns. So when you have a Divi row with multiple columns, like the image below, the space between each column is your gutter. And you will find controls for it in the settings for that row.

gutter-illustrated

gutters are the spaces between columns

Of the three–margin, padding, and gutter–it seems to me that margin and gutter are often under utilized by many users. For some reason the idea of padding seems to instantly click with a lot of people, but the various uses for margin and gutter controls do not. That’s why in today’s post we’re going to show you five creative ways to utilize Divi’s built-in margin and gutter controls to achieve more interesting layouts.

5 Creative Ways to Use Divi’s Built-in Margin & Gutter Controls

Subscribe To Our Youtube Channel

1. Staggered Elements

creative-divi-margin-gutter-controls-example-1

To achieve this staggered image effect nagivate to the advanced design settings for each image module. Add bottom margin to the first and third images. Add top margin to the middle image. I used 70px in each instance and got the above result. You can use whatever value works best for you.

2. Closed Grid

creative-divi-margin-gutter-controls-example-2

To achieve the closed grid I’ve created above you will need two rows of image modules, each with three columns. Navigate to each row’s general settings and flip the switch next to “Use Custom Gutter Width”. Then, drag the gutter width down to the lowest setting or simply add the value of zero to the input field. Once applied to both rows this will close the gutters between your images and result in a closed grid.

3. Overlapping Images

creative-divi-margin-gutter-controls-example-3

To achieve overlapping images all you need is a single row with two columns and an image module in each. Navigate to the left image module’s advanced design settings and add a negative right margin; I used -175px. Then, go to the advanced design settings for the right image module and add a top margin to push the image down, creating a more appealing overlap; I used 125px. Save these settings, save the draft or update the post and you will see that you now have overlapping images that look like an editorial collage.

4. Overlapping Text

creative-divi-margin-gutter-controls-example-4

Overlapping text is very similar to overlapping images but the way in which I’ve done it here requires a few more considerations. First, you’ll need more than one row. I used two rows, one full-width and one with two columns as seen below.

overlapping-text-back-end

this version of overlapping text requires two rows

The overlap itself occurs when you go into the module settings for the text module in the bottom row. In the advanced design settings tab, scroll to the bottom where the margin and padding controls are. Enter a negative value into the top margin field. I used -40px but you will likely have to use a different value depending on the fonts and font sizes you are using.

Text alignment can also be tricky when overlapping text. I found this particular balance by experimenting with adding various values to the left margin field under the advanced design settings and the text orientation under general settings.

5. Image Overlapping A Section

creative-divi-margin-gutter-controls-example-5

To achieve this effect, of an image overlapping another section, the first and most important requirement is creating an image that has a transparent background. I used an image from a past freebie we offered here on the Elegant Themes blog. If you’re not sure how to create a similar element you can download that freebie and see how we created those image elements.

Once you have an image designed for this kind of layout, create a full-width image module at the bottom of a section, above the section you’d like to overlap.

overlaping-section-back-end

full-width image module above the section you want to overlap

Finally, in your image module’s advance design settings tab, enter a negative value in to the bottom margin field. I’ve used -235px for this example. Your value will likely be different depending on your exact use case.

Conclusion

Diving deeper into Divi’s Advanced Design Settings is a step in the right direction for making your site stand out. In particular, the custom Divi margin, padding and gutter controls can be used in some very creative ways.

From our list you hopefully have some new ideas for how to make use of these settings. If you’ve not ventured off the default path yet, we encourage you to try out some of the techniques shown here. And of course we hope you keep coming back for more tutorials just like this one.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail image by Max Griboedov / shutterstock.com.

divi-2-6-logo

Divi 100 Day 22

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


119 Comments

    • Tom Ewer

      No problem, Edison. 🙂

    • Absolutely! Best guys – thank you

  1. Oh yeah! Overlapping images…that makes perfect sense now I have seen it here, nice one.

    • Tom Ewer

      😀 Glad we could be of service!

  2. Finally, I now understand gutter and how to overlap sections with images. Thank you!

    Ps. Yesterday’s post mentioned a new extension coming. Will that be tomorrow? Sorry for mentioning this, but it’s your own fault. You shouldn’t have been us so enthusiastic 🙂

    • Maybe Thursday??

    • Nathan B. Weller

      Yes, sorry about that Verdi. That was my mistake. Next Tuesday and every alternating Tuesday after (during Divi 100) we will be giving away a new extension or Divi code snippet. I made a change to the editorial schedule without changing the last section of yesterday’s post.

      • No problem Nathan, every Divi 100 post feels like a present.

        • I definitely agree with that, Verdi. 🙂

          Well done, ET team. Even when I’m already aware of something, I’m happy to get a nice reminder every now and then in the blog.

  3. Great tips! I actually love the when images are overlapping a section. It makes it seem very professional and custom. I didn’t realize it was so easy to achieve in Divi. Thanks!

    • Until toooooo many websites start doing it and then it just becomes boring.

      • and then our creative minds find something else that is going to be cool 🙂

      • Tom Ewer

        You’ve definitely got to pick and choose where you use these little flourishes – but for whenever it’s the right option, we’ve shown you how. 🙂

    • Tom Ewer

      No problem, Rick. 🙂

  4. This is a very good tips. I wish more of this to come. It help me a lots with design. Thank you so much.

    • Tom Ewer

      Thanks, Emily. 🙂

  5. Fantastic, i ve been using rustic methods for this, but this is simple thank you.

    • Tom Ewer

      No problem, Edwin!

  6. I love your advices!
    And I’m impatient for the New Divi. Thank you!

    • Tom Ewer

      Divi 3.0 is imminent – keep reading our Divi 100 Marathon posts to keep yourself occupied in the meantime. 🙂

  7. Nice! I am starting to use negative padding on my websites designs 😀

    • Hi Andre, please note that padding doesn’t accept negative values, only margin do.

      Hope it helps,
      Kind Regards

    • Tom Ewer

      Yes – remember it’s the margin and not the padding – but it’s great to see you implementing our tips!

  8. This is simply cool and great. Thought I will need bunch of CSS for the image overlapping. Love these tweaks…

    Thank you very much.

  9. Yesterday you said this in your blog post:

    “In tomorrow’s post we will be giving away another free Divi extension by Andy Tran and our development team. See you then!”

    Did I miss something?

    • Nathan B. Weller

      Sorry, that was a mistake on my part. I thought we would be publishing another extension but we have changed our schedule slightly. A new Divi extension or code snippet will be available next Tuesday and every other Tuesday after.

  10. Thank you… so much. Will be using some of these tips.

    • Tom Ewer

      Thanks, Cyndi. 🙂

  11. I wasn’t aware you could overlap with a negative margin! Awesome.

    • Tom Ewer

      With our Divi 100 Marathon, you learn something new every day. 🙂

    • Tom Ewer

      Thanks, Georgia!

  12. Where did the comments go? It says 4 comments when on the blog main page but 0 comments inside the post.

    • Nathan B. Weller

      Sometimes our caching causes a delay. They’re there.

  13. Brilliant!!!

    • Tom Ewer

      Thanks, Andrew!

  14. Fantastic advice!!

    • Tom Ewer

      Cheers, Chus. 🙂

  15. This so awesome. Keep these coming!

    • Tom Ewer

      Don’t worry, Mike. There’s another 78 posts to come!

  16. First of all, thanks for the useful advice and for the awesome product you steadily keep on making even more awesome. Secondly, I’d like to point out that many Divi users are acquainted with the more profane implications of HTML, but have a hard time wrapping their minds around the translations offered by the language packs. I’d like to reach out and offer my help with the German pack – who can I write to?

  17. This is the most helpful post ever!

    • Tom Ewer

      Thanks, Donna. 🙂

  18. This was excellent. I have been working with a client that just yesterday wanted to do an image overlay and a text overlay so this came right on time. Thank you so much. This is why I love the divi community.

    • Tom Ewer

      Thanks, LaToya. We love creating great posts for you to read, too. 🙂

    • Tom Ewer

      Thanks, Luiz. 🙂

  19. I was experimenting already with margin and padding, but it seems to me the effect is not quite predictable for the several devices. When I optimesed the effect for PC, on other screenformats it looks not the same.

    • Nathan B. Weller

      There is a device icon next to the margin controls. When you click that you can set different values for different sized screens.

      • That was something that should have been looked at in the video though.

        A full on missing segment.

        • Nathan B. Weller

          Respectfully I disagree Richard. Because of the interconnected nature of web design there is always something else to show or teach relevant to what you are talking about in a given post/video.

          In order to simplify and stay on point, we have to limit what we cover in each post/video. There were already five “quick tips” in one here and a lesson on responsive design settings would have taken the video length far beyond what most people would sit through.

          There is plenty of documentation on our multi-device settings in our official documentation and YouTube channel–so it’s not as if we’re trying to hide the fact that people might want to use them or that they are necessary.

          Additionally, we plan to create other full posts and videos on responsive design in the near future where we can fully explain ideal use cases and workflows.

  20. Fab advice. This should be a layout package for further use

    • Tom Ewer

      Thanks, Deirdre!

  21. So happy to have margins and padding explained very clearly! Also love the overlapping possibilities.

    One request for Divi 3.0 – it takes my brain one extra step every time I have to figure out padding or margin for right and left fields in the Builder (top–right–bottom–left instead of the easier top–left–bottom–right). I wish that the right number field was on my/the screen’s right and the left was on the left. You could also separate the side margins/padding from the top margins/padding and have it as top–bottom left–right. As a graphic designer who has used design apps for more years than I care to admit, it seems more intuitive to me.

    • Tom Ewer

      Thanks for your comment, Debbie.

      As for your suggestion, you might want to bring it up in our dedicated forum – https://www.elegantthemes.com/forum/ – where it could be implemented in a future update. 🙂

    • Except t-r-b-l is the standard css ordering for margin and padding CSS statements.

      PLEASE use standards when relevant. That’s why the pop up keyboards on your mobile devices use a qwerty arrangement instead of having the keys in alphabetical order.

  22. Great examples, thank you. It’s very helpful to see how you create these effects. I imagine that examples 3 &4 would need separate “Tablet” and “Smartphone” settings. Did you test how these layouts responded to smaller screens?

    • That was a complete missing segment of the whole video..

    • Nathan B. Weller

      Hi Jules, yes, these examples are likely to need separate settings for tablet and smartphone sized screens. However, this post is intended to teach people how to achieve the desired effects in the first place. Once you know how to do it, you can come up with the correct settings for the other device screens using the same logic.

  23. I am really impressed by the really good job you are doing! Thank a lot

  24. Perfect little tutorial.

    I’ve no coding skills. I’m not planning on being a developer. Just love to be able to control the design of my site. I’m falling in love with Divi. You guy’s rock.

    Even as a beginner I’ve been able to use Divi because of the Divi builder and importantly the training ~ and quite a bit of patience on my part!

    • Nathan B. Weller

      That’s so good to hear Jenn! Hope you keep coming back for more. If you ever have a request you’d like us to cover feel free to put them here in the comments. I do my best to read them all every day.

    • Tom Ewer

      Great stuff, Jenn – that’s what we like to hear! Keep going, and keep reading our Divi 100 series for more tricks and tips. 🙂

  25. Why not a Divi pack for this examples ? it will be very usefull…

    Regards

    • Nathan B. Weller

      If only we had the time and resources to make every day a freebie! But alas, we do not.

  26. i never considered what could really be done with gutters and margins but the examples that were showed are things that in been looking to do. Thanks for the tips.

    • Nathan B. Weller

      Glad we could shed some light in a new area for you 🙂

    • Tom Ewer

      No problem, Demetrius!

  27. Appreciate these tips! They’re coming in handy as I develop several new sites.

    For the Closed Grid, can I assume that this tip is for only 2 rows of images? What would be the settings if a client wants more than 2 rows? I tried a couple of tests to no avail – my understanding of margins/padding is still limited even after reading this great article…

    • Nathan B. Weller

      Well the closed grid only requires that you edit your gutters in the row settings. It should work exactly the same with three rows.

  28. Fantastic post. Thank you. One question. How do you reverse the order of which image overlaps the other.
    Thanks.

    • Tom Ewer

      Thanks, Anthony! It’s going to be a little trial and error on your part, as it depends on your website’s layout. If you’re struggling further, head over to our forums (https://www.elegantthemes.com/forum/) where you’ll no doubt find the help you need. 🙂

  29. It is important to realize that setting padding, margins, and gutter in pixels requires you to optimize the value for differing display resolutions (which was not noted in the post).

    Best practices is to use a relative measurement like ems or %, both of which Divi supports (but does not document). This way, as the module resizes itself, the margin and padding relationships remain constant and you don’t need different settings for each screen size.

    Note that you MUST type in both the measurement and the unit (e.g. 1.2em), as the sliders default to pixels.

    • Tom Ewer

      Thanks for the extra insight, Patrick. Much appreciated. 🙂

  30. Are all these new layouts in the divi file, or do you need to download and add?

    • Nathan B. Weller

      This one is not a layout pack. It’s simply a tutorial on how you can quickly and easily achieve the same results by following the instructions in the post.

    • Tom Ewer

      Thanks, Nicholas. 🙂

    • Tom Ewer

      No problem, Uxío!

  31. I love the timing of this post. I was looking into buying a Divi-extension to do the fancy overlapping… I was on the fence about paying for something that wasn’t ET made. Very happy for that now. I’d be pretty annoyed if I’d paid for something only to find out there is an easy way to do this yourself. Like I said, perfect timing! 🙂

    • Tom Ewer

      Great stuff, Beate! Let us know how you get on!

  32. I’m completely new to divi and I’m just trying to find out a bit more.

    How do these applied custom margins translate on mobile for example? Are there more margin settings for different media queries you can specify? Or do they get overridden by something else to look/behave OK in mobile still?

    Many thanks in advance.

    • Watching the video again I have just noticed ‘Always center image on mobile’ and a little mobile icon by the custom margin settings. So I’m guessing this probably answers my question. What does the little mobile icon do?

      • Nathan B. Weller

        The mobile icon next to the margin controls allows you to set different margin values for desktops, tablets, and phones.

  33. Very helpful! I always got confused with margins and padding. Now it’s clear to me. 🙂

    • Tom Ewer

      Good stuff, Andrej – glad to see the article has helped you. 🙂

  34. Lots of useful info here. Thanks so much!

    • Tom Ewer

      No problem, Caryn. 🙂

  35. This is great! As someone who just wants to make their website and blog posts look pretty and professional, without having to learn code, I’m loving learning all of the wonderful things that I can do with Divi.

    • Tom Ewer

      Thanks, Wendy. 🙂 There’s more to come, too – so stay tuned!

  36. Great tips! Really looking forward to Divi 3.0!

    • Tom Ewer

      Thanks, Stephen!

    • Yes! And me, too! 🙂

  37. Hi guys,

    I’m feeling a little more connected than I expected to, it’s eerie almost, for this is just the content I’d been wishing for this week!

    I’m relatively new to front-end-design and totally new to Divi for a fortnight now and my next Q for your great support team would’ve been:

    1. Is there a visualization of “margin”, “padding”, “gutter”?

    2. A tutorial on how to use that information well.

    You might wanna add the link to the Divi Rows and Row Ops. Tutorial, for there are some very good hints on layouting with padding, margin, and gutter settings, respectively, which I found very useful and which made me want more of the same sort, which you now presented to me with this blog post.

    And, generally, I wanted to say just how much fun it is to work with Divi and everything assorted and how well you organize and explain and, not to forget, code! it all.

    Huge thumbsup and lots of love from Germany,
    Stefan

    • Tom Ewer

      Thanks for your kind words, Stefan! Glad to see you’re feeling at home already. 🙂

  38. I have been a client for at least 4 years! and I use DIVI since it’s early days. It is wonderful to see the work you guys are doing and all the improvements, it only gets better! I advocate on ET behalf and manage to make several people to buy the membership with ET because you don;t need to know how to code to get an online presence. I love your work guys, DIVI has got to be the best THE BEST theme out there!

    • Tom Ewer

      Thanks, Roberta. 🙂 We’re pretty fond of Divi too, in case you haven’t noticed. 😉

  39. You guys (Elegant Themes team) are truly amazing!!

    • Tom Ewer

      Thanks, Sue. 🙂

  40. Great! these tips are very useful. I am really very happy of being part of this community. You at Elegant Themes are really doing a great job! Congrats!

    • Tom Ewer

      Thank you, Roxana. 🙂

  41. Hey guys,

    Tried out “5. Image Overlapping A Section” but it’s not working. The image is not overlapping the below section.

    Followed exactly the instructions in the post but the only thing happened was the image was pushed down, but it’s not overlapping the bottom section.

    Is there any other additional settings that I need to do? Why did you guys have that divider at the top of the image module? What do you mean by “full-width image”? Do you mean a image module with “Make This Row Fullwidth” enabled or do you mean the Full width module itself?

    Maybe you guys can include together the layout (.json) for the items created above?

    Much appreciated!

    Cheers,

    John

    • Tom Ewer

      Hello John,

      You’ll need to create a full-width module. I think the best course of action first of all would be to try and replicate what we’ve done exactly, even down to using the past freebie we offered. If at that point you’re still struggling, pop on over to our forums (https://www.elegantthemes.com/forum/) for the advice of others who may have had the same issue.

    • John,

      Above section – make background grey, for instance;
      Below section – make background transparent.

      Ignore the divider. 🙂

      (joao)

    • P.S.: “What do you mean by “full-width image”? Do you mean a image module with “Make This Row Fullwidth” enabled” – Yes.

  42. Thanks, really great explanation, one tiny question… Could I overlap the logo in the mai manu with the rest…
    I’d really love to

    • Tom Ewer

      There’s nothing to stop you adapting our advice and giving it a try. Let us know how you get on!

      🙂

  43. For #2 Closed grid, don’t you need to set row height at 0 as well or do you have another way to do this?

    • Nvm. I found out the workaround. Add negative top margin to the 2nd row and that would closed the gap.

  44. Went through everything except I hit a problem with #5. Instead of the image going above the bottom section, it went below.

  45. This has been one of my favorite DIVI posts – I have wondered how to overlap images. I added an email optin to my home page and had it overlap the slider – all looked great until I checked the mobile view – not so great. I finally had to create 2 email optins – one with a negative margin for my desktop (doesn’t show on phone) and another with no margin changes that doesn’t appear on the desktop but does appear on the phone. That seemed to work, although it seems like an odd way to have to do it.

    I’d love to see a little more information about how using negative margins can ‘negatively’ impact the mobile view.

    Still love the idea – just need to be careful with implementing!

    • Tom Ewer

      Thanks for your insight, Heather. Glad you finally figured out how achieve what you needed. 🙂

401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest