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

Last Updated on September 22, 2022 by 12 Comments

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

Welcome to post 2 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.


We made it to part 2 of the series! And I have to say that I am really enjoying building these layouts. Today, I’m going to show you how to create a grid layout for your videos that resembles a feature section of a product page or a landing page. This layout is made up of a sequence of ½ ½ column rows with each row containing a video and its corresponding description in each of the two columns. Then the next section alternates the order of the video and description from left to right and then from right to left. Since each of the rows stretch the fullwidth of the page and each of the columns keep the same vertical height, the layout looks stunning on all screen sizes.

I’m going to use the video module to add the videos and the blurb module to serve as a title and description section adjacent to the video. Like all of the layouts in this series, this one is also surprisingly easy to implement using Divi.

Here is what the Final Result will Look Like

video grid

video grid

The Concept & Inspiration

This concept is not new by any means. I was actually inspired to create this layout because of it’s familiarity with users. Many websites use a similar layout for showcasing features for their products or services. It allows for bigger content areas which I think creates great negative space for the text and striking imagery for the video.

This would be perfect for a company that uses video to promote product features but has many other uses as well. I hope you take advantage of this design for your next project.

Let’s get started.

Implementing The Design With Divi

Subscribe To Our Youtube Channel

First, add a regular section with a ½ ½ (2-column) structure.

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 for video]
Image Overlay URL: [upload a custom image for your video or generate one automatically from the video]

video grid

Design Options

Play Icon Color: rgba(255,255,255,0.87)

video grid

Save Settings

Next add a Blurb Module in the right column directly adjacent to the Video Module you just created.

video grid

Update Blurb Settings as follows:

Content Options:

Title: [enter title of video]
Content: [enter description of video]
Link: [you can enter the link url to another page if you want]
Use Icon: YES
Icon: [select icon]

video grid

Design Options:

Icon Color: #666666
Text Color: Light
Text Orientation: Center
Header Font: Roboto
Header Font Size: 52px
Header Letter Spacing: 1px
Body Font: Open Sans
Body Font Size: 20px
Body Text Color: #dddddd
Custom Padding on Desktop: 5% Top (you may need to adjust this depending on the amount of text you have in your description)
Custom Padding on Tablet and Smartphone: 20px Top, 20px Bottom

video grid

Advanced Options

Image/Icon Animation: Right To Left (this animation combined with the arrow icon will draw further attention to the video to the left.

video grid

Save Settings

Before we continue, go ahead and add your background image to your section. Go to the Section settings (blue area) and update the following:

Content Options:

Background Image: [enter a background image (mine is 2000 x 2200)]

Use Parallax Effect: YES
Parallax Method: True Parallax

video grid

Design Options:

Custom Padding: 0px Top, 0px Bottom

video grid

Save Settings
Next edit the row settings with the following updates:

Content Options

Column 2 Background Color: rgba(0,0,0,0.69)

Design Options

Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 1
Equalize Column Heights: YES
Custom Padding: 0px Top, 0px Bottom
Custom Marging: 0px Top, 0px Bottom
Column 1 Custom Padding: 0px Top, 0px Bottom
Column 2 Custom Padding: 0px Top, 0px Bottom

Things are starting to come into place now. You have your background image and you have created your first row. Now you are ready to duplicate that row. Click the duplicate icon on the row menu bar within the visual builder.

video grid

In the new row you just duplicated, drag the video module over to the right column and drag the blurb module over to the left column.

Now you just have to update the content of the video module to include the new video URL and the new cover image. For the Blurb Module, you will need to update the header and content that corresponds to your video. And you will also need to adjust the blurb icon to an arrow that points right (if you used the same icon I did) and switch the Image/Icon Animation to “Left To Right”.

video grid

Next we need to update the duplicated row settings to set the background of the first column. Go to row settings and update the following under the Content tab:

Column 1 Background Color: rgba(0,0,0,0.69)
Column 2 Background Color: none

video grid

We are making some headway. Now let’s see what our first two rows look like…

video grid

For the next two rows repeat the duplication process and update the content. Just remember that the more rows you have the longer your section background image will have to stretch to accommodate for the length of content.

For this example I added two more rows making it a total of four rows. Check out the final result.

video grid

Creating the Light Version

To change the previous dark video grid design into a light version, all you need to do is update a few of the design options.

For these edits, it may be a little easier to use the wireframe view.

video grid

Update Section Settings as follows:

Content Options

Background Image: [enter a light background image]

video grid

Update First Row Settings as follows:

Content Options

Column 2 Background Color: rgba(255,255,255,0.68)

video grid

Update the first row Blurb Module Settings as follows:

Design Options

Icon Color: #333333
Text Color: Dark
Header Text Color: #444444
Body Font: Roboto
Body Text Color: #666666

video grid

Update Second Row Settings as follows:

Content Options

Column 1 Background Color: rgba(255,255,255,0.45)

video grid

Use the right click options to copy the design of the blurb module in the first row and paste it to the blurb module on the second row.

video grid

That’s it! Check out the final result.

video grid

Responsive?

This one is a little tricky when it comes to how it behaves on smaller screen sizes. Because the default stacking order puts the left column above the right column, the result of this layout is a bit confusing. You can learn how to fix this problem on my previous post on how to change Divi’s column stacking order.

responsive design 2

Coming Up…

The next grid is going to surprise you. The semi-transparent background colors and gradients make the design very easy to match your own site. Check out the preview…

I hope you are enjoying the series so far. I look forward to hearing from you in the comments.

Cheers!

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

12 Comments

  1. Jason, I must say that this is just fantastic post, thanks a lot for this.

  2. Thank you for this article, perfect timing. I’m working on a website that will run into this issue for me. I appreciate the clear, simple blog post. You only get to this clarity if you know what you’re doing and can show others how to do it. I agree, it’s not necessary to be a web developer to create a website, especially with Divi. 🙂

    • Wow. Thanks for the kind words, Joan! So glad I was able to help. Hope the project goes well.

  3. Really useful, and just what I needed today!

    • Great!

  4. This is the reason there is so many none developers in the field of web design. Scrap like this should be left for 12 year olds that can’t write anything without the help of an IDE.

    • To each their own I suppose. Clearly, we don’t believe someone should need to be a web developer in order to create a cool website.

  5. Nice work, Jason! This is some good stuff – the whole series is. Really liking your design inspirations.

  6. Will these layouts be offered as a download pack?

    • No, we don’t offer every tutorial as a layout pack. Most of our tutorials are just that, instructional. But I do have a pretty big batch of free layout packs we’ve had designed and I’m working on scheduling them out one-per-week. Hopefully that will start next week.

  7. Hey, you guys are creating so much great content at the moment – but for some reason I’m not getting email alerts anymore!

    • Hey Simon, please re-sign up for the mailer on this page if you’d like to get Divi notifications again. We had a technical glitch last month a lost a few email signups as a result. We’d love to have you back!

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