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

WordPress Development for Intermediate Users: Building Plugins
June 22, 2016
WordPress.tv Blog: Spotlight: WordCamp Miami 2016
June 22, 2016
Show all

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_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

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.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Creative Ways to Use Divi’s Built-In Margin and Gutter Controls appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar