Actual property web pages are living or die by way of their seek enjoy. Guests be expecting to go into an cope with or town, make a choice a assets sort, choose the choice of bedrooms and lavatories, select an amenity, and spot matching listings with out leaving the web page or wrestling with a clunky filtering plugin.

On this put up, we’ll construct that more or less filterable listings web page the usage of Divi 5 and Advanced Custom Fields (ACF). We’ll mix two Divi 5 options, the Loop Builder and the Publish Filter out module presented with the Loop Filter Modules, to create an absolutely customized assets grid that guests can seek and clear out at the entrance finish. ACF will deal with the customized fields, together with value, town, bedrooms, toilets, sq. photos, facilities, and agent title, that energy the loop playing cards and clear out shape.

Via the top, you’ll have a refined actual property structure you’ll be able to use in your subsequent challenge, at the side of a downloadable JSON report of the finished design.

Let’s get began.

What Is The Loop Builder In Divi 5?

The Loop Builder is likely one of the maximum versatile options in Divi 5. It means that you can flip any Divi part right into a dynamic loop of content material pulled out of your web site’s database. That content material may also be posts, customized put up varieties, phrases (classes or tags), or customers.

In easy phrases, you design one merchandise precisely the best way you need it to seem, inform Divi which content material to cycle via, and the builder routinely repeats that design for each and every matching merchandise.

Right here’s the way it works:

1. Design The Template

Construct a unmarried loop merchandise the usage of any aggregate of Divi modules and design settings. You aren’t restricted to a premade Weblog or Portfolio module, so you will have entire ingenious freedom.

2. Allow Looping And Configure The Question

Flip looping on for the container that holds your design. Then set the question choices: make a choice the put up sort (or phrases/customers), clear out by way of classes or tags, come with or exclude particular pieces, set the order, make a decision what number of pieces seem in line with web page, follow an offset, or create customized meta queries.

3. Insert Dynamic Content material

Change static textual content and pictures with dynamic content material from the loop, together with the put up identify, Featured Symbol, excerpt, customized fields, and extra. Each and every repeated merchandise routinely shows its personal information.

For the reason that Loop Builder works with any Divi part, you will have complete keep an eye on over the design of every repeated merchandise. It helps customized put up varieties, ACF fields, WooCommerce merchandise, taxonomy phrases, and customers. This makes it appropriate for lots of sorts of dynamic content material.

Why It’s Highest For Actual Property Listings

For an actual property web site, you’ll be able to design a customized assets card that attracts within the precise fields you want, then have Divi routinely generate a responsive grid of the ones playing cards. This will give you keep an eye on over the structure whilst maintaining it hooked up to the checklist information.

What Are The Loop Filter out Modules?

The Loop Filter out Modules upload front-end controls to the Loop Builder. They let guests seek, clear out, and type looped content material with out leaving the web page or depending on a separate third-party filtering plugin.

The root is the Publish Filter out module. It serves as a kind wrapper with a number of Publish Filter out Merchandise modules that create the controls guests engage with.

There are a selection of box varieties related to the Publish Filter out module, together with:

• Textual content: A seek box that queries put up titles, content material, or decided on customized fields. We’ll use it to let guests seek by way of cope with or town.
• Make a choice: A dropdown menu that attracts taxonomies or meta values.
• Radio: An inventory of single-choice buttons.
• Checkbox: Multi-select choices that permit customers mix filters.
• Order / Order Via: Controls that permit guests make a choice how the consequences are taken care of.
• Buttons: Put up and Reset buttons that follow or transparent the filters.

Whenever you attach the Publish Filter out module to a selected Loop Goal, the customer’s submitted alternatives replace the question that powers the loop. The matching effects then refresh with out requiring the customer to go away the web page.

Divi 5 additionally features a Tooltip module. You’ll be able to nest it inside of any module, together with an merchandise inside a loop. Soaring over or clicking the mother or father part unearths the Tooltip, making it helpful for the extra data regularly integrated on assets checklist playing cards.

Necessities & Setup

Sooner than we commence construction the listings web page, we’d like a forged basis of knowledge. Right here’s the entirety you’ll arrange first.

Create A Customized Publish Kind

The usage of Complicated Customized Fields, check in a brand new put up sort known as Listings. This assists in keeping your house information cut loose common weblog posts and will give you keep an eye on over its admin interface.

Upload Taxonomies And Customized Fields

Nonetheless inside of ACF, create a Taxonomy for Belongings Varieties. Be sure that the Listings Publish Kind is chosen prior to saving. This will likely energy the Belongings Kind keep an eye on within the Publish Filter out shape.

Subsequent, create a brand new Box Crew and title it Actual Property Listings.

From there, you’ll create the next Customized Fields:

• Tooltip Textual content (Textual content): That is the content material that can seem within the data tooltip.
• Town (Textual content): This retail outlets the site guests can seek along the checklist cope with.
• Worth (Textual content): This will likely cling the checklist’s value within the loop card.
• Bedrooms (Radio Button): This will likely show the choice of bedrooms (2-5) at the checklist card and function a Radio box within the Publish Filter out module.
• Bogs (Radio Button): Presentations the choice of toilets (2-5) within the card and Publish Filter out module.
• Facilities (Radio Button): Retail outlets one amenity price, reminiscent of Storage, Pool, Waterfront, or New Building, for the cardboard and clear out.
• Agent (Textual content): Presentations the checklist agent’s title within the checklist card.
• Sq. Photos (Textual content): Presentations the checklist’s overall sq. photos at the checklist card.

Create Pattern Listings

Upload a number of listings (we’ll upload 12) the usage of your new customized put up sort.

Fill within the Name the usage of the checklist’s cope with, upload the Featured Symbol, entire all of the customized fields, and assign a Belongings Kind. The extra numerous your pattern information is, the easier you’ll be capable to check the filters later.

Create A New Web page

Within the WordPress admin dashboard, create a new web page, title it Listings, and open it with the Visible Builder. That is the place we’ll construct all the filterable actual property structure.

As soon as those 4 steps are entire, you’re waiting to start out designing the loop and the clear out shape.

Construct The Actual Property Listings Loop

Now that the information basis is in position, it’s time to design the guts of the web page: the listings loop itself. On this segment, we’ll create a blank, totally customized assets card and switch it right into a dynamic loop that attracts in actual checklist information. Via the top, you’ll have a responsive grid that appears like the completed structure under, waiting to be filtered and searched within the subsequent steps.

Create The Basis

Get started by way of including a 1/4 + 3/4 Column Row to the web page.

Within the Row’s Design tab, make bigger the Format possibility team and assign a 0px Horizontal Hole and a 30px Vertical Hole.

Subsequent, make bigger the Border possibility team. Underneath Border Types, choose the Most sensible Border tab, assign a 1px Most sensible Border Width, upload a Most sensible Border Colour, and set the Most sensible Border Taste to Dashed.

Configure The First Column

Now, open the primary Column of the Row and navigate to the Design tab. Extend the Format possibility team and assign a 20px Vertical Hole.

Whilst within the Design tab, make bigger the Spacing possibility team and upload 25px Padding on all 4 facets.

Within the Border possibility team, upload a 1px Proper Border to the Column.

Configure The 2d Column

Open the second one Column within the Row. Pass to the Design tab, make bigger the Spacing possibility team, and upload 20px Padding on all 4 facets.

Upload A Nested Row

With the Gaps, Borders, and Spacing set, upload a Nested Row to the second one Column. Click on the black + icon and choose a single-column Row.

Within the new Row’s Design tab, make bigger the Format possibility team and assign a 20px Horizontal and Vertical Hole. Additionally allow Wrap underneath Format Wrapping. This will likely stay the spacing constant and make allowance pieces to float to the following line as soon as the loop runs out of to be had house.

Subsequent, click on to edit the Column. Within the Content material tab, make bigger the Meta possibility team and upload Listings because the Component Label. This will likely mean you can simply assign a Loop Goal once we construct the Publish Filter out shape in the next move.

Subsequent, pass to the Design tab. Open the Format possibility team and set the Vertical Hole to 0px.

Within the Sizing possibility team, set the Column Elegance to 1/2.

Finally, make bigger the Border possibility team. Assign a 10px Border Radius, 1px Border Width, and input a Border Colour for the Column.

Allow The Loop Builder

With the Column’s construction set, the next move is to allow the Loop Builder. Whilst within the Column, return to the Content material tab and make bigger the Loop possibility team. Toggle Loop Component on.

Go away the Question Kind set to Publish Kind, however take away the default Posts underneath Publish Kind. As an alternative, choose the Listings put up sort we created within the earlier step.

Scroll to expose the Order and Posts According to Web page fields. Set Order to Ascending and Posts According to Web page to 4. This environment controls what number of listings seem in line with web page. As a result of we created 12 pattern listings, upload a Pagination module and goal this loop if you need guests to get entry to the remainder effects.

Upload Modules To The Loop

Now that the Loop Builder is enabled, we will be able to get started including modules to the structure.

Insert A Module Crew

Get started by way of including a Module Crew to the Column. Inside the Crew, upload an Icon module.

Make a choice an Data Icon within the Content material tab.

Within the Icon’s Design tab, set an Icon Dimension and Icon Colour.

Whilst within the Design tab, make bigger the Sizing possibility team. Set Alignment to Finish.

In the end, upload a Tooltip module underneath the Icon. Within the Content material tab, upload a Background Colour.

Within the Tooltip’s Design tab, make bigger the Tooltip possibility team and set Display Tooltip On to Click on. Set the Tooltip Place as proven within the screenshot under. Whilst within the Design tab, regulate Spacing, Border, and another design settings as wanted.

Now, open the Crew’s Design tab. Extend the Sizing possibility team and assign an Facet Ratio of 3 by way of 2.

Subsequent, make bigger the Spacing possibility team and assign 15px Padding on all 4 facets.

Nonetheless throughout the Crew settings, navigate to the Content material tab. Extend the Background possibility team and tab over to assign a Background Symbol. Hover simply above the Background Symbol box to expose the Insert Dynamic Content material icon.

When the checklist of dynamic content material choices seems, make a choice Loop Featured Symbol. Divi 5 will load the Featured Symbol from every of your Listings posts.

Upload A 2d Module Crew

With the primary Module Crew styled, we’ll upload some other without delay underneath it. Inside the Crew, pass to the Design tab and make bigger the Format possibility team. Set the Vertical Hole to 5px.

Subsequent, make bigger the Spacing possibility team and upload 25px Padding on all 4 facets.

Click on into the Crew’s Content material tab and make bigger the Background possibility team. Assign a Background Colour.

Now, make bigger the Components possibility team and upload two Heading modules and a Textual content module to the Crew. Taste them as desired.

Upload some other Module Crew to the Column, nest 3 Textual content modules inside of it, and elegance them as desired. Within the Crew’s Design tab, make bigger the Format possibility team and set Format Route to Row. Practice 5px to the Horizontal Hole and Vertical Hole fields.

Upload two extra modules to the Column, together with a Textual content module and some other Module Crew. Taste the Textual content module as desired.

Within the newly added Module Crew settings, pass to the Design tab and make bigger the Format possibility team. Set Format Route to Row, Justify Content material to Area Between, and Align Pieces to Middle.

Inside the Module Crew, upload a Textual content and Button module and elegance them as desired.

Hyperlink The Customized Fields

Now, we wish to attach the customized fields we created to the modules within the loop Column. Get started by way of settling on the primary Heading module we added within the closing step. Within the Content material tab, make bigger the Textual content possibility team and hover subsequent to the Heading box to expose the Insert Dynamic Content material icon. Make a choice Loop Publish Customized Box from the to be had choices.

When the modal seems, click on Input Customized Meta Key within the Make a choice Customized Box dropdown menu.

When the choices seem, make a choice the Worth customized box.

In the end, click on the Practice button to assign the sphere to the module.

Repeat those steps to assign the remainder dynamic content material to the corresponding modules. For the second one Heading module, make a choice Loop Publish Name. For the Textual content module, make a choice Loop Excerpt.

For the Module Crew with 3 Textual content modules, assign the Bedrooms customized box to the primary Textual content module and upload a separator within the After box.

Use the Bogs customized box for the second one Textual content module and Sq. Photos for the 0.33.

For the standalone Textual content module, use the Facilities customized box.

Within the ultimate Module Crew, assign the Agent customized box to the Textual content module.

For the Button module, upload the button textual content and assign Loop Hyperlink to the Button Hyperlink URL within the Hyperlink possibility team.

For the general customized box, use the Layers Panel to find the Tooltip module. Within the Content material tab, assign the Tooltip Textual content customized box to the Frame.

Create The Filterable Seek With The Publish Filter out Module

With the listings loop waiting to move, the general step is to provide guests keep an eye on over what they see. We’ll upload a Publish Filter out module that permits them to seek by way of key phrase, make a choice a assets sort, clear out by way of bedrooms and lavatories, choose an amenity, and follow or reset their alternatives.

Upload The Publish Filter out Module

Position a Publish Filter out module within the left Column of the Row. This module serves as the shape wrapper that comprises all of the person Publish Filter out Pieces.

As soon as added, navigate to the Content material tab of the Publish Filter out module. Extend the Goal possibility team and choose the Listings loop we created within the closing step.

Extend the Components possibility team to view and upload extra fields to the module. Via default, the Publish Filter out module features a Seek box, a Class clear out, and Reset and Practice buttons. Those are the Publish Filter out Pieces.

Assign The Taxonomy And Customized Fields

Get started by way of modifying the Seek Publish Filter out Merchandise. Stay Box Kind set to Textual content, then configure the sphere to question the put up identify and the Town customized box. This will likely permit guests to go looking by way of the valuables cope with or town.

Subsequent, click on to edit the Class Publish Filter out Merchandise. Extend the Box possibility team and choose Radio because the Box Kind. Within the Box Possibility dropdown, choose the Belongings Varieties taxonomy we created in ACF. The Box Label will populate routinely, however you’ll be able to alternate it to no matter you prefer.

We’ll upload 3 new fields to the Publish Filter out module. In the principle Publish Filter out module’s Content material tab, make bigger the Components possibility team and click on + Upload Component. Make a choice Publish Filter out Merchandise from the to be had choices.

Click on and drag the brand new box to put it without delay underneath the Belongings Kind box.

Click on to edit the brand new box. Exchange Box Kind to Radio. For Box Price, choose Facilities.

Now, reproduction the brand new Publish Filter out Merchandise two times. Exchange Box Possibility to Bedrooms for one box and Bogs for the opposite.

Taste The Filter out Fields

Now that each one fields are in position, we wish to genre them. In the principle Publish Filter out module settings, pass to the Design tab. Extend the Format possibility team and set the Vertical Hole to 25px.

Subsequent, make bigger the Box possibility team. Extend the Enter Textual content team, make a choice a box font, font weight, textual content dimension, and textual content shade.

Now, open the Label Textual content team. Assign a label font, label font weight, label textual content dimension, label textual content shade, and label line peak.

Upload kinds for the Placeholder Textual content, together with font, font weight, textual content dimension, textual content shade, and line peak.

Set a Background Colour and assign Border Types as desired.

Taste The Radio Choices

Extend the Radio Choices team within the Design tab. Taste the Enter Textual content by way of assigning its font, textual content dimension, textual content shade, and line peak.

Very similar to the Fields team, assign a Background Colour for the Radio Choices at the side of Border Types.

Upload Button Types

The closing step is styling the Practice and Reset buttons within the Publish Filter out module. In the principle Publish Filter out settings, make bigger the Button possibility team within the Design tab. Set a Background Colour and Border Types first.

Subsequent, make bigger the Textual content choices throughout the Button kinds. Assign a Button Font, Textual content Dimension, Textual content Colour, and Capitalization, then make another vital styling changes.

Finally, make bigger the Spacing team throughout the Button kinds. Assign peak and backside Padding.

Make Responsive Changes

With the Publish Filter out shape styled, we wish to be sure the structure seems to be excellent at each and every display screen dimension. The usage of Divi 5’s Customizable Responsive Breakpoints, transfer to the Pill view. Get started by way of adjusting the Vertical Hole on the Phase stage to cut back the quantity of house between Rows.

Paintings your manner via Rows and Columns, making spacing changes as vital.

If you want to regulate Column sizes at smaller breakpoints, use Construction Templates to resize them. Within the Row settings, open the Content material tab, make bigger the Components possibility team, and click on Practice Construction Template. From there, choose some of the predefined Row templates.

Repeat those steps for the Telephone breakpoint, making any vital tweaks to spacing or row construction.

Preview The Publish Filter out Shape On The Entrance Finish

The general step is to preview the finished web page at the entrance finish. Check every clear out in my view by way of in search of an cope with or town, settling on a assets sort, opting for bed room and toilet counts, and settling on an amenity. Then, check the fields together and use the Practice and Reset buttons to verify that the loop updates as it should be. Whenever you’ve verified that the filters and loop paintings in combination easily, your filterable actual property listings web page is waiting.

Obtain The Recordsdata

To come up with a transparent image of the way the completed structure works, we’ve created a ready-to-use JSON report of your entire design constructed on this put up.

To make use of it, navigate to Divi > Divi Library and click on the Import & Export button.

Click on the Import tab, connect the Actual Property Listings Loop & Filter out.JSON report out of your pc, and click on Import Divi Builder Layouts.

Subsequent, create a new web page within the Visible Builder. When the Builder lots, click on the blue + icon so as to add a brand new Phase.

Make a choice the Upload From Library tab, make a choice the structure, and click on Use This Phase.

For the loop and filters to populate as it should be, be sure you have already finished the prerequisite steps, together with:

1. Growing the Listings customized put up sort.
2. Including the Belongings Varieties taxonomy.
3. Putting in the ACF Box Crew with all of the required customized fields.
4. Publishing actual property Checklist posts.

With out revealed checklist information, the loop will stay empty. As soon as the ones pieces are in position, the imported structure will show and clear out your houses as proven on this put up.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:prior to { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

Obtain For Loose

Sign up for the Divi E-newsletter and we can e mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus heaps of alternative wonderful and unfastened Divi assets, pointers and tips. Practice alongside and you’ll be a Divi grasp very quickly. In case you are already subscribed merely sort on your e mail cope with under and click on obtain to get entry to the structure pack.

DOWNLOAD

You’ve gotten effectively subscribed. Please test your e mail cope with to verify your subscription and get get entry to to unfastened weekly Divi structure packs!

Get started Development Your Filterable Listings Lately

Combining Divi 5‘s Loop Builder with the Publish Filter out module from the Loop Filter Modules will give you keep an eye on over the checklist design and front-end seek enjoy. You’ll be able to create totally customized assets playing cards and let guests seek and clear out them with out depending on a separate third-party filtering plugin.

The similar means works simply as smartly for any directory-style web site, together with process forums, tournament calendars, staff directories, product catalogs, and extra. Experiment with other box varieties, layouts, and queries to look how versatile the machine truly is.

Give it a check out in Divi 5 and tell us the way it works for you. Proportion your questions or comments within the feedback under or on our social media channels. We’d love to look what you construct!

The put up How To Build A Filterable Real Estate Listings With Divi 5 seemed first on Elegant Themes Blog.

read more