How To Build A Posts Filter - Demo

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to build the Posts Ajax Filter page on our demo site. Click HERE to see the Demo page.

Preview

Description

How to create the posts Ajax Filter page on our demo website.

Difficulty

Easy-Medium.

Time

20 Minutes.

Step 1: Set It Up - Custom Loop Layout

Head over to Divi > Divi Library and create a new Custom Loop Layout.
Add a title, Section, Row and two modules - the Thumbnail and Post Title.

Section Settings

Padding:
Bottom and Top: 0px

Thumbnail Settings

Box Shadow:
The first option available.

Post Title Settings

Title Font:
Poppins.

Title Font Weight:
Semi-Bold.

Title Text Size:
18px.

1.) Add the Thumbnail module.
2.) Add the Post Title module.

Step 2: Set It Up - Your Filter Page

Head over to your Pages section (or another area such as the Theme builder) and create a new page.
Add a title, Section, Row and two modules - the Filter Posts and Archive

1.) Add the Filter Posts module.
2.) Add the Archive Loop module.

Step 3: Customize Our Settings - Filter Post Module

Customize the Filter Post Module to the settings that you want - but below are the important ones to follow to get this style. For more information on this module, please visit our documentation to your left.

Content Main Settings Main Options

1.) Change Filter Update Type to Update after each field change

Content Main Settings Layout Options

2.) Set Filter Location to be Fullwidth Column.
3.) Set Number Of Columns Desktop to be 3.
4.) Set Number Of Columns Tablet to be Auto.
5.) Set Number Of Columns (Mobile) to be 1.
6.) Column Min Width to be 100px.
7.) Gap Between Columns to be 20px.

Content Filter Item

8.) Add one Category filter assigned to your Post Type. Set the Category Display Mode to filter "All Categories And Sub Categories" and the First Option Text in Select Filter Options to be "Select Category."
9.) Add one Search filter assigned to your Post Type. Set the Placeholder Text in the Text Filter options to be the text, "Search Products."
10.) Add one Tags filter assigned to your Post Type. Set the First Option Text in Select Filter Options to be "Select Tag."

Main Settings Design Tab

11.) In the Main Settings, Design Tab set the Item Text and Filter Heading Text font to be "Poppins."
12.) Design your "Reset" Button. We made the Text white, the Background Color black and the Border black. We also made the button icon to show on hover.

Step 4: Customize Our Settings - Archive Loop Module

Module Options

1.) Set the Post Type to your post type.
2.) Set the Loop Style to a Custom Loop Layout.
3.) Assign the Loop Layout made above.
4.) Ensure that 'Is Main Loop" is enabled.

Custom Layout Options

5.) In the Custom Layout Options assign a "No Results Layout" (make one in the Divi LIbrary - add a Section, Row and Text Module with some simple text.)
6.) Set the Layout to be Grid.
7.) Set the Grid Columns (Desktop) to be Four.
8.) Set the Tablet Grid Columns to be Two.
9.) Set the Mobile Grid Columns to be One.

Step 5: Add Custom Code

No custom code here.

Step 6: Conclusion

Save and view your new Ajax Filter Post page from the frontend.

More Support?

Please email us at [email protected] if you are unable to get Divi Ajax Filter working.