How To Make A Real Estate Website With Wordpress FREE Plugins | FULL Step-by-Step Tutorials (2021)

okay guys so today we are going to build from scratch a real estate property listing website from a to z from start to finish step by step one by one and it doesn't require any coding whatsoever i'm gonna take you by the hand and walk you through all the steps one by one and we're gonna end up with a beautiful website like this one here like you see behind me this is the home page you'll have a contact form where can people send you inquiries you will receive that via email you can reply to them we have a beautiful hero section here with a compelling heading if we scroll down the page you can see we have our featured properties right here beautifully designed a beautiful layout and then a very professional about a section just underneath it with your picture here very professional looking picture and a nice description of your business right there and then we have our main listing section here all our properties being listed properties for sale properties for rent it could be houses could be buildings could be offices could be lands whatever you want they all be displayed right here automatically and they all dynamically linked throughout the whole website uh and through the different pages as well now if we scroll down obviously you can display the type of properties you have available like apartment houses offices it could be bungalows it could be detached house semi-detached house could be lands a plot of lands whatever you have available you can display them here right into your home page for anyone to see and then finally contact details as well obviously this website comes with more than one page i'm going to show you how to tweak this around make it your own and change everything the way you want it to personalize it to your own taste and preferences and then we have a beautiful about us page as well as you can see with a beautiful backsplash picture like this with the cityscape and everything beautiful menu bar a nice presentation of yourself as a director of the company for instance very nice indeed and maybe a few numbers to display the amount of properties you have available that you have sold etc and finally the the icing on the cake the properties page as you will see absolutely gorgeous a very professional these are all your properties listed one by one you can narrow down the searches for sale for rent diarrhea by neighborhoods by prices by amount of rooms etc you can narrow down the searches and everything and if everyone was to click on any of those properties then go straight to the page itself as you can see with all the details about that property with a beautiful picture slider as you can see immediately there if you scroll down you have even more details about the property uh google maps as well and the agent in charge of the sale of the property and if you go back up here you can see you even have features you can add video and you can even add a 360 degree virtual tour so absolutely fantastic so let's go through all the steps one by one and for this i've put together a list of all the steps and all the tasks we're gonna undertake and take care of so this is the list so this is actually hosted on my website and i'm going to put the link in the description below so feel free to go to that page and to use it when you're building and creating your own real estate website so these are all the steps we're going to take care of as you can see this is broken down in three different sections so we have the initial setup we have the customization and finally all the final tweaks before launching your website and before going live so as you can see all these steps are listed here one by one and we're gonna take care of them one by one of course and as you do so yourself feel free to use that page as well and once you're done with each and every steps all we have to do is just tick them off the list just like that and as you can see now we know that our hosting is taken care of and then the next step is to register our free domain name and we we can take that off as well as we go along so again this is this page i'm going to put the link in the description below as you can see this is hosted on my website so feel free to use it for your own personal use it's totally free of charge of course now you can print it as well if you right click on this page and click print if you wanted to you can have it printed on a sheet of paper you can print it at home and then tick those boxes as you go along right so let's get started so the first step is to take care of our hosting so for this we're going to go on my website here mr web reviews so mrwebreviews.com and you can either go into the address bar and type in forward slash hosting just like this as you can see forward slash hosting or you can click on the link here that says hosting in the menu bar and i'm also gonna of course include the link in the description below so feel free to use any of those methods they will all bring you to the same place anyway so let's click on this now there you go so as you can see we are now on the hosting a website so this is basically a core branded page that i have with hostinger what i've done guys i've negotiated uh some special rates some special discounts for you guys with hostinger so basically here as you can see on screen you can get up to eighty percent of the cost of the hosting normally you get free domain name free ssl certificate and free cloud flare which is absolutely amazing indeed and i'm also going to give you a special coupon code in the next step mr webreviews.com which will give you access to an additional seven percent discount at check out so all together great savings to be made indeed so hostinger basically is where i host all my websites because they're fast they're reliable they provide outstanding support as well because with the hosting company obviously it's when you run into trouble because it does happen let's face it they're not perfect but the response time is absolutely perfect and very fast indeed and also the pricing structure that they offer they are the cheapest the most competitive on the market to be honest and when you come when you can combine actually both of these together reliability and pricing we have a winning uh solution obviously you know which is the case here with hostinger so let me show you very quickly all the different plans we can choose from now we have three different plans available here we have the single we have the premium and the business so what's the difference between those three different plans as you can see the premium one is the most popular one and there is a good reason for that i'm going to explain you in a few seconds so if you let me scroll down a little bit there you go as you can see apart from the price on this one is 99 cent this one is 2.99 per month and 3.99 so which is absolutely extremely affordable already as you can see price-wise absolutely spot-on now what's the difference again between those uh three different uh plans so this one here the single as you can glean from its name is for one website only so you can only host one website on this one so if you're planning to build more than one website this might not be suitable for you maybe you'd want to get this one instead as you can see those two 100 websites so it's almost unlimited isn't it now as you can see here the storage space is 30 gig on ssd drive so ssd drive is the fastest hard drive on the market which means that your website will be lightning fast to load and very uh performance will be absolutely perfect as you can see so this one is 30 gig of the storage space this one 100 this one 200 now 30 gig of storage space is plenty to be honest so this is not uh a factor you you need to consider because before you reach 30 gig you'll need a lot of information now this one here this is the most important bit this one you don't get a free domain and you don't get google ads credit so here the value of the free domain is 8.99 so if you factor that in already just that alone makes this plan the premium plan more advantages and a better value than these two obviously because this one is 99 cents multiplied by 12 plus 8.99 and you don't have the google ads credits to promote your website so all together this plan as you can see is the most advantages now also as you can see this one the single you can only have one email account so if you're creating a website with this you have your domain name.com you can only create one email for instance info at yourdomain.com or sales at yourdomain.com now if you have more than one email required for your business this might not be suitable again this one for instance the premium one has free emails so you can create as many emails you can have info ad sales ad your name at your sales teams at whatever you want you know all of them now again all these plan offer free ssl certificate so what's an ssl certificate is the padlock here next to the web address as you can see we have a padlock right here which indicates uh and shows to your visitors that your website is safe and secure especially if you want to have online payments and transaction made online and also transmitting information through the internet so because your real estate you might have sensitive information being transferred through your website or so on this is very important indeed so for the sake of our tutorial here we're going to go ahead with the premium plan which is the which is the most popular one so let's go ahead with this and all we have to do nice click on this so click select there you go and in the next step here we have to choose our billing cycle so from here you can select between those four different options so you have one month so if you just want to try things out you can select just one month that's absolutely fine and then you can renew or go on a pay as you go plan if you wish that's all the same now bear in mind this is more expensive obviously because you're only locked in for a month so this is not advantageous for horsinger obviously you know as you can see you can say 12 months 24 months and 48 months not 48 months 2.19 per month compared to 10.99 for one month so factor that in as well and also bear in mind that you have to pay the setup fee of 4.99 which is free with any of those three plans afterwards so if you select 12 months 24 months or 48 months there is no set of fee either so let's say we were to say 12 months as you can see the cost would be 71 1888 and if we scroll down as you can see it says save 45 so let's scroll down and let's have a quick look so normally it would cost you 131.88 you get free ssl free domain registration free cloudfare and setup is free as we mentioned and 45 discount which is 60 of this console amazing value obviously they have to add taxes on top so which brings us to a total of 88 41. now if you wanted to go with 12 24 months or two years period so normally 71 so let's say 70 times to 140 dollars would cost you normally for two years compared to one year this is logical isn't it look at this it's only 90 and 96 cents so if you double this billing cycle you don't double the the amount owed basically it's actually amazing from 71 it's only an extra 20 dollars to go for two years periods as you can see so normally 140 would be it's only ninety dollars now ninety dollars ninety times two is one eighty so it should normally be 180 you agree with me it's only one hundred and five so it's only an extra 15 to get four years of hosting all included so this is absolutely amazing so for the sake of our tutorial here we're just going to go with 12 months so 71.88 and if we scroll down here we can select our payment methods so we have credit card paypal coin payments so coin payments it's all those virtual currencies like uh bitcoin and all of them and then you have google play pay as well so let's scroll down a little bit and now very very interesting indeed i'm gonna give you a promo code right here that's gonna give you an extra seven percent discount so okay so we got 45 percent discount here so 60 dollars of uh discount 60 off our amount so we are we are at the moment 88.41 so here you see you have have your coupon code yes so click on this and you're going to type in mr web reviews all in capital letters like this and then you're going to click on the plus sign right here and as you can see we saved roughly another six dollars on the amount so this is great savings to be made as you can see and now we can proceed to the next step all we have to do is click submit secure payment and click next so there you go because i selected paypal as my payment method i'm redirected to a paypal payment page but regardless of the options you selected all you have to do now is just basically go through the checkout process and now we can go back to our to-do list and take this one off this one is sorted out so once you have actually registered and gone through the checkout process you will receive a couple of emails from hostinger and one of them will contain a link to the h panel so normally it's called c panel but because it's whole stinger and their name starts with the h they call it h panel so now what we have to do is to log in into our h panel and we're gonna take care of registering our domain name and set up our hosting all these steps here so let's do this now so we go back to our hosting a page and as you can see you have a login button so just click on this now so you're going to put in your credentials so the email address with which you registered and your password and then you can simply click on login so here we are now so from here we can claim our free domain as you can see this section here so all we have to do basically is to click on claim domain so what's a domain name exactly so when you go on google.com this is the address you use actually to reach the google.com website and it's the same with amazon.com netflix.com or mrwebreviews.com if you type in any of those names in the address bar right here it will bring you to the website so this is what a domain name is for so let's go and register this now so all we have to do basically is click claim domain and as you can see here you can type in your domain name so you can select different extensions so you have dot com as you can see you can have dot shop dot tech if you're running a text shop dot website dot host dot info etc but for the sake of a tutorial here and obviously for real estate website uh dot com is probably the best suited extension now all you have to do basically is type in your domain here so whatever it is that you want and then click claim domain so now bear in mind uh dot com is the most common one the most popular extension so your domain name might not be available immediately you might have to go through a different a few different options you know so let's say if you're real estate based in atlanta you might type in real estate atlanta or atlanta real estate or real estate in atlanta and try different options try to keep it as short as possible obviously you know it's always better to have a shorter url and make it as obvious and easy for people to remember as well so try to keep it to register domain name that's catchy and easy to remember okay so after this all you have to do is click claim domain okay now that we have a domain name registered we're going to the next step which is setting up our hosting so as you can see here it says setup premium shared hosting and you have a button here that says setup i have two of them here because i have a few different hosting plans obviously for all my tutorials but you only have one so don't worry whatever shows up here just click on it so all we do now is to click setup and this is going to bring us nicely to the next step as you can see here follow the guided setup and your website will be live in just a few minutes so let's click start now and here you need to select the domain name so the domain name we just registered in the previous step so atlanta real estate or real estate atlanta dot com whichever it is you select it you select it here so normally it should show up automatically here if not you can always click the drop down menu and go and select it manually and then click select and which way do you want to go so you can see we have two options here build a new website or migrate my website we're not going to select either of them we're going to click the skip i will start from scratch because this is what we're going to do we're going to start from scratch and then finally all we have to do is to click finish setup and we'll be all done already as you can see very easy indeed okay so we're nearly there now so let's go back to our list as you can see we can take this one off register our free domain that's done and set up our hosting that's done so now we're going to create an email address so let's go back here now and if we scroll down once you've done with those two steps you will have a section like this that says hosting that means that your hosting is ready and we can actually use it now to create our website set up our email addresses and everything so all we have to do now from this step is just to click either on the domain name itself so here you you will have atlanta realestate.com in my case for our tutorial it's mr web reviews tutorials.com so we're just gonna use this one for now we can either click on manage or click on the domain name itself so let's click on this now and this is bringing us to the hedge panel so from here you have all the options to take care of your website your hosting your emails statistics passwords upgrade everything is in here so lots and lots of options but don't worry we're only going to use a few options here so our aim now is to create an email address so all you have to do as you can see we just scroll down and you have a subsection here that says email and when you can click on email accounts so as you can see here if you scroll down you can create a new email account so all we have to do basically is type in the email address so as you can see at the moment i have one registered already i'm just gonna delete this quickly so let's say you wanted to create info at yourdomainname.com so all you have to do is type in info type in a password and then click create that's it simple as i told you it's going what's going to be easy very easy indeed and all we have to do now is click create it's going to take a few moments to set it up and there you go just like that we have an email address set up now we have info at mrwebreviewstutorials.com so this could be anything you want obviously this is unlimited at the moment on this account so you could have info ad sales at your name at whichever you want hello at for instance any of these of course so that's it this is how we set up our email address so you can take this one off back to our list create email address and now we're going to install wordpress so for this we're going to go back to our dashboard so click on dashboard now and if we scroll down as you can see we have wordpress here with order accounts emails domains and websites so underneath this tab this is how we're going to install wordpress so all we do basically is click in auto installer so click on this icon here and as we scroll down as you can see i have a few websites here already uh set up as you can see but you only have one domain name yourself normally which should be atlanta real estate for instance or yourdomainname.com so what we're going to do now is click on this here we can see we have wordpress or we can select woocommerce joomla and others we are only interested in wordpress at the moment so this is what going to install so what's the difference between those two you might wonder well basically this one is wordpress on its own which is our cms platform we're going to use or you can install woocommerce plus wordpress so basically woocommerce is a plugin you can add on wordpress to make it an e-commerce website but for our tutorial here we don't need it so all we're going to install is just wordpress so all we do now is click select and as you can see we have our domain name here so mr webreviewstutorials.com so what we want to do first is to select this drop down menu and select https so https is very important is just to make your website ssl secure so as i said before have this padlock here just to tell your visitors that your website is safe to use and and uh secure obviously so you're gonna create a username here so i'm just gonna put mr web reviews here for our tutorial mr web reviews and you're going to type in a password so try to have something that you can remember obviously but it has to be secure regardless and then here type in the title the the website title so basically if it's atlanta a real estate you would type in atlanta real estate or your domain name whichever it is your company name your business name all the name of the website so in our instance here is going to be mr web reviews very simple and now we have a few more options here leave everything as is don't touch this it's absolutely fine the way it is now we want to make sure that our website is always up to date and to the latest version as well so we're going to tick this box is always update to the latest available version and this is going to increase obviously uh performances and also security because you want to make sure that your website is safe and secure from hackers and all these threads and then all we have to do after this so let's double check everything is okay so we have https we have our username password title and we have the update setup all we have to do now is just click install now bear in mind this is going to take a few moments obviously depending on how fast your internet connection is so don't be anxious let it run uh just don't close the window obviously let it run so what i'm gonna do now i'm gonna pause the video now because gonna take a few moments and i'll meet you guys when it's completed okay guys so wordpress is installed now so bear in mind there is no notification or they won't let you know that the installation is completed basically they will bring you back to this screen which means that wordpress is installed so we can go back to our list now and that's it and take this one so install wordpress done so the initial setup everything is sorted out as you can see this was very easy indeed so next step now is customization so for this we go back to our hedge panel and we're going to go back to our dashboard click again on dashboard once more and as you can see we have edit website right here so this is what you want to click so now you want to make sure before you go ahead that this box is ticked so it might be disabled at the time when you load this page and you want to make sure you want to force https so click on this and make sure it turns green which means that you have your ssl certificate fully installed on your website and then for me all we have to do is click edit website and this will bring us to our wordpress dashboard this can take a few moments again and as you can see here we are now welcome to your wordpress dashboard so from here let me show you exactly how this works so basically wordpress is divided in two sections on the left hand side you have the menu and on the right hand side here all of this this is the preview of what you're working on so let's say if you were to click on pages let me click on this just to show you quickly we have all our pages basically you know so if i click on appearance it's everything that's got to do with the appearance and the look of your website uh with the theme the templates and all that and then we have our plugins so if i click on plugins it will display all our plugins so all of these are different parts of the website and we're going to go through all of them one by one and i'm going to explain you each role and what's the the functions of all of these so basically the first step we're going to do let's go back here so we're going to go into general settings so what are the general settings we're going to here and we're going to click on general so basically it's just to make sure that your site title and your tagline are properly configured so as you can see we have our site title here which says mr web reviews but you might have a tagline for instance so for myself i'm just going to put free no because we're going to do a tutorial here i'm going to put a real estate website tutorial just like that but here you would put your own tagline obviously this is important because when people will look your website later on on google and all that this is one of the things that will show up just next to your name so make sure this is uh clear and punchy maybe a little bit just to make sure people uh will notice who you are so you want to make sure that the administration email address is correct as well and that it will reach you because everything that's happening on your website you'll get a notification and you want to make sure that this is going to reach you so let's say if you have your emails on your phone and you have your gmail account maybe you want to put your gmail account right here and once you're happy enough click on save changes so we can take this one off this is done now we're going to take care of the permalinks so let's go back here now and we're going to settings again and we're going to click on permalinks so basically when you go on the website as you can see here we have our website mr web reviews tutorials forward slash wp admin forward slash options etc etc so this is the web address as you see it so you want this to be search engine friendly and you want it to be easy for your visitors as well to identify where they are on your website so what we do with generally is to select the post name which is usually the best and the simplest one to see as you can see it will display https your domain name dot com forward slash and let's see if it's the a bonus page it will simply display about hyphen us if it's the contactors page it will display contact hyphen us so anyone who's on your website can identify very easily and very simply where they are on your website and then after this we just click save and there you go just like that we have that one sorted next step plugins delete some add new ones so very important step here so let's go into our plugins now and for this we're gonna click on plugins and as you can see these are the plugins installed on our wordpress installation at the moment so what are plugins you may wonder okay so wordpress is the software let's put it this way that we are using to build our website and plugins are additional pieces of software that are linked to our website that will allow us to perform different functions different tasks and have different things uh working in conjunction with our wordpress installation so for instance we could have a an e-commerce extension these are extension if you wish so all these extensions will allow us to do different things so if you wanted to create a form we're going to install a plugin to create forms if you wanted to have an seo and optimize all your pages for seo friendly you uh for google and all that you can have an seo plugin and so on so basically all these plugins uh will allow us to build our website without coding and without programming so as you can see here we have a few uh installed already so we have the light speed cache so with hostinger by default they have a high performance page caching plugin as you can see here so at the moment we want to deactivate it because as we work on the website this is gonna prevent us from seeing immediately the changes that we're working on so what we're going to do now is just deactivate that there you go and the next step is just to delete those two so we've asked kimet and t spam and hello dolly so just click on those two tick those two boxes bulk action and then delete so we're gonna get rid of those two we don't need them all together so that's it gone and then next step is to install a new plugin to actually so we're going to click add new there you go and we're going to install a maintenance plugin so maintenance just typing in the search box here maintenance like i did and as you can see the very first one here from the web factory limited this is the one that we're going to install so let's click install and then all we have to do then is to click activate there you go and as you can see we have now we have an added tab here in the menu section which says maintenance so what we're going to do is just click on this now and make sure that the maintenance is on so what is a maintenance page well basically as you work on your website and you do all these changes you don't want anyone to land on your website and see maybe a messy page and all of that maybe with broken codes and and basically this is what a maintenance page is for so basically if you are working on your website like we do here let me right click here and show you we can access our website so this is what our website looks like at the moment so we are able to see the content of our website as we work on it and we are logged in as an admin now if i use this url here ctrl c and if i open that in an incognito page now this is what anyone else from the outside world who will type in your web web address will see they will see that the maintenance mode is on so basically you can keep your privacy uh while you're working on your website and make sure that no one is going to uh try to visit your website during construction okay so this is one thing sorted so now we can go and tick those boxes and let's continue uh to install our plugins so let's go to plugins again and then add new and this is the most important plugin we need so here we're going to type in essential real estate just like that in the search box and this is the one that we want to install so real estate this is what the the plugin basically that will allow us to upload properties and all the settings uh that we need for that so all we need now to do basically click install now uh install now yep so there you go nearly there and all we have to do nice just to click activate there you go so that's all done already so as you can see we're now presented with a new page which is setup wizard instruction so thank you for installing essential real estate and again this plugin is free of charge totally free and all the tools you're gonna use on this website are free as well so wordpress is free all the themes the theme we're going to use is free astra theme is free and this is free as well so all together absolutely fantastic so we can skip this and set up the plugin manually we don't want to do that you want to make sure you're going to click on continue to page setup otherwise you'll have to set up everything manually and it's very tedious believe me so you want to make sure you click on this one click on continue to page setup and as you can see here we have all these fields pre-filled automatically for us so basically the title of new properties would be new property my properties my profile my invoices and so on so basically all these default settings are absolutely fine and all we have to do now is just click create selected pages there you go all done in just a few clicks so this is very simple to install indeed as you can see so that's it for the plugins this is a real estate plugin uh installed as well so we can take that off now our list so plugins delete some this is done and we have the maintenance mode done this is done so next step is to install our theme so back to our website as you can see this is what our website looks like at the moment so it's not very appealing at all it's very basic so what do we do how do we improve this what we do is basically we install a theme so a theme basically is a pre-built template that we can use and tweak around so this is going to save us a lot of time obviously we could build it from scratch here we're using this uh theme already but there is a pre-built theme and templates that we can use that saves us hours upon hours of hard work obviously you know so all we have to do basically now from here we're going to appearances and then themes and then we're going to click on add a new and in the search box here you want to type in astra so astra as you can see this is a free theme as well so as you can see if you hover on top now it will show you two new buttons install and preview so just hover on top and all we have to do now is to click install and the installation has started now so now again please bear in mind it's gonna take a few moments depending on how fast your internet connection is so don't be anxious and let it run it will take just a few moments all right so that's done already and all we have to do is to click activate there you go and the next step you want to hover on top again and as you can see with theme details so click on this and then you have that small option here that says astra options click on that next and as you can see we have this option here by the side that says import starter template so as i mentioned before there is a library of starter templates available so basically these are pre-built uh templates that we can use and that's gonna save us a lot a lot of time and they all look very very professional as you will see so the next step basically we click on install import a plugin just this one here just click on that activating there you go and now we have to choose our page builder so what's a page builder basically because there's no coding involved we want to tweak and change our page to change things around you want to add text maybe title maybe an image and so on and instead of using html coding css and all that we have a drag and drop page builder so we can choose among four different options so we have elementor beaver builder gutenberg and breezy so they all equally good but for our tutorial here and from experience elementor is the best one of them so let's click elementor and from here you are presented with all these different templates as you can see so you can see they all look very professional very modern looking uh the layout is fantastic and it's up they look very professional all of them to be honest you know there's not one i wouldn't pick to be honest they're absolutely great this is why i love astra theme so much now if you look at some of them they have a tag like this a label that says agency so these are premium themes premium templates so you'll have to pay the get the premium version for this so again it's really up to you you can choose any of these it's uh they all look fantastic you don't have to get the premium one as i said you can do all of this free of charge now if you really love one of them you can always get the premium version as always i'll leave a link in the description below if you wanted to so basically let's go back to our uh top here and then we're gonna just click on free for now so i'll just click on free because i like free stuff what can you do and we're gonna type in real estate real estate there you go as you can see we only have the choice among two of them so now if i wanted to select uh not free one but all of them as you can see another one here so it's just three of them that would be suitable for real estate regardless so what i'm going to do now i'm just going to take the free one and i'm going to click on this one here and as you can see this is the one that we that i showed you at the beginning of this video and if you scroll down this is the actual page you know and as you can see we have home about us properties agents frequently asked questions and contact so all we have to do now just one click we're gonna import all of this on our website so all you have to do basically is click import complete site and the import will start so as you can see here one nice step they're asking you for feedback so feel free to fill this out next and then you can skip the next step or you can submit it it's really up to you i'm gonna skip it for now so as you can see you selected website your selected website is being imported now bear in mind this can take up to two three minutes again so what i'm going to do now guys i'm going to pause the video right now and i'll meet you when it's completed so there you go guys as you can see imported successfully so our website is imported now so let's have a quick look at our website what it looks like so that's what it used to look like as you can see very basic and not very appealing at all now if we refresh this let's quick refresh and as you can see we now have our website exactly the way i showed you initially so as you can see if we scroll down we have all our properties about us the listing so everything has been imported and ready for us to tweak around so obviously as i've said previously this is saving us a ton of time because we don't have to recreate to create all of this step by step obviously you know we could do it of course if you have time at hand you can do your own stuff and create it from scratch but again it's so much easier to work from something that's already existing and just tweak it around to make it our own so let's go and tick that box now install theme that's done so our next step is our essential real estate so let's go back to our wordpress dashboard we can close this now there you go so our essential real estate as you can see there's a few tabs that have been added here so we have uh real estate options if you scroll down with our properties agents packages user packages invoices and even a transaction log so all these tabs here are related to the same plugin the real estate uh option uh plugin here so basically this is what we're gonna use not to build our website our real estate website and create our property listing that's attached to it so let's go ahead and discover all these different options now so from here we're going to click on properties and as you can see when once we click on this we have a drop down menu with different options as you can see with all properties add new property type property status features label and then all the location like country neighborhood city town and province so as you can see here this is very comprehensive indeed so we'll have to set up each and every one of them so before you can upload a property we'll have to set these things up obviously so depending on where you are in the world depending on which territory you cover and uh region you'll have to set this up based on your own requirement of course so let's say if you were based in ireland and you want to do the whole country maybe maybe you are an estate agent who is established nationwide so first thing is to actually define which country you insult we we're going to click on country first so i'm going to select ireland for now so i just click on ireland there you go now if you're anywhere in the world select your country and then scroll down and then save so this is our country setup now you can select different neighborhoods or city and towns provinces or state some provinces states uh probably and then we can narrow it down so let's start with provinces and state maybe we're gonna select maybe we have dublin and as you can see the country is ireland so you can put a description if you want to it's up to you you don't have to it's not mandatory so we're just going to add dublin here we're going to add cork we're going to add galway maybe so there are 32 counties in ireland i could go on you know i could put the county latrine maybe here sorry county latrim i had another few contiros common and maybe count this lego there you go so just for now just to give you an idea okay and then add your provinces or counties or whichever uh depending on how your country is divided obviously in different sections and areas some provinces or states this would be it and then with city and town so now if you want to narrow down the searches for instance from county uh dublin we it could be or even county literary more county roads common it could be divided in the main cities or main towns or related to that place you can do it as well so let's say i'm gonna go county lit room here i'm just going to go and click on this or city and town and as you can see you have province of state here as you can see so we can divide that and break it down in smaller uh areas basically so i'm gonna put here carrick on shannon and this will be part of cantillitrim so i'm just gonna add this so we'll have as well mohil which is para cantiletrim as well we could have maybe drum shambo which is part of cantilatrium yeah why not so let's let's have it this way for now i'm just gonna add three for now okay so we have our country which is ireland divided in 32 different counties and each county may have is his main cities and towns and areas obviously now if you have neighborhoods i suppose maybe somewhere in america i could be the bronx that's the only one that comes to mind that's the only one i can think of sorry but anyways you could have different neighborhoods as well like this so i have no uh example here to put in but if you had one you can create one here and uh allow your visitors to narrow down their starches even down to the neighborhood so as you can see we have the country we have province we have city and town in the neighborhood so this is everything for what's got to do with the area and the region and the location of the property now we have our property type we have status and feature and label as well so let's go with property type so property type basically is what is this property is is it an apartment is it a building is it an office maybe is it a bungalow is it a detached house semi-detached house maybe it's a garage you have for for rental so basically these are all your different categories where you set up the type of properties so let's go ahead and create a few here let's see apartments add new apartments bungalows maybe a detached house or villas villas villas maybe yeah and then we can have offices and then maybe lance if he's just the land and what else could we have i don't know maybe garages sure why not okay so these are a few options we have obviously you know and then yeah obviously we have a house as well how's this there you go so these are basically all our different uh types of properties now available so houses carriages lands offices fillers bungalows and apartments so this is how you can create those different property types so very simple now we have property status as you can see here so let's click on this so what are property status basically it is for rent or for sale or maybe for lease so this is the type of uh rental agreement or sales agreement which already so you're going to type in maybe for sale so this is one and then we have for rent and maybe if you have a commercial lease commercially there you go so these are our property status and then property features what are the features so basically these are all the mod cons in the property someone is going to rent or purchase so it could be central heating air conditioning and so on so let's create a few here so let's put central heating air conditioning what could we have laundry room what else could we have a swimming pool maybe all these would be features basically you know available uh in the property itself and maybe garage could have a tool shed who knows and things like this so these are basically all the selling points that you want to emphasize on your property listing and then we have our property label here so what's a property label basically it's a label that will be on top of your property on the listing on that you're going to use basically to draw attention to that property specifically compared to others so it could be on sale or special offer price drop maybe or first time buyer new property or something like this so let's just create a few here so sale maybe price drop first time on the market and uh maybe new new yeah let's say new okay so basically these are things that you'd like to emphasize on your listing page just to draw the attention to it basically you know so uh just notice here you have set background color for the label so you can have different colors obviously so if you were to select a color let's make it vibrant so it will stand out so maybe on the red side a bright red maybe would be ideal for this so now you can just save that yeah i think i saved it here oh yeah sorry it's when you create it actually when you create it you have to select the color so what you need to do nice to edit this and then select the color from here so sorry about that i skipped a step here so this is our color ctrl c update so i can have different colors basically for all these different categories so as you see as you've seen here new one is a color it's red and if i go back to the category first time on the market i could have it blue for instance so let's make this one blue there you go update and then we can have the other one maybe price drop we can have it in red as well maybe this would be wouldn't be too bad there you go update when it's rated to price you probably need a vibrant color and cell we could use maybe on the yellow side maybe a rich yellow like this maybe there you go so this is how we create our label so now we have everything set up we have all our property type studies feature label and uh location sorted out so we can now create our new properties uh add new properties to our listing so how do we do this as you can see of all properties or add new so either of them because you have none yet at the moment so if you click on all properties you can see this is empty at the moment because we didn't have anything yet and we need to create a new one now before we add our properties to the website to our listing we'll have to configure a few different options again real estate options here click on this and then we're going to define what a measure uh unit of measure is is it square meters or is it square feet so depending on where you are located in the world you might be using square feet or it could be square meters and if you're using a different unit you can even select custom units and then you put whatever measurements that you're using right here so make sure you have this set up before you go and add a property otherwise the measurements will be all messed up so then when you finish you click on save option and from here we are ready to add a new property so just click add new and this is basically the screen where we're going to enter all the details about our property so let's say we have a five bedroom house in the countryside why not there you go and here you could put your description so your description goes here now it doesn't have to be too long you don't have to put all the details because some of the details are actually already part of this page i'm going to show you now so let's discover this page as you can see of property types property status property features property label and all of these as well are added uh features that will be displayed on your property page so there's no need to actually list everything here in the description because this will be taken care of automatically by this system it will display online everything online for you because basically this plugin will take all these bits of information and put them together as a nice layout and present it nicely for your visitors so basically what we need to do is just take all the boxes that are related to this property so as we see this one is a house and we're going to click how this this one let's say is for sale well let's put it for rent for rent and what are the property features well this one has central heating it has a garage has a laundry room no swimming pool but has a tool shed now let's say this property has a feature that's not listed yet you can add it immediately from here without having to go back into all the options so let's say if you wanted to add something new here i'm just gonna create here and i'm gonna put dishwasher okay so as you can see we now have dishwasher uh microwave why not microwave and maybe i would just leave it like that for now there you go and uh this is it so property label you have to select one or you can if you don't need a label you don't take any of those options but because of our tutorial you're gonna take all the options possible we're going to put new so where is this located we select our town state sorry i'm going to put county litream and then we select carrick and shannon maybe we don't have a neighborhood so we just live as is so as you can see here this is absolutely fine and then we're going to add a few pictures so how do we do this we click on this and set featured image so click on this and from here you are presented with this screen so from here we just click upload files and we're going to select the files uh related to our property so you have them somewhere on your hard drive we're going to use those pictures and upload them on the server now on our hosting so then from here all we have to do basically is click select files and go to the folder where our pictures are located so i went ahead and downloaded a few pictures here so i don't know what that is so let's click on this click open and as you can see our picture has been uploaded now so you might want to give it a title you know for seo purposes so let's say the property is located let's say in carrick and shannon you might put actually five bedroom house carrick on shannon because if someone types in on google they might be looking in the picture section immediately and that picture will come up so they'll know immediately what this is related to and this will help you to rank as well uh in google search results so this is our featured image as you can see we have that house now so this is a five bedroom house in the countryside and at any time when you're working on this uh don't forget to save so it's not called save here it's called publish so once you're happy you can click publish and it will save uh the your work basically so let's carry on now with our the description of our property here so we have the price so let's say this one is going on the market for 650 650 what is it thousands million billion hmm that would be nice wouldn't it billion so let's say 650 000 okay and then you have the b4 price oh no sorry we said this was for rent so i'm just gonna put change this now none and let's say this is going for maybe 1500 a month okay and before price label so starting from for instance and this is per month so 1500 it will be obviously per month so let's put it this way so price on call is is when you don't want to display the price so basically they'll have to ring you to find out how much it is so if we were to click this the price won't be displayed on the on the listing so we have the size here as you see as you can see we selected square meters now it could be square feet it's up to you so i don't know i'm going to put 420 uh the land it could be uh 1100 square meters so we have five bedroom oh no rooms sorry how many rooms so let's see all together 12 rooms with five bedrooms maybe three bathrooms with one garage and the garage it's in square meters so let's say maybe 80 square meters when was it built so let's say it was built in 2010 and you can have your property id here as well so if you have your own listing you can have a cross reference here and put the property number here or whichever it is you can add additional details by simply clicking add more so we're not going to do this now we're going to keep it simple you know and mark this property as featured if you put as features you have an extra label that says featured but we're not going to use this use this for now so you can always save as i said so click update and then location so let's go and click on this now so as you can see we have google maps here so it's not set up now we're going to do this in the next step so don't worry about it for now we're just going to leave it as is so floor plans enable floor plans yes or no if you have a four plot plan you can floor plans or you can upload pictures and everything and show that immediately from here so it's a very compressive comprehensive solution i don't have any floor plans to apply so i'm just going to click no for now so gallery image what is it is if you have more than one picture as you've seen that's this is our main picture maybe you want to show the internal pictures as well so how do we do this add image upload file and all we have to do basically is to select files again and then select those pictures so you can select more than one if you hold the ctrl key at the same time as you click on the pictures so i'm going to click on control here and i'm going to select this one this one and this one so this is internal pictures from inside the house as you can see with the landing here and then the stairs and maybe the kitchen so we're going to select them all as you can see you have tick marks for each one of them so if you want to select a picture select the picture select the picture basically they all be selected as you can see together so hold the control key again control key and then select multiple pictures so use these images okay and then we're going to click update and then we have a few other options here as you can see with property video if you have a video available you can upload it here and you can use a youtube video as well and then your virtual tour is the same again obviously you know and then you have if you have agents working for you you can create agents here so let's create a new agent add new so as you can see this is opening a new page for us so i'm just gonna put john doe maybe and then john doe let's say some john doe estate agent for county literally maybe there you go here's the guy in charge of county literary and then you can have description profile email address and everything so i'm just gonna put here estate agent i'm just going to put john.gmail.com and we'll put a more my number zero one two three four five six seven eight company name daw j do limited the address or maybe 15 street name license can put a number and maybe his website so john doe dot com and then we can even have a picture if you wanted to so let's select someone's face so let's say this is john doe hello john how are you doing doesn't smile much does it but anyways let's say this is john doe okay so we can close this now and then again if we call update we can select our agent normally if we scroll down as you can see john doe has been added so we're gonna do this we're gonna add john doe as our agent and then with private notes so private note is the note about the property so these are internal notes obviously so no one will have access to this so you could use this actually as your own system to take care of your properties and if you wanted to leave internal notes between staffs and yourselves you could leave it here so i'm just gonna put private note goes here that's it we're done guys that's our property sorted so what does it look like very exciting now what what does it look like okay so all we can have a preview now so all we do is just click preview changes and i'm gonna do this in a new tab so there you go so as you can see this is our property page so free scroll down as you can see with all the different sections as we said so basically you have a five bedroom house in the countryside 1500 per month for rent as you can see this is the property id 400 to 420 square meters five bedroom three bathroom you can print this if you want to you can compare you can have more than one listing and these are our pages i can see uh as you can see the pictures are not very crisp or sharp those pictures are uploaded and not high resolution but when you upload pictures make sure you have high resolution picture this is much better indeed so you can either click on these icons here thumbnails or you can use the arrows here on top it's all the same you know so it's very easy for your visitors to actually go through all these different pictures one by one so we have a description here as we mentioned a very short description because everything is displayed here automatically for you so this is the address we don't have google maps setup yet we're going to take care of this in the next step and as you can see we have property id the price and so on all the details are here and when we once we'll have our google maps sorted in a few minutes you can you'll be able to see them up here and this is our agent that they'll have to contact in order to get in touch with uh and and find out about the property itself and maybe ask for viewing and so on so next step as we said let's go and take care of google maps now okay so for the google api key we're gonna go on to google.com so on the search engine itself and we're gonna type in google maps api key as you can see it's coming up in the search results here so just click on this let me zoom in a little bit there you go and as you can see we have the very first link here it says uh user using api keys map javascript api so this is the one that we need and make sure it's from google themselves so it says developers.google.com so click on this link here the very first link and it will bring you to this page so it's a two-step process and as you can see first we need to create an api key and then we need to create the credentials for it so as you can see we have a blue button here so we click on this next and this will bring us to a google cloud platform where we can set up our credentials etc etc so as you can see i already have a project in place here for my personal website mr web reviews but all you have to do basically is click on next so let me zoom in again sorry about this a little bit more as you can see we have create project here so you click on this one because you won't have a project normally unless you've created previous projects before like myself otherwise you have probably you have this page would be blank normally so all you do is create project and from here you give it a name so let's call it real estate project and then simply click create after this so again it's going to take a few moments to create this okay nearly there so there you go so now we have our project has been created and now you can see here on top we have create credentials so this is step number two so we have our project created with the and now we need to create the credentials so all we do now is click create credentials and what we need basically for this project is an api key so let's click on the very first one here so this is our api key so what we do now basically is copy this and we're gonna use the key on our website so let's go back to our website very quickly and we go into our real estate options here and if we scroll down as you can see we have google map so we click on this and as you see we can insert our key here so there's already one there which you can use you can't use sorry so just paste it here the key we just uh copied and there's save option and now we go back to our api key here and we have to restrict the key restricted to our website otherwise it will not work so now next step is to click restrict key okay so we can give it a name again so we're gonna say real estate api key and as you can see we now have uh two options to restrict the key so we have application restriction and api restriction we're going to use both of them actually so what we're going to do now just in a second what we need to first is restricted for a specific website so we're going to click on this and then we have to click add item and we're going to type two different references here so the first one is star as you can see star dot your domain dot com forward slash star so we're going to type this so star dot and the website we are using it is mr web reviews tutorials dot com forward forward slash star so that's one and we're going to add a second one as well so star dot mr web reviews tutorials.com and that's it on its own just like that so these two that's all you need so just type in like this on star dot and whatever domain you registered before atlanta real estate or whatever it was dot com forward slash star and then the second one is star dot your domain name dot com just those two simple as and then we go and restrict the api key now so we need to restrict the key so we click on this and we're going to select the apis so we have to scroll down and look for google maps api so as you can see it's not here at the moment sometimes it will appear sometimes it will not depending if it's already enabled on your account or not in this case it isn't which means that we have to enable that so what we do now is just click save just for the time being and we're going to proceed to the next step so as you can see this is our api key and now we're going to library and we're going to go type in maps and we're going to scroll down and as you can see here we have maps javascript api and this is the one you want to click on so let's click on this and we're going to enable this now so enable again it's going to take a few moments to enable this there you go so we're now done with this and now that this is enabled all we do is go back to our credentials so we click on credentials there you go and we're back to our key so what we need now is to edit this again and go and enable the google maps api in this uh api key so what we do is click on the small pencil to edit and we scroll down again and click on restrict key and we're going to select our google maps api so where is it now maps javascript api there it is so this is the one and we all done now with our google maps setup that's it ready to go so if we go back to our website now as you can see now we have no maps visible now if you refresh the page now bear in mind it might take a few minutes uh for the api key to be available and kick in so just please don't be anxious and be patient it's normal and then one more thing you need to enable now on our google maps apis here if you go back to apis as you can see we need to enable the places as well some places api so let's click on this now and we're going to enable this one as well so enable places so this is basically uh to know what's what are what's nearby that uh property basically so if we have banks if we have schools if we have uh hotels maybe uh facilities and so on so there you go so now we have this setup absolutely perfect now so let's go back to our listing okay so i've waited a few minutes here so if you refresh now as you can see it's not displaying the error message which means that it is actually connecting to google maps it's fine and i noticed i made a slight mistake here so i'm going to show you guys how to change this when you go back to your http here you need to add an extra line which is this one star mr webreviewstutorials.com so your domain name dot com forward slash star so no dot in between so one with the dot which is this one star dot your domain name and this one which is star your domain dot com forge let's start so these are all more similar uh but slightly different so there you go uh let me zoom in very quickly so you can clearly see what's written here so there you go so you have to add those two lines i missed this one so once you have those three google maps will work fine so let's go back to our uh page here so as you can see it's not displaying so if we go back to our page the property page our settings here click on this now if you scroll down as you remember all we had basically was the location the province and the town so obviously google maps cannot find it because there's not enough information so what we need to do basically is to click on the location here there you go and as you can see it's pulling up any information out of the database because there's no address yet attached to it so what we need to do is put the actual address so let's put a full address here so let's go with something simple maybe main street carrick and shannon county trim and we're going to put the the air cooled the zip code so n41fk33 and then we're going to save this now update so click update and then if you go to our property page now and refresh the page as you can see we now have the address 17 main street carry concern and county litrium and if you scroll down as you can see all the details are here with the zip code and now we can click on open on google maps so if your visitors were to land on your page and click on this they'll be they'll be redirected straight to google maps as you can see and if we zoom in a little bit as you can see we have this red pointer here that shows us where it is located so if they were to use your website open your website on the phone they'll be redirected straight to google maps and get directions from there so very convenient indeed so this is how we do that so this is taken care of now so what's the next step okay guys so normally at this stage you should upload all your properties before we can go to the next step so whether you have 10 or 100 properties take your time now upload them all on the website one by one obviously uh i can't do this live here during the this tutorial you know it would take way too long we'll end up with a five hour tutorial uh thankfully enough this essential real estate plugin they provide ready-made sample data that we can import so what i'm going to do in the next step i'm going to import those data as well so feel free to do the same if you wanted to have sample data imported on your website or upload your own listing right now it's up to you i'm gonna add this step now you can follow along but you don't have to do it obviously this is just for our tutorial now feel free to do it if you wanted to have them already and work from them and see how it works but it's really up to you so let's go and import the data now okay so for this we go on google now and just look for this uh plugin so as you can see we type in essential real estate and it's the very first one here coming up so make sure it is the wordpress.org website so click on this and as you can see if we scroll down we have a sample data demo which is this one here so what we're going to do is just download this one so uh and then we click save link as right click on the link itself save link as and we're gonna save this on our hard drive and then click save only already downloaded it just click ok next it might prompt you with a warning here just say keep and that's it we have a sample data file and then next step we go back to our wordpress dashboard and from here we're gonna scroll down and go into tools and then import and as you can see i've wordpress install now so if we click on this and then click run importer okay and from here we're going to select our xml file so we're going to point this to the file we just downloaded so choose file and where is this one it's sample data.xml and then click open and then all we have to do now to import all the sample data is just to click on upload file and import and now it's going to do its thing obviously you know we're prompted here it says uploading 0 so it's going to take a few moments obviously so be patient again and there you go so here we need to select who's gonna be the admin for those so we can select ourselves here and then we're gonna click download and import file attachments so we want all the pictures we want all everything to be created for us so click submit and now it's going to start importing everything so bear in mind this can take up to two maybe five minutes and depending on how fast your internet connection is so again don't be anxious no relax is normal it's just doing its thing in the background okay guys so this took quite a long time maybe four or five minutes altogether because there's so many pictures so many media to be uh uploaded and imported obviously so as you can see everything is completed now so if we go back into our properties normally everything should be there so let's have a look properties there you go so this is the one that we uploaded ourselves but as you can see we now have single house near los angeles uh and so on and so on as you can see a restaurant in austin texas in san diego san francisco and so on so on so all very exotic places and nice to see so there you go all this is done for us automatically and we can work from there and uh again it's up to you you can upload your own listing on work from this one so now the good thing with the import is it provides us a base to work from you know it's much easier to work from something that's existing rather than setting it up all by ourselves but again it's really up to you as you can see here if we check agents it's been created for us as well with all these agents being created for us all the different packages have been done and user packages as well so all this is done for us automatically so all we can do now is just basically use it and tweak it and use it to advantage basically you know so what's the next step now very simple let's go back to our checklist as you can see we cannot take this one off essential real estate taken care of so now let's look at our homepage let's go and tweak our home page and make it our own so we can close this one now so back to our home page so all we do is click on home so as you can see our home page here this is not our message this is not our form this is not our contact number so we'll have to change all this so let's take care of this now so how do we do this so we go back to our wordpress dashboard and now we click on all pages and as you can see these are all our pages so we have about us agents contact faq home and properties exactly like we have here on our menu on our actual page so these are the pages that make our our website so if we want to edit any of those page all we have to do is just hover on top of them as you can see we are we have edit quick edit trash view and edit with elementor so we're going to use elementor here which is our page builder basically drag and drop page builder again no coding involved and very easy to tweak around so what we're going to do here is just open that in a new tab so we right click on it open in a new tab so this way we can easily go from one window to the other without getting mixed up obviously so as you can see this is our elementor page so how does it work elementor very simple on your left hand side you have all the different elements hence the name elementor and that can make out a page so as you scroll down you can see of all these different elements that you can use on your page and on the right hand side all this is the preview of our work and then this is basically oh how our page will look like once it's finished and if you scroll down as you can see these are all our different elements so how does it work basically so we have different sections so as you can see we're plus and x and those six dots if you click on this you can see edit section so this is a section every time you see these uh plus an x on top of a section so this is basically the section itself if you scroll down again as you can see if i hover here we have another section and then i scroll down to the next one as you can see we have those plus and x this is another section again so how is this made out now a section is made out of different columns as well so as you can see if i hover with one column here edit column and i click on this one this is a second column so i have two columns and each column is made out of different elements so if i click on this one here you can see this is an icon list if i click on this one here this is a heading and if i click on this one here this is a button so you can have different elements within your your column so this is basically how the page is made and built using sections columns and elements within those different columns so let me show you very quickly here as well so you can see here we have a plus sign which means this is a section that we can fill with something so if we wanted to add let's say a heading all we do is click on this hold and then drop it here and as you can see it's highlighted in blue and if i drop this there we now have add your heading title here so we're not going to do this now but that's basically how you do it and you can delete it by just right clicking on it so basically drag and drop very simple isn't it okay so first thing first how do we change our uh content here so as you can see we have a phone number here so that's clearly not your phone number you want to change it to your own so basically click on the small pencil here and what we're going to do is click on this open it and then we can change the text here the content so let's put our phone number zero one two three four five six seven eight that's what we said and that and as you can see it's reflecting back here you can see it immediately on our preview this is our number and if you're happy enough with every changes you do along the way you can click update just like this and then if you wanted to change the heading here so make it your own again so instead of finding your dream home today maybe you want to say find your ideal home home today so basically you can type your own contact content and text right here so just type whatever it is that you feel that's important and to your customer base and the message you want to convey obviously that's going to make you stand out compared to all the real estate in the area and then again when you're happy just click save and as you can see underneath we have a small piece of text here a bit of text that we can uh change as well so it says here click the button to change this text which we did so you can add anything you want so maybe uh over 2500 properties to choose from in the atlanta area for instance there you go and now you might think oh this is not readable that's not big enough maybe could we make it a bit bigger of course no problem at all you can tweak everything every uh element can be tweaked uh to make it your own again so if you go into style now as you can see we have the text editor if you go into typography so this is related to our font you can increase the font here so this is the size as you can see and you can increase it by just using this drag and drop feature so if we increase it or you can use the up and down arrow here so this is incremental then you know so let's say you wanted it to be about this size which would be perfect so we leave it as this so you can change the color as well let's say you wanted it to be yellow you can change it to yellow or green or whichever color you want so we're going to keep it white for now so i'm just going to revert back to the color it was so just select white there you go white is fine you know so this is basically it so this is how you can change the text and the content so let's just click update and now you can see we have a button here that says contact us so you want might want to change this to something else maybe request a quote uh inquire now or something more personal uh but you have to link it to something obviously you know so at the moment we have a contact page so how do you link a page to actual to another page very simply i'm going to show you now so we have a contact page here so this is the actual page where it is linked to so if we select the url control c and we go back to elementor and you see it says link here we have a hashtag at the moment and you replace this with the actual url you want to link it to update and now if we go back to our home page if we click on contact us now it'll bring us to the contact page so this is basically how you can link a page uh within the same website so as we scroll down you know yeah one more thing sorry how can you change the background image so at the moment we have this picture here with the purple uh overlay maybe you want to change this you maybe you want it to be different so how do we do this as you see you can click on those six dots to edit the section itself and then we're going to style so this is our actual picture as you can see it's not the same as what we can see here is because there's a purple overlay basically on top of it so this is our background overlay here if we click on it now let me show you if i drag this down and drag it up so this is fully opaque so you can't see the picture behind so this is 50 shade and this is uh nothing at all so just that's just the picture uh in itself so it's up to you really you can change this or you can change the background picture the reason why it added a background overlay is because it makes it uh easier to read the heading obviously if there's more contrast between the text and the background it makes it easier to read as you can see it's not easy to read at the moment because there's no contrast the colors of the background and the font in white it's almost the same so this is why we usually add a background overlay so let's increase this slightly maybe you don't want it to be as dark maybe you'd be happy enough with this the way it is like this so you can leave it uh just like that as well and you can change the color as well of course so let's say you want it to be more like blue there you go now we have a blue now maybe your company colors your business colors are more red you might want a red color then then you go for red indeed so let's go back to our initial color let's go maybe a purplish like this a dark purple maybe just like that okay so this is how you do it basically now let's say you wanted to change the background picture here to something else so what we do is just go back to background and as you can see this is our actual picture so we're going to click on this and we're going to upload a new one so select file and this is our picture here we're going to select and upload so make sure the picture is high resolution obviously so at least 1920 by 1080p so uh hd resolution basically as you can see this one is bigger than that so this is fine a larger file you know so in sock media and as you can see we now have a brand new picture in the background which is very nice because it makes it look cozy and comfortable especially for real estate purposes so this is very nice and once we're happy click on update so we have our contact form here as you can see need help message us and then three fields and then send the message so how can we change this uh form so simply click on it so this is a contact form here this is the one and as you can see it's using a short chord so what's a short chord a shortcut basically it's when it's linking different plugins from within wordpress into the one page so it's bringing different sets of information into the one page so in this instance it's using wp forms uh plugin for this purpose here so let's go back to our wordpress dashboard for a few seconds and as you can see we have a tab here called wp forms so if we click on this now you can see we're contact form and the shortcode the id here is id 19. so let's go back to our page and as you can see it's the exact same so id 19 so this form is this form here so what we need to do now is to edit this form and make sure that the email will be sent to your email address so how can we make sure of this so this is the editor work with the form editor as you can see we have a different field here so with your name your email message now you can add an additional field if you wanted to you could have phone number for instance so how can you do this so as you can see a single line of text and we're going to drag this in between maybe those two and if you click on it you can change the content so we're going to put this we're going to say this is our phone number for instance so in the placeholder text here you put phone number there you go and if you wanted to make it required mandatory you tick this box here okay just make sure we saved it okay and then if you go back to our home page now as you can see you have an additional field that says phone number very nice indeed isn't it so now let's go back to this and make sure that this form once it's uh filled in when people are going to click submit it will reach your email address so we're going to settings now and we're going to notifications and as you can see here we have a field that says admin email so you want to change this and put your email address here so hello at mr webreviews.com [Music] and we're going to save this now there you go so now if we go on to our home page we can put a name here so john doe his phone number email address and then a message so then we can click send and there you go as you can see we got a confirmation here that says thanks for contacting us we will in touch with you shortly so this message here you can tweak it as well if you're go into confirmation here in your form builder you can see this is where the message is so if you wanted to tweak this around as well and make it your own absolutely fine you can change it and don't forget to save so this is basically how you can create the form and now let's have a look at the email i received on the other hand so this is the email i received as you can see it's been sent by john doe we have his phone number his email address john.gmail.com and the message that was sent through the form so everything has been sent and received immediately so very efficient indeed so now back to our home page now as you can see we have now the listing of our pages so this is basically just a visual help here basically these are just pictures they're not linked to anything this is just part of our template so they just had to put something there to make it look like it's a real estate website obviously so what we're going to do we're going to actually import real properties from our listing now that we have some imported on our website so how do we do this very simply i'm going to show you now thankfully the developers at essential real estate have provided us with a short code that we can use on our page unfortunately it only works with visual composer and we are using uh elementor here but thankfully i found a workaround solution so we're going to implement this now and i'm going to show you how you can actually put the real uh your real properties actually your real listing on your home page and not just a fake pictures like we have at the moment so let's go ahead and do this okay for this we go back to our wordpress dashboard and we're going to install one piece of software a plugin again so we're going to plugins add new and we're going to look for something called disable gutenberg so just like this disable gutenberg so gutenberg is the page builder that's built in into wordpress so we want to disable that to have access to an additional feature from uh this plugin so we can install now there you go and just click activate so that's it our gutenberg is disabled now so what we need to do nice to create a test page just to create the short code that we're going to insert into our elementor page so don't worry it will make all sense in just a few seconds so click on pages add new type in test and as you can see here we have add ere real estate shortcode so essential real estate short calls and this is why we had to disable gutenberg because if gutenberg was enabled we wouldn't be able to see this and this is what we need so how do we do that very simple all we have to do is click on this now and as you can see you can select among all these different options with property property carousel slider gallery featured property type etc etc so now we can use this to create a shortcode that we can copy and paste into our elementor page on any other page so as you can see we have properties property carousel and slider let's go with carousel maybe and how many amounts how many items you want to display maybe let's say six uh the color scheme let's go with light because our background is white and you can narrow down your searches as well so if you only want it let's say for rent or for sale you could narrow it down all you have to do is just click on it as you can see and if you wanted to remove it just click the x to remove it from the sex this field so we can narrow it down to any city as well so we have atlanta we have austin let's say los angeles so you can just keep uh narrow it down basically to different areas as well so we're just going to leave it uh broadly open now we're going to display all of them and just click insert code shortcode and as you can see now we have this piece of shortcode here so what you do is select this and we're going to copy this and we're going to paste it on our website page so as you can see you can look here for short code this is the one so this is the element you want to drag and drop on our page now so i'm going to bring this here underneath our title so as you can see it's highlighted now and this is where we're going to drop it right there and in the shortcut section we're going to paste the code so this is the same call basically that we copied from here we're going to paste it in this section here and now we click update and this is done so we can now we can remove all of this we won't need it so just click on x there you go so update again and if we go back to our page now home page and refresh yes we want to refresh and you scroll down as you can see we actually have our properties now here right there being listed straight up on our homepage so these are our real properties that we uploaded on our listing so very nice indeed isn't it so there are different options as well you can have a carousel you can have a slider so let's insert a slider now just uh to see so if you go ctrl a you can delete this now and we're going to create a new shortcode so let's go with slider so uh what type of slider do you want so okay navigation middle let's say this is fine we're just going to insert shortcode ctrl c and then let's add another one so we're going to click on shortcode and we're going to bring this just underneath this one so this is our control cord you just below this just like that and we're going to paste our shortcode in here like we did before we can click update and we're going to refresh our home page here again there you go and just underneath it as you can see it's a full picture and you have a slider so that looks very nice as well you know you can use all these different sections it's really up to you now you can leave it it's fine or you can remove it and just keep your property so let's just remove this for now just leave the carousel so just delete and that's it and again as always once you're happy you click update and then you can go and refresh your page and if you click refresh reload this page as you can see we now have our listing our different properties right here so it's very nice now if someone was to click on this it's actually dynamically linked as well if anyone wants to click on this it will bring them immediately to the page description as you can see with all the pictures even the map and everything and the contact page from the agent that they'll have to contact in order to get in touch and inquire about this property so very nice indeed and as you can see you can slide immediately from one picture to the other absolutely beautiful and very efficient so let's go back to our home page now again and let's take care of our next section so this is the about a section in here you'd want to absolutely put something that's related to yourself so put something that's compelling enough obviously that's going to make you stand out uh something that you think is important obviously to share with your your visitors so what is important for them to know is probably where you're located this is a quick glance on the home page so you don't want to give them the whole background story at this stage you just want to give them uh the most important bits obviously you know where you locate it which area you cover and what your specialties are basically you know and that's basically it and then you can change the picture here as well so you see this is a picture again so we have our two columns different elements so let's say you wanted to insert your own picture here of your own offices so you can click on this icon here to edit the the column and then go into style as you can see we have a picture here and again like preview like before we can just click on it and we're going to upload a new file so select file and then you select the picture of your actual place your real estate office so i've downloaded one online here so let's open this one as you can see insert media and now we have our own picture then if you click on update there you go now if we go back to our home page as you can see we're going to refresh nice it's starting to shape up very well as you can see about us your own picture and all that so it looks it looks very very professional indeed so now let's insert more listing here from our actual database so how do we do this again back to our short code so we go back to this place here again you remember and we're going to add an era real estate shortcode but this time we're going to select property so we click on property immediately here or you can have your featured properties all your featured properties it's up to you really but let's go with property for now just click on this so how do you want to display them do you want to display them as a grid as a list or zigzag or carousel so these are different options you can choose from so let's go with maybe let's grid let's select a grid now and you want to display maybe six of them so we have three columns from three across and two rows then okay so we go with this let's give this a go so let's try this now okay ctrl c and as we scroll down now as you can see this was our listing from before so what we're gonna do we're gonna delete all these sections we don't need them anymore so click on this the x click on the other x this one again now don't worry if you mistakenly deleted something you shouldn't have deleted you can always go back so let me show you you can see you have the this rounded arrow that's back in time if you click on this you can always go back to a previous point in time so this is our listing here so again we're going to select an and we're going to add a short chord again so click on this and drag and drop and put it just here at the bottom and just drop it and we're going to fill this with our the content of our shortcode we paste it and as you can see we now have all our properties being listed here so if we update this go back to our page so this is what it used to look like so this was fake content before and now if we refresh we have our actual listing as you can see it looks beautiful doesn't it nicely done and all that very professional looking so as you can see there's a difference between the actual page and the preview so the preview doesn't look very neat it's because there's no css call so css is what's shaping the website and making it look nice within elementor obviously but once you refresh and you go on your actual page as you can see it looks absolutely stunning and beautiful so this is uh this is done for our listing now and again if anyone was to click on any of those properties as you will see it will bring them directly to the property page with all the details being listed there for them so let's go back to our home page and then next all we have to do basically is all these two different sections here at the bottom so again we can tweak this around so let's do this together so scroll down and then we have our section here so what are you looking for again as you can see maybe we can finish this up later because we'll have to link them to something you know so you have apartments houses offices and as you can see we do have properties here being listed that we can link to that so if you had properties you wanted to link again all you have to do is click on this and then change the link here instead instead of hashtag you put the actual url within the website so you can see with apartments houses offices maybe you want to increase that and double that up and have more properties for for display so you can dub uh duplicate that if you wanted to so if you right click on this duplicate and as you can see we now have an extra row added at the bottom and you could change this maybe and put bungalows lands and maybe garages if you wanted to but i would keep it simple to be honest the simpler the better maybe you should highlight three areas like they have at the moment and this will be fine and then again here you can have all uh the trust building factors here so maybe companies you've worked with uh maybe uh famous names if you've provided services to famous companies it will add to the credibility and the trust factor obviously and then here we have our details again so it's important to have your actual phone number as we said so all you do basically is click on the small pencil click on that highlight this delete and then type in your number so we said it was all one two three four five six seven eight there you go and then you can change this and that and that as well so contact again we're gonna change the link to the contact page so we go back to our home page and we're gonna click on this contact page here so and we're going to select this link ctrl c and make sure you paste it here properly so that if anyone clicks on that they'll be redirected straight to your contact page and obviously feel free to change this around you know you can change this for something else request a call back there you go and here you can put simply fill out our contact form on our contact page by clicking the link below for instance it doesn't have to be that obviously you know you can make it your own so something similar to this to that extent you know so if we refresh now go back to the home page and if we scroll down as you can see we've taken care of everything our homepage is almost complete now we've changed the home the background picture our heading contact us we have a contact form that's linked we have our properties we have our own picture with the about the section our listing the different type of properties and then finally our contact details here at the bottom so absolutely fantastic so this is one thing done so we can go and take this one off home page sorted next about this page okay so our next step is the about us page already so we're making great progress don't we so back to our website here as you can see this is our actual about us page as we have it at the moment so you can see here there's a background picture with the kitchen and all that which is okay i mean for real estate be probably better if you had your actual own picture about yourself because this page is about you so if you could have actually an actual picture of your premises i think it'll be more impactful indeed and then we can change a bit of the text here this picture here i don't know what it says is maybe too much i don't know we'll see how it goes so let's go and have a quick look at how we can change it change this sorry so we go back to our wordpress dashboard as always we click on all pages and as you can see this page about us again we hover on top and we're going to select edit with elementor so i'm just going to right click on it again and open it in a new tab it's just for it's just easier to go from one to the other basically you know so again back to this here as you can see we have that big picture here in the middle uh with this people staring at you i don't think this is nice at all i don't know what you think but you can leave it if you want i probably don't think it's nice but anyways and then we have numbers here at the bottom as well so uh okay let's go and change this so back here so the first thing we're going to do as we said is to change the background picture here so how can we do that or simply again we click on those dots here from this section and we're going to style and as you can see this is our picture and as mentioned before i mean this is a kitchen you know i don't think this is uh appropriate so we're going to change this so click on it and then we're going to upload a file so you're going to try to have a nice picture of the front of your premises maybe on the inside of your building maybe your office with staffs working or something like this something that's nice and compelling and very professional so i went online and i found a picture here just to give you an idea so i found this here an open space office which might be suitable for this type of environment so let's just upload this and as you can see the size is 2000 by 850 pixels so try to find a picture that's large enough it will be resized anyways uh to the the width of the of the website but depending on which uh devices your visitors are using it'd be better the bigger the picture the better basically you know so insert media okay okay so it's taking a bit of time my internet has gone slow here i don't know why so as you can see now we have a nice picture we can see people working on computers and all that we have a cityscape here in the background so this is related to uh real estate obviously looks very professional doesn't it now if you wanted to remove that uh overlay maybe it's up to you so let's go and have a look so we have this color here i'm just going to copy this just in case so we can reduce this we're at 0.65 and as you can see this is the actual picture as it is but now we can't read what it says here bothers this is uh actually there's no there's no contrast uh anymore he's there so what we're gonna do is just add a little bit maybe maybe this maybe point 47 will be sufficient this is enough because you want your visitors basically to see your office because this is going to build trust and credibility and uh this is obviously for he's going to build the trust factor you know so once you're happy enough with this we can scroll down and in here you're going to put the details about your company so who we are our company etc so a bit of background story maybe when you started the business when was it established which area which regions do you cover and maybe as you can see here where it says responsibility you could have your mission statement or something similar and you may want to sign it maybe you can add a picture as well if you wanted to you know a picture of yourself this would be nice so let's say if you were to remove these let me delete this now i'm just going to move this for now delete delete and delete this one as well and let's say if we wanted to add a picture of yourself like like you're you're the director of the company it's your business you would like your picture here and they are in the about section so we click on those nine dots and we're gonna select image and again it's a simple drag and drop so we're gonna drag it and drop it here okay and we're going to select an image so we already have a few pictures uploaded at the moment there you go and then we could say that this uh lady here she would be for instance the uh ceo general module company so we're going to insert this picture here there you go and now we have the a nice smiley face it's relatable people know exactly who it is who's running the show who's behind that people like this to see who's behind the the business you know there's a connection factor that's it's gonna increase trust as well and then maybe you could add a signature here just to emphasize who this is you know so let's say we want to add a little something we can add maybe a text section so we're gonna select the text editor here and drop it here just underneath it and then we can add the name so let's say this woman would be uh sue smith and then in brackets you could put a director so they know who this is and they know the position as well so very nice so you could change the font as well you could make it different i'm going to show you how to do this so if you're going to style and select typography and select the family and you could have it like a handwritten maybe you know as if it was signed by hand so if you scroll down you have a preview of each font here you can see this one looks like it's handwritten all you have to do basically is scroll down one by one so i'm just gonna go with this one here for instance you know and you can see now it's a bit faded a bit too small so we can increase the font again drag and drop this and as you can see now we have sue smith and it looks like an actually handwritten signature which brings a personal touch as well so you can click update there you go that's very nice like this isn't it that's more personal more relatable basically now again this picture as i said uh at the outset i'm not very comfortable with people staring at you like this so for me i would just get rid of it you can replace it with another picture it's up to you so let's see if we have other pictures available maybe let's see what we have um we don't have much here do we okay well let's say if you if you found a nice picture you can put it there i'm just gonna delete this section for now okay just like this and as you can see we have two columns here so you could put your vision your mission statement again just right here it'll be fine as well and again don't forget to save click update each and every time when you're happy with the with your work and your results so as you can see here at the bottom let me show you from the front end if we scroll down we have all these numbers so this is good as well to let people know uh how many apartments you've sold how many satisfied customers obviously you don't want to make uh make up these numbers you want this to be real numbers you know so whatever you have numbers you'd like to express you can put them here so how do you change these figures very simple because as you can see if we refresh again let me show you quickly if we refresh you can see it's like a counter basically you know there's a starting point and a finishing point and they will go up this way so basically if you click on any of them just click like this and you can see the starting number it starts from zero and then the ends at 1550. so now if we have the the apartment source so maybe let's say you had only 741 which looks very realistic you know 700 in a party apartment sold but now you don't want to say apartments or maybe just properties generally speaking some properties maybe it's not just apartments maybe you sell houses you sell garages you sell land you sell buildings and all that sort of things you know so all you do is just change it this way and then click update and that's who sorted and then let's have a look at how it looks like on the front page on the about us page on actual page if you refresh there you go so as you scroll down you can see very nice picture nice background and all of that very relatable indeed who we are with the pictures mighty picture which is sue smith the director and then with us mission statement our vision and then a few numbers here as you can see going up and counting up so very nice indeed so we can take this one off i think we don't know with our about us page so this is about us sorted next page property listing page so our property listing page let's go back to our website so let's click on properties there you go as you can see all our properties are displaying but we don't see a menu here on top here and it's taking all it's taking the full width and then if we scroll down as you can see we have additional information here that's not required so it's a bit messy to be honest so let's reorganize this and make it look nice so for this let me close this page first so we go back to our page here some properties and for this we cannot edit this page with elementor because that's the page that was built using the essential real estate plugin and then we can't use it you can't use elementor to edit that page unfortunately but if we click on properties now click on this we can still assign what side of layout is attached to it so at least we can change this so as you can see at the moment it says full width stretched and we're going to change this to boxed so basically all the margins will be reduced and it'll be increased and and sent towards the middle basically squeezed up a little bit so we can click on update and if you're gonna refresh our page now it's already better as you can see it's much much better indeed much neater now as you can see we have a logo here by the side and uh the reason is because there's no margin on top of the page so basically all that section here properties and all the properties should be pushed on the page so the menu would be visible basically and we barely see it here as you can see all the menu tiles are right here but it's white on a faded gray background so we can't read anything so let's take care of this so let's push down the content and also we're going to remove this section here which is uh unnecessary to be honest now i know i said at the beginning that there'll be no coding involved that there's just two small lines of code we're going to add just two small lines of code and i'm going to leave them in the description below so all you can do is just copy and paste them where i'm going to show you now so please bear with me it's not complicated don't worry don't freak out it's very easy you're going to see that so we go back here now and we're going to appearance sorry appearance and customize and you see where it says additional css we're going to add two lines of css code and this will change the are the layout of our page as you will see so i'm just going to drag and drop this here there you go i'm going to copy and paste it so basically this one here the first line div secondary display none is to get rid of this section here at the bottom so this will be hidden now it won't be displayed and then this one here uh the margin top 120 pixels as i said is to push down the content towards the bottom of the page a bit lower down so to add a margin basically on top between the menu and this section so if we save this now publish and again don't worry i'll have those two lines of code in the description below so you just have to copy and paste them that's all and now if we refresh as you can see now our menu is on its own the properties are pushed on a little bit and if we scroll down the rest is gone as well so it's very nice now as you can see you can scroll from one page to the other we can click on our properties so all is fine so this page is done so next contact us page and contact form okay so back to our dashboard here and then all pages again and then we set contact page so again now you're used to it all you do is hover on top and then as you can see edit with elementor right click open a new tab and we're going to open this with elementor so let me show you what it looks like at the moment some contact page and as you can see again we have a picture here there's the uh inside of an apartment i'm guessing you know so maybe you should put your picture again just in case you know just to bring that trust factor so we can reuse the same picture that we used before and then as you can see we have a contact form so this is taken care of i showed you uh already so we have that taken care of the message will be sent to you so i'm just going to show you how to edit these sections here so again we're going to click on the small dots here we're going to style click on the picture and then we're going to select the office picture that we had from before insert media and as you can see very nice indeed so we're gonna reduce the overlay so we had it at point 47 i believe so i'm going to increase there you go 0.47 so that's the exact same shade of overlay we're going to add on top so this is very nice already so get in touch send us a message so everything there is fine you can just leave it as is our contact form is already linked to your email address so we've done that already so all we have to do basically is just change the phone number so click on this click on this item here and again we're going to type the same number one two three four five six seven eight and then change the address and again it's just a matter of clicking on it and changing the content here you see and then i'm just going to change the email address hello at mr web reviews.com and then we have a social media icon so i'm just gonna save again don't forget to update every now and then just to make sure and if you click on those social media icons as you can see we have facebook twitter google plus and pinterest so google plus has fallen off the surface of the earth so we can get rid of this pinterest twitter and facebook so let's say you don't have a pinterest account either maybe you have twitter and facebook but you also have a linkedin account let's say or a youtube account then you can add new so all you can do basically you can either duplicate it just like that which is probably the easiest or you can add a new item it's up to you it's both the same so let's duplicate for now click on this and we're just going to change the icon basically so let's look for twitter linkedin sorry so linkedin there you go so if you type in linkedin the icon will show up click on it insert and now you have your linkedin account here and let's say you also have a youtube channel so click on this and start typing youtube and there you go and all we do is just insert so how do you link these icons to your actual social media accounts let me show you if you click on facebook this is the address here right here this is your address so you're going to type in the address copy and paste the address to your facebook page i'm just going to type in here mrwebreviews.com so this is a link to my website just for the sake of a tutorial here and one thing you want to make sure to do is to click on that small gear here and just make sure that the the option here open in a new window is ticked and why is that because when you have someone on your website you want them to visit your social media that's fair enough but you don't want them to leave your website all together so by clicking on this link and opening in a new window it will just open a new window next to your existing website and your website will still stay there so you don't want everyone to leave your website once they are on it obviously you know so this is the whole point of this so if we save this and we go to our page 95 refresh let me show you what i mean so basically this is this is our header our contacts and all that if i click on facebook here soon that's linked to my website mr web reviews as you can see it's opening a new window now all together is bringing us to another page and this way we're not leaving the website they can easily come back to your website and browse through the different pages so this is basically it and then we have our map here so how do we change this let me show you very simple again click on this on the map itself right here so you click on the small pencil here this is going to edit the page so we said it would be main street carrick on shannon county litrim okay there you go and then you can zoom in or zoom out so this is a bit too uh far i'd say so zoom in is a small a smaller number so the other way around a bigger number sorry the bigger the number the closer you are that's what it is yeah sorry that's the other way around so basically you could have it this way this is nice enough so click update and as you can see this uh indicates where we are basically you know so this would be our address and if we go and refresh now we now have the address to our office based on main street carrick and shannon and it's gonna bring us there so there you go guys this is all done now for the contact page as well our so we can tick this one off so i'm going to show you how to add more pages now as well so how do you create additional pages back to our dashboard here and in our pages section all pages you're going to click add new so click on this and we're going to call this test page now at this stage you'll have to click on edit with elementor as well so you have to type the title first so first type in the title make sure the permalink is correct so as you can see mr web reviews tutorials.com forward slash and then the name of your page so this again will help with seo and getting found online so you click on edit with elementor and this this is going to bring us a blank page all together so as you can see there's nothing on its own now it's a blank canvas you can start whatever you want you can do whatever you want feel free be creative so let's say you want to have maybe two columns maybe you'd like to have a video on one side and a bit of text on the other so how do we do this as you can see we we have our blank canvas here so click on plus and the first we're going to save our structure so what is it full width two columns three columns four columns uh sidebar left side by right etc etc so let's click maybe on this one here so we said we're gonna have two columns and now we're gonna back go back to our uh nine dots here and we're gonna select video so i'm gonna drag and drop our video here so this is our video and now we're gonna add some text on this side so we're gonna start with the heading title underneath the title we're gonna put some text some text editor just like that and maybe we can conclude with the button maybe a call to action maybe this is what you want them to do so we have button call to action just underneath so just like that now in relation to your video if you click on this now you can see you can uh upload a video a link from a youtube video or vimeo or dailymotion or self-hosted so if it's self-hosted basically you're gonna upload the video onto the server and you're not gonna use any of those uh media like youtube and vimeo so click on this so we already have a video here so we just keep that link but you just copy and paste the link in here and you have more options as well you can have auto play you can have mute you can loop you know it's going to play over and over uh you can display the controls modes branding and privacy etc etc so they're very nice indeed isn't it now our heading here again all you have to do is just click on that and so on and so on and you can always add more sections so when you finish with this section if you wanted to add more things underneath just create a new one click on this add more structure or you can immediately drag and drop from here so if you want to insert a section drag and drop and drop it here and as you can can see we have two columns now if you wanted to add a column right click duplicate and we now have three columns so it's very flexible very easy to do it's just a matter of getting used to it you know but play around with it and you'll get used to it and you'll see you'll be doing great so that's it guys this is how we create an additional page so we can tick this one up there you go and then our next step is to change our menu section the logo and create a fav icon so as you can see from our about a section the menu is easy to read because we have a dark background as you can see you know but if you go to our properties now there you can see nothing because it's too bright and there's no contrast between uh the the tabs and the content of our menu and the background which is bro uh bright gray so what we're gonna do basically is to add a background color to our menu throughout the whole website so it'll be easy to read and it would be uh there'll be a contrast basically you know so how do we do this so back to our wordpress dashboard we're going to appearance customize and we're going to go on to header builder and we're going to click on properties here as well just to have a preview of our page there you go now we're going to click on this item here so i can hide this there's no need for that so i'm going to click on transparent header because at the moment our header is transparent and this is why there's no contrast so click on this and we're going to design and we're going to change the background color we're going to add a background color actually you know so as you can see here we have background or background overlay sorry this is the one we need and we're going to put a color here so try to select something wrong in the in the same color as our menu so maybe in the darker purple like this this would be fine and then once we finish click publish and if we go back to our property page you will see this is much easier to read this makes sense now doesn't it and it's absolutely fine with the rest of the website it looks great doesn't it and now if we go to our home page there's no uh clash there's no disturbance it's fine because this is the same color same layout as everything else so it looks absolutely fine now if you wanted to add a bit of transparency to it maybe so it will fade away with the the background we can do that as well so how can we do this you click on this again and you can see here you can drag and drop drag and drop this a bit to the left so if you bring this to the left as you can see we can still read it on our page there's enough contrast so let's publish we can see on a property page we can read fine but if we refresh here on the home page it will reveal some of the background as you can see it's much much better like this so we can leave it as this as it is now it is absolutely fine now let's go and change our logo let's make it our own so about the logo we go back here now go back to this and from here all we have to do is to hover on top of the logo and you click on the small pencil and it will reveal the logo as you can see here so as you can see we can have different logo for retina devices so what's a retina device it's like the ipad tablets for instance with the high resolution screen one could be on imac as well on all these laptops with a high resolution screen so for instance myself i'm using a 4k uh display here for my recordings so this means that if i was to click this it would display this icon rather than another one now if you're using a 1080p screen it will use this logo instead so depending on the type of device that your visitors are going to use you'll have a higher resolution file that's being used to display your logo so let's go and change our logo here upload file select file and you go and fetch your logo so i went ahead and found one online so i'll just go and open it so this is a logo i found online harvest young so i don't know what it is but anyways i think it's related to um real estate anyway so skip cropping and now we have to click on this one as well and do the same and change it so select the same choose image and as you can see now it's displaying absolutely fine now clearly this logo is too big now it's taking too much space so how can we reduce this basically you have this drag and drop feature here and you have the logo with and you're gonna make it as big as you can but not too big you don't want to be you know you're you don't want your logo to be too prominent too in your face basically it has to be there but in a subtle way and don't worry i've noticed a lot of people think that the logo is too small but it's not too small it's it's nice actually a logo that's too big it's too short you know so uh this is this would be the the right size and then click publish and let's refresh there you go and just like that you have your own logo on your website so now it's shaping actually really well already and one more step is to include your five icon so we're gonna do this now so what's a five icon so let me show you very quickly here quickly here sorry if you're going on my website here mr web reviews you see in that corner who have the mr which cine5 mr basically it's red white writing on a red background so that if you scroll in between tabs you know how where to go back to mr web reviews website this basically helps to identify your website uh just on the the tabs from google chrome or any other browser obviously you know so all we can do basically is go back here and you can see here where our logo is on the same section if you scroll down straight to the bottom it says select site icon so basically a site icon and a five icon is the same thing so let's click on this and as you can see the size should be 512 by 512 so it's square size so make sure that you fit that into a square and make it nice so let's go and do this so let's upload so i went online i found a random one so i'm just going to use this now let's use this one here as you can see aedp and again this is 512 by 512 so make sure it is square and 512 by 512 so select and now we can publish and as you can see now if we refresh our page very quickly we have now our five icon here our site icon displayed next to the name of our website and this will help our visitors to identify where our website is which tab to click on so that's it so we can take that off now menu logo and file icon sorted we are nearly there guys nearly there so next step is the footer so as you can see on our website there's not much of a footer to be honest it's just a few details here so we're just going to change those details and put our own name so as you can see i've put mr web reviews here but it could be obviously the name of your company so where is this information taken from and powered by mr web reviews and how can you change your your photo if you wanted to add links maybe and short links and uh things like this maybe your social media how can we do this so let me show you now if you go into footer builder as you can see all we have at the moment is copyright html that's all and these are the two elements here so this is a copyright this is a html and they looked exactly like this so copyright html now if you wanted to add something because you can see with one two three sections here maybe you want to add a link to your apartments maybe you want to add a link to your buildings and offices maybe lands and so on and people can uh click directly on them and go straight to those pages so how can you do this but again all we have to do it's a drag and drop so click on the plus sign here plus and what do you want to add so we can add a footer menu we can add a menu we can add widgets and we can head html code and even social media so how do you create a menu how do you add pages i'm going to show you now so add footer menu let's save this for now let's refresh our page you can see now we have our menu that's normally on top it's also in the footer so it's home about us properties agents faq and contact because very often if someone was to open this on their mobile phone they will scroll scroll straight down to the bottom and you read information that's in the footer it's also very important so this way now you can have people redirected straight to your different pages so if i was to click on the properties page now i'm in the properties and if i scroll down as you can see i can directly go from here to another page without having to scroll back up again which is very convenient indeed so this is one thing you can do and what else can we add as you can see we have social media so if we click on social media publish and we can refresh so let's go straight to the bottom and as you can see we have our same social media that we configured earlier on we have facebook twitter pinterest but you can change this around again you know so all you have to do is click on this social media and these are our three icons so what we do is the same as as i said like we did before if you don't have any uh let's say you wanted to add another one so let's say maybe linkedin add social media and maybe youtube as well we have youtube as social media and if you click on it just put the url the link to your social media account publish and if we refresh we now have our menu and also our social media very simple isn't it now if this is only one is those two widgets here you know you can just uh change the location as well and put them on those two columns here one there and one there and then if you publish and you save just let me remove myself otherwise you won't see nothing and if we refresh let me refresh there you go now you can see the evenly spread out and centered in the middle so it's really up to you you know all the same or you can put them back the way they were just like this one here one there publish refresh and there you go okay so the one last thing we have to take care of is only the colors as you can see this plugin here is using orange color and black and orange which clashes completely with our theme background which is purplish and cream so let's go and change those colors now and make it more in tune with the rest of the website right so let's do this now so let's take this box here the footer is done and we're going to take care of our final tweaks okay so we can exalt of this and from here we're going to go into plugins and we're going to add a new plugin an additional plugin and in the search box here you're going to type in ere colors or essential real estate colors as you can see this is the one we installed this is our plugin and we're going to install this one here and as you can see this is one to change the colors basically we have three color speaker and all that we can customize them so install there you go and then activate and where is it now here that's the one here so as you can see it's installed and enabled already so let's go and change those colors and for this we're going to estate essential real estate options and scroll down straight on the page here and you have colors okay so let's go back to our front page so all the orange here which color do we want them maybe we're going to make them purple and then the black can remain black the black is not bad so we just need to click to change this one basically okay so let's use this here and make it a bit uh darker than this maybe around this okay save option and let's go and refresh yes that's not quite the same purple let's go and change this a little bit i think it's more on here possibly okay save and then refresh okay that's much better as you can see now it blends in now it fits our website theme and colors so let's go on a home page and make sure as you can see this is absolutely fine yes indeed now there's still a bit of orange left but that doesn't matter really it's fine you need a bit of contrast in your coloring anyways you know this makes it stand out but at least now we have a nice color that fits in and blends in with the rest of our website so this is very nice indeed so what else can we do just let me check now text color no this is fine i think this is absolutely fine so we'll leave it at this for now i think we're almost done so our last few tweaks again as we said what do we do we have light speed cache that's right light speed cache so we go back to our plugins and once you're happy with your website and you're almost ready to go live we'll have a few uh tweaks to change so this is one to do we need to activate light speed cache which is this one activate so this is one thing done and then we're going to remove the maintenance as you can see here maintenance so maintenance mode we're nearly there guys nearly there these are the last few steps and once you're happy when you're ready to go live and you've double checked everything on your website you make sure that all the pages are fine there's no typos and the prices of your properties are correct and everything is fine you've tested your contact form here make sure it's sending to the right place and you're receiving all these emails make sure your phone number and all your details are correct once you're happy with that you're ready to go live how you do this very simple click on off save and just like that anyone can see what's happening on your website so these are the final tweaks we click on this we just double checked everything we did we enabled the light speed cache we did we have a maintenance uh disabled we have now guys there's only one thing left to do is to take that box here have a drink and celebrate congratulations well done to you you've done really well i wish you all the best with your website thank you guys for watching and i'll see you in the next video

Channel: Mr Web Reviews

Views: 53,723

Keywords: Create a real estate website from scratch, How To Make A Real Estate Website With Wordpress, How To Make A Real Estate Website With Wordpress free, How to create a real estate website with wordpress, create a real estate website, create a real estate website with wordpress, how to create a real estate website for free, how to make a real estate website with wordpress, how to make a real estate website with wordpress free, make a real estate website for free, real estate website

Id: agtIkaxvMAU

Length: 152min 48sec (9168 seconds)

Published: Fri Mar 19 2021