How to use Divigrid: Listgrid module in Divi

By Divigrid

August 28, 2022

In this article, we will learn about the features of ListGrid and how to use those features to create beautiful ListGrid designs.

We will show you how to create different list grids using the features. The usage of the features will be discussed in detail while creating each ListGrid.

Let’s get started…

List Grid Module Overview

Step – 1: Install Divigrid

First, you will need to do the following:
  • If you haven’t yet, install and activate the Divigrid.
  • Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  • Choose the option “Build From Scratch”/ “New Section”.

We will create three list grids and show how to create them with our module. So let’s see what kind of list grids we are going to create and what they look like.

Create List Grid Using Connector

Divi List Grid final result

Create List Grid Using Shape & Hover Effects

 

Divi ListGrid _ Design

Create Hexagonal Image List Grid  Using Shape

Divi ListGrid _ Divigrid Design

The feature we will be working with is called Connector. In this tutorial, we will show how to create a ListGrid and connect multiple ListGrid modules with a connector.

Step -2: Creating a Section Layout

To begin, add a section.

after that, add a two-column row to the section.
Now the Section and its Row are in place.

Add regular section
Added two column row

Step -3: Add Divi ListGrid Module

We are ready to add our Divigrid List Grid module. Write “Divi List Grid” in the search box. Add this module to create a responsive list grid module for the page/section.

After adding the list grid module, we found an image, title, paragraph, and badge options.

Added Divi List grid module
Divi List grid Item

Create List Grid Using Connector

First, we are going to create a list grid using a connector. After adding Divi List Grid Module Change some text for our design.

update the content settings of the module as follows:

  • Write Title & paragraph text.
  • Write badge number/ text.
  • Remove the image and use the Icon from the “images & Icon” toggle.
  • Use List grid box-shadow from the list grid design tab.
  • List grid Item padding: 10px;
Divi List grid Changing content

Step 4: Customize the item

End of choosing our content, badge, and icon. Now let’s design each piece of content.

Since we will be creating many similar list items, we will design them by going to the Design tab of the List Grid to design all the items together. This will speed up the work and allow us to make any future changes together quickly.

First, update the icon from the “Images & icons settings” of the list grid item in the Design tab. What to change in the icon is written below:

  1. Icon size : 28px;
  2. Icon Vertical Alignment: Center;
  3. Icon color: #FFFFFF;
  4. Icon width: 70px;
  5. Icon height: 70px;
  6. use gradient background: ON;
  7. 1st COlor: #fd5d5d;
  8. last color: #ff8c8c;
  9. gradient type: Linear;
  10. Gradient direction: 90deg;
  11. Start position: 25%;
  12. Icon Container margin-left: -40px;
  13. Icon Container margin -right 10px;
Divi List grid Icon Styling
Divi List Grid icon styling

Second, Update the Title from the “Title Text” of the list grid in the design tab. What to change in the title is written below:

  1. Title tag: H2;
  2. Title font: Roboto Slab;
  3. Title font-weight: Semi Bold;
  4. Text color: #000000;
  5. Title text size: 22px;
Divi List Grid title settings

Third, Update the Content from the “Content Text” of the list grid in the design tab. What to change in the content is written below:

  1. Content font: Poppins;
  2. Content font-weight: light;
  3. Content text color: #000000;
  4. Content text-size: 16px;
Divi List Grid content settings

Fourth, Update the Badge from the “Badge Settings” of the list grid in the design tab. What to change in the badge is written below:

  1. Badge font-size: 18px;
  2. Badge Vertical Alignment: Top;
  3. Badge font-weight: Semi Bold;
  4. Badge width: 70px;
  5. Badge height: 50px;
  6. Badge color: #FFFFFF;
  7. use gradient background: ON;
  8. 1st COlor: #fd5d5d;
  9. last color: #ff8c8c;
  10. gradient type: Linear;
  11. Gradient direction: 90deg;
  12. Start position: 25%;
  13. Badge Container margin: -30px;
Divi List Grid badge settings
Divi List Grid badge bg styling

Step 5: Adding Connector

This is the main feature part of this list grid. In the list grid settings content area, we see a toggle named connector. we will now be using and designing it.

Under the connector, there are two switches. If we ON the use connector switch, we will see a bunch of options to design a connector.

We will use the connector on the left of the list for the first column. That is why the work we will do is written below.

  1. Connector position: Left;
  2. Connector color: #fd5d5d;
  3. Connector size: 4px;
  4. Horizontal connector spacing: -103px;
  5. Vertical connector spacing; -19%;
  6. Vertical connector position: 50px;
  7. Vertical connector height: 434px; ( for all the modules)
Divi List Grid connector settings

Step – 5: Duplicate modules

Hey, Our first module is done. Now we can proceed to the next step. Isn’t that so?

Now, Let’s copy the module we created three times. Now margin bottom should be given as required. Because otherwise, each item will stick to one, which doesn’t look good at all.

  1. List grid margin-bottom: 44px;
Divi List Grid Duplicate modules

Now, click on module settings and copy the module from there and paste it into the 2nd column. Update the connector settings as follows:

  1. Connector position: right;
  2. Horizontal connector spacing: -76px;
  3. Vertical connector spacing; -13%;
  4. Vertical connector position: 52px;
  5. Vertical connector height: 434px; ( Consider for all the modules)
Divi List Grid Right connector

Let’s see both columns together.

Divi List Grid Two Column

Final Result ( Connector List Grid )

Here is the final result of our first List Grid module. I hope you enjoy this List Grid.

Divi List Grid final result

This is the end of our first list grid.

Using Shape & Hover Effects

Now we are starting to create our second module. In this List grid, we are using hover effects and shape features. Hopefully, it will be another fantastic List Grid.

We are starting from step 4 of this article. We start from step 4 of this article. That means we will start after adding the Divi List Grid module. So let’s begin… 

Step 4: Customize the item

We are going to create a list grid using a connector. After adding the Divi List Grid Module Change some text for our design.

update the content settings of the module as follows:

  • Write Title & Paragraph text.
  • Write badge text.
  • Remove the image and use the Icon from the “images & Icon” toggle.
  • List Grid Item Margin-Bottom: 20px;
  • List Grid Item padding: 
  • List Grid Item padding-top: 20px;
  • List Grid Item padding-bottom: 20px;
  • List Grid Item padding-left: 30px;
  • List Grid Item padding-right: 10px;
  • List Grid border Rounded: 10px;
  • List Grid Box-shadow: outer shadow;
Divi List Grid Re-write contents

Using Shape

First, We will work on the Icon. We will use the shape on the icon. We will work with the diamond shape of different shapes. From the “Image & Icon” toggle option in the Content Settings, we choose an Icon.

After that, In the Design tab, turn on the Shape Settings switch. I will select the diamond from different shapes. The tasks to be done after selection are written below. 

  1. Shape pattern: Diamond;
  2. Shape Container size: 80px;
  3. Shape Icon position: 70px;
  4. Shape Icon color: #FFFFFF;
  5. Shape border color: #a4c8fc;
  6. Shape Border width: 4px;
  7. Shape background: Background Image;
  8. Use background Gradient: ON;
  9. Select First color: rgba(0,0,0,0.5);
  10. Select Last color: rgba(0,0,0,0.5);
  11. Place Gradient Above Background Image: ON;
  12. Add Background Image.
Divi Listgrid Design-2 shape design

Background Gradient color and Background image settings here in those pictures.

Divi Listgrid Design-2 gradient color
Divi Listgrid Design-2 shape bg image

Second, Update the Title from the “Title Text” of the list grid in the design tab. What to change in the title is written below:

  1. Title Tag: H2;
  2. Title Font: Montserrat;
  3. Title Font-weight: Semi Bold;
  4. Title text size: 20px;
Divi Listgrid Design-2 title design

Third, Update the Content from the “Content Text” of the list grid in the design tab. What to change in the content is written below:

  1. Content Font: Poppins;
  2. Content Text Size: 14px;
  3. Content Wrapper Spacing(
  4. Content Wrapper margin-left: 20px;
  5. Content Wrapper Margin-right: 20px;)

Fourth, Update the Badge from the “Badge Settings” of the list grid in the design tab. What to change in the badge is written below:

  1. Badge font-size: 18px;
  2. Badge Vertical Alignment: Bottom;
  3. Badge font-weight: Semi Bold;
  4. Badge width: 80px;
  5. Badge height: 40px;
  6. Badge Color: #1665d8;
  7. Background Color: #ecf3fc;
  8. Badge Rounded Corners: 5px solid;
Divi Listgrid Design-2 badge design

Fifth, Update the Border style from the “Border” of the list grid item in the design tab. What to change in the border is written below:

  1. Border Style: Top Border;
  2. Top Border Width: 4px;
  3. Top Border Color: #1e6ad9;

Step – 5: Use Hover Effects

In the List Grid Settings Design Tab, there is a toggle named Hover Effects.

After opening, Choose Hover Effects Style “overlay”. And Update the Hover Effects Styles from the ” Hover Effects” options. What to change in the hover effects is written below:

  1. Hover Effects Style: Overlay;
  2. Overlay Style: Diagonal Swipe;
  3. Overlay Color: #b8fff9;
  4. Overlay Size: 400px;
  5. Overlay Title Color: #000;
  6. Overlay Content Color: #000;
Divi Listgrid Hover effects design

Step – 6: Duplicate modules

Hey, Our first module is done. Now we can proceed to the next step. Isn’t that so?

Now, Let’s copy the module we created two times. Now margin bottom should be given as required. Because otherwise, each item will stick to one, which doesn’t look good at all.

ListGrid Item margin-bottom: 20px;

Divi Listgrid Design-2 duplicate columns

Update the rest of the Items as follows:

2nd Item

Here, we are changing List Grid Items’ top border color, Icon border color, and badge color. What needs to be changed is written down.

  1. Change Icon
  2. Re-write Title & Paragraph.
  3. Change Shape Background Image,
  4. Shape Border Color: #ffdba3;
  5. Top Border Color: #f6c25b;
  6. Badge Color: #f6c25b;
  7. Badge Background Color: #fff5e2;

3rd Item

The same changes should be made in the 3rd item. Only the colors will be different.

  1. Change Icon
  2. Re-write Title & Paragraph.
  3. Change Shape Background Image,
  4. Shape Border Color: #fcc9c9;
  5. Top Border Color: #f85252;
  6. Badge Color: #f85252;
  7. Badge Background Color:#fce8e8;

Second & Third Item in one image.

Divi Listgrid Design-2 1st colum items

Now, click on module settings and copy the module from there and paste it into the 2nd column. Update the items as follows:

2nd Column 1st Item

We have written below the changes that have taken place in the 1st row of the 2nd column.

  1. Change Icon
  2. Re-write Title & Paragraph.
  3. Change Shape Background Image,
  4. Shape Border Color: #d8f9d1;
  5. Top Border Color: #60c354;
  6. Badge Color: #60c354;
  7. Badge Background Color:#daf9d4;

2nd Column 2nd Item

  1. Change Icon
  2. Re-write Title & Paragraph.
  3. Change Shape Background Image,
  4. Shape Border Color: #cbbffc;
  5. Top Border Color: #744ee2;
  6. Badge Color: #744ee2;
  7. Badge Background Color:#e0dbfc;

2nd Column 3rd Item

  1. Change Icon
  2. Re-write Title & Paragraph.
  3. Change Shape Background Image,
  4. Shape Border Color: #ffe7d6;
  5. Top Border Color: #f19445;
  6. Badge Color:#f19445;
  7. Badge Background Color:#ffeee2;

Our List Grid is done. Now, let’s both columns together.

Divi Listgrid Design-2 columns

Final Result List Grid ( Shape)

Here is the final result of our second List Grid module. I hope you enjoy this List Grid.

Divi- Listgrid Design-2 final result

Create a Hexagonal Image Using Shape

After creating two awesome list grids, we are now going to create the third and final grid.In this grid article, we will try to show how to give a hexagonal shape to an image using our shape settings.

A review of this grid shows that we need to do the same things we did with the content and badges of the previous two list grids. So to shorten our article, I will not show the content and badge settings step by step. I will show it once and write the CSS with it.

In this article, we will show step by step how to make an image hexagonal with our shape feature and item background settings. Hope you can easily understand.

So Let’s start another journey with List Grid Module…….

Customize the Item

After selecting the Divi List Grid from the module selection option, place the title, description, badge text, and image. For the sake of speed, we are not showing them for now. Hope you understand. Then the tasks to be done are discussed step by step.

First, we are going to customize an item, then we will customize an Image to a hexagonal shape. We will choose the background gradient color from the item background option. Also we will choose a background mask from another background option.

  1. Gradient First Color: #83bd75;
  2. Gradient Last Color: #4e944f;
  3. Gradient Type: Elliptical;
  4. Background Mask: cubes;
  5. Pattern Color: rgba(0,0,0,0.05);
  6. pattern Repeat Origin: Top Right;
Divi list grid item design-3 background

After that, turn on Use Shape by going to the list grid item’s Shape Settings toggle. Then from the Shape Pattern Select option ‘Diamond; must choose After choosing the pattern you need to do the work carefully for a beautiful design. Or you can follow our CSS below.

  1. Use shape: ON;
  2. Shape pattern: Diamond;
  3. Shape Container Size: 120px;
  4. Shape Border Color: #FFFFFF;
  5. Shape Border Width: 10px;
  6. Shape Background Color: #FFFFFF;
Divi list grid item design-3 shape settings

It became a hexagonal image shape. Very simple isn’t it?

But it looks weird. Add some padding and margin from “Spacing” in “Div List Grid Settings” to make this grid look nice. For ease of understanding, you can follow the code below.

  1. List Grid Item Margin Bottom: 50px
  2. List Grid Item Padding top: 10px
  3. List Grid Item Padding bottom: 10px
  4. List Grid Item Padding left: 0px
  5. List Grid Item Padding right: 10px
  6. Image/Icon Container Margin left: -50px;
  7. Image/Icon Container Margin right: 10px;

The required CSS for the title and content are written below.

Divi list grid item design-3 spacing
Divi list grid item design-3 badge & image
  1. Title Tag: H2;
  2. Title Font: Montserrat;
  3. Title Font Weight: Semi Bold;
  4. Content Font: Roboto;
  5. Content Font Weight: Regular;
Divi List Grid Content & title

A lot of work has to be done on the badge. Go to the Design tab of the Divi List Grid Item Settings and follow the steps below.

  1. Badge Vertical Alignment: Top;
  2. Badge Font Weight: Semi Bold;
  3. Badge width: 60px;
  4. Badge Height: 60px;
  5. Badge Color: #000000;
  6. Badge Background Color: #FFFFFF;
  7. Badge Rounded Corners: 100%;
  8. Badge Border width: 2px;
  9. Badge Border Color: #4e944f;
Divi list grid item design-3 badge settings
Divi list grid item design-3 badge border settings

Now, Let’s copy the module we created two times. Use different colors and images. The look of the design will emerge well.

Divi list grid item design-3 1st column

Here now again, click on module settings and copy the module from there and paste it into the 2nd column. Do the necessary things.

Here we go, let’s see our hexagonal module.

We’ve created three grids with our Divi List Grid module. If you want to create a grid without any custom code, our list grid is the best solution for you. You can create many more beautiful designs using our modules.

Divi list grid item design-3 final result

Conclusion

In conclusion, the Divigrid Listgrid module is a powerful tool that can help you create beautiful, responsive grids in Divi. With a little bit of practice, you can easily create stunning layouts that will impress your visitors. So what are you waiting for? Give it a try today and see what you can create!

If you want to see our list grid demo design please visit  list grid demos

Divigrid

Divigrid is the perfect way to make your website stand out from the crowd. With its unique grid system, you can create a truly one-of-a-kind design that will wow your visitors.

Get 10% OFF for Subscribe Now

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

You May Also Like