Create a Real Estate WordPress Website Using ACF & Elementor

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 4.4 point well and this is the latest 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 350,000 we won't put dollars because we 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 3-bedroom 2-bathroom house we drive and 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 380 that we introduced in the backend 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 71 percent it has the additional 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

Channel: Elementor

Views: 165,001

Keywords:

Id: f1tN4em56uA

Length: 40min 35sec (2435 seconds)

Published: Fri Aug 17 2018