How to Create Stunning Grid Layouts with Divi’s Video Module (Part 4)

Last Updated on September 22, 2022 by 16 Comments

How to Create Stunning Grid Layouts with Divi’s Video Module (Part 4)
Blog / Divi Resources / How to Create Stunning Grid Layouts with Divi’s Video Module (Part 4)
Play Button

Welcome to post 4 of 5 in our miniseries How to Create Stunning Grid Layouts with Divi’s Video Module. In this series we are going to walk you through how to create amazing grid layouts from scratch using the Divi Visual Builder. And if you are worried about this being too complicated, think again! All of these layouts can be created and styled using the Visual Builder without additional code.


I hope you are enjoying the grid layouts so far. Today’s layout is number 4 in the series, and it is one of my favorites (and fastest to implement). Not only is it easy (and fun) to build using Divi, but it is also customizable to fit the color scheme of your site. The background gradient options are the main feature of this design which have been used to create the two tone colors separated by a diagonal line. The spacing is also purposeful to make the videos readily perceived. Arguably, this design may fall outside the scope of what we would normally call a “grid”, but I think you will see the potential.

So here we go. I’m going to show you how easy it is to build this grid design using the video module and a few custom background elements.

Here is what the Final Result will Look Like

video grid

The Concept & Inspiration

I was looking for a nice and clean layout that organized small batches of videos to be used for things like tutorials or courses. This combined with my impulsive eagerness to play around with background gradients, I came out with this. I hope you like it.

Let’s get started.

Implementing The Design With Divi

Subscribe To Our Youtube Channel

First, add a regular section with a fullwidth (1-column) structure.

video grid

Next add a Text Module to the column. This will serve as a title or headline for the section of the page.

Update the Text Settings as follows:

Content Options
Content: [enter text for title]

video grid

Design Options

Text Color: Light
Text Font: Arimo
Text Font Size: 56px
Text Letter Spacing: 1px
Text Line Height: 1em

video grid

Save Settings

You won’t be able to see anything yet because you have white text on a white background but that’s okay. Let’s go ahead and add our section background gradient. Go to the Section Settings and, under the Content Section, update the following options:

Background Gradient Colors: #121212, #ffffff
Gradient Type: Linear
Gradient Direction: 198deg
Start Position: 45%
End Position: 45%

video grid

Next, update the Row Settings for the row you just added as follows:

Design Options

Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 4
Equalize Column Heights: YES
Custom Padding: 1% Top, 5% Right, 5% Bottom, 5% Left

video grid

Save Settings

Now add another row with a ⅔ ⅓ (2 column) structure directly under the row you just created.

video grid

Next, add a Video Module to the left column.

video grid

Update the Video Settings as follows:

Content Options

Video MP4/URL: [enter URL of your video]
Image Overlay URL: [enter overlay image URL]

video grid

Save settings

Next, duplicate (or copy) the video module you just created twice and drag (or paste) the two duplicate videos so that they stack on the right column.

video grid

Update the content of the videos to include the correct URL’s and cover images.

Go ahead and add a Blurb Module under the two video modules in the right column. This can serve as a description of the videos within this grid.

video grid

Update the Blurb Settings as follows:

Content Options

Title: [enter title]
Content: [enter content or description]

video grid

Design Options

Text Color: Light

video grid

Save Settings

Now edit the Row Settings for the row holding the videos you just created as follows:

Content Options

Background Gradient Colors: #4999c1, #121212
Gradient Type: Linear
Gradient Direction: 198deg
Start Position: 45%
End Position: 45%

video grid

Design Options

Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 4
Equalize Column Heights: YES
Custom Padding: 5% Top, 5% Right, 5% Bottom, 5% Left

video grid

Great! You finished the first section. We are almost done. Check out the progress so far.

video grid

To create the next section, duplicate the entire section you just built by clicking the duplicate section button..

video grid

Update the new section settings as follows:

Content Options

Background Gradient Colors: #ffffff, #121212 (these colors are in the opposite order of the first section)

video grid

Next update the Text Module Settings in the duplicated section with the following:

Design Options

Text Text Color: #333333

video grid

Save settings

To complete this section, update the Row Settings that contain your videos with the following:

Content Options

Background Gradient Colors: #121212, #4999c1 (basically you are switch the order of colors so they are in the opposite order of the first section)

video grid
Save settings

Now let’s check out the result after adding the second section…

video grid

If you haven’t already noticed, you can continue adding more sections easily since we already have these two sections created. Let’s create one more section just for good measure. Since our section background color is black at the bottom, we want to start the next section with a black background color at the top. That means we need to duplicate the first section at the top and drag it to the bottom of the page under the second section. This keeps the continuity of the design throughout the page.

Here is what it looks like after the third section is added:

video grid

That’s it! All finished.

Responsive?

This layout actually looks even better on mobile without any modifications. Check it out!

Further Customization

After building this grid layout with multiple sections, you can probably already notice how easy it would be to change the colors to match the theme of your next project. All it takes is changing the background gradient colors for the sections and rows.

If you would like to tweak the design further, I suggest adding semi-transparency to the gradient colors to expose the background behind them. Or try getting rid of one of the gradient colors altogether and see what it looks like. Here are a couple of examples of what changing just one gradient color can do…

video grid

You could also add a Video Slider Module to the grid on the left column.

video grid

Coming Up…

Coming up next is our last video grid layout in the series. This one gives you the option of keeping things nice and clean with subtle framing elements or using colors in a unique way to make each video standout.

Until then, I look forward to hearing from you in the comments.

Enjoy!

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Download a Free Bistro Theme Builder Pack for Divi

Download a Free Bistro Theme Builder Pack for Divi

Posted on March 15, 2024 in Divi Resources

Divi Theme Builder Pack

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a...

View Full Post
Get a Free Art Therapist Layout Pack for Divi

Get a Free Art Therapist Layout Pack for Divi

Posted on March 11, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Art Therapist Layout Pack that’ll help you get your next Art Therapist...

View Full Post

16 Comments

  1. Thanks for your sharing idea. It’s possible to put responsive fb video instead ytb ?
    I tried it with code module, but it’s not responsive.

    • Sorry Vladislav. I’m not sure.

  2. Thanks Jason! Perfect timing for me to be inspired by this design. I am going to use it right away. Thank you for taking the time to do this series.

  3. Thanks

  4. Thanks!!!

  5. Hello Jason, I think this is really a nice post, would like to get more such posts in future.

  6. Hi Jason,

    Thanks for the tuto about grid layouts with video.

  7. Very Superb Article.
    Thanks a lot for sharing this information

  8. This is, by far, my favorite! The simple and alternating color scheme, along with the angles, make for a very sleek and clean look. And the layout can be used for other media assets as well, I imagine, including photos, etc.

    Thanks for the detailed tutorial and inspiration, Jason!

    • Exactly Mathias! You can use this for a number of things. Let me know if you use it for something else. I’d like to see that. Anyway, thanks for the support.

  9. Looking great but I don’t get it! How can I have second video or third? I have to replicate it.

    • Jordan,

      Sorry for the confusion. Are you asking how to have another video section? or have another video module? Thanks.

  10. Hello Jason,

    Thanks for the very clear and precise tuto about grid layouts with video. I will try on my personnal website !

  11. These are awesome. As usual, more awesome reasons to be a loyal DIVI fan.

  12. hi. very nice tutorial. would you mind posted the finished product or am i clicking on the wrong link:)

  13. Hi Jason Champagne, I have read last 3 part in this series. And also just finished part 4. I have learn something new about Divi. Thank you so much for your hard your.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today