How to Make a Real Estate Listing & Directory Website with WordPress - Resido Theme

hello friends amnesiac and in this video i'll teach you how to create a modern flexible and professional real estate website like magic bricks and housing.com using wordpress now this is not an ordinary website this is an amazing and professional real estate website with some really cool features first of all the design of this website is really great as you can see on your screen second of all it has this submit property feature which means anyone can come to your website and submit their property listings now you can enable them to submit the property listings for free or if you want you can even charge some money for that so basically you can create different pricing plans and you can charge money for that i'll show you how to do all these things obviously in this video now we also have the compare properties option wherein a person can compare several properties at the same time another great thing is that everything over here on this website happens on the front end like a person can simply come to our website and submit the property from the front end they don't need to go to the backend to do that and because of that your website is very secure because your users your customers don't have access to the backend only you the admin owner of the website have access to the backend now your customers including the real estate agents agencies buyers and sellers everyone when they create an account with your website they'll get a front-end dashboard from where they can manage the properties in this website agents and customers can also chat with each other because of the messaging system inbuilt on our website and there are obviously many more features included in this website like inbuilt search builder front-end dashboard customer insight and statistics etc there are many more features we'll see about all these things later on in this video now before you proceed further first of all let me show you a very quick demo of the website that you will be creating in this video so that you get a you know fair idea about the website that you want to create now first of all this is the website that we are creating as you can see this is at the very first you'll see this is your banner section your search section so you can have a search bar like this there are many different styles of search bar by the way this is just a regular one so if you want to search for some some property you can add a keyword you can add a minimum price you can also add a maximum price then you can select the property type so you're looking for maybe rental villas office space you can select that thing you want minimum how many bedrooms you can select that option as well you can also select the location where you where you're searching for this property and after that you can click on search result and you will be redirected to search page based on your query now as i said earlier there are many different types of forms for example this was one this is another style as you can see where you select whether you want to buy a property rent a property or sell a property and after that you can search for location then we have another style this is another style then this is also a very simple search bar then this is another search bar then this is another search but as you can see there are many different styles of search bar and after that this style at the bottom is also very different but first let me show you this home page now here at the top of your home page you have this logo at the left hand side so you can enter or you can showcase your own company logo you can create a menu like this and after that you have your front-end ad property option so if you click on this option add property you will be first of all redirected to this page now you have to select a pricing plan so you can create different pricing plan like here as you can see we have created three basic standard and platinum so whatever plan the person wants they can click on this choose plan and after that they will be redirected to the next step which is your ad property option so let's do that now as you can see they will be now redirected to this page add property page now your users can simply fill in this form from the front end and they can create their property so as you can see everything is happening on the front end we also have a front-end dashboard let me show you users will click on this option and they will get this menu now if they click on dashboard they will see their front-end dashboard they will see which package they have selected they will see how many listings they have created how many listings they they have they can create more total reviews that they have received on their listings all these options can be seen they can click on my profile they can see the profile page they can click on messages so if somebody has sent some messages if a customer or if a person looking for a property has sent me some message i can see that message over here you can also see you know you can create different agencies and you can also create different accounts for your agents so that is also available over here i'll obviously show you how that is done if you want to create a new listing again you can click on this option as well or if you come back you can click on my listing you can see all the listings that you have created if you want you can click on bookmark listing and you can see whatever listing you have bookmarked for your future so all these options are available again let me come back to the home page so i've shown you how this section works and there are different styles of section for this banner then when you scroll down we have our next section which is how it works section so we have created this section just to make it easy for our visitors they understand how this website works they can evaluate your property and after that they meet the agent and close the deal so very simple only three steps i'll show you how to create these sections and creating this website is by the way very very easy you don't need to know any programming or coding knowledge to create this website it is pretty simple it is all drag and drop so very easy to do that then when you scroll down you can showcase and you can feature different properties on your home page so you can charge some money for that for showcasing these properties on your home page or if you want you can just showcase the latest property or something like that so here as you can see this is how it will look like if person wants to go to all property page they can click on this button and they will be redirected to all properties page then people and visitors on your website can also you know see different properties based on location so for example if somebody wants to see properties in california they can click on this link and they will be redirected to a page wherein they will see all the properties listed in california okay so similarly you can also create this review section or testimonial section and after that you can also create these packages section okay and at the bottom we have a footer and this is a custom footer i'll show you in this video how you can create this custom footer then if you click on this car back to top button you will be redirected to this page now let me show you some more pages so let's see our listing page so your your listing archive page or that could be your search page as well so there again for this also there are different designs this is your listing archive page now here this is with the sidebar and we have this list style for this listing so as you can see this style at the right hand side and we have this sidebar at the left hand side you can change this thing you can have listing style but we don't have this sidebar in this case as you can see we have listing but no sidebar you can also change this thing to grid style so here as you can see we have grid style and we have a sidebar or if you want you can have a grid style without any sidebar so all these different options are available now let's open a single listing now for single listing also there are three different styles for example this is one style so in this style as you can see first you have all the images related to this property or listing at top in this gallery form and then when you scroll down you have details related to this listing or related to this property so this is first of all for sale so this is a sale property you know type of this property or title of this property address and okay this is sale but here it is written monthly so maybe it is a rental property okay they are asking this much money per month and you can see this is four bed two bath and 720 square foot area you can see more details like how many bathrooms garage elevator cooling option is available or not all these options can be seen from here whether swimming pool is available or not all these options can be seen from here then we have some description all the amenities available so maybe these options are available then if there is any video related to this property that can also be featured if there is any floor plan that can also be featured over here as you can see these floor plans can also be added then we have a location option so where this property is exactly located then we have this gallery option a person can open this thing they can see this gallery okay and if somebody wants they can also review this property so this is also available now at the right hand side if a person wants to share a property they can share it if they want to bookmark this property they can click on save if they want to add this property in the compare list they can click on add to compare and they can compare different properties so if i click on this option add to compare option i as you can see i'll be redirected to this page and i can compare different properties so i can add different properties in my compare list and i can compare them what is the area how many bathrooms and bedrooms you can select that option if you want to contact the person who has submitted this property listing you can simply fill in this form and that person will contact you similarly if you want to calculate your loan and everything you can fill in this form you can calculate it and after that we have also displayed few featured properties over here so as you can see this is how it works and this website will also see how to create different blogs so these blogs will help you to generate some extra traffic through organic google search results so i'll show you how you can create different type of blog post and how you can also create a blog page there are many more pages that we'll be creating for example we'll see how to create a contact page and you can see more things like that all right so this was a very short demo of the website that we'll be creating in this video i hope you guys like the demo website now if you like this demo website and if you want to create this website make sure to watch the complete tutorial and before you proceed further make sure you guys subscribe and click on the bell icon so that you don't miss any future notifications if you like this video give a thumbs up to this video share it with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any suggestions for me you can always leave them in the comments section below now let's start creating this website right so now to create any kind of website whether it's a real estate website an e-commerce website a simple blog or a business website any kind of website we need two basic things a domain name and a hosting account a domain name is simply the name or the url of your website for example youtube.com blogdood.com google.com.com all these things are different domain names so we also have to register a domain name on the internet so that whenever someone wants to visit your website they can simply type in this domain name in the browser url bar and they can land on your website now the second and the most important thing is your website's hosting now hosting is basically a computer a data center when your entire website is saved so if you see this website this entire website from top to bottom if you see all the different images all the different media files pages everything this entire website is saved in a computer and that computer is running 24 7. so that whenever someone wants to visit your website from any particular country at any given time they can always see your website live so your website is always up and running now hosting is the most important thing about your website because everything related to your website is directly or indirectly dependent on your hosting so for example your website speed your website's performance the user experience on your website and even your website security is totally dependent on your hosting and if you count further you will see that your website's ranking on google search results is also dependent on your hosting so if you have selected a good and reliable hosting your website speed and performance will be amazing you will get better ranking in google search results now there are literally thousands of different hosting providers available in the market but unfortunately only handful of them are really good enough to consider most of the hosting providers are not that great there are very few hosting providers that really provide good service good website speed and performance but you don't have to worry about that you can simply do one thing open a new tab type in block to dot com slash fc fc stands for fast comment and this link is also given in the video description below so you don't even have to type in this thing you can simply click on that link and you should be redirected to this page now here as you can see this is the hosting that we'll be using and there are three different plans now this is not the only one hosting that is good and rest all or bad it is not like that there are many more good hostings uh let me explain you about that so if you go to my website blogger.com you'll see right on top in the menu bar i have added this link best wordpress hosting so if you open this thing you will see there are many more hostings like siteground we have fast comment a2 hosting green gigs hostinger name hero there are many more hostings that are good enough now the reason i'm selecting this one is because this is one of the perfect combination so this is a very good hosting and the same time it is also very affordable so the price and everything is also pretty good so this is the reason i'm going with fast comet so this is the overall best hosting now here as you can see there are three different plans if you just scroll down and if you hover this option you can read about some important features like with this you will get cpanel and softaculous app install which will be useful for installing wordpress which is the cms that we'll be using to create this website then after that your website will automatically be backed up every single day so this is really good because if even if something happens to your website you have your daily backup you can use it to restore your website we also get free cloudflare cdn which will furthermore improve your website speed and also your website security we also get free let's encrypt ssl certificates so if you see my demo website you will see this lock pad over here when you click on that thing it says connection is secure so it means that your website has ssl installed on it this is very important because if you don't have ssl you will not be able to accept online payments on your website and also when someone visits your website if you don't have ssl you know google chrome will say to your website visitors that this website is not secure but you don't have to worry about that because here we are getting free let's encrypt ssl certificate then we also get bit ninja server security this will furthermore improve your website security now there are many more features available if you scroll down if you hover this you can read more about them now another very important feature is this multiple websites options so with these two plans fast cloud plus and fast cloud extra with these two plans you're getting multiple websites option which means that you can host multiple websites in one single plan so today you're creating this real estate website tomorrow if you want to create some other website maybe another real estate website or maybe an e-commerce website or maybe another blog or anything like that now for that website you know you don't have to purchase a new hosting you can host multiple websites in one single plan so this is also very important now the next two features are free website transfer and free domain transfer so basically if you if you already have a website you know created on some other hosting and if you're not you know very happy with the speed and performance of that website you can easily transfer your website to fast comment for free i'll show you in the next step how that is done you can also you know transfer your domain name for free we'll see how to do these things in the next step then after that if you see we are getting 25 gbs of ssd space now this is one of the most important features about this hosting is that they are using ssd server to host and to store your website now most of the hosting providers they use the hdd server to host your website but here these guys are using the ssd server now if you compare ssd and hdd ssd server is around 30 to 40 times faster than the regular hdd server so here your website if your website is hosted on fast comment your website will be 30 to 40 times faster as compared to other hostings now all the other hostings that you can see that i've added in this list siteground a2 hosting green geeks name hero all these hostings also use ssd that is the reason why i'm i have added these hostings in this list nice for this 25 gb space this is more than enough if you see this thing for example if you see this real estate website it has many different listings many different you know you can see there are many different images over here you know several pages created with this website so if you see this entire website the size of this entire website is hardly 100 to 200 mbs so you don't have to worry about this space 25 gb is you know a large amount of space you can host you can create tens of different websites with this amount of space then after that if you scroll down there are many more features that you can read about all these features over here as you can see you're getting 4 core cpu 3gb of ram all these features you can just scroll down and read about them now i don't want to waste a lot of time over here for most of you guys i recommend you to start with this plan fast cloud plus so select this plan and click on this get started button now in the next step you'll have to enter a new domain name so if you don't already have a domain name you can register a new domain name over here so whatever domain name you want to register you can simply type in that domain name for example if i want to register nashik.com i can type in a check and from the domain name extension list i can select dot com dot me dot in dot ca and there are some other domain name extensions as well as you can see dot cn.asia.t many different domain extensions are available so whatever or whichever you want you can select that option and after that click on use this domain now if you already have a domain name registered on some other website maybe on godaddy or namecheap on google domains anywhere else you can select this option i already have a website so you can use that domain name and you can connect this with fast comments so you simply have to type in your domain name over here okay and click on use this domain so this is also available i want to register new domain name so i'll select this option and click on use this domain now you will be redirected to your final step here you just have to enter your basic information so under account information just enter your basic information like your first name last name your email address and you have to set a master password so this password will be very useful so you just have to set some master password for yourself you have to enter your address phone number all these basic details now whatever email address and master password you set in over here this will become your login credentials so in future whenever you want to log into your website whenever you want to log into your fast comment account you'll have to enter this email address and master password so make sure whatever you enter this thing or whatever email and master password you enter over here make sure to remember that then when you scroll down you'll see your product information i would not recommend you to change anything from here so just leave it as it is also make sure don't tick mark anything from here this will charge you some extra money then when you scroll and you have your payment information so here you have to enter your credit debit or your atm card details your card number cvb number all these basic details now just make sure to note that there are only four types of cards accepted over here american express visa mastercard and discover so make sure you have any one of these if you don't have these cards for example most of the people in india have the rupee card now rupe is a domestic card which is accepted only within india it is not accepted anywhere outside india so if you have a rupee card if you're from india make sure you upgrade your card to visa or a mastercard or if you want you can also make payment through paypal so this option is also available once you do that just go ahead at the bottom tick mark these two things and click on complete order now once you make the payment and complete your order after that you have to type in this thing my.fastcomet.com you will land on this login page and here you have to enter this email address and master password which you have set in your previous you know steps so enter that email address and master password and click on login now once you log into your fast comment account you will see a dashboard like this i know you have several options over here now first of all you if you see this option some a support ticket option you can click on this option and as i explained earlier in the previous step that you if you already have a website you can migrate your website from your current hosting to fast comment for free so if you want to do that you can click on submit ticket and you can raise a new ticket for that so you can select this option website transfer over here you can enter your website details so your current website details your current hosting you know control panel url your hosting username password all these things and they will migrate your website for absolutely free similarly if you want to migrate your domain name you can do that thing as well again you can come back to this option go to support let's come over here support tickets and this time you have to raise the ticket for domain name so you have this option as well domain dns support so this option is also available so you can enter select this option enter your details and after that they will migrate your website and your domain name to this particular hosting now if you if you want to do it manually if you want to migrate your domain name or if you're you if you want to use your domain name with fast comment and if you want to do it manually let me show you how you can do that so first of all go to that website wherein you have registered your domain name so whether it's godaddy whether it's namecheap google domains wherever you have registered your domain name so suppose this is the domain name that i have registered here is pac.com or heliospace.com and maybe i want to use this one so i can click on that domain name and here you will see some options will be given to you if you scroll down you'll see an option like this dns configuration okay so all these options all the all the different domain name registrar whether it's go daddy name chip all these options have this option all these websites have this option you will see this option dns configuration so all these different domain name registrars whether it's godaddy namecheap or go you know google domains or any other website all these websites have this option dns configuration you have to find that option and click on that and from here you need to change your name servers here as you can see name servers click on manage name servers this is the default name server you'll have some name server given over here you have to delete it and enter your current name server so if you come to your fast comment account here you'll see this button manage click on that and here you will see this option view details click on view details you will see your name servers given you here so you can copy this first one paste it under line one copy your name server number two paste it under line two and after that you can click on save this will save this thing so this this is how you can connect your domain name which is hosted on some other website with fast comment so this is how you can do it manually or obviously as i said earlier you can just raise a support ticket and they will do it for you now once you do that thing after that you can click on this button access cpanel and enter your master password click on proceed now this is your cpanel your control panel you will see there are several options given over here now first of all i would recommend you to see this option your primary domain now besides your primary domain you should see this option dv certificate so if you have dv certificate over here or if you have this lock pad besides your domain name it means that ssl certificate is already installed on your website if you don't see this option you have to install ssl on your website or on your domain name manually let me show you how that is done pretty easy you can come to this option click on the search bar and search for ssl and select this option let's encrypt ssl now here you can scroll down and you can find your domain name so for example i'm going to use this domain recito2.4h search for your domain name this is the one besides your domain name you'll see this blue issue button or issue link click on this link and after that make sure to click on this blue link a blue issue button again and after that ssl will be installed on your domain name now once that is done you can now install wordpress on this domain and to do that you can again click on this search bar and search for softaculous app installer you will see this option subtaculous app installer click on this and you have to select wordpress which is the first option as you can see there are many different apps we want to use this one wordpress the first option select this and click on install now once you click on install you will be redirected to this page and here first of all under choose protocol make sure you have selected https okay there are two options http and https s for secure make sure you have selected this option after that you have to select the domain name on which you want to install wordpress and then you will see the third option third blank is this one in directory and over here wp is already typed in for you make sure you delete it make sure there is nothing typed in in this box in directory box okay and after that you can you have to scroll down this is your website name and this is your website description if you want you can change your website name from here so maybe i want to change my website name to recital and site description to real estate website okay something like this for mumbai something like that okay so this is how you change your website name and site description you can change these things later on as well i'll show you how that is done now the right hand side you'll see your admin account and here you will see your default username and password now make sure you 100 change this thing very very very important so delete your username which is admin the default one and enter some custom username over here all right and after that also delete this password and type in some other password now once you do that after that you'll see your admin email again delete this email and type in your own personal email address over here now once you do that go ahead at the bottom don't need to tick mark anything from here just go ahead at the bottom and click on this blue install button now wordpress has started installing on your domain name this is a pretty short very small process hardly takes around 10 to 12 seconds as you can see it is already done now once wordpress is installed on your domain name you will get two different links if you open both of them the first link is just your website link so this is how your website is looking right now and the second link is your website's dashboard link so open that link as well in another window now this is how your website dashboard is looking right now now this page this dashboard page is the most important page of your website because you will be doing everything from this website you will be controlling your entire website from this page so whether you want to change your website's appearance if you want to add some new features manage comments manage post manage different products manage different payments everything will be done from this page so this is a very important page and whenever you want to land on this page or come to this page you just have to enter your website name and after that put a forward slash wp hyphen admin you will land on this page now whenever we install wordpress on a new domain name there are a few basic things that we have to understand and there are a few basic settings that we have to do first of all this is the dashboard this is your dashboard page in this page you'll see there's several widgets over here these widgets are not really useful so you can get rid of them you can you know make this page or keep this page pretty clean you can click on the screen option and you can untick everything from here all right just like this now another option at the left hand side first was dashboard which we have covered another option at the left hand side is post option if you click on that you'll see there is one post which is already created for you hello world we'll see how to create different types of blog posts using this option third option is your media option so all the different media files that is present on your website all the different images videos all the different media files you will see all of them over here under media option and you can manage them from here then you have the pages option again from this page you can create different type of pages and you can manage them and edit them from here then we have the comments option wherein you will see all the comments which is posted on your website and after that you can reply them you can edit them you can delete them if you want and then we have the appearance option now this option appearance option is one of the most important options and here you'll see that three different themes which are already installed under appearance and one theme is already activated which is 2021 theme now if you see the style of your website this thing this this appearance and this style design of your website is because of this theme 2021 theme now if you want to change your website design you simply change or you simply activate some other theme for example if i just activate this 2019 theme again come back to my website and refresh it you can see now my website design is completely changed so this is basically what a theme does now i would recommend you to always keep only one theme installed and activated all the extra themes you can just delete them so click on this option at the bottom right corner you'll see this delete button delete it same thing for this theme as well now this this is not the theme that we are going to use in this video we'll be using some other theme a much better looking theme which more features so don't worry about this thing later on we'll be using some other theme now again at the left hand side you'll see this option next option is plugins option and here you'll see a few plugins will be automatically installed for you i would recommend you to just tick mark them and delete them from here just like this okay delete these plugins or delete anything that is not required any extra themes or plugins now what is a plugin a plugin is kind of a software or an add-on that adds some extra features and functionalities to your wordpress website for example right now we don't have any real estate feature on our website nobody can create any real estate listing nobody can post a new listing you can you cannot create different type of pricing plans all this option so to do all these things we'll need different plugins those plugins will add all the real estate all the features that is required for a professional real estate website you will understand these things better later on in this video when we install a new plugin in when we see all the settings related to that plugin now the left hand side you will see the settings option click on that here you have your general settings first of all if you have not already changed your website title and description you can change it from here this is your website title and this is the description then scroll down and make sure under admin email you have your personal email address if it is not just delete it and add your personal email address then under membership make sure to tick mark this thing anyone can register very important so that people can come to your website and they can register on your website then after that you can change the time zone based on your country so i'm from india so i'll select this kolkata time zone and after that just go ahead and click on save changes now under settings you'll see permalinks click on that you'll see by default day and name is selected or some other option will be selected for you make sure to select this one post name this is the most seo friendly permalink structure so make sure you have selected post name and after that go ahead at the bottom again click on save changes once you do that you can again come back to your dashboard and with this all the basic and important settings related to your wordpress website is now 100 percent completed i guess now let's do one thing let's install a new theme and let's install all the required plugins because right now if you see this is how your website is looking it's pretty dull pretty boring we need to convert this boring website into something amazing and beautiful like this one so for that we need a new theme and with that team will get all the required plugins for free so to install that theme you have to open a new tab and type in blog to dot com slash recito now this link is also given in the video description below so you don't even have to type in this thing you can simply click on that link and you should be redirected to this page now this is the theme as you can see real estate website theme you can scroll down you can see you can create different types of websites and designs like these which are given over here now we need to purchase this theme now if you you're lucky enough to get this price 19 this is you know this is going through some promotion so there's some promotion going on so you have this theme available only for 19 the regular price is 59 so you might most of you might not get this price if you're watching this video in future so whatever the price is you can just go ahead and purchase this theme now great thing about this theme for is this platform is that you get lifetime access so you have free updates for lifetime most of the times what happens is whenever you're purchasing any theme or a plug-in you get yearly access so every year you to get new updates you need to you know remove your account or rename your license but here you are getting lifetime license which is great so even if this website is getting updated in future after a year two year three years you don't need to pay anything extra for just for 99 or for just 19 or 59 you can purchase this thing and use it on your website for lifetime so that is another great thing you also get six months of support so if you if you face any problem if you have any issues any doubt with this theme you can come over here you can go to support or you can go to comment you can ask them they will help you out so simply just go ahead and purchase this theme i have already done that you can just click on buy now and purchase this theme once you do that you can hover over this option as you can see at the top right corner you have your username however that and click on downloads now under downloads you'll see all the different themes and plugins that you have purchased we want this one recito real estate wordpress theme click on download now select this option installable wordpress file only which is the second option select that a new file will start downloading for you and as you can see it is already done once it is done we need to you know upload this file upload this downloaded file on our website so to do that come back to your dashboard click on appearance from the left hand side click on add new upload theme now choose this file so i'll simply select this file over here and click on install now now once it is installed we need to activate this theme so for that you just need to click on this activate link and this theme will be activated for you now you'll see you'll get this notice over here now there are two different notices first we need to activate this theme we need to enter our code i'll show you where you'll get your purchase code another notice is that this theme as i said earlier with this theme we'll get all the required plugins so we need to install those plugins now before we do those things first i would recommend you to delete this extra plug-in 2019 or whatever plug-in you have or theme you have we just need one theme over here recite with him now first of all let's activate this theme so you can click on this thing you can click on this link here and you will be redirected to this page you need to enter your email address so your theme forest email address and after that you need to enter your license key so you'll get your license key over here if you click on this theme go to support and if you scroll down at the bottom you'll see your purchase code you simply have to copy it from here come back to this page enter under license key and click on save changes okay once you have this thing you have to tick mark over here and click on activate license and after that it is done okay now click on save changes now once you have activated this thing you can now click on this link begin installing plugins and now we can install all the required plugins so for that you don't need to install it one by one you can simply tick mark it over here you can simply tick mark this option this will select all these options all these different plugins and after that under bulk action select install and click on apply so all these plugins will be installed for you i guess now as you can see all these plugins are successfully installed now we need to click on this link at the bottom return to required plugin installer and now we need to activate these install themes so again you can just select this option this will select all these options now under bulk action select activate and click on apply all these plugins will be activated for you now once that is done you can again come back to plugins just to make sure that everything is activated properly so click on plugins from the left hand side now you'll see some you know notices or some pages like this welcome to elementor i would recommend you to again click on plugins and here as you can see two these two are not activated so tick mark these things under bulk action again select activate and click on apply and now as you can see all your plugins are now activated you can you know cut all these notices click on dashboard now once you click on dashboard we see that we have few more widgets i don't need this elementor widget we do need this woocommerce setup because we need to set up our store we need to set up payments and all so we want to we want to create these kind of things let me show you these kind of pricing tables and packages so that we can accept payments on our website so for that we will need to set up this thing woocommerce setup so you can simply click on this button start selling you will be redirected to this page this is a simple setup for your store now here you have to enter the address so it could be your business address your office address you know whatever and after that you need to enter your state name and country name select that thing enter your city name postal code and after that click on continue now you can select this thing or just click on no thanks now you need to select the category so maybe you can select any category it does not really matter just click on next now again click on continue now this is just a simple service whatever you select over here does not really matter so how many products you uh you will be creating whether you're selling anywhere else right now and make sure to untick all these things these are all extra plugins we don't need any one of them now click on continue and again they will recommend you few themes don't need them you can select this option recito continue with my active theme and again they will recommend you few more plugins so this is jetpack plugin good plugin but we don't need it so just click on no thanks and with this your setup is now 100 completed you can now do one thing you can click on this pages option from the left hand side and now as you can see this has created few pages for you it has created this card page checkout page my account and shop page and we have few more pages like compare page dashboard page ad listing page which is related to this theme now let's see let's come back to our website and let's refresh it let's see the changes on our website and now as you can see this style is completely changed if you click on add property let's see what happens okay this is not working properly we'll fix it don't worry let's click on dashboard okay so dashboard is also not working first we need to set this page as our dashboard page after that all these things will work so first of all come back to your dashboard and here you will see this page dashboard page edit this page and you need to select this option as you can see under page attributes we need to select the template dashboard so you will see this option over here at the right corner at the right side you'll see page attributes click on that under template select dashboard now click on update again again let's come back to this page and refresh it now if you refresh it and if you still don't see any changes over here don't worry now the the hosting that we're using fast comment hosting that has you know that has enabled default caching on your website so caching is basically to improve your website speed so sometimes if you refresh it you might not see the real page as you can see after refreshing it few times you might see the live website so now as you can see it is working when you refresh few times you see your dashboard is now 100 working if you click on add property let's see whether this is working not working we'll fix it don't worry so again come back to dashboard so this page is working now let me show you what we want to do next so first of all we want to add a new property over here we want to add a new listing over here but before we add any listing this is not working as you can see because before we add some listing we need few things if i click on add property over here in my demo website now here as you can see we have property type so we need to create property type from here we have location so we need to create location then after that we also have these amenities so that will be under listing features so first of all select tags and under tags you can create different types of tags so what a property what this property has so for example you can type comfy over here this could be a tag related to this property similarly family all these things could be different tags now once we start or once we add our first listing you will see how these things will be useful so you can just go ahead and add hundreds of different tags over here and after that we have property types so what kind of uh what kind of property is this this is a residential property or a commercial property a flat or a shop what this property type so what i would recommend you to do is i would recommend you to create two main categories so commercial and residential these two can be two main categories and after that you can create sub categories let me show you so first of all let's create commercial okay after that you can just you can just select any font awesome icon if you want you can click on list of icons you will be redirected to this website you can add some icon if you want for this so as you can see all these different icons are given to you you can also add some descriptions and all these things are not really important so you can just go ahead and click on add new property type then after that let's create our next main category which is residential so again just go ahead and click on add new property type now these these are two main categories then we can now create subcategories so under residential we can have flat okay we can have condo we can have duplex all these things are residential property okay similarly and okay we are not selecting the main category so i need to edit this thing so select uh edit under duplex and make sure under parent category you have residential okay like this click on update again let's come back to property types and select flat and under make sure under parent category you have residential selected similarly again come back and select condo and here also you can select this residential as parent category now again let's come back to property types now for shop so this could be obviously under commercial category so select parent category commercial shop and after that office spaces maybe okay and again make sure you have selected commercial and click on add new property type now as you can see these are all sub categories to commercial these are all sub categories to residential so this is how it is done obviously you can now go ahead and create many more different types of properties now let's select locations so under location so if you're serving different locations like you're serving in maybe five six different five six big cities in india or your country you can add those names over here so maybe let me add mumbai now while you're creating locations i would also recommend you to add featured images because if you see if you go to your home page so when you want to showcase these locations on your homepage or any other page these images will also show with this name okay as you can see with the name of this place so that is also very important so you can select this thing so for mumbai if you if you have any images you can upload that image you can go to some free website and you can download those images as well so there are a few websites where you can get free images so if you go to unsplash.com or pixels.com there are many more websites like freepig.com this is also another website now first of all you just need to search that location so for example if you select mumbai you'll get many different images that you can use for free on your website as you can see gateway of india we have this cst station all these options are given to you so you can use these images for absolutely free on your website similarly if you go to pixel see also if you search for that option now as you can see van der waal is sealing all these different images related to mumbai you can use any one of these images on your website so you can download free images from these websites and you can upload it over here now there's another link given in the video description if you click on that link you should be redirected to my website in fact you will be redirected to a similar post so for every single video tutorial that i create i create these kind of post so when you click on that link you will be redirected to a similar post you'll see the video that you're watching at top and after that you'll see a few important links and at the bottom you'll see download free images now once you click on this download button you will download a zip file and you need to unzip that file once you unzip that file you will get this folder and in that you will see all the different images okay you can use these images for absolutely free on your website as you can see for apartment for property images for city images and all these things okay you will see some more files as well so if you want to use these dummy images on your website you can use them as well so under featured image for mumbai i'll just upload some image from here okay not necessarily related to mumbai because this is only for demo purposes so i'll select some image maybe let me select this image i'll select this click on open now once it is uploaded click on select and add new location so this is how it is done similarly if i add another location another city name pune i can select this thing add a new image from here maybe this time let me select this image and click on open again once it is uploaded just click on select and add new locations similarly you can go ahead and add as many locations as you want now property status now under this thing you need to uh create two or three different status so whether you know they want to buy it whether they want to sell it so buy sale or sale can be one and after that whether this property is for rent so you can type in rent okay these kind of status can be selected then after that you have listing features if you click on that thing i have already explained you if you open any single listing you'll see these features listed over here as you can see let me scroll down as you can see air conditioning central heating internet alarm system whatever it is okay so maybe we will type in gym so this property has gym and after that maybe let's see it has car parking so i'll add this thing as well click on add new feature similarly you can just go ahead and add as many features as you want let's add one more um alarm system maybe fire alarm system something like that you can add these kind of features so that is how it is done now we need to do one more thing still this if we again come back to this thing uh refresh this page add listing page still it won't work so first we need to do one more thing we need to create different packages so if you want to create different packages you're gonna keep this process free so that anyone can come to your website they can submit their listings for free you can have it or you want to create packages for that so maybe you want to keep it free but you can you want to create different packages so you want to create a free package and under that you have some features then you want to create maybe a silver package a gold package under that you want to give them more you know control over how and what all features they get with this thing so for that you can create different pricing plans packages you can click on pricing plan from the left hand side and let's create a new one so click on add new let's first create a free one so we'll just name it free or maybe instead of free i'll name it basic package like we have done over here okay we'll select uh pricing basic we'll select uh the background type basic so when you select the background type basic you'll get this kind of style this red color kind of style and after that you have to select the price i'll just select zero because this is free then we have to select duration so number of days submission will be valid so once you submit your property listing it will show for these many days on the website and after that this listing will expire so maybe this is for 365 days it will show for one year if you if you want you can just type in 30 days so it will show only for a month and after that it will expire listing submission limit how many listings can be submitted with this package maybe only one because this is a free plan now don't need to type anything under price custom url now over here at the bottom you have to type in all the features that are available like this okay so i'll just copy it from here paste it over here just make sure it is a bulleted list okay let's make it like this all right so just make it a bulleted list so that it shows something like this on your website okay so you can add five plus listing it's not five you can just add one listing okay you can contact the agent maybe three month validity no only one 24 7 full support may be not available so i'll type in no support because this is a free plan so i'll just type in this thing and after that you can just go ahead and publish this thing so you have simply you have successfully created your first plan to create another plan you can click on add new and you can give someone some other titles so maybe platinum package we can select this option we can select this maybe the price is 50 dollars okay duration is 365 days so it will show on your website for one complete year and this person can now add five listings okay so i'll add all these things so similarly you can just go ahead and create a bulleted list like this okay now once again it is done just publish this thing and similarly you can just go ahead add one more listing all right so once you create packages now we have to do woocommerce settings because if you see there are two problems over here first of all we have set some price for example here we have set 50. now what is this 50 rupees 50 dollars 50 euros so we have to set that currency second of all we have to see we have to make sure that whenever someone comes to your website they have some payment gate we we have uh no some payment gateway integrated on our website so that people can make this payment so it is 50 dollars for example how can they make the payment so we have to connect some payment gateway with our website for example paypal raiser pay there are many different payment gateways so we can connect something like that so that we can accept payments on our website so let's see how that is done so for that we'll do all the woocommerce related settings so from the left hand side hoverboard woocommerce and click on settings now here first of all make sure if you have not changed the address you if or if you want to update your address you can do it from here then selling to a selling country so you can leave it at at selling to all countries if you want to enable taxes and calculation if you want to charge some money tax on the price on these pricing packages that you have created then you can enable this option and from here you can select the currency so whether it's usd whether it's euro whatever currency it is you can select that thing you can select thousand separator so in some countries it is comma in some countries it is full stop so i'll select for comma as thousand separator and decimal as you know full stop now click on save changes now once you do this thing you have next option is your products option if you click on that thing everything is good over here i'll just change this thing to gram although this is not necessary now you can come to taxes once you enable taxes you'll get this taxes option now under additional tax classes there are two already options there are two options already present over here reduce rate and zero rate if you want to add more option for example if you want to add some tax so maybe i can type in gst 10 maybe gst 10 percent is supplied or that 10 percent is supplied on something like this so you can type in this thing and click on save changes again i'm saying not really necessary but if you want to charge taxes on this you can do that now once you add any tax class over here you will get a new option at the top so as you can see gst 10 rates is added over here now you can click on this option now click on insert row under country code type in your country code so for example if you're from india you can type in in for finland you can type in fi something like that okay now leave state code postal code city and everything just come to rate and type in the tax rate so if it is 10 percent just type in 10 and under gst name you can type in or under tax name you can type in gst 10 or vat 10 and you can untick shipping because we are not dealing with any physical product we are not dealing or we are not shipping any physical products so untick shipping and click on save changes and now as you can see this is created for you now you can just totally leave this shipping tab because you're not shipping any physical product come to payments option now under payments fee option are already created for you i would not recommend you to use cash on delivery not you know not applicable over here you know check payments also not applicable direct bank transfer may be applicable if you want you can enable this if you want you can just leave it as it is you can enable paypal and uh let me just enable direct bank transfer just to show you how it works now click on save changes have enabled two different payment gateways so if you enable a direct bank transfer you can come over here you can add your bank account details so your account name okay whatever your account number is you can add that number you can add the bank name okay and after that you can add ifsc code you can add i ban swift all these codes and click on save change so whenever someone is trying to do checkout on your website whenever a person or a customer is you know trying to purchase any one of these packages in the next step when they click on choose plan in the checkout step they will see this option direct bank transfer and once they select this option they will get all the bank account details that you have entered and then they can you know transfer amount to your bank account now for paypal standard you can click on paypal standard option first of all make sure it is enabled over here you can enter your paypal email address so whatever your paypal email address is just enter that one now go ahead at the bottom now to enable this option we need three things live api username live api password and live api signature and to get this thing you have to go to paypal.com obviously log into your account now once you log into your account you have to change your url so under url it says paypal.com instead of this type in this thing paypal.com slash business manage slash credentials slash api access and a in access is capital as you can see on your screen tap in this thing and press enter once you press enter you will see this page scroll down select this option nvp slash soap api integration in bracket it says classic so select this classic option and click on manage api credentials now here you will get all your details so if you just click on show it will show you your username you can just copy it like this come back to this page paste it under live api username similarly you can you know click on show similarly you can click on show copy your password paste it over here under password similarly copy your signature paste it over here i'll have to hide these details from here okay so as you can see i have now successfully entered all three details username password and signature so once you do that just click on save changes and after that this thing will start working now we can enable or now we can start accepting paypal payments on your website now just come back to payments now many people don't use paypal so you know your website should have some option wherein people can make payment through credit debit cards or atm card so to do that thing there are many payment gateways available uh for example uh mostly for european countries and usa there is stripe which is pretty good for india it is razor pay and i'm sure for different countries if you're from some other country there might be some payment gateway just do some google search you'll find it and after that you can use a plugin related to that so let me show you how that is done just click on plugins from the left hand side and now click on add new to add a new plugin and under search plugins search for stripe now this is the option that i'm showing there are many again as i said earlier many different payment gateways are available you can use them as well now this is the one that we need woocommerce try payment gateway by woocommerce install this plugin if you're from some other country and if you find some payment gateway if you don't know how to set up that thing you can always go to their website for example if you go to razorpay.com the website for that or some other payment gateway they have they will give you the plug-in file they will also show you how to set up that thing on wordpress so all almost all the payment gateways have you know created different plugins for wordpress and they have also they also have a very good documentation how to set up that plugin so once you select this thing once you install it now you can activate this plugin now once it is activated you can now hover over woocommerce and click on settings again if you click on payments you will see many different as you can see many new payment options are available you want to use this one stripe credit card you can enable this option click on save changes and after that you can click on this option stripe credit card option and now you need to set up this thing so to set up this thing we need the live publishable key and live secret key and for that you will get this thing on dashboard.stripe.org make sure you have created a stripe account if not you can just create it within few minutes very easy to do so so once you have created your stripe account you can log into your account and go to this thing dashboard.stripe.com now once you log in you will see let it load first once you log in you will see this option from the left hand side developers and under that you will see api keys select that option and after that you can copy the publishable key come back to your website paste it under live publishable key copy your secret key and now paste it under live secret key once you do that again go ahead the bottom and click on save changes and with this your stripe payment gateway is also now 100 setup now once you do this thing you can now come back to this option settings option we have we have seen payments now you can click on account and privacy or accounts and privacy now over here tick mark this thing allow customers to log into an existing account during checkout allow customers to create an account during checkout and allow customers to create an account on the my icon page and after that untick these two things so we don't want uh your website to automatically generate username for your for your customers and also don't want your website to automatically generate password for your customers or for your visitors we want our visitors to create out to have their own custom username and password whatever they want not whatever your website gives them okay so they can have their own username and password so make sure you untick these two things now go ahead at the bottom and click on save changes now once you do that at the left hand side at the right hand side you will see the last option is advanced option click on that and over here just make sure under cart page cart is selected under checkout page checkout and under my icon page this my account option is selected once you see this option click on save changes and with this all the woocommerce settings are also now 100 completed now let's see whether we can add a listing or not so again if you come back to this ad listing page refresh it now as you can see you're getting all the different options first you have to select some plan only after that you can proceed further or if you just click on add property you can see the same option first you'll have to select a plan and then you can proceed further so maybe i want to select this plan platinum package for 50 dollars i can select this thing and you can click on choose plan now once you do this thing you have to now click on proceed to checkout and here you have to enter your details so let me very quickly do that okay so as you can see i've entered all these details and now at the bottom as you can see we have uh direct bank transfer we have paypal we have credit debit card which is stripe so if someone wants to make payment through stripe they can enter their card details and click on place order now payment will be done you will receive money on your stripe account and after that you can withdraw money from your account or if someone wants to make payment through paypal that is also available i just want to select this option direct bank transfer so just just so that i don't have to make payment to myself okay so i'll select this option and click on place order now let's see what happens once a customer places an order so once a customer places an order they will see this page here they can see all the details they can see the order number they can see payment method all these option and now as you can see our bank details so once our customer selects this thing now they will get this bank detail they can make they can note this detail and they can make payment on this bank account option okay now once they do that let's see what happens now if i just go to my option if i go to my dashboard okay if i add a listing now as you can see again i'm redirected to this package plan and that is because we have selected this option we have selected bank transfer so first you as a website owner or as an admin of the website will have to confirm whether you receive this money or not if this person had made payment through paypal or stripe you know they could just go ahead and add a new listing because that no confirmation is required we already know uh this website will already know whether the payment was successful or not but because we have selected this bank transfer we have to confirm that thing so if you come back to your dashboard under woocommerce you if you click on orders you'll see a new order will be placed and it is on hold because the payment is not done okay as you can see awaiting bank account transfer if you open this thing now if you see you have received this money from this person then after that you can change the status of this order so if you've confirmed that you have received this amount in your bank account you can change the status to complete it and click on update okay now as you can see once you mark this thing to complete it again if you come back to dashboard and refresh it and now if you try to add a listing let's see what happens click on add listing and now as you can see we don't see any packages page we are successfully redirected to this ad listing page and now you can add your own listing now let me do one thing let me add or let me open some demo listing from here and so that just so that we can copy all the details from that page so maybe let me open this one right so here this is the name of the property or the title of the listing so i'll copy this listing title paste it over here under title now status whether you want to buy whether you want to sell whether you want to rent this thing so maybe i want to sell this thing so i'll select sale whether this is a commercial property residential property of and after that what type of property it is so maybe it is just a villa maybe let's select okay i've not added that so maybe i'll select a flat okay now your price so maybe i'm asking because i'm selling this thing maybe i'm asking 100 000 all right now price post fix as you can see what after price so here it says monthly or if it is for sale i'll type in for sale okay what is the size of the area so maybe it is you know let's see 1500 square feet so if it is square meter you can type in square meter here now how many bedrooms and bathrooms so maybe three bed two bath and if if there is any garage you can type in one or zero whatever the number is now if you want to add some description as you can see you can describe the property like whatever option is available in the property you can type in all those things so here you can also add some links and all these things you can add an image you can add list and all using this option now what all amenities are available so maybe all three options gym car parking and alarm system are available now you have to select a featured image now featured image is this image if i again come back this image which is shown at top okay this image so for that let me upload some featured image let me upload some images over here from here so i'll upload these five images but you have to select only one image as your featured image so let it load first so maybe i want to select this image as my featured image i'll select this and select this option so that is now added and after that you can add gallery images now these images at top as you can see these are your gallery images so let's again come back over here click on drop files and let me select all these five images click on select all these five six images are now selected as your gallery image okay now we have the video option so if you have any video related to this property uploaded on some website maybe on youtube you can add that youtube link let me just go to my youtube channel so i just want to upload maybe i just want to show this link so you can just right click on this video any video click on copy link address come over here paste in this link just like this now select the con okay we have now okay i'm just i'm just like the i'll just select the city property address you can type in the address okay i'll type in this address and now you can also add google map iframe so you can go to this website or google.com maps and over here you can search for that property so maybe suppose this is the property okay this one so you can double click over here and you can click on this hamburger icon and from here you can select share or embed map and you can select embed map copy this html come back to your website paste in this code over here all right now you can enter your business information so maybe okay this is my email some password oh sorry your mobile number your website link fax number if there are any okay then your contact information so i'll just add this thing again under email now if there is any agency or agents created if you want to assign this property to a particular agent or an agency you can do that thing where i have not created any in the next step we'll see how to create an agent or an agency once you do all this thing just tick mark this option and click on submit and preview in the next step you'll see this preview of this listing if i click on listing included let me click on this option my listings all right so now under my listing you'll see all your listings that you have created this is the one so if you open this in a new tab as you can see this is how it will look like you have you know this is for sale this is the title everything is given over here we can change the style and everything but right now this is how it is looking there are several styles available you know this is the location and after that we have the gallery that we have created people can rate this property all these options are given over here you know property details title the price everything is given okay how many beds uh what is the area everything is given over here if someone wants to act to compare they can compare this property if someone wants to add this property in their favorite list or wishlist they can do that thing as well all right so while editing the video i found out that i have missed one thing while recording the video so right now what you're saying is i i'll put this part after we have created a property listing so once you have created your listing i have missed few things so if you see the demo website here we have all these details like details some extra details that you want to showcase we also have the floor plan option and i have not covered this while recording so that is what i'm doing it right now now once you create your property listing if you want to add floor plan details and some additional details like these okay which i have shown you know details and features you can do one thing you can go to your dashboard first of all okay so go to your dashboard and under your dashboard you'll see my listing option at the left hand side click on that and over here you have to edit this thing so edit this listing now when you scroll down you will see these options so when you scroll down here as you can see you have additional information so if you want to add some additional information for example we have added a lot of options over here we have added around 15 options so if you want to add maybe 15 options or maybe not 15 just let's add only five options so we'll add five click on confirm now you have to give title and value so maybe title is bedrooms so i'll type in bedrooms okay and under value i'll type in maybe three bedroom then maybe elevator whether there is elevator on this property or not so you can type in elevator under title and you can type in whether it's yes or not okay so if you want to add any custom data like this for example free wi-fi okay i'll select this thing i'll make it maybe no okay similarly let's add few more so whether there is swimming pool so maybe yes so we'll type in this thing so as you can see if you want to add any anything like this any extra details you can use this additional information option okay similarly when you scroll down we have seen video link all these things now for floor plan so maybe this property has three floats so you can type in three click on confirm and you can enter those details so here like we have added over here in the website okay under floor plan so this is first floor and let me show you some other property okay so in this property as you can see when somebody clicks on this thing they will see this floor plan similarly if they you know minimize this thing click on second floor they can see the floor plan so if you want to add something like this first of all for title this is your title first floor or whatever you want to type so i'll type in first floor what is the floor size so here in this case as you can see 740 square foot so maybe okay okay you can use this thing over here under post fix similarly for second floor third floor you can add similar data and after that you can go ahead and click on submit and preview and now let's again see that thing so again if you go to all properties open this single listing here as you can see we have additional details and we also have this floor plan option so this was missing now you can continue watching the video okay so before you proceed further before we see how to change the style of this thing let's first see how we can create an agent and how we can create different agencies so if you come back to your dashboard again over here you will see this option agency and agent so if you click on agent as you can see no agents found similarly if you click on agency no agency found if you want to create one you can just create it from here from the front end itself so let me show you the agency page so if you come back to this demo website you can see agents and agencies list so if i go to agencies list all the different agencies i i just open single one just to copy paste few things from here so this is the title of this agency or name name of the agencies i'll copy it basically here and then we have the address copy it paste it over here phone number all these details can be added from bottom email address right so this is the one now under content we want to display these details so here so again open the file that you have downloaded from our website in this you will see this file agent info you can open this and this is how it will look like just copy everything from here come back to this website paste it over here you just need to change the details for example ceo mr adam sensei of mr adam i'll type in mr john doe okay similarly email as you can see this is the email so you can change this email address enter your own email address so after that you can okay we had to add few more things let me edit this thing then you can also upload the featured image so let's upload this image as a featured image so let me upload a new file select this image click on open now click on select and similarly you can add some social information agency information so for this also if you open the file that you have downloaded here as you can see social info let me again bring it over here you can add this option this is all optional if you want to do this thing you can do it or if you don't just leave it as it is you can leave it as it is now as you can see you just need to change the link so this is the facebook link instead of this link you can type in some other link this is the twitter link instead of this link you can type in some other link and after that click on update now let's again come back to agency okay let's view this thing okay as you can see this is how it will be viewed and again this thing can also be changed the style of this page will also be changed now this was from the front end it is better to always add agents and agencies from the back end so here as you can see we have the agency we have the agent you want to add a new agent just go to agents click on add new agent so agents and agencies will contact you so we'll see later on in this video how to create a contact form like this okay so they can they will contact you that i want to be an agent or we are an agency we want to add our you know profile on your website and you can get all the details from them and you can create an account for them from the back end this is a much better option now here let me do one thing let me just very quickly add and open the agents list and add a new agent show you how this is done so if i open this one maybe i want to add this one so i'll just add the title the name this is the description of the agent okay the address everything can be added from here phone number email agency okay if you want you can also add some agency with them and after that you can add you can upload the image so i'll just upload this image for demo purposes and after that you can publish it now again if i come back to dashboard so this is how it decided you this is how we can add different agencies and agents okay so most of the technical things are now completed only the designing part is left so let's start designing this website because right now as you can see this is how it is looking and let's start from home page so let's see how we can create this page and after that we can move forward so to create your home page first of all come back to your dashboard click on pages from the left hand side and add a new page so click on add new and let's give it a title of home let it load under add title just give it a title of form and we need to do few things we need to disable breadcrumb okay so make sure to select this option we need to disable breadcrumb and under template at the right hand side as you can see select this option elementor full width now you can publish this page now we have created a page we have named it home but just by naming it home it does not become your home page we have to set this page as our home page so again come back to dashboard now select this option under settings you will see reading click on reading and under this option you have as you can see your home page now displays your latest post we want to display a static page so select this option a static page and under home page select the page that you have created home and click on save changes now again if you come back to pages and now we can start designing this page so select this option home click on edit and select this option edit with elementor click on this button edit with elementor button and now we can start designing this page using elementor page builder so let's start designing our section so first we have this banner section now in this section as you can see we have this thing over here at the left hand side we have this search bar and a different kind of search bar and at the right hand side it's blank we have this image in the background so first of all to create this section you'll add this plus button and click on this plus button select a single column and under this column you will see this option over here if you follow my mouse cursor you will see this nine dots icon if you click on this icon you will be redirected to this page which is your elements page you here you will see all the different elements now from here you have to search for banner element here as you can see home banner drag and drop this option over here and this is how it is looking okay now first of all under layout select layout one there are many different layouts available just select this layout you will see this is how it will look like you will have your search bar over here and you have some image in the background if you select layout two your search bar will be at the bottom first let me actually do one thing select layout one and under search form you have to enter the shortcode for search form so which is this short code if you see on your screen okay under square brackets listing hyphen home hyphen search hyphen form space bar style is equal to style one you can see this thing on your screen as well now instead of style one if you wanna select style two first first change the layout to style two and after that under search bar instead of just insert this style one just make it style two and now as you can see this is how it will look like simply similarly instead of this layout if you select layout number three then you can also change this search form style to number three which is something like this so there are many different options available i just want to keep it at style one and layout one just so that we can follow the process of we can follow the design that is created for the demo website so again come back to this page and now let's first upload the background image so i'll upload this image i've given you this image as well as you can see this is the one click on open now once it is uploaded you can just click on insert media and that image will be uploaded now this is not a full width image so we'll fix that thing this is not a full width section we'll fix that thing later on first let's add some header and footer so this is your header let's add this thing under header title as you can see we can also design this header and this is your button as you can see at the bottom search result if you want you can also design your button so if you click on button here as you can see first of all let's make it bigger let's increase the padding of the button so instead of this default option i'll add 30 pixel now as you can see 30 pixels padding from all side you can also change the background color if you want so maybe let's change thing let's change this thing to this blue color or any other color that you want okay now you can also change the style of this heading so you can go to style this is as you can see your heading go to typography you can increase the size if you want maybe for this if you want to make it uh you know 30 pixels you can do that thing as well you can also increase the line height as you can see maybe 2 em all right now let's make this thing full width so as you can see we have a lot of space at left and right and also at top and bottom so let's make it full width for that you'll have to click on this button six dots icon if you see if you follow my mouse cursor again once you click on this thing at the left hand side now you'll see edit section now if you don't see this option you can do one more thing at the bottom left corner you'll see this navigator option click on navigator and click on section as you can see this is how the layout will look like okay section and under section we have a column and under column we have added home banner click on section you will see edit section option at the left hand side now make it full width so instead of content with the box make it full width now on the column gap make it no gap okay now as you can see this is how it will look like you can also stretch this section so under stretch section make it yes now after that you can update this page and now as you can see so easily you have created your first section again i'm showing you if you click on this banner pretty easy go to content you can completely change the layout if you select number through a number two layout you can also change the style of form to two and now as you can see it looks totally different okay so you can have this thing as well okay similarly for style three if you wanna display a different search form you can type in style three if you want another step form you can make it style four you can make it style five all these options are given to you if you select style four and also change the layout to four as you can see this is how it will look like so all these different options are given to you i'll again come back to style one and layout one now let's create a second section which is this how it works section so again we'll come back to this page click on this plus button uh this red plus button we just want a single column so select the single column and inside this thing we want to use this option so again click on this nine dots icon and search for how to you'll see this option step how to use drag and drop this element over here and this is how it will look like now first of all let's uh add some header so this is our header how it works paste it under header okay this is some text paste it under this title then after that you can select how many columns you want so we want three columns as you can see and then we have the item option so under item one first you can change the icon and after that you have the title so first let me just add the titles under title i'll add this thing and after that you can also have some description like this under content type in this thing now let's add some icons so click on icon many different icons are available i would recommend you to select this option received on a residual icon you'll get much better icons more cleaner and subtle design as you can see so maybe i want to select this icon i can select this click on insert this icon is added as you can see for the second option open this select some other icon again i would recommend you to use this residue icon much better so select this option maybe click on insert for this this is our title i'll copy it based on title and obviously will also copy the content paste it over here under content so as you can see how easy it is to do this thing if you want to add one more click on add item so add some other icon obviously maybe let's add this crown icon insert it and then this is your title okay you have the title and after that this is your content but there are more things available if you want to remove arrow so i would recommend you to remove arrow after three so we have arrow as you can see for after one we have this arrow then after second column we have this arrow after third column we don't want any arrows so we'll remove arrow for after for the third option as you can see remove arrow now for arrow direction also there are style one and two so type one is at the right hand side and type one will be directing at the left hand side type 2 will be left inside now once you do this thing we can also design it so go to style we want to change the size of this or title and heading so as you can see this is our title and then we have okay let me come back so first select this heading change the typography you can increase the size from here or maybe if you want you can do one thing just change the tag to h2 now as you can see the size and everything will automatically increase similarly for title instead of tag h4 just make it paragraph everything will automatically improve as you can see this is looking much much better and again for this also we want to add some spacing at top and bottom and we want to make it full width so select this option six dots icon make it full width also change the column gap to no gap and now we can also stretch this section okay now for some spacing at top and bottom go to advanced and add some padding of 80 pixels for top and 80 at bottom all right update this thing okay with this your second section is also completed as you can see this is how it will look like now let's move on to our third section which is this explore section so we have added different properties over here now to create this plus button single row single column and under this option we have to search for this element explore property as you can see explore property drag and drop it over here right so as you can see this will display the property that is added to your website now first of all let's give it some header so this is our header and after that we have some content so paste this thing under title you can also change the layout so by default it is great if you want to change this thing to list you can do that thing as well i'll just keep it at grid you can also make it a slider if you want i don't want to do that so i'll just remove it now i want three columns as you can see we have three columns and i want to display of six different posts or six different listings over here now for button label you can see at the bottom we have this button browse more properties so i'll type in browse more properties over here and we also want to make sure we want to link this thing with the all property page so when someone clicks on this thing they will be redirected to some page okay so it could be your listings page as you can see under this page they can see all the different listings that are added so under button link just search for listing okay if you don't see this thing do one thing copy your website link paste it over here and after your website link after forward slash type in listings okay this will redirect them to all listing page click on update now let's fix this thing go to style again under heading make it h2 under title make it paragraph okay fixed it now let's add some padding at top and bottom and we also want to make sure we also want to change the background color okay as you can see this background color is a little bit different very light blue color so come over here and first let's add some padding at top and bottom so in this case also i want to add 80 pixels at top and bottom we want to make sure that this is first of all let's wait okay now select this option this six dots icon make it full width you can also do some more things you can stretch this thing you can select no gap and stretch this section now go to style and you can now change the background color so select this background type select color and type in this thing first just enter this hash icon or hash symbol and after that put in this code f f5faff you will get this very light blue color now update this page okay so this section is also now completed then we have this find by location section so again we'll do the same thing plus but in single row single column and we want this option now we want this element to be displayed over here so nine dots icon and now search for this option location okay as you can see property location drag and drop it over here at the bottom now first of all for header we have this as our header then you can add some title if you want you can have this thing now how many columns you want we want three and we're gonna display total six so select three and we also want button and you can add button link so here it says browse more locations again we'll type in this same thing browse more locations and again for for this thing let's see if you click on this option you will be redirected to this page where you can see all the different location so the title uh so the link as you can see is your website name slash location so i'll copy it paste it to here okay website name slash location now under this let's add different list so click on add item you can select city and you can select whichever city you want okay so i'm selecting this okay as you can see add item i think we have added that under state okay now you can update this page and similarly we can just go to this option edit section full with no gap and add some padding at top and bottom 80 pixels okay and also this thing yeah rest everything looks good h2 and title is paragraph so this is good now we can update this page now i think you can do one thing while creating this first let me go back to my dashboard so while creating different locations you could do one thing under listing if you click on location first you can create a state and then you know you can create a city so maybe uh mumbai both mumbai and pune are fall into maharashtra so i'll add maharashtra okay so this this could be your state you can add some image if you want click on add new location now one once you have added a state after that when you add a city for example if you want to add mumbai click on edit here you can select parent location you can select maharashtra okay so you can do this thing as well this would be a much better approach okay so again similarly for pune also you could just select parent location maharastra all right so this option is also given to you now let's move on to our next section which is this review section so again we'll come back over here add a new section and search for review or maybe it is called testimonials over here so smart testimonials drag and drop it over here and again same thing we have seen this thing several times add your heading and after that add some text over here how many columns you want you can set that thing under image one or item one uh suppose okay i think i'll have to type in this thing so maybe the first author name is john doe so this person is giving some review designation maybe ceo at some company okay they have given five star rating and after that the content so this is your content let me copy some text from here so let me copy this much paste it over here and you can also add some background image which is this image so these images are also given to you so if you upload files so select this image which is already given to you and click on open now once it is uploaded you can now click on insert media and now as you can see this is how it will look like all right similarly you can go ahead add more options like this so similarly you can select the second item you can add a author name designation we have seen this thing how this is done okay now go to style you can change this to h2 and title to paragraph which is already present and now we can do a few more things select this option make it full width no gap and we also need to change the background color to this very light pink color first let's add some padding at top and bottom 80 pixels now go to style select this option and add this color code so this color code is fff6f5 you will get this very light pink color now update this page and i think yeah then we have the last section which is our packages section so click on this plus button add a new row and search for this option price table which is this drag and drop it over here at the bottom again header title add these details or these options now again we need three columns and post per page we're gonna display three and this is how it will look like if you have more you can choose this option or you can you can also set what your button says so here it says choose plan so under label you can type in choose plan all right and similarly you can change this thing to heading 2 and paragraph now you can select this option make it full width no gap and we also need to add some space at top and bottom so advanced 80 pixels padding at top and bottom so as you can see it is so easy to create a website using this theme and using elementor once it is done you can now update this page i would always recommend you to see how your website is looking on mobile phone so you can click on this option responsive mode and now as you can see this is how it is looking on mobile phone okay everything is looking good i think only this thing this title is looking too big okay so let me change the size of this title so click on this option just click on over here go to style under heading make sure first of all and besides size as you can see mobile icon is selected and then change the size okay maybe 16 pixels okay or if you want some other size you can have that thing as well but change the line height okay so i'll keep line height maybe at 1.1 okay now looking much better rest everything looks good all right now you can update this page and come back to previous desktop mode and with this we have successfully created our home page now we can again cut this thing and come back to our dashboard right now let's see how we can create different types of blog posts so i have shown you in the demo that we'll see how to create a blog page wherein we'll see how to create different types of articles now these articles these blog posts are pretty important because these will help you to get some extra traffic through google search results so very important so again to do that thing again you have to come back to your dashboard you have to click on post from the left hand side now under post you will see as you can see we have one blog post already created hello world we don't need that first of all make sure you delete this dummy blog post and you can create your own now click on add new to add your own blog post and let me do one thing let me open a single blog post just so that we don't have to you know waste a lot of time we can simply copy paste data from here so first of all this is your post title your blog post title so you'll paste in your title over here and after that whatever your content is you will paste it at the bottom so for example if i just paste in this content like this this is simple text so if you want to install this you can just type it like this you don't have to do anything i'll just paste in this simple text then after that you can also block code something you can add some more things like this i'll add again some simple text and i'll show you how to make it block code so i'll select this thing and after that to make it block code you'll select this option you'll change the style to quote and now as you can see this style is changed you can also write about the citation for example this is okay like this so this is how it works pretty easy you just add your text you just add your content at the bottom if you want to add any image you can click on this plus button search for image and you can also add image so just like you know we have seen how elementor works this is also a very similar thing you add a widget click on this plus button search for that widget for example you can search for image widget gallery widget and you can use that thing now once you have created your blog post now at the right hand side you have to click on post and you have to give it a category and remember that this category is totally different from that you know property category or that listing category this is related to block that was related to category or relate that category was related to different listings different properties now maybe this blog is talking or maybe let's let's do one thing let's just give it a category of news click on add new category okay then you can also give it some featured image like this as you can see so you can upload some image as your featured image let me just select this one and click on set featured image now once you do that you can simply go ahead and publish this post and with this you have successfully created your first blog post you can click on this view post and you can see and you can view your blog post okay as you can see this is how it looks everything is working properly now again let's come back to our dashboard now we have created a blog post now we also need to create a page wherein we can showcase all these blog posts like we have created over here this is our latest news page or our blog page so to do this thing again you come back to this page create a new page for this so click on pages and click on add new now let's give it a title of blog or news or articles whatever you want and after that just click on publish and you can publish this page and just like we you know did with the home page we have to set this page as our blog page so to do that thing you again have to hover over settings and click on reading and now this time under block page or post page you have to select this blog and click on save changes now that has become your blog page now let's create our pricing plan page okay a different page a dedicated page for pricing plans if you click on this as you can see this is how it looks like so to do this thing again click on pages add a new page so click on this plus button and click on this add new button give it any title so in this case i'll just give it a title of pricing and after that you can you can do one thing you can disable breadcrumb if you want but we don't want to do that because we do have title over here so we don't want to do that we just want to make sure that we have changed the template to elementor full width after that publish this page and now we can start editing this with elementor so click on this button edit with elementor now just like we did with the home page you just have to click on this plus button to add a new row select a single column and inside this thing we need to add this element we have used this element in our page as well so you just need to search for this element which is your pricing table okay which is over here price table drag and drop it over here you already have all these things you just need to change the header this is our header and you can also add some title or some subtext and after that you can select how many columns you want how many posts per page and under label we'll type in choose plan okay like this now you can also change the style of this thing so go to style and change heading tag to h2 like this and to add some space at top and bottom click on this edit section six dots icon go to go to advanced add 80 pixels or 100 pixels padding top and bottom you can also make it full width and disable or you can uh you know remove the gap so column gap you can make it no gap after that just go ahead and update this page and with this you have also created your pricing page let's again come back to our dashboard and create our contact page so again similarly to create your contact page click on pages click on add new now let's give it a title of contact so type in contact over here let me open that page over here so this is our contact page as you can see here also we have our title so i don't want to disable breadcrumb i just want to make sure that this is also full width so we'll select elementor full width and click on publish now let's again click on edit with elementor and design this page using elementor page builder now this time we need two different columns so here as you can see at the left column we have this form at the right hand side we have this text so for this we'll click on this plus button and instead of single column we'll select two columns okay now the left hand side we want to add this form so if you click on this nine dots icon go to elements and search for email element or maybe it is called contact form elements or here as you can see contact form you can drag and drop it over here now this is how it will look by default you can give some form title you can also give some button title so we don't have any form title but we do have some text on the button here it says submit request so let's type in that thing submit request right now let's add different items so click on add item first field we have this name field so i'll copy this name paste it under label under field id also you can type in name now under placeholder we don't have any placeholder here so i'll just leave it as it is now fill type this is text and this is 50 as you can see this is not 100 like this subject this is 50 we have two options in the same row so instead of column with 100 i'll make it 50. now as you can see this is how it looks like now if you want to make it required you can make it required so people have to fill in their name to you know to contact us or to fill in this form to submit requests so they must fill in this thing so if you want you can make it required now let's add another one this time it is email so i'll give it email label also and field id also now in the field type we have to select email and this time also again make sure it is 50 and we have to make sure that this is required email is required then we have subject so i'll copy this thing add item subject and this is also field type we don't need to change this thing and this is 100 person so we again don't need to change that thing now we have message add item okay label and field id is message under field type we have to select this option text area now i want to do one thing i want to fix this thing if you see there's no space between these two options these two you know text boxes so we can do one thing we can go to style and we can add some margin now i don't want to add margin from all side i just want to add margin at the right hand side so under margin first dealing this thing and at the right hand side we can add maybe 20 pixels margin and now as you can see we have some space over here so this is how it works now we can also do some changes with the text with the heading if you want but i don't want to do that you can come back to element and just make sure under email under two option you have your own personal email address you can also add a cc and bcc if you want now this is completed now the right hand side first of all we have this text so we'll copy it from here come back to this option search for heading okay this is heading just bring it over here paste in this text now if you want to style this thing go to style first of all we want to change this text color to this color let me get this color code okay this is the color code we'll come over here paste in this color code okay this is the one and i'll do one thing i'll save this color code so in future if you're gonna use this same color you can simply select that thing so click on this plus button and you can give it any title click on create now next time when you want to make anything this color you don't have to type in this color code you just have to click on this globe icon and you'll see this option that you have created now for typography i want to change this font family by default it is roboto i want to make it something else so i'll select this option i'll make it just so first click on this option so that you get this drop down and search for just okay now as you can see this is the font family that is used throughout our website we also want to make it bolder so we'll increase the weight to 700 okay then after that we have this text i'll simply copy it from here come back to this option and for this we want to use this text editor drag and drop it over here at the bottom paste in your text now let's style it so go to style again for this also we have to change the text color so let me see what i think it is it is the same color that you that we have used at top so we'll come over here this time we can select this globe icon and select this color now as you can see color change now the typography i think typography looks good this style is looking good so we don't need to change this thing now below this thing we have this icon box so for that we'll come back to elements and we'll search for icon box okay here it is icon box drag and drop it over here now first of all you need to select your icon so we want to use select this home icon so again i would recommend you to use this recital icon these are much better icons so you can search for home icon let's search for home here as you can see select this click on insert this icon is as you can see change then our title is reach us so we'll type in this thing under title and after that we have our home address or office address or your company address okay now we also need to change the style first of all we want this icon position at left so under icon position you can make it left now as you can see this is how it will look like now let's style this thing so go to style now first of all under color will again select the same color if you want you can select some other color this is for icon by the way so i'll select maybe this color for icon okay now i also want to increase some spacing so spacing between icon and this text this space so instead of 15 i'll make it 25 okay just a little bit and i'll decrease the size of this icon and make it 35 now let's do the same thing with content so select this content you can change the alignment first of all under vertical align you can make it middle so everything as you can see the icon is now aligned in middle now you can also change the text color so again let me just select this color and i want to change this typography so i want to change the size and all first of all font family will be just so we can again search for this font family and we can decrease the size okay this is pretty big i want to make it smaller i'll make it 15 pixels and 600 weight is fine then we have this description text for this also i'll select the same color now change the typography decrease the size to 16 pixels now once this is done you can again update this page now again to create the next one to create your mail option you don't have to do it from scratch you can simply right click on this and duplicate this thing multiple times so it will save you a lot of time now select the second one instead of this search for email or envelope icon so let me select this email icon insert it title is dropper mail so as you can see now it becomes very easy you don't have to redesign this thing designing is already done for you just need to change the content similarly you can do this for the third one as well now let's add some spacing at top and bottom so we'll select the six dots icon make it full width you can also you know remove the gap column gap if you want i think in this case it is not required so maybe i'll keep it at default we can also add some space at top and bottom so we are adding 80 pixels top and bottom let's see how it looks okay for this we don't want to make it full width i guess boxed is fine all right so this is how it is looking as you can see once it is completed you can update this page and with this you have also created your home page again come back to your dashboard is now let's do one thing let's create a menu so if you come back to your website let me show you this thing we have most of the things but our menu is you know not very good it is just adding all the link all the different pages link on this menu we don't want all these different extra pages we want to create our own custom menu so for that you have to again hover over appearance this time and now select menus under appearance now let's create a new menu instead of this menu name menu one i'll name it main menu not really important you can name it anything you want i just want to name it main menu now whatever links you want you can have that thing so i don't want this ad listing thing because we already have this ad property so i don't want this link over here i also don't want this cart icon or cart link don't own the checkout page link compare page yeah we can have the compare page come and i'll change the title to compare we do we also want the contact page we don't want the dashboard link because as you can see we already have this link over here under this option then we also don't want this my account link pricing page you can have this pricing plans and we don't want the shop page so only four or five links click on create menu again if you come back to this page and refresh it now as you can see we have a much better and nicer looking menu now we have only four five links and this is how you create your menu now let's see how we can create a sidebars so if you see this option now here as you can see we don't have any option to contact the listing owner so person a visitor can see this listing but they don't have any option to contact this owner or this person who has submitted their listing so we need to do something about that thing similarly for our you know for different pages for blog page also we don't have any particular sidebar for listing page if you open okay let's add one more link over here under menu we want to add this listing link wherein we can see all the listings in one place so for that you have to go to custom link add your website link and after that just type in listing i think it is listings so you can type in your website name forward slash listings and under this option i'll type in all properties okay under link text and click on add to menu let's bring it at top over here click on save menu let's see whether this is working or not go to home page okay we have all properties if i click on this thing now you also as you can see we don't have any sidebar or we don't have we do have a site but we don't have any widget in this sidebar so let's add these things so to add different widgets you have to go under appearance you have to click on widgets now let's start with this option listing sidebar under this option we have to add recycle listing search let me show you this thing over here if i go with this option grid with sidebar now as you can see we want this search option uh basically filteration option so people can filter if they want to see only apartments they can select apartments and click on search so this will filter only apartments similarly if they want to filter maybe you know property status which are only for sale they can select sale so this filter option so for this we have to select uh we have to select this widget residual listing search which is over here as you can see recycle listing search select this option make sure listing sidebar is selected click on add widget okay now i think we have to first click on done and refresh it after that we'll see now let's see again as you can see now whatever you want you can tick mark this thing you can also give some title and we also want to enable bedroom now click on save let's again come over here refresh it and now as you can see we have this option so we have enabled type status bedroom features as you can see location type status features bedrooms we have enabled all these things if you don't want any location option given you can untick that option as well okay now let's see single page option so let me open a single page single listing now in a single listing also we want to add few widgets so here for example if i open this one now here as you can see we have this contact widget and then after that we also have the calculate widget and then we also have some featured property widgets so you can add these widgets from here under listing single so first of all search for inquiry widget you'll see that at the bottom recito enquiry widget which is so here select this option and select single listing listing single now click on add widget okay then after that we have this calculator okay so you can again go at the bottom and search for calculation recycle calculation here it is as you can see recital calculation widget select this thing click on add widget now again if you want you can change some text from here and finally at the bottom we have the featured property so again you can search for the site of featured properties here is as you can see okay now how many properties featured properties you want to display you can increase or decrease this number once it is done again you can come back to this page and refresh it now if you scroll down at the bottom here as you can see okay so it looks like we need to change this code or we need to delete this shortcode for this to work so let's try it again delete this shortcut make sure this is empty click on save let's come over here try it again refresh this page and now as you can see this is working so if now if a visitor comes to your website if they wanna you know if they want to contact this person who has posted this listing they can you know enter their details and click on send message and after that this message this person who has you know posted this listing will get some notification and they will see that message under this option under this message inbox so this is how it will work and this is calculation interest space calculation whatever it is and after that we also have featured properties right now we don't have any properties set as feature properties if you want to set them as your featured properties you can do it from dashboard as well i think let's see if you go to my listing if you want to make it feature just click on this star it will be okay removed from feature it says so you just click on that star icon and after that this property will be listed in your featured properties okay so the reason it is not showing over here is because this property is already open if you go to some other property then this property will show at the right hand side under featured properties like it is showing over here okay so this is how it works now we need to create one more widget and this is for blog so if you open the blog page like a single block page you will see this sidebar widgets for example if i open a single blog post now here as you can see at the right hand side we have this sidebar so we can add these widgets as well now for that we'll add them under block sidebar first of all we do want this option search bar but after that we don't want these options so i'll delete recent post will also delete recent comments archives we'll keep uh these categories but we'll add few more things so instead of that regular recent post we want this one created by this recital theme recent post here it is select this option select block sidebar click on add widget and you can give some titles so here let's add this as a title now click on save you can bring it over here and at the bottom we have also added this tag cloud so you can again search for that option under t which is so here click on add widget all right now if you go to your blog page here as you can see this is working all right now again let's come back to our homepage now finally we need to do one more thing we have not yet created our footer so if you see at the bottom this is our photo now this footer is uh like it is not created using widgets this is a custom footer so let me show you how you can create this custom footer so to do that thing you come back to a dashboard and you use this option templates option so under templates you first of all just click on templates now here we need to create a new template so click on add new and from here you can select page you can select section i would recommend you to select this page option okay select page and under this option we can give it a title of footer okay or footer one footer two something like that and after that you can click on create template now once you click on create template first of all we need to change the layout we need to change the template to elementor full width so for that let's let's actually do one thing let's come back first let's publish this page and again come back and click on save templates here you see this option edit this option first we need to change few things from here change this thing to elementor full width and update this page now let's try it again click on edit with elementor and now as you can see we have this full width option now as you can see in this footer we also have this thing included in footer so first we'll add this call to action section and after that we'll create a footer section so for that let's add a new column now again we need two different columns as you can see at the left hand side we have this text at the right hand side we have this call to action or we have this simple button so for that we'll add two columns at the left hand side first we have this option this text i'll copy it from here and for this we'll use the heading element so search for heading drag and drop it over here paste in or just type in whatever heading you want now go to style and for this again we'll change this color to here we have used white color now i'll i'll not to change the color now once we add this background color this blue background color after that we can change the color because if i show you this thing if you change the color to white as you can see this will disappear so we'll change the color later on let it be as it is for now change the topography so instead of roboto we'll change this thing to jost select this option we can also change the size to 24 pixel and you can make it even more bolder at 700 okay weight 700 you can also add some line height uh instead of em i'll add pixel 30 pixels line add just some space at top and bottom then we have this text copy it come back to this option you can use this text editor for this paste in the text all right again for this also we'll change the color later on let it be as it is for now now let's use this button okay this button or maybe before that let's add that background color okay so let's use this option click on this edit section now first of all over here we need to do one thing we need to change the column gap to wide okay just so that we can increase the gap between these two things okay so you can change the column weight to a column gap to wide and after that we can align everything in middle so vertical align you can select middle and you can stretch this section now let's add some padding at top and bottom so top and bottom will add just a little bit 30 pixels both from top and bottom and let's change the background color so select this background type add some color let's grab this color code okay it is this one one two six six e3 now let's select this text change the color to white select this one as well change the color to white now let's add that butter in the right hand side so for that we'll search for we'll use this button element drag and drop it over here first of all button text here says sign up today so we'll type in that thing under this button text you can also link this thing with something so you can link it with your dashboard page with your account page all those pages so maybe let's link it with our dashboard page so if you just search for dashboard you will see this option click on dashboard and it will give you this dashboard page link now let's align this thing this button at the right hand side so select this right alignment because as you can see this time this over here the button is aligned at right now let's style it so go to style first of all you can change the typography if you want from here if you want you can just leave it as it is then after that you can also change some text color and all these things so here the text color is this gray color and background color is white so come over here select some other text color like this and background color make it white like this okay now as you can see now let's also increase the size so for that we'll use this padding option for top and bottom we'll add 25 and for left and right we'll add 50 pixels and now as you can see size is increased we'll also make it circular as you can see like this rounded so under body radius type in 50 now as you can see it is rounded let me change the color text color make it more darker now we need to do one more thing we need to add this shadow so for that you will use this option box shadow as you can see shadow is added but we need to make it like this uh i don't want it blur so i'll make it zero but spread i want to spread it at five and i want to change this color to white let's let's see and we have changed the color to white but we also need to make it transparent so at 0.2 so you see this option at the bottom use this thing until you get 0.2 over here and now as you can see we have this design okay obviously if you want some other design you can have that thing as well now you can update it then we have this section footer section for that we'll add another row now this time we need to add few more columns i'll add maybe four columns okay so i'll add four columns over here now here you can see we have added four columns but each column is 25 percentage we want to change this thing for first column i want to make it maybe 40 percentage okay a little bit bigger and for these three you can make it 20. okay so the total is just make sure that total is 100 okay this one as well so this is a little bit bigger and these are smaller now in this bigger one or in this wider one first we have this icon first we have this logo and after that we have some text basically your address so to add this image you can come back to this option and for this we'll search for image option drag and drop it over here and you can upload your own logo obviously if you have or if you want you can use this you know demo logo if you want so you can just use this logo insert media now because it is white we cannot see that so let's again do this thing let's first change the background color and after that we can proceed further so let me copy this background color again use this option edit section and first of all let's make it wider okay column gap will be wide and after that we want to make sure that this section is also stretched let's add some padding at top and bottom maybe 30 pixels and now we can change the background color as well okay now for this image we don't want this big so we can change the size as you can see right now it is large size you can even change the size you can have a custom size if you want so for that you can come to this style option and you can change the width to 220 pixels select px from here okay like this and let's make it left align then after that we have some text so i'll just copy it like this now for this we'll use the text element so drag and drop this text editor over here type in your text like this now go to style just change the color to white and you can do few more things if you want obviously you can change the size and all so let's do actually one thing let's change the size to 14 pixels reduce the size a little bit now let's create these three sections so first of all we want this heading at top copy it and i i also want to do one thing i want to change this font family to newly so if you search for mvuli okay as you can see this is the one muleish this is the one that we want to use now first for this section first we need heading so we'll drag and drop this heading here as you can see it says navigations of whatever you want now i just want to display my menus over here so if you want you can create multiple menus for this option make sure it is left aligned first of all let's design this thing so color is white and after that typography font family it will be just so let's change that thing size will be 17 pixels will make it 500 weight and you can also add some line height if you want so you can add 30 pixels line height okay like this and below this thing you can add these kind of links now for this we have used icon list let me again come back to this option for this we have used icon list so if you search for icon list this is the one as you can see you can drag and drop it over here we don't want to display icons so i'll delete these icons from here click on this just pin icon we don't want any icons we just want links okay now whatever you want for example here the first text says about us as you can see so i'll copy the text under text i'll type in about us and under link you can get you can link it with some page you can link it with some you know something like that so maybe i want to link it with home page or maybe contact page or if you have created about page then you can also link it with your about page similarly second link is facts page contact page blog page you can add these kind of links okay i want to link it with blog page so under link if you just search for blog you'll get link to your blog page similarly let's add contact page and we'll search for contact under link will get a link for that okay contacts page now here you can see this is how it looks like again go to style let's do some more changes over here now on the space between we can increase this thing to 10 so that we have no decent amount of space between these options and now we can also change the style change the color first of all to white and also change this size to 14 a little bit smaller okay and again for this also if you want you can use this uh you can use that muleish font family okay now similarly for this also you can do this same thing you can follow the same process you can just add heading both the at these places and after that you can also add your navigation okay and after that you can now simply update this page now let's see how it looks on mobile phone first of all okay everything looks good i guess just make sure that this button is aligned in center for mobile phone okay again let's come back so everything looks good we can just update this page and with this you have also completed your footer now i'll show you how this footer will be used on your website because right now if you go and refresh your website you won't see this footer applied over here i'll show you how that is done so for that again come back to your dashboard cut this page come back to your dashboard now only two final things are left and for that you will first of all use this option beside option so click on this option there are several options over here we'll see them if you want to enable pre-loader so while your website is loading it will have some animation i don't recommend that that slows your website so i don't recommend that if you want sticky header so you can have that thing we already have that as you can see when you scroll down your header is you know present with you it is fixed at top so you can make it on and you can also have back to top button right now we don't have any button back to top for example here as you can see we have this button so once you enable that you will see that button as well now click on save changes now for color option this is your primary color you can change this thing instead of this red color you can have some other color as your primary color so maybe you can have this color this blue color as your primary color if you want okay then typography you can change this thing header also this is the default header as you can see if you want to make it transparent header you can change the style of this header you can make it on this will become transparent okay your header will be transparent now if i refresh it as you can see you have a transparent header i don't want this thing you can also change the header layout instead of style one you can select style two and for subtitle for your blog page see our latest articles and blogs or and news you can change that thing if you go to your blog page as you can see this is your subtitle you can change it if you want you can also change the background color okay like this as you can see this is the background color that you have if you want you can change this background color for the blog page we have the list if you go to blog page we have the list style as you can see you can change this thing to grid style click on save refresh this page again as i said earlier because of caching you might need to refresh it few times so after you refresh it sometimes you will see that option we also want to make sure everything is enabled under footer now we want to make it on a footer element and we have to select that element or page that you have created if you remember footer okay and you can also change your copyright text instead of recital i'll type in maybe blog dude okay now click on save then now if you want to disable anything indeed first of all let's let me just refresh this page and now as you can see once we refresh it now it is great style and you also have this footer now i was talking about this listing single if you open a single listing page let's go to all properties open this listing now here as you can see first of all if you don't want this title at top you can make it off as you can see this top title you can make it off i don't think that is required and if you want to sli if you want slider you can on you can make it on if you don't want breadcrumb you can make that thing off as well and after that you have few things that you want or if you want to disable that for example we have title blog then we have additional then we have descriptions so if you scroll down we have as you can see title blog then we have additional then we have description then property video location so maybe if you don't want maybe video option you can disable this video option and click on save changes okay now as you can see once we refresh it that video option is gone and we also also that breadcrumb and title section is also gone so as you can see this is how it works now style looks a little bit different and this i think looks much better much cleaner design again let's come back to our settings so similarly if you want to enable or disable any section you can have that now for listing archive page if you want you can change the title and subtitle rest everything i think is good we have one more setting that we need to do and that is related to listing so under listing settings click on this option under listings we have settings now from here make sure you have enabled this thing if you want to change the currency symbol if you have changed your currency in woocommerce then here also you should change that symbol now from here you can also select what all share options you want so maybe i also want whatsapp and telegram so i can enable and click on save now for map you can select zoom level you can select default center latitude and longitude and after that under listing default listing style as you can see is grid you can change this thing you can make it list style as well okay now let's see whether that compare option is working or not so again if you come back to this page if you just click on add to compare this thing will be added to your compare list as you can see like this okay now it is working now because we have only one once we create multiple listings and once you add all those listings in your compare list it will show different let me show you that thing over here if i open different listings let's go to listing page let me add maybe this in my comparison so if i open this thing click on add to compare okay now again i'll come back to this list and also add this property click on add to compare and now as you can see it will compare both these properties what is the area bedroom bathroom all these things it will compare so this is also working also if somebody wants to bookmark any property if i open this property if somebody wants to bookmark this property they can click on save this property will be bookmarked if they go to their dashboard now they can uh they can see all this thing as you can see one bookmark property if they click on bookmark listing they can see this listing over here okay and all this option if there if a user wants to change the password or log out they can do these things from here all right okay so with this this tutorial is now 100 completed i hope you guys find this tutorial helpful if you find it helpful if you want to watch more useful tutorials like this one make sure to subscribe and click on the bell icon so that you don't miss any future notifications now if you like this video give a thumbs up to this video share it with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any suggestions for me you can always leave them in the comments section below and finally thanks a lot for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 52,180

Keywords: real estate, real estate website, make a website, create a website, build a website, how to make real estate website, how to make real estate website in wordpress, how to make website like magicbricks, how to make a website like zillow, wordpress real estate website, wordpress real estate website tutorial, wordpress real estate plugin, real estate website wordpress, real estate wordpress website, houzez wordpress theme tutorial, nayyar shaikh, wordpress, resido

Id: dYWBq5coUvc

Length: 124min 55sec (7495 seconds)

Published: Mon Jul 19 2021