How To Build A Custom Loop Layout - Car Demo
Written by the Divi Engine Documentation Team
Introduction
Follow these steps to build the Custom Loop Layout from our Cars Demo website. Click HERE to see the demo page.
Preview
Description
How to create the Custom Loop Layout from our Car Demo website.
Difficulty
Easy.
Time
25 Minutes.
Step 1: Set It Up - Divi Library Layout
Start off by creating a Divi Library Layout (your Custom Loop Layout) containing one Section, two Rows and the modules you see in the image below.
1.) Add one Section with two Rows.
2.) Add the Post Meta and Thumbnail modules to the top Row and then Post Title, ACF Item, Repeater and View Post Button modules to the bottom Row.
Step 2: Customize Settings - The Top Row
Customize the Width of the Top Row in the Custom Loop Layout by setting the Width and Max-Width to 100%.
Design Tab
1.) Click the cog icon on the top Row.
2.) Click the Design tab.
3.) Select the Sizing section.
4.) Set the Width to 100%.
5.) Set the Max-Width to 100%.
Step 3: Customize Settings - Post Meta Module
Customize the Post Meta Module settings. The Post Meta Module in this tutorial uses tags so you will need to go to your Custom Post Type and create Tags, assigning your posts to each tag. While you can customize this module how you would like, below are the important settings to follow.
Content Tab
1.) Add a New Meta Item.
Content Tab Tags Meta Item Main Options & Specific Settings
2.) Choose Tags for your Meta Item.
3.) Select your custom post from the Post Type dropdown.
4.) Enable the "Link Items" button.
5.) Enable the "Show value/s as buttons."
Design Tab Button - Meta Value
6.) Enable "Use Custom Style For Button."
7.) Select white for your button text colour.
8.) Select red for your button background colour.
9.) Set the button border radius to be 100px.
10.) Set the button meta value font-weight to be Bold.
11.) Set the button meta value font style to be all capitals.
Step 4: Customize Settings - ACF Item Module
Customize the ACF Item Module settings. While you can customize this module how you would like, below are the important settings to follow.
Content Tab Main Options
Design Tab Item Text
1.) Select the Price ACF field (or another field) that you have created in the ACF plugin.
2.) Set the Item Font Weight as Semi Bold.
3.) Set the Item text Colour as Red.
4.) Change the Prefix symbol in the Content Main Options section of the ACF Item Module.
Step 5: Customize Settings - Repeater/Table/Tabs Module
Customize the Repeater/Table/Tabs Module settings. While you can customize this module how you would like, below are the important settings to follow.
Content Tab
1.) Add two ACF items to the Repeater Module assigning the correct ACF Field. Note that in each ACF Item you will need to turn off the "Show Label" button in the Main Options section and scroll down to the Image & Icon section to add an image.
2.) In the Grid Options, set the Gird Columns to Two.
3.) In the Grid Options, set the Module Grid Columns to Three.
4.) In the Grid Options, set the Custom Butter Width to 2.
Step 6: Add Custom Code
No custom code here.
Step 7: Conclusion
Save your Custom Loop Layout and assign it to an Archive Loop on the page of your choice.
More Support?
Please email us at [email protected] if you are unable to get Divi Machine working.