This article was originally published on this site


Modern web design is still about breaking the grid. This is done by staggering elements and design accents in positions that break the normal structure of a grid layout. You can see us apply a lot of these broken grid designs throughout our awesome Divi layouts. Usually, this involves something like moving modules outside of a column or row so that they extend outside a container or overlap other elements on the page. But you may not have thought of moving the actual column.In this tutorial, I’m going to show you how to stagger Divi columns and modules for unique broken grid designs. With Divi’s new column options, you can easily move columns around as well as the modules they contain. This allows you to design both the module and the column with unique styles for a creative broken grid design.
Let’s get started!
Sneak Peek
Here is a quick peek at the design examples we will build in this tutorial.
stagger divi columns and modules
stagger divi columns and modules
stagger divi columns and modules
Download the Stagger Divi Columns and Modules Layout for FREE
To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.
Let’s get to the tutorial shall we?
Basic Idea Explained
The basic idea behind how to stagger Divi columns and modules for unique broken grid designs involves using Divi’s transform translate property to position columns and the modules they contain.
stagger divi columns and modules
Once the elements are staggered, you have all the design features of a column and a module to add design accents that create unique broken grid designs.
stagger divi columns and modules
So for example, you could add a unique background (color, image, etc.) with a box shadow to your column and a completely different background and box shadow to your module.
stagger divi columns and modules
Now that you have the basic idea, let’s create the design from scratch.
What You Need to Get Started
To get started, you will need to have the following:

  1. The Divi Theme installed and active
  2. A new page created to build from scratch on the front end (visual builder)
  3. A couple of Images to be used for mock content

After that, you will have a blank canvas to start designing in Divi.
Staggering Columns and Modules to Create a Unique Broken Grid Design in Divi
First, create a new regular section with a two-column row.
stagger divi columns and modules
Then add a call to action module in column 1.
stagger divi columns and modules
Change the title text to “Divi Module” or another short title of your choosing.
Then Update the module with a dark background color and then change up the Title text as follows:
Background Color: #333333Text Alignment: leftTitle Font: bitterTitle Text size: 50pxTitle Letter Spacing: 2px
stagger divi columns and modules
Then update the call to action module button as follows:
Button Text Size: 16pxButton Text Color: #333333Button Background Color:Button Border Color: #ffffffButton Border Radius: 25pxButton Letter Spacing: 2pxButton Font: RalewayButton Font Weight: BoldButton Font Style: TT
stagger divi columns and modules
Next, copy the module and paste the duplicate in column 2 so that you have the same call to action module in each column.
stagger divi columns and modules
Update Row Spacing
Now let’s add some top and bottom margin to the row to make room for the design.
Margin: 20% top, 20% bottom
stagger divi columns and modules
Add Column Background Images
Even though we won’t be able to see them yet, we are going to add background images to each of the columns. They will become visible once we move our module outside the column container with transform translate.
Go ahead and open the settings for column 1 and add a background image.
stagger divi columns and modules
Then open the settings for column 2 and add a background image.
stagger divi columns and modules
Add a Box Shadow to each column
Open column 1 settings and add the following box shadow:
Box Shadow: see screenshotBox Shadow Horizontal Position: 0pxBox Shadow Vertical Position: 0pxBox Shadow Spread Strength: 100pxShadow Color: rgba(151,178,193,0.21)
stagger divi columns and modules
Then add the same box shadow style to column 2. To speed things up, you can use the right click options to copy the box shadow styles in column 1 and then paste them to the box shadow styles in column 2.
stagger divi columns and modules
You will notice the box shadows will overlap. Using a semi transparent box shadow color will help create a cool overlapping effect. This is the great thing about using box shadows in design. Unlike borders, you can add large shadows that look like borders but they don’t affect the actual spacing of the layout.
Stagger Divi Columns Using Transform Translate
At this point, we are ready to start staggering the columns and modules to complete the broken grid design. First, we need to move the columns to the outer edge of the page. Then we can move the modules toward the center later.
Stagger Column 1
Open column 1 setting and add the following transform translate property.
Transform Translate X axis: 25%Transform Translate Y axis: -25% (desktop), -5% (tablet)
stagger divi columns and modules
Stagger Column 2
For column 2, add the following transform translate property.
Transform Translate X axis: -25%Transform Translate Y axis: 25% (desktop), 5% (tablet)
stagger divi columns and modules
Stagger the Modules Using Transform Translate
Now we are ready to stagger our modules by moving them outside of the column container. This will expose the column background image and allow us to add another box shadow to the module for an additional overlapping design element.
Stagger Module 1
Open the settings for the call to action module in column 1 and update the following:
Transform Translate X axis: -60%Transform Translate Y axis: 50% (desktop), 10% (tablet)
stagger divi columns and modules
Add a box shadow to Module 1
Then add the following box shadow to the call to action module in column 1:
Box Shadow: see screenshotBox Shadow Horizontal Position: 0pxBox Shadow Vertical Position: 0pxBox Shadow Spread Strength: 100pxShadow Color: rgba(151,178,193,0.21)
stagger divi columns and modules
Stagger Module 2
To move the module in column 2, update the following:
Transform Translate X axis: 60%Transform Translate Y axis: -50% (desktop), -10% (tablet)
stagger divi columns and modules
Add a box shadow to Module 2
Next, we can add a box shadow to the call to action module in column 2. We need to make this box shadow almost completely transparent because it will be overlapping module 1 and we don’t want to make it difficult to read the content.
Box Shadow: see screenshotBox Shadow Horizontal Position: 0pxBox Shadow Vertical Position: 0pxBox Shadow Spread Strength: 100pxShadow Color: rgba(151,178,193,0.09)
stagger divi columns and modules
Add a Row Box Shadow Frame
To complete the design, let’s add a box shadow to the row that serves as a frame design element that sits in the background.
Box Shadow: see screenshotBox Shadow Vertical Position: 0pxShadow Color: #97b2c1
stagger divi columns and modules
Final Design
Now let’s check out the final design.
Desktop
stagger divi columns and modules
Tablet
stagger divi columns and modules
Phone
stagger divi columns and modules
Experimenting with Different Designs
What is cool about this design is that it allows you can easily change the number of modules, colors, and spacing for new designs. And you can stagger Divi columns and modules in various positions as well.
Adding spacing to the module to create a column background image of equal size to the module
Because the column size is dictated by the size of the content it contains, whatever space you add to the module will also increase the size of column. And since our column has been staggered with a background image, this is an easy way to have that background image always scale with the size of the module for a balanced design.
For example, open the settings for the call to action module in column 1 and update the padding as follows:
Padding: 20% top, 15% bottom
And notice how the column 1 background image scales with the size of the module.
stagger divi columns and modules
Adding more modules
In the same way adding more padding to the module increases the size of the column background, adding more modules in the column will also increase the size of the column background.
For example, duplicate the module in column 2 and notice how the background image expands to accommodate the space needed for the two modules in the column.
stagger divi columns and modules
Then you can move the top module in column 2 over to the right a bit for a nice alternative design.
stagger divi columns and modules
Here is the result.
stagger divi columns and modules
Changing Colors
If you are looking to match the layout with your own color scheme, a great way to do that is to update the box shadow colors.
Here is an example of what it would look like when updating the semi transparent box shadows for column 1, module 1, and module 2.
stagger divi columns and modules
Final Thoughts
I hope this tutorial has given you a little inspiration for how you can stagger Divi columns and modules to create your own unique broken grid designs. The technique is really simple, involving mainly a few transform translate properties to stagger the columns and modules and some box shadows to create the unique broken design. Feel free to explore more color options and introduce more modules to see where the design might take you.
I look forward to hearing from you in the comments.
Cheers!