In this tutorial, we combine Elementor, ACF and CPT UI to create a dynamic real estate website on WordPress.
hi everyone this is Paul from bring you
up calm and today we’re gonna take a
look at how to combine elementor’s
dynamic content and advanced custom
fields to create a real estate listing
website let’s get into it
okay so let’s first take a look at what
we’re gonna create this is going to be a
real estate listing website and this is
the home page of the website and here we
have our latest listings so I’m gonna
open one up and now it loaded and we can
see the title of the listing we can see
the price I can click on View details to
scroll down to the surface information
which is the square meters number of
floors number of bad news and bathrooms
the type of furnishing the price score
for this area as well as additional
information location and be available
from date as well as in map and
everything that I showed right now is
coming dynamically from the back end so
if you want to create a new listing all
we have to do is fill in information and
the front end is going to display the
same template but with a new information
and even this picture is from the
featured image of this custom post type
that we’re going to create so without
further ado let’s jump in and create ad
okay so we’re now inside the fresh
WordPress installation and I’ve already
went ahead and created the header the
footer and home page the home page is
pretty much empty at this point because
I’ve only created the top section we
need to create the listings first so we
can insert them here on the home page so
I will return now to the dashboard
because we need to install two more
plugins for this to work so I will go
under plugins installed plugins and you
can see we only have element or element
or pro installed so I’m gonna click on
add new and I’m gonna search for the
first one it which is called custom both
pipe UI so is this one with the orange
corner if you can store now and this
plug-in will allow us to create our
listing custom post type without the
fields just the post type and I’m gonna
click on activate so now you can see the
custom post type UI plug-in is installed
so we only need one more I’m gonna think
again on that new and I’m going to
search for advanced
custom kills and this is the plug-in the
one with the light green background I’m
gonna click on install now and this one
will allow us to create the fields that
we need for our listing which is the
price the number of bedrooms number of
bathrooms the type of furnishing
everything that we need we’re gonna
create with this plugin so I don’t click
again on activate okay so we now have
all the required plugins installed for
our design but before we continue on
with the tutorial I just want to make a
short note about the advanced custom
fields plugin right now we’re on version
official version for advanced custom
fields but actually advanced custom
fields 5 is in early access and
elemental officially supports this
version that comes with some really
nifty features and while for this
tutorial I will not be using version 5 I
will quickly show you how to enable that
so I will go under appearance editor to
access the theme editor files and you
don’t have to be scared because it’s a
lot of coding here because we are only
going to add a simple line of code to
enable this ok so we are now inside of
the editor and we have this heads up
here I will click on I understand and we
will go here on the right side to theme
function which is the functions that PHP
file and I will click on that and now I
will scroll all the way to the bottom of
this file here and I will add two spaces
and I will paste the code from the
advanced custom fields website so
basically this is just a comment so we
know what the code is about and this is
the code which is defined advanced
custom fields early access to version 5
and I will click on update file now that
the file was edited successfully I can
go under plugins installed plugins and
we now have the option to update to the
version 5 so I will click on update now
and now the plug-in is updated and we
only have one more thing to do I will go
to the dashboard and now advanced custom
fields is prompting us to upgrade the
database or LT conveys
and the database upgrade is complete so
I can now return home and we’re done so
we can now go ahead and create our
custom folks
type so you cannot see on the left side
under Elementor that we have a new entry
called CP GUI which stands for custom
post type UI the plugin installed
previously and using this plugin will
create our list in post time so I’m
going to hover over CPT UI and click on
add edit post types now on this screen
we need to fill in a bit of information
first to create our post time and the
first thing we need to filling is the
post type slug which is the internal
name WordPress uses for a custom post on
and this is recommended to be lowercase
and to contain no spaces so I’m gonna
name it the listings with a lowercase L
next we need to fill in the plural label
and this is going to be again listing
but this time with the uppercase L and
lastly the singular label which is gonna
be listing with an uppercase L now you
can see we have a ton of options here if
I scroll down the page but we don’t
actually have to change any because in
the first part we have just labels that
we can rename what we don’t need that
and in the bottom we have some options
but the defaults work perfectly for us
the only thing I want to do is add an
icon to our custom post type so it’s a
bit easier to find in the WordPress
sidebar on the left side so here in the
menu icon I will paste the – Michael’s
admin home which is a little house
so it’s OK for our real estate listing
website and engine just gonna scroll
down and click Add post type and I can
see that under comments we have this new
post type called listings and I can
click on all listings and you can see we
have no listings but before getting a
new listing I need to create a custom
fields for it so we will do that next
under settings we have a new entry
called custom fields which is coming
from the advanced custom fields plug-in
and using that we will create our fields
for the listing that we created before
so I’m going to hover over custom fields
and click on custom fields to start
creating our first field group and here
on this page I’m gonna click on add new
and I’m gonna name this field group
listings
ok so we need to add our fields to the
thing and we have to think in terms of
what information people want to see when
browsing for a real estate listing and
that’s going to be information like the
price the surface area type of
furnishing the number of floors etc so
I’m gonna go ahead and create the first
field and we’ll take here at field and
we have three pieces of information that
we need to fill in which are very
important the first one is the field
label the second one is the field name
which is the internal name WordPress
uses and the third one is the field type
so I will start with the first field
which is price and I will call it price
with an uppercase P and then when I
press tab to go to the next input it
automatically fills it in with the
lowercase variant of it so we don’t need
to type it out it’s very good how it how
it did and for the field type I’m gonna
leave this one to text and here we have
some more settings we can change we can
make this required let’s make the price
required and this is a very powerful one
but we don’t actually use it now it’s
the conditional logic so some fields can
only show when certain conditions from
other fields are met but we don’t need
that so I’m gonna close the field and
I’m going to create the second one which
is going to be price corn and you will
see exactly what that is when we start
creating the template so I’m gonna do
low price for again the field name is
automatically filled in so I’m going to
change this to number because this is a
number and again I want to do a bit of
stuff here I want the minimum value to
be 0 and the maximum value to be 100
because this is a percentage and we
don’t need conditional OG we can make
this required also and I can click on
closed field and I will show one more
field or now and then I will create
others on fast-forwards so we don’t
waste a ton of time so the last one that
I will create now is the type of
furnishing
and this is going to be a select feeling
so choose your selection choice I will
make this required as well and here in
choices we have input where we can write
our choices so we will have furnished
luxury vintage and for you so these are
these are our options that we can we can
select from this film the defaults are
okay here so I can click on closed film
all right so I will create the address
and faster so we don’t waste a ton of
time and we can continue after that okay
so now that we have all those fields
created we only have to do one more
thing which is to choose where to show
those fields and you can see we have
here the location rules and it says show
this fill group if post type is equal to
post and we don’t want that we want that
to be post type is equal to listings or
custom post type and that’s all I can
just click on publish now and we can now
go ahead and create our first listing so
we cannot go under listings and click on
add new to create our first one and you
can see we have all the fields that we
created before here so I’ll start with
the title and I’m gonna paste the scene
this is going to be a free bedroom two
bathroom house we drive and wind up and
double garage now for this body text we
will paste in some dummy data because we
don’t have that that much text but
that’s going to be the additional
information for this listing and now we
can click on set featured image here and
I already uploaded some images so I know
I want this one with this house for the
featured image and now we can start
filling in the custom fields that we
created before so the price will be
will do that inside of our template so
the price core is 65% for this property
again % we will put it in the template
the surface area is 380 the type of
furnishing is luxury
it has two floors three bedrooms two bar
pools and I’m gonna paste in the
location which is this North Caldwell
New Jersey and I will choose when it’s
available and it’s going to be 17 of
August okay so now that we filled
everything in I can just click on
publish and our post is live the only
problem is that our theme will not
display the custom fields by default so
we will need to create a template and
for that we will use the element or
single template builder so let’s start
with that I will now hover over
Elementor and choose my templates to
start creating our list template and on
this page you can see we have the main
footer and the main header that I’ve
created previously we don’t need to
worry about that and we can just click
on add new to create a new template and
first the thing we have to fill in is
the type of template we want to work on
and for this we need the single template
and once we click on single we have to
choose the post type that we want to
work on and I want to work on listing
which is our custom post type that we’ve
created and now I just need to provide a
name for this template and I will do
listing template so it’s easier to find
and I will click on create template now
on the mentor is loaded and we already
have the library panel open but I will
close it for just a second to show you
what’s going on here so on this page you
can see we already have the footer in
place and we also have that header which
is not visible because it’s white on a
white background for
because we will overlay it over the
image so I will take back on the folder
icon to open the template library and
I’m going to the blocks tab because I
want to insert a new block I know I want
one for the hero so here in the category
I will click on this to expand and I
will search for the hero and I’m looking
for this one with the plants and I will
click insert now that this is inserted
we can see that this text like the 17
travel diversions been in right now is
just written here so we can change this
text to whatever we want but we actually
want it to be dynamic so we will do that
in a second first I want to do this
travel text I want to change it to
premium listing it’s just a small design
detail and in the typography I will make
it a bit more close together and also I
know we don’t need this text here so I
will right click on this and click
delete to get rid of that okay perfect
now we can take this this text from here
and you can see we have the input field
where we can type what we want but here
in the right-hand corner we have this
dynamic link widget and I will click on
that and you can see we have a bunch of
options what we want to use and for this
I want to display the post title which
is the what we filled in for the title
of our listing so I’ll click on post
title and you can see we now have the
double garage here which is coming
dynamically from the back end now I want
to make this a bit wider so in the
column settings I will do the padding
right to 15% instead of 30% and also I
want this to be a bit smaller so I will
click on it and go to style typography
and it’s now 65 pixel so I would go down
to around 50 I think this looks great
now I will right click on this and click
on duplicate to make a copy of it and
this time I’m going here again I will
click on this little X so we get rid of
the post title and I will click on
dynamic again and I will scroll all the
way down to a CF which
for advanced custom fields and we have
this field called ACF field beta and I
will click on that and you see it
disappeared for now but now we have here
ACP field beta and if I click on it we
have this option called key and if I
click on the key we have a drop-down
with everything that was created before
with advanced custom fields and then
what is I want this one to be the price
so I will click on price and you can see
the price is now displayed here and in
advance we have something very nice that
we can do I will open up this and I want
before the price to show the dollar sign
like this and after the part the price I
want to show a space and USD for u.s.
dollars so now the price is coming
dynamically and if we will have another
number it’s going to follow the exact
same exactly the same design and now all
I want to do with this is make the price
a bit smaller let’s try 40 or if one
it’s more than 35 I think this looks
perfect now one more thing that we can
do with the dynamic fields from our
listing is due to dynamic background so
I will click on the section here to
select it and I will go under style and
you can see we have the background image
which is these plants here but we also
have the same dynamic link here so I
will click on that and we have some
things that we can select and I want to
select the featured image of this post
and once I do that you can see it loaded
up the house that we created before as
the featured image now I want to change
this bottle a bit so I will change the
read more to view details and also I
don’t like the hover effect I want it I
would not understand and on Harper I
want the text color to still be white
the border color to be white and I want
the hover animation to be float
perfect so this is the first section
already done and you can see we have the
everything is coming dynamically from
our post and one more thing that I want
to do is select again the sections go to
advanced and under margin I will
deselect these links values together and
for the top I will go – 77 pixels so I
will don’t – 7 and type another seven
and you can see now that our header is
over like over the image and we have the
logo also if I close this this is how it
looks like for the first section so
right now we can start it in the second
section
okay I’m gonna scroll down and click on
the folder item because I want to insert
another block so I will pick up X here
to get rid of the hero and I will search
for services and I’m looking for this
one in each services block so I will
click insert and you can now see we have
this section with the with these free
columns here so the first thing I will
change this text here from services to
surface in formation and I’ve gone our
style typography and like it 30 pixels
perfect now I want this to be full width
so I’ll figure and instead of box able
to fool with and in this section again I
will go on your box and click on full
width now this is spanning the whole
width of the screen so I will go under
this section again to advanced and on
padding right and left I will put 250
pixels right left now we have this and I
need one more so I will right-click on
this column and I will do
dublicate so we have four of them
perfect
now I start designing the first one I
know that I don’t want this button here
so I will right click on button and
click delete on all four of them so we
got rid of the buttons and this widget
here is the image box widget which is
exactly what we need now I will go and
delete this text here because I just
want the title and the image and I will
do that again for all four of them now I
will go again in the first one and I
will change the image I will go with
this image which is for the surface area
and I will pick insert media now I will
do the same thing on all four of them
okay and because this icon is a bit
wider it appears a bit smaller so what I
will do is go under style and make the
width a bit bigger and bring the spacing
down a bit so it matches the same height
I think somewhere around here it looks
good
perfect now for the text so I will go
again in the first one and instead of
marketing I’m going to click on this
dynamic field here and I will scroll
down to a sieve field beta you can get
on that and I will choose the key for
surface area and you can see we have the
now in the advanced and after I will put
a space and type sq and which is four
square meters and now this is dynamic
and it shows our surface area so I will
do the same with the three others the
second one is going to be AFC field and
the key is number of floors and in
advanced I mean after I will do space
and floor
and only to ask like this so if we have
one floor it will be more floor okay and
I will quickly do the others also
perfect so now all of those are coming
from the back end dynamically and one
last thing that I wanted to do this
section is the hover effect on the
sexual have this green but I don’t like
that I will select the first column and
go for style border and the border is
out one pixel and this color in the
normal behavior so we’ll change it to
two pixels like this and in the hover I
will change the width to two pixels and
this green color to my purple color that
I’ve set for this website design and it
looks like this right now and we don’t
want to go and change each one manually
because the text time so what I can do
is right click on this column click copy
and then cook the other scone and simply
right-click and paste style so now this
is done also and one thing that I want
to do is go to this top section here go
under advanced and CSS ID I will do more
info with a dash in the middle and then
I will go to this button here and for
the link I will do more info and now if
I close this up and I click on View
details it will scroll me to this
surface information and this is looking
perfect so maybe this is a bit more
space here so under glass and top our
change is 100 to 50 and also on the
bottom to 50 and this looks perfect now
so we can move on to the next section
now on to the next section so I will
extend this again and here I will click
on this plus sign this time because we
will use no block but we will do this
manually 20 at any section and I want it
to be two columns such
perfect and on the section box I wanted
to be 900 pixels wide oh great perfect
and I will now go to the widget and drag
an image widget to the left column and I
will click on this choose image and
choose this image with the furniture
perfect now this is a bit big so I’ll go
under style and I’ll do the width to be
around
I believe 50% that looks really good so
now I will right-click on the surface
information and to top kit and then I
will drag this down here and instead of
surface information I will type type of
furnishing under style the typography
able to 35 okay then I will duplicate
this again we have one more and this
time I won’t go to dynamic here go to a
CF field and choose the key or type of
furnishing which is luxury for this one
and to stand a bit out I will go under
style and in typography I will do this
size to be 80 pixels and I will
transform it to uppercase and also from
black color I will go to this purple
color it looks really good
all I have to do now is click on the
column and for the content position I
will go key middle so it’s anchored and
look how nice these loops perfect now I
will right-click on this column on this
section story and I will to duplicate to
have a copy of that and what I’ll do
I’ll take the right column and drag it
on the left to switch positions and I
will change this one in this image from
the furniture one to the one with the
key and I will change type of furnishing
to
price spore little thing here and the
area we have the price court for the
area and now I will change this from the
type of furnishing key field to the
price score field and we have 65 and I
will go under advanced and after I will
put the % so I have 65% great so this
looks really good
just a few more things so it improves
our design so first I will go to this
section here and under advanced tagging
I will put top 30 pixels and bottom 30
pixels no bottom 50 pixels away and I
will right click copy and go to this one
and do paste paste I’ll to paste the
style also for that so we have a bit
more space now in between those two I
will add a new section which is going to
be one column section and I will drag in
a divider between those I’ll make the
width smaller about 60% Center it and
then for the color I will go with a
really light gray color really almost
white color like this and maybe even
make it a bit narrower like 50 percent
perfect now this looks really good good
and what I want to do here under this is
create another section and I will drag
in a text editor and I will paste in
some information about the price course
of people know what it is about and now
I will go under style Center this
gordita typography do 13 yeah 13 looks
good and for the color I will go with a
lighter gray so is not so pregnant and
now we have this section too with the
price color and type furnishing know how
nice it looks okay we can now move on so
I will now add a new section here
I want it to be a one-column section and
I wanted to be 1000 pixels wide then I
will go here at the top of the surface
information title and right click on
this and click copy then come here and
right-click inside of this empty section
and do paste and I will change the
surface information to additional
information and now under this I want to
add a widget which is called post
content I will search for it here as
this one with a little a file and once I
do that you can see we have the post
content of our listing already here we
don’t need to look for any advanced
custom fields key but it’s just the
built in content from our our listing
okay I also want to go here on the
section and do padding top of 30 pixels
go here on this section with these small
text and do bottom 35 pixels we have a
bit more space and now between these two
I want to insert a call to action so I
will click the plus sign here and then
before the item because I want it
reduced block and we have the come to
action blocks here and I’m looking for
this one here which is the two colored
one and I will click insert
and we have this year so now I want to
paste in the text for this so we will
have the contact us now I will change
the button from start free trial to move
up property visit ok and I also want to
change the design when we hover on the
button so log on your style and I will
change in the hover the background color
to white so it stays the same and
instead of the grow I will do the float
like we have at the top so now it looks
like this we can also change the text at
the bottom and it’s going to be keep
scrolling for additional information and
I will even go and bring this a bit
closer like 8 for the letter spacing and
I also want to change the black color
for the background to our purple color
so it stands out a little bit okay and
you can see this arrow right here on the
section is still black because that’s a
shape divider and we need to select this
section go under style
shape divider and change the color for
the arrow to the purple color and now it
matches with the background of the above
section so look how nice this looks so
now we can move on to the last section
which is the location and availability
information so let’s do that now I will
now create the last section so we will
click the plus sign here and do a 1
column section then I will right click
on additional information and click copy
come here and click paste and I will
change this from additional information
to location and availability information
and now I will do I will insert here
columns widget which is the first widget
in widgets panel to make these two
columns
and in the first column I will search
for title and I will add an item here I
will change the view from default to
stacked to a square and I will search
for the icon of map
okay it’s not laughing slow location
error of this one here now I will go
under style and I will do the primary
color to be our purple color the size
will be 29 the padding of the sand
pixels and the border radius is going to
be 5 pixels which bit rounded and this
looks very nice now so I can right click
on this do copy come here and do paste
and I just need to change this from the
location arrow to the calendar and I
will choose the calendar oh this one
that’s just the outline because it’s a
bit more simple okay now I will copy
again the title from here and come and
paste this under this location arrow and
I will change this to be location and
under style the typography I will make
this 22 pixels 22 like this so it’s a
bit smaller and I cannot copy this paste
it here and change it to available from
now I will again copy this paste it
under and now instead of the location I
will click on the dynamic link go down
to a CF field click on that and change
this the key to location and we have the
location for this now I will go under
style I will change the text color to
the purple color and in typography I
will make this six
pixels and await 600 pixels good now I
can copy this paste it here and then
change the key for our ACF field to
available from to display the date
very nice and in this section we need
just one more thing which is the Google
map so I will search for the Google Maps
widget and I will insert it here at the
bottom so it’s far as the whole width
and then for the address I’m going to
dynamic ACF field and select again the
same location key and now you can see it
matches our location and what I’ll do
I’ll make the zoom a bit closer so I
think around 14 and for the height I
wanted to be 320 pixels high and just
for the sake of design
I will go under style sorry under
advanced border and I will do a solid
border that’s 5 pixels wide and the
color is our purple color and I will
also do a margin top of 30 pixels and
this section will also have a pad on top
of 30 pixels so it’s a bit better spaced
out and here again a padding top of 30
pixels great so now this looks really
nice it’s better spaced out and we just
have to do one more thing here and that
is to have another call to action and
all I’m gonna do is come here copy this
whole section come at the bottom here
right-click and do paste and also on
this big section at the bottom I will do
of 50 pixels pattern so it’s not so
close together
and now if I closed the same you can see
our design is complete we have the map
we have the location available from the
additional information to call to
actions the price called the type of
furnishing the surface information the
price and the title of the listing so
all that’s left to do is to click on
publish here and now we have the display
condition screen and you see it already
did include listings or and that’s
exactly what we want so all you have to
do is click on publish and now this is
published I can go here to the humble
menu and then go exit to dashboard go
under listings all these things and we
can see under lists were listing here
and if I go to it and click on View it’s
going to load our design we just created
and that’s great that looks really good
I can click on this and we have all the
information from the backend here in our
template with the location the map the
call to actions everything so now to
prove how nice this is
I will also create another listing and
show you how it looks inside of our
template so I will now return to the
dashboard and create that so I will go
now on your listings all these things we
have the one that we’ve created before
so I’m going to add new and on fast word
I’m gonna fill in the information okay
so I just have to set the featured image
here and for this one hits this featured
image
and I will click on publish
now if I go to cities it’s on our
template and look how nice this is
and again I can click on View details
and it’s the information with two floors
one bedroom one bathroom
this is furnished it has a price core of
information and map the location
available from and our call to actions
so the final thing that I’m gonna do is
I’m going to go back to the dashboard
I’m going to visit a slide on our home
page and I’m gonna draw edit with
Elementor so now under latest listings
here I’m going to drag the posts widget
this one here I can’t leave this space
okay and now on the query instead of the
source to be posts it will be listings
we have our listings and I’m just gonna
do a few things with the layout is going
to be two columns the image size is
going to be large so it’s nice and sharp
and then we don’t want the read more
button we don’t want the excerpt we
don’t want the metadata here just want
the title and the images I will make the
image ratio a bit smaller and on the
content on the typography of the title I
will make this one 30 pixels maybe 35
pixels and I’ll make the color black
Center this and update and this is done
so we can now go back to the dashboard
visit the site
and you can see we have the home page
now with our listings and if I click on
one of those it’s gonna load in our
design and if I go back to the home page
by clicking on the logo and clicking on
the second listing is the same design so
all we have to do is just fill in the
information and our design is going to
stay the same
so this was my tutorial I really hope
you enjoyed it and that you learned
something new out of it if you have any
questions just leave them in the comment
box below and I’ll try my best to answer
them thanks for watching and see you all
soon
