Create a dynamic property collection page with Elementor, ACF and ACFL Collections

Create a dynamic property collection page with Elementor, ACF and ACFL Collections

Create a dynamic property collection page with Elementor, ACF and ACFL Collections

Welcome to this Elementor, ACF and ACFL tutorial. You are probably already familiar with Elementor and possibly ACF as well. However, most likely you’ve probably never heard of ACFL, unless you got a sneak peak at it in a recent alpha version release. In this tutorial you’ll need Elementor Pro and ACF Pro installed, and the final piece of the puzzle ACFL you can download the beta version for free from GitHub.

List of Plugins Required

  1. Elementor & Elementor Pro
  2. ACF Pro
  3. CPTUI (or equivalent custom post type registration plugin)
  4. ACFL (this will provide the collections widget and a template loop feature) DOWNLOAD v1.0.0 @ GITHUB

Tutorial Goal Description – Property Collection Page

What we’re going to build in this tutorial is a “COLLECTION PAGE” to showcase properties for a real estate site. These pages which show multiple properties go by a number of different names, in WP terms they are often called “archive pages”, others call them “list pages”. We’re going to use the terminology “Collections”, which is also the name of the widget we’ll be using from ACFL, the ACFL Collection widget.

The final result is going to look something like this:


Step 1) Add the Property CPT

Our first step in the process is going to be adding our CPT (Custom Post Type) using CPTUI. Don’t be intimidated if you’ve never worked with CPT’s before, CPTUI makes it as easy as adding any other content. We’re going to change a couple of the settings to make our CPT work a little better with our ACF fields.

Install CPTUI (Custom Post Type UI) with a quick search for “cptui” in the widget add directory of your WP Admin

Next we’re going to use CPTUI to create a new CPT which we’ll call “Property” with the key “property”. You’ll find the CPTUI menu near the bottom of the WP Admin menu as shown below. Click the Add/Edit Post Types menu item.

Next we add our Property CPT. We use the slug “property” (it needs to be lowercase) and then add the labels for single and plural. CPTUI’s form asks for the plural first which seems a bit counter-intuitive so don’t mix them up, your form should look like the image below and then click Add Post Type.

The properties CPT should now be added and when the page refreshes you should see the menu item on the left.

We’re now going to make one small adjustment to our Property CPT before we put it to good use. We’re going to click “Edit Post Types” in the CPTUI menu, and scroll down to the “Supports” checkboxes, and un-check one of the 3 default options. The option we’re removing is “editor”. That’s going to remove Gutenberg. This is of course an optional step for future projects where you might actually want the editor, but when using ACF fields the editor takes up most of the space and pushes our fields down, whereas when Gutenberg is removed the custom fields will be front-and-center making an easier to use interface.

After saving the changes to the Property CPT it’s time to check it out. Head on over to the Properties list and click on Add New, and you should see a very clean add form with only the title.

Congrats, we now have our property CPT ready for “fielding”.

Step 2) Add ACF Fields to Property CPT

Next we’re adding our ACF fields. The ACF fields menu is titled “Custom Fields” and you should find it right above CPTUI near the bottom of the menu. Click add new field group, and in the interface we’re going to start with just a title for our field group which we’ll set to “Property Fields”, and then we’re going to set the location to “post equals property”. See the details of this in the image below, and when you get this setup click Save to save your fields.

Now we’ve saved our field group which is empty at this point, I like to do that before adding fields. Next we’ll start adding fields. I won’t cover adding each field because the process is the same for each, but do make the same fields that we’re showing here.

Start by adding the field “Bedrooms”. Click “Add Field”, then fill out the add field form as shown below. You’ll notice when you enter “Bedrooms” as the field label, the field name is set automatically and you can leave it as it’s set.

Use the “Number” Field Type for Bedrooms.

Next we’ll add Bathrooms, you can either do the same Add New Field process, or you can use the “Duplicate” option to copy the Bedrooms field and then edit the label and name. It should look like this afterwards:

We’re going to finish our field group by adding just 2 more fields, Description and Price. The description we’ll make a WYSIWYG text editor for long-text, this field has several extra options but you can just set the field type and leave everything as default options. The price field will be another number field. After you add these fields you should see the final field group as shown below, remember to hit save to actually save your entire field group.

There are many other fields we might want to have in a real estate site, but this will work to demonstrate the design process.

Now let’s head back over to our Properties list and add some testing properties. You should see a form like that below, make sure you fill out all the custom fields because when we’re designing in Elementor it helps to have complete fields for previewing.

Whether it’s a real estate site or events site, services, portfolio, any custom content type you can imagine, this process of adding a CPT and then attaching fields gives us a very user-friendly interface. ACF-powered solutions have been delivered to happy clients for years, and most find the UX superior to that found in nearly any 3rd party plugin. So remember what you learn here can be applied in many other forms, and often can replace a bloated 3rd party plugin.

Add at least 4 testing properties, by the way note that the post title is being used for the address. Which for this tutorial is fine, but in practice you might use additional ACF fields to create the address with city, state etc. You should have a good list of test properties like this when you’re done.


Step 3) Add the Property Item Template

Now we’ll add our Section Template which will be the template that displays each of the properties in a loop. Within this template we’ll be using only dynamic widgets. Note that even if our eventual goal is to show a 3-up or other grid display, in the template we’ll be laying everything out in 1-column that is full width. We could use 2-columns if we wanted to but we should not go beyond that in most cases if our layout is going to be multiple columns.

To start we’re going to the Templates section of the WP Admin and we’re choosing “Section” from the tab menu in Elementor Templates.

Next we click “Add New” and this opens the template add screen where we can enter the name for our new template. Naming the template in a memorable way is important when we’re making this kind of loop item template because we will need to choose this template from a list later when we build our collection page. Enter the name “Property Item Template”.

Now it’s time to start creating our item template in Elementor using dynamic widgets. The very important first step when creating this kind of dynamic template is to configure the Preview Settings. Because Elementor doesn’t know what we’re doing, it doesn’t know about our Property CPT or that we’re building an item template, we need to setup preview to use our CPT and we also need to choose one of our testing posts.

Below is how the preview settings should look after you’ve chosen “property” as the post type and one of your test properties as the preview for dynamic data.

Now we can start dropping in widgets, building our template up Elementor style! Let’s start with a Page Title widget.

With the Page Title widget dropped in you should see the property title from your test property. If you don’t, double check that your Preview Settings are correct.

Next we’re adding in our main property image which is a featured image. Use the dynamic selector and choose the first option which is “Featured Image”. I have chosen the medium size mainly so my screenshot shows you how it looks, and the image is placed above the property address.

Now it’s time to display those wonderful ACF fields we setup earlier. For this we’ll use a Header Widget. And just in case you haven’t used ACF as the dynamic tag before, the screenshot below will help you navigate.

After you choose “ACF Field” from the dynamic tag menu, you’ll need to click “ACF Field” again to see the list of fields. So it’s a 2-step process, first choose ACF Field, then click the area again to see a list of ACF field keys, and in this case we choose “Bedrooms”.

After you select Bedrooms as the ACF Field key, the number of bedrooms should now appear in the preview. If it doesn’t, make sure you actually have content in your test property. Now having the number appear all by itself, doesn’t really work for the layout. So let’s add the title “Bedrooms” in front of it, the Elementor dynamic tag has us covered for this we don’t need a separate widget. Just choose the “Advanced” menu item that you saw when you chose the key, and type “Bedrooms” into the “before” field.

You’ll need to add the space after the title Bedrooms otherwise your title and the number will be directly next to each other.

Next let’s repeat that process in order to get our bathrooms and our price showing. The result should look like this below. Notice we have again used Headline widgets for both, but we could use other widgets such as the Text Editor. Headline gives us lots of styling options though even if we don’t want this data to look like it’s headline text.

Pro tip: once you have once ACF-powered widget right-click and choose Duplicate to copy it and then edit the field settings.

Although we have a description field left that isn’t displayed, we’re going to leave that out for now (it can go on the single property page). We have managed to get all our item data out on display. Now to keep this tutorial from becoming overly epic, we’re not going to do much styling. Of course the possibilities are endless for how you design this item template. That’s the entire point of using this approach to building collections, is you’ve now harnessed the full design power of Elementor while also using a data-driven approach to managing listings.

In the example below I’ve styled the Headline widgets a bit, centered everything and changed some of the typography.

Our property item template is starting to show signs of that “real estate shine”!

Now after spending as much (or little) time styling up your item template as you like, it’s time for the grand finale. That’s right, time to create a Collections Page that will showcase all of our property listings.

Step 4) Create the Property Collection Page using the ACFL Collection Widget

We start by creating a regular WordPress page. We’ll name it “Properties” so it will have the slug “/properties”. Because we’re using regular WP pages, you can of course name the page whatever you like and use different permalinks in the future. When you make the page, after entering the page title click on “Edit in Elementor”.

When Elementor loads up search your widgets for the ACFL Collection widget. A search for “col” will be enough to find it. If you prefer to browse all your widgets (like a mad fool?) then you’ll find the Collection widget under either the bottom of the “General” section or under the “ACFL” section which will be at the very bottom of your widget list.

After you drop the Collection widget into the page, set the first 3 options that appear in order, first choose the item template (Property Item Template) from the list, then choose “property” from the list of post types, and finally change the grid columns to 3. The result should look like this (magical?!).

For a 57 bedroom home, this is a reasonable price.

At this point in time the only other options that the Collection widget provides are under the Query tab where you can choose the sorting options and optionally set a limit on the number of posts returned. Try those options out, by default your posts are date-sorted in DESC order, which is typical for blogs but may not suit other content types.

Once you click save and either preview or visit the page you should see the final product for the first time.

There are a couple of imperfections that you might have noticed. One is that at least in my example, the images are different heights. We could fix that with a custom image size that trims them, or another solution. Another issues is that the price is not formatted the way you might expect for such large number with separators such as “$789,000”. Maybe you can think of a simple solution for that, but at the moment, I don’t know of one. Perhaps ACF can reformat the value? Otherwise we’ll have to build a whole new widget just to render prices!


Thanks a lot for following along with this tutorial. I hope if you were new to ACF this inspires you to deliver ACF-powered data-driven solutions to your clients. ACFL is a plugin that is under ongoing development, we’d like to keep the base version free if possible. If you care to support the development and also help us fund more tutorials, consider a contribution to our ACFL development fund or checkout our Eat/Build/Play development services.

Leave a Reply

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

admin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

admin