How to Build a Custom Blog Feed using Loop Builder

In this article, we will provide a step-by-step guide on how to use the Loop Builder in Divi 5 to build a custom Blog Feed.

Add a Section.
Edit the Section's settings and in the Content tab → Background → Background Color, set it to be #EFEFEF.
Click on the Add New Row icon to add a Row.
Choose the Row's layout to be a single column.
Click on the Add New Module icon to add a Module.
1. Choose the Text module or the Heading module. This will be used to display our section's title, such as Our Blog.
Click on the Add New Row icon to add a new Row.
For the Row's layout, under the Offset Columns, choose the 9th option.
Close the Add New Module modal.
Edit the Row's settings and open the settings for the 2nd column.
In the Content Tab → Loop, enable the Loop Element option.
Set the Post Per Page to 9.
Set the Post Offset to 1. This is important because in this loop, we need to display posts starting with post number 2.
Use the Navigation Breadcrumb and click on the Row option to open the Row's settings.
Go to the Design Tab → Layout → Layout Wrapping and enable the Wrap option.
In the second column, add the Group by clicking on the Add New Module icon .
Add the Image module.
Click on the Dynamic Content icon.
Choose the Loop Featured Image option.
Choose the Thumbnail Size and click Apply.
Hover over any of the Image modules and click on the Add New Module icon to add a Group.
Inside this new Group, add the following modules:
1. Text module. Click on the Dynamic Content icon and choose Loop Publish Date.
2. Heading module. Click on the Dynamic Content icon and choose Loop Post Title.
3. Text module. Click on the Dynamic Content icon and choose Loop Excerpt.
Use the Navigation Breadcrumb and click on the Group option to open the settings for the second group.
In the Content Tab → Background → Background Color, set the White color.
In the Design Tab → Spacing → Padding, set the following values:
1. Bottom: 15px
2. Left: 15px
3. Right: 15px
Open the settings of the first Group and in the Design Tab → Layout Style → Vertical Gap set 10px.
Open the settings of the first Group and in the Design Tab → Border → Border Radius set 15px.
(optional) Set styles (background, font, text color, font size, etc.) for the modules inside the second Group.
Click on the Add New Module icon in the first column.
Click on the Add New Row tab and choose a 2-column Row option.
Open the Row's settings and:
1. In the Content → Tab → Loop, enable the Loop Element option.
2. Set the Posts Per Page value to 1.
3. In the Design Tab → Layout → Horizontal Gap, set it to 0.
4. In the Design Tab → Sizing → Size, enable the Grow to Fill option.
5. In the Design Tab → Border → Border Radius, set it to 15px;
In the first column of this new Nested Row, add the Image module.
1. Click on the Dynamic Content icon.
2. Choose the Loop Featured Image option.
3. Choose the Thumbnail Size and click Apply.
4. Open the Design tab → Sizing and enable the Grow to Fill option.
Click on the Add New Module icon in the second column and add the following modules:
1. Text module. Click on the Dynamic Content icon and choose Loop Publish Date.
2. Heading module. Click on the Dynamic Content icon and choose Loop Post Title.
3. Text module. Click on the Dynamic Content icon and choose Loop Excerpt.
Edit the Second Column settings and:
1. In the Content Tab → Background → Background Color, set it to #000000.
2. In the Design Tab → Layout Styles → Justify Content, enable the Center option.
(optional) Set styles (font, text color, font size, etc) for the modules inside Column 1 of the Nested Row.