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.

This tutorial is going to take you step-by-step through the process of using 2 of the best plugins for WordPress, Elementor Pro and ACF Pro to build a real estate listings management system. While we use real estate listings as a relatable and interesting example of “data that needs management”, you can apply what you learn here to an events listing site, services listings, anything where the goal is to have a list of records, and each record needs to have different fields to store data.

First off let’s answer the fundamental question, why not just build Elementor pages, seeing as we’re already using Elementor? The answer is, because it’s wrong, wrong, wrong! Okay some further insight, let’s say your client is a car dealership, a small one, they only have 20 cars in their inventory. It might be tempting to build 20 pages using a template, copy those pages to keep things consistent, and call it a day. No coding, no plugins, easy. The problem first off, is now the client is reliant on building and removing those pages as a way to manage their inventory. Whether its’ a realtor, a car dealer, or any business with listing data, they may have several changes to make every single day. Having a work-flow that is simple and easy is important. While using the Elementor tools is something they can learn and might even enjoy for landing pages and other marketing pages, when it comes to “Record Data” a well organized admin approach is going to be 5-10x faster. Less labor, less chance for mistakes, better solution.

For this tutorial you will need the PRO versions of both Elementor and ACF. Both plugins have free versions that are very good in their own right, but we need some of the Pro Features found in ACF Pro to create a really solid UX, and we need the Elementor Pro theme builder features to create the front-end. We’ll also be using a 3rd plugin called CPTUI which is used to register a Custom Post Type (CPT).

Let’s start with an overview of the process to create our real estate listings system.

  1. First we’ll register our “Property” Custom Post Type. This is going to create a Property Management section in the WP admin, which will look almost identical at first to the “Post” or “Page” sections. So we’ll have a list of posts, we’ll have an add new post button, we can do what is sometimes called CRUD, which is Create/Read/Update/Delete our posts. All this is provided automatically by WordPress, so remember to thank WP for being awesomely powerful. And if it’s the first time you have created a CPT, congrats on just unlocking the power of extending WP.
  2. We will create an ACF field group and attach it to our Property CPT so that when we add or edit properties we will see real estate fields like “number of bedrooms”, “number of bathrooms”, and image fields to showcase the property including a gallery of images.
  3. We will use Elementor Pro theme builder to create a custom single post template which will be used to show 1 single property. We’ll use the native Elementor dynamic data features to pull in our custom property fields from ACF. Then when we hit a blockade with showcasing some of our data, we’ll add a 4th plugin to the project, ACFL (ACF Elementor) that will serve to display some of our more advanced ACF field data.
  4. At this 4th phase of the project we already have a great admin listings system for our properties and we can display them one by one using our single template, what we’re missing is that all important “listings page” which will show a summary of all our listings. In this stage we’ll use the Elementor Posts widget to display our listings in a grid.
  5. In the final stage we’ll talk about ways to take the project to the “next level”, features we might like to add to it and variations on this approach that we might use in similar projects.

Let’s start by installing our 4 primary plugins, Elementor, Elementor Pro, ACF Pro and CPTUI. The result should look like this on a fresh install of WP, but if you’re building this onto an existing site just check for each plugin being installed and updated.

Now let’s head over to the CPTUI page where we can add our property CPT. You’ll find the CPTUI section in the WP Admin at the very bottom usually right under ACF Fields as shown in this image.

CPTUI developers deserve credit for a great plugin and putting their admin pages at the bottom of the menu out of the way, because this isn’t something we use everyday once the site is built.

Complete the CPTUI form as shown below and click the “Add Post Type” button after you’ve filled it out. The “slug” for our CPT is “property”, then we use “Properties” as the plural label and just “Property” as the single label. These labels will all show up in the admin to identify our custom posts!

Let’s add 3 testing properties, under Properties menu click on “Add New” Just enter a title and some text as shown below and then click Publish.

After you’ve added 3 test properties your Property List page (All Properties from the Property admin menu) should look like this below. Congrats you’ve created and tested a CPT, if it’s your first time doing that I hope you can see how this is a very powerful aspect of the WordPress system.

Next, we’re going to use ACF to add custom property fields that only show up on our property posts. By the way, if you’re curious how your property posts look right now, click on the “view” link from any of the test posts. Depending on the theme you have installed (we’re using Hello Elementor on the test site) you’ll see something like this by default:

Perfect, project complete. Seriously not much going on here so far, let’s keep going!

Now we’re heading over to ACF to add our custom field group. You’ll find ACF under the menu item “Custom Fields” near the bottom of the admin menu, usually under Settings. Click “Add New Group”.

We’re going to start by setting our title for the field group to “Property Fields” and then skip the fields section and set our Location Settings. Choose “Property” from the list of post types, the other 2 location fields we leave as default so as you can see in the screenshot below it will read “Post Type is equal to Property”. Click the Publish button to save those initial changes. We now have a field group saved, and it’s setup to appear on our property posts. Next we’ll start adding fields.

ACF fields Location settings control where the fields appear.

Now it’s time to start adding fields. Let’s begin with bedrooms and baths. Both of these are going to be number fields. To add a field in ACF click the “Add Field” button at the bottom right side of the fields section.

Use the + Add Field button to open the add field form

We only need to fill out the first 3 options to make our field, we give our field a Label (Bedrooms), you’ll find the Name is automatically filled out using a lowercase version of the name (leave it as bedrooms), then we choose “Number” as the field type.

We only need to set the Field Label, then choose Number as the Field Type. The Field Name is set for us by ACF based on the label we provide. All the other options we can skip. It’s that easy to do basic field setup in ACF.

Because the ACF interface builds fields without any page refreshes, there is no save button within the field interface itself. Use the “Close Field” button to collapse the field edit form so that you can continue adding more fields. It’s a good idea when adding fields to click “Publish” to actually save your work every couple of fields just to avoid losing them if you were to close your tab.

The next field we add is for “Baths”, so you repeat the process of adding the Bedrooms field just using “Baths” as the label. However, because our next field is also a number field, why not just duplicate the Bedrooms field and then edit it? That’s often the faster way when working with a range of similar ACF fields, though either approach is quite fast. Learning to use “duplicate” is especially useful later if you get into more advanced field settings, where you might want another field based on one that has a lot of settings already created. The duplicate button appears when you hover over any field to show it’s context menu, as shown in the screenshot below.

When you use duplicate, make sure you edit both the Field Label (Baths) and Field Name (baths). You won’t need to change the field type.

This is what your entire ACF Field Group should now look like with 2 fields (Bedrooms and Baths) setup and of course the Location Settings to show on our Property posts. Make sure you click Publish if you haven’t already, and next we’re going to head over to the Properties and try out the new fields!

Presuming you have Gutenberg installed you’ll find when you edit one of our test properties that the ACF custom fields are at the bottom of the page. Now that’s okay, but if we don’t plan to have long text that requires Gutenberg, we can remove Gutenberg editor support from our custom post type using settings in CPTUI. This is something we usually do when delivering a data-driven solution to a client because it makes for a more app-like UX.

So we’ll do that next, first enter your bedrooms and baths and click save post. You’ll notice if you preview the post however, so far, these custom fields won’t appear. Some of this is like magic, but it’s not that magical, WordPress doesn’t know about these custom fields and neither does our theme. We’re going to have to render our fields using Elementor widgets later on.

Now we are heading back over to the CPTUI. Click on the Edit Post Types tab in the CPTUI page, and we’re going to scroll down… way down the page to the “Supports” option where you’ll see a list of checkboxes starting with title, editor and featured image. We want to un-check the “editor” option to remove support for Gutenberg. That will only affect our custom property post type, Gutenberg will still be available on blog posts or other post types.

Remember to save the changes with the save button at the bottom of the page.

Now when we return to edit any of our property posts we should see Gutenberg gone, and the right sidebar is also simplified.

Now we certainly could add more property fields and do any other customizations here on the back-end of our system working in the WP Admin. But isn’t time we started to see a visual result from our work, on the front-end? So let’s start to complete our solution and deliver our properties to the front-end by using the Elementor Pro theme builder.