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

I'll teach you how to create a modern flexible and a professional Real Estate website like magic bricks 99acres 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 the website is really beautiful as you can see on his screen second of all it has the submit property feature which means that anyone can come to your website whether it's agent some agency buyer seller they can come to your website and they can submit their property listings now you can enable them to submit the property for free or if you want you can even charge some money for that I'll show you how to do all these settings we also have the compare property features wherein a person can Compass several properties at the same time another great thing is that everything happens on the front end like a person can simply come to your website and submit the property from the front end they don't have to go to the back end to to do that and this makes your website much more secure your customers including the real estate agent agencies buyers and sellers everyone when they create an account with your website they will get a front-end dashboard from where they can manage their properties we also have a unique feature of CRM which is customer relationship management I'll tell you more about this feature later on in this video and many more features are included in this website like inbuilt search Builder front-end dashboard customer insight and statistics Etc will see all these features later on in this video now before you proceed further let me first show you a very quick demo of the website that we'll be creating in this video if you follow my step-by-step tutorial first of all this is the home page now in the home page you can see as I said earlier we have a create listing website create listing feature so if somebody comes whether it's a Lister seller bio you know agency or some agent they can simply click on this button create a listing and then they can follow this step they can enter the property title content what kind of properties there is apartment office plot and whether they want to sell this or they want to rent this thing then they can also add some label then after that they can add their pricing and so on and in The Next Step they will have to add few more details now once they complete all these things they can click on submit and they can submit the property and this property will start displaying on your website and this is the front-end dashboard that I was talking about you can see at the left hand side we have the CRM we have the board Whenever there is any leads for the customer whether Whenever there is any lead for any any particular property this agent or the seller can see that thing right now we don't have any lead that is the reason why we don't see anything over here but later on in this video we'll see how a lead is generated and how you can follow up with this lead then we have the customer inside whenever you can see all these statistics like how many views and unique views and all those things you got on your property listings then we have the properties option so whatever properties that you have submitted on this website if you want to make any changes on those properties for example if this property is sold you know so you can do one thing you can edit this thing and or you can put this thing on hold or you can edit this and you can change the status of this property or if you want to do some changes if you want to add some media file or if you want to add some features for example if you want to add or remove any features you can do that so many more options are given over here similarly if you want you can favorite your properties you can see the invoices and so on so basically this is the front-end dashboard this dashboard is available both for your customers and for your sellers so for both for Sellers and your buyers and even for your agents and agencies now let's again come back to the home page now the home page first of all if you see in the header we have this thing at the left hand side we have this logo I'll show you how we can remove this thing and add your old logo then in the middle we have this menu bar we you can add you know sub menus as well then we have the create listing and we have the dashboard option okay so once you click on this thing you can go to your dashboard you can go to properties and so on we have seen these things then we have the first section in this section you can see we have a title a subtitle then we have this search bar now we have our inbuilt search bar builder in this theme so whatever option you want or however search bar you want to build you can build that thing for example I've you know I've created this search but I have added two different tabs for rent and for sale and if somebody wants they can see they can select these options they can select the location type of property that they want to rent and for sale for rent they can select all these things and they can click on search and they will see all the properties that filter these options then if you scroll down we have the next option the this is your location option so if you are looking for properties in specific location maybe only in Miami so you can click on Miami and now you will see only those properties though which are listed in Miami okay so this is how it works this is the location option then we have the counter option how many listings you have listed on your website listings for rent how many properties sold affiliate partners and so on then next option is this slider you can see this is a slider you can click on press you can press this previous or next option and you can see all these property listings now if you click on any single property for example if you click on this property this is how the single property listing will look like now there are many different in fact six different designs available for a single property listing this is just one of those if you in fact click on this option listings option you can see listing one listing two listing three listing four listing five six six different options are given to you even for a single property if you click on property version one as you can see this is also single property listing this is how a single property listing will look like this is version one if you want to see the version 2 you can click on version two this is your version two you can see and if you want to see the version 3 this is how the third version will look like you know at the right hand side we have this you know fixed sidebar and then at the left hand side we have all these options so there are several options available several design aspects available you know you can see for single property and also for property archive page so first you will see all the images related to this property then if you scroll down you can see the title of the property whether it is for sale or for rent what is the address for this property what type of property it is how many bedrooms bathrooms garage and what is the property area no complete size of the property or if there is any property ID or Rara number in India we have reader number you can add the radar number of property ID something like this when was this property built when is the position you can add all those details over here then we have the description about the property you know location of the property where this property is located you can you know display this in exact Google map location okay the exact location of this property then if you scroll down we have some more details related to the property you can even add some additional details like what is the deposit amount what is the pool size what all what all are the different amenities available features available you can also add the mortgage calculator somebody will enter the price down what is the down payment they will making and once they click on calculate they can see the per month they payment they have to make then what is the floor plan you can also add these kind of floor plans okay so here as you can see this is one floor plan this is another for floor plan you can add these things and if you want to tour this property you can schedule or you can you can schedule a tour you can select the person whether it is inbuilt tour or in video chat or two you can select this thing when you will be visiting you can select the date time everything and you can click your click on this button submitted to list then if there is any video related to the property or if there is any 360 degree virtual virtual tour about the property you can add all these details over here okay work score also can be added so what is the walk score so what all are the nearby places you know you can add all these things over here so you can see so what educational institution are nearby Health and Medical Institution real estate institution then you can see who is the person who has listed the property this could be some seller or this could be some agent or agency now if you want to leave any review for this property you can even leave a review and if you want to see similar properties you can see this thing then at the right hand side in the sidebar if you want to schedule or schedule a tour you can select this thing again you can fill in the form or if you want to request more information or if you want to connect with this agent or this seller you can simply fill in this form and click on send message or you can even contact them or connect with them through WhatsApp so this was the single property listing if you search for any property you will be redirected to this search page here as you can see this is how the search page will look like you can filter the different results for example if you have a certain budget you can select the price range I know according to your budget you can select this thing now it will filter only properties under 1 million dollars you can see now only properties under one million dollar in fact if you want you can even go lower maybe under 289 000 okay now as you can see 250 000 property Studio property you can see all these things or if you want a property only in maybe Miami or any other specific location and your budget is this so you can add all your filtration option and filter properties then if you want to see the property archive page with sidebar without sidebar there's several again many different features many different styles available for that then with this we'll also see how to create the about page contact page Blog Page we'll see how to create these Pages as well okay so if somebody wants to contact you they can go to this page they can fill in the form and they can simply contact you we'll also see how to create a blog page so through Blog Page Blog Page will basically help you to get some additional traffic through Google search results so we'll see how to create these kind of blog posts as well and this website is also 100 mobile and tablet friendly so you can see this is how this website will look in a mobile phone if you open this website in a mobile phone menu will come over here at the left hand side you can click on this thing your user icon will come over here at the right hand side then everything will adjust according to the you know device whatever device you're using mobile phone tablet laptop everything will fix according to that so here as you can see this is how it will look like so this is 100 mobile and tablet friendly as well now there are many more features available in this website but I don't want to make this introduction very lengthy now I hope you guys have a better idea about the website that we'll be creating now if you like this website and if you want to create this website make sure to watch the complete tutorial now before we proceed further make sure to subscribe to my channel 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 or is now to create any kind of website whether it's an e-commerce website or Real Estate website a simple blog 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 google.com amazon.com 99acres.com housing.com these things are different domain names so we'll 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 hosting is basically a computer or a server wherein your entire website is saved so if you see this website from top to bottom all the different pages all the different listings database this entire website is saved in a server and that server 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 life because your server 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 your website speed your website's performance the user experience on your website your website security and even your website's ranking in Google and Bing search results is totally dependent on your hosting so if you have selected a good and reliable hosting your website Speed and Performance will be really amazing really fast the user experience on your website will be pretty good and with that your website will be very secure for anybody to attack or hack your website it will be almost impossible and most importantly your website will get better ranking in different search results and obviously if you select a cheap crappy hosting everything will be opposite of that 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 but you don't have to worry about that you can simply do one thing open in a new tab and type in blogdoot.com hostinger in fact you don't even have to type in this thing this link is also given to you in the video description below so you can simply click on that link and you should be now redirected to this page now this is the hosting that will be using hostinjure and we are not using the regular web hosting we are using Wordpress hosting because we'll be using the WordPress CMS WordPress platform to build our website we want a hosting that is specifically built for WordPress hosting for WordPress websites so that is the reason why we are selecting WordPress hosting so make sure you select WordPress from Top okay so that you come to Wordpress hosting option or under WordPress or under hosting you can see okay they have removed this thing they have uh you know they have brought it over here so make sure you click on WordPress you're under WordPress hosting plan and if you scroll down you can see they have great results they have great reviews and ratings on trustpilot then if you scroll down you can see they have three different plans available over here premium web hosting business web hosting and Cloud startup and you must sum in some cases you might see four different top options or three different options basically for most of you guys I would recommend you to select the most popular option this is the best option that you can start with it is very affordable you can see for just four dollars per month you can create your first website and if you scroll down you can see all the different features available with this hosting with this particular hosting if you select this business WordPress hosting web hosting you can create up to 100 websites so today you're creating this Real Estate website tomorrow maybe if you want to create another website maybe another Real Estate website or maybe another e-commerce website or a Blog you don't have to purchase a new hosting you can host or you can create up to 100 websites in one single hosting so this is really great with that we have unlimited bandwidth so there is no upper limit on data transfer for this website then we get 200 GBS of SSD storage free domain name so you don't have to purchase a domain name domain name is also free don't have to purchase an SSL certificate SSL certificate is also free in fact we have unlimited SSL certificates now if you come to My Demo so you can see we have this lock pad over here if you click on this thing it says connection is secure so this is really important this makes your website more secure then if you scroll down for security reasons we have cloudflare CDN you know inbuilt on a hosting we have malware scanner for business you get free business email account free migration and because this is a WordPress hosting we get you know WordPress related options so we have manage WordPress WordPress acceleration multi-site WordPress and so many different options are available so you can just select this option click on add to cart and you can select this option if you want you can even go with Cloud startup or if you want you can even start with premium web hosting the basic plan any plan you select doesn't matter you can still create this website but this is the recommended plan you know business web hosting click on add to cart button now once you click on this button you will now be redirected to this page and here you can see what plan you have selected now if you scroll down you can see we have different options over here first of all we have to choose a period for how long do you want to purchase this hosting so if you purchase for one month you have to pay 16 per month which is very expensive we don't want that if you purchase for one year you will have to pay just five dollars per month okay which is great but I would recommend you to select this four years plan 48 months plan because with this plan you can get this hosting for just 3.99 per month so for just four dollars per month you can get your hosting and you're getting this discount 75 discount for four complete years and even after four years when your plan expires after four years and you have to renew you don't have to pay 16 even the renewal price is discounted you can see plan renews at nine dollars per month in 2027 so this is really great if you want to get the best discount possible make sure you go with the highest option available or obviously if you want you can even go with two years or one year plan it all depends on you so based on your budget you can select any options obviously again I'm saying if you're on better discount for long term go with the highest plan available four years or two years or at least go with one year then if you scroll and now you have to enter your email address so under create your account just enter your email address and they will create an account for you with the hostinger in our control panel just make sure whatever email address you enter here make sure you remember this email address and make sure you have access to this email address because they will create an account for you with this email address now in the next step when once we complete the payment in the next step you'll have to enter the password so this is the email and in The Next Step will enter the password you have to remember both this email and password so whenever you want to log into your host Ranger control panel this is the email and password which is the next step you will have to enter this email and password now for payment you can make payment through credit card PayPal Google pay alipay and if you're watching this video from some other country you will get even more payment options like UPI net banking and so on now over here you can click on have a coupon code and you can enter a coupon code you will get even more discount on right now you have to pay 70 dollars but you enter my coupon code and a double y a r Nair n a double y a r click on apply now you'll see you will get 10 percent more discount now you just have to pay 63 dollars so now you can select this option and click on submit secure payment all right so now once you click on that button you will see this page and once your payment is successful you will get this message your payment is successful and now you'll automatically be redirected to a new page now in this page you have to set your password so as I said earlier in the previous step we have we have set our email address and in this step we have to set some password for our account and again I'm saying make sure you remember that email and this password because next time whenever you want to log into your Edge panel you will have to enter this email and password also make sure this is a strong password you have used numbers letters symbols special characters so that your website is secure your hosting is secure nobody can log into your account so make sure you have a strong password now once you enter the password click on this confirm button and now now you will be redirected to this page this is just a welcome page you don't have to do anything over here this is just to welcome you now you will see the start now button click on this button and a new process will start for you first of all they will ask you a few questions who you're creating this website for for yourself for a client for a company you work for us for somebody else I'm selecting myself you can select any option it doesn't matter this is just a simple survey then what kind of website you're creating a Business website blog portfolio online store again does not matter what you select options will be same I'm selecting a business similarly they will ask you a few more questions whether you're creating you know what are your professional web Creator so on so you can just enter any options over here and if you can proceed further or if you want to skip this entire process if you want to skip this survey there is this skip link given in at the bottom of the screen click on that link and this process will be skipped for you now you'll have to select what platform you want to use WordPress woocommerce some other platform or if you want you can even migrate your website now as I said your earlier we will be using Wordpress CMS WordPress platform so make sure you click on this select button under WordPress so under WordPress you see the select button click on that and now you'll have to enter some email and password for your WordPress account if you want you can enter the same email and password over here as well and again make sure to remember this email and password as well whenever you want to log into your WordPress account or whenever you want to log into your WordPress website or your website's backend you will have to enter this email and password so enter some email and password and click on continue now once you click on continue in The Next Step they will recommend you few themes or in some cases they will recommend you few templates we are not interested in these themes and templates again we want to skip this process you will you will see this skip Link at the bottom click on that link and skip this process as well now you'll have to select your domain name as I said earlier with this theme with this plan that you have selected you get a free domain name you don't have to purchase a domain name you get for free so if you want to register your free domain name or if you want to get your free domain name you can simply select this option the first option you see claim of Freedom domain under that you select you click on the select button and type in whatever domain name you want to register for example if I want to register this domain name.co.in so I'll type in here and at the right hand side I can select.co.teen.com.info.net there are many different domain name extensions are given to you whatever domain name extension you want you can select that and after that click on search now this will search whether this domain is available or not if it is available it will give you this message domain is available now you can click on continue and proceed further so this is for those of you who want to register a new domain name who want to claim a free domain name now many times it happens that people already have a domain name registered on GoDaddy name chip some other website because they want their domain name registered so that some other person cannot register that domain name so if you already have a domain name and if you want to use that domain name with host Ranger you can select the third option use an existing domain click on this select button under use an existing domain and now you can type in that domain name that we have that you already have registered on some other website for example there is this domain name blogdoor that I have registered on GoDaddy maybe I want to use this domain name with host changes so I can type in this domain and after that I can click on continue and the next step this will tell you where this domain name is hosted so in this case God ID and this will also tell you your name servers you don't have to do anything over here again just click on this continue button then in this step in the final step this will show you your current data center location if you want you can choose you can change that because I'm from India for me Asia data center location is selected if you want you can select even some other data center location like some data center location or some server location in Europe in USA whatever you want and once you do that thing after that you can just click on this finish setup button and now WordPress has started installing on your domain name this is a very small process it will hardly take two or three minutes so we can wait for some time all right so now as you can see this process in a hundred percent completed once it is completed you will see this page you're almost there you don't have to do anything over here you will see this host ninja logo at top just click on this host ninja logo and now you'll be redirected to your Edge panel okay now this is the place from where you will be controlling your hosting and whenever you want to log into this page or whenever you want to come to this page you can simply type in this thing hpanel.hostinger.com enter the email and password and you will be logged into your website now over here if you click on websites you will see I have selected block dude this domain name so that is the reason why I can see this domain name over here what you have to do is you have to now click on manage and after that click on WordPress overview and now you'll see this page now WordPress is automatically installed on your domain name whatever domain name you have selected so once you click on WordPress or view you will see SSL certificate is also installed on your domain name Lightspeed caching is installed Force https everything is on for you you can see what is the current PHP version your WordPress is using what is the current WordPress version what is the name of your database you can see all these details we don't have to do anything over here we just have to click on this edit website once you click on this edit website button you will or you will see a new page or new tab will open for you and now you will be automatically logged into your WordPress dashboard here as you can see this is your WordPress dashboard now this dashboard page is the most important page of your website because you will be controlling your entire website from this page so whether you want to change your website design whether you want to manage payment whether you want to manage listing add a new property listing or delete any listing whatever you want to do you will be doing everything on your website from this page your dashboard page and whenever you want to log into this page or whenever you want to come to this page you just have to enter your website domain name and after that put in forward slash WP hyphen admin for example your website name is google.com you will type in google.com forward slash WP hyphen admin and you will land on this page another way of coming to your WordPress dashboard or another way of logging into your WordPress dashboard is through Edge panel you can come to hpanel go to website and once you come to your website click on edit website will automatically be logged into your dashboard now whenever we install WordPress on a new domain name there are few settings that we have to do and there are a few things that we have to understand first of all on your dashboard page you will see these are some widgets these are not at all useful widgets so we can do one thing we can click on screen options and we can untick all these widgets from here so basically we can remove them from our dashboard we want a clean dashboard then at the left hand side you will see several options next option is your post option and over here you will see one dummy blog post is already created for you hello world later on in this video we'll see how to create a you know different types of blog post like if you see my demo website here I have created these kind of blog posts I'll show you how to create these kind of blog posts and we'll be doing that under this post option then we have the media option now whatever media files you have installed on your website these images videos media files whatever media files you have on your website you will see all those media files under this media library then we have the pages option now Pages option will be used to create different pages like we have home page search page property about page all these pages will be created under Pages option then we have the comments option whenever somebody leaves any review or comment under any blog post or under any property listing you will see those reviews and comments over here now you can reply them you can approve and approve them you can even delete those comments then after that leave all the other options click on appearance under opinions you will see few themes will be installed for you and in this case 2023 theme is activated something will be activated so this 2023 theme is activated now if you open your website in a new tab you'll see this is how your website is looking now this design of your website is because of this theme 2023 theme if you go ahead and activate some other theme for example let's go ahead and activate this 2022 theme so just click on this activate button and now if you again come back to your website and refresh it you can see now your website is completely changed so this is basically what a theme does a theme changes this style and appearance of your website we just need one theme installed and activated so all these extra themes we can just click on that and we can delete them okay so click on this theme and at the bottom right corner click on this delete button now we don't have to use this 2022 2023 themes these are not really useful we are creating a different type of website we are creating a real estate website so we'll need another theme but for now we can just keep keep this thing in the next step we'll install another theme and we'll delete this 2022 theme as well now with the left hand side click on plugins now under plugins also you will see few plugins will be automatically installed for you in this case as you can see few four five six plugins are installed for you now we have just seen what a theme is a theme is basically the design or appearance of your website now what is a plugin a plugin is kind of a software or an add-on that will add some extra features and functionalities to your WordPress website for example right now our website is just a simple blog we cannot create any properties we cannot add all these property listings we cannot accept any payments or anything like that we cannot create membership plans or anything so to do that thing we'll have to install different plugins and later on in this video we'll see how to install those plugins and how to add those features on our website for now you can deactivate all these plugins deactivate all of them and you can delete all these plugins at once so you can tick mark this thing it will select everything and under bulk action you can select delete I would recommend you to just leave this plugin light speed cache this is to improve your website's Speed and Performance so leave this thing rest everything should be tick mark now under bulk action select delete and click on apply this will delete all the stick marked plugins now the left hand side you have plugins settings click on that now first of all we have general settings so under general setting you have to give your website some name so under website title I'll type in housing okay and after that under tagline you can type in some tagline tagline could be you know if you have a business tagline you can easily enter that over here or if you want you can describe your website in few words so I'll type in real estate agent for Mumbai maybe this is my tagline then after that under membership make sure you enable membership you tick mark this thing anyone can register so that customers agents can come to your website they can create an account on your website and they can create a listing and so on then after that under time zone you can select your time zone so based on your country if you're from some if you're from India you can select Kolkata if you have from some other country you can select some other time zone based on your country and click on Save changes now under settings click on permalinks and select this option post name permalink structure this is the most SEO friendly permitting structure so select post name and click on Save changes now once you do this thing again come back to your dashboard and with this all the basic settings related to our WordPress website are now 100 completed now before you proceed further let me show you one more thing now as I said earlier with this hosting plan you can create up to 200 or sometimes at least up to 100 websites with one single hosting plan so today you're creating this Real Estate website tomorrow if you want to create another website how you'll do that so let's see how that is done so for that you'll again come back to websites first come back to your Edge panel click on websites and click on create or migrate a website now again they will ask you the same thing what type of website you're creating if you want to create a new website select create a new website we want to use WordPress to select WordPress and click on select now enter WordPress you know email address and password now click on continue they will recommend you a few plugins we don't need them so we'll click on skip I'll manage plugins later then they will recommend you few themes we don't need this as well so we'll click on skip and now this is also some extra things so we'll again click on skip now in this step let me try it show you one more thing earlier we had used claim of free domain we just registered a new free domain now if you already have a domain name registered on some other website maybe on GoDaddy namecheap or some other website and if you want to use that domain name with hostinjure how you'll do that let me show you that because for that we have to do one extra step so first I'll click on this select button under use an existing domain now there is this domain name neoshic.com I already have registered this domain name on GoDaddy so maybe I want to use this domain with hpanel so here we are seeing two things at the same time we are seeing how we can add your second third fourth website on this Hosting account and with that we all we are also seeing how you can connect your existing domain with this hostginger account so I have this domain I'll click on continue in The Next Step this will tell me this will show me where this domain name is hosted or registered so this domain name is registered on GoDaddy my existing name servers are these I have to replace this with these two name servers okay with this required name servers so let's do that so I'll go to GoDaddy login to my account or if you are using some other option instead of good ad if you're using name cheaper hover or some other website steps are all the same you have to go to GoDaddy or wherever you have registered your domain name and you will have to search for that domain so here as you can see.com I want to use this domain now besides every single domain name you will see the DNS option click on that DNS stands for domain name server so we have to change the domain name so we have to basically change the DNS so scroll down here you will see these are your name servers we have to change this so click on change now click on enter my own name server advanced now here you will see two name servers most of the times you have to delete both like this come back to this page now copy your required name server number one paste it under line one and now copy your required name server number two paste it under line 2 and click on Save now once you click on save it can take up to 24 to 48 hours to link your domain name with this host Ranger account once you do that after that you can click on continue and again with this a new setup will start for you again WordPress is now getting installed on this new domain name very small process hardly takes around 2-3 minutes so by that time you can wait now we don't have to wait I just wanted to show you how this is done once it is done you will just see the in fact let me show you this thing all right so once it is done you will see this page again you can click on hosting your logo at top click on websites and now you'll see this website will be added over here here as you can see now you check now you can click on manage and you can go to Wordpress dashboard for this website as well so this is how you add a new website and this is how you connect an external domain name with hostginger now come back to your dashboard now let's start creating this website let's start setting up this website so first of all we'll need the theme and plugin so we'll need the required theme and all the required plugins so for that we'll get all the themes and plugins in one place so don't worry about that just open a new tab and this time type in blogdoot.com houses this link is also given to you in the video description below so you don't have to type in this thing you can simply click on that link and you should now be redirected to this page this is the theme that we will be using houses real estate theme and here at the right hand side you will see add to cart button just click on add to cart and purchase this theme now the great thing about themeforest the platform from where we'll we'll be downloading this theme is that you have to just purchase this theme once and you can use this theme for Lifetime on your website most of the times it happens that you have to register you have to renew your theme every year so every year you'll have to pay like 69 just to renew the theme but here you can just pay 69 and you can keep this thing use this thing on your website for Lifetime even future updates are given to you so right now as you can see the current version is 2.8 now in future when the version 2.9 3.0 comes still you will keep on getting the latest updates forever so this is amazing thing and with that we also get six months of support from the theme developer if you have any problem related to theme related to any specific option anything you can always go to support and you can raise a new ticket or you can go to comment and you can just comment your question and they will help you out so this is really amazing and this is a very popular theme and very good thing you can see the average rating is 4.86 and 2000 people have rated this theme so just go ahead and purchase this theme click on add to cart and purchase this theme once you purchase this theme after that you will see at the top right corner you will see your your username hover over that and click on downloads now in the downloads you will see all the themes that you have purchased so let me search for this theme so once you see the houses theme here it is click on download and click on installable WordPress file only okay the second option installable WordPress file only new zip file will download for you come back to your dashboard now we have to install we have to upload this ZIP file on our website so to do that at the left hand side click on appearance now click on this add new button and click on this upload theme button now just select this file under choose file so click on choose file and here it is as you can see under download select this file that you have just downloaded and click on open now click on install now make sure you select the second option once you download the theme make sure you select the second option installable WordPress file only okay and then you can upload that file over here once it is uploaded you can click on activate and this theme will be activated for you now once it is activated you can now go ahead and delete this 2022 theme as well we don't need this thing now once it is activated this will recommend you few plugins in fact let me do one thing before we install these plugins first you'll have to enter your purchase verification you'll have to enter your purchase code and you will get that purchase code over here if you go to the theme file which is this file basically if you go to my link blogdo.com houses you will land on this page and here you have to click on support now scroll down and here as you can see you will see your purchase code copy your purchase code from here come back to this page enter the purchase code and click on verify and now you'll see this notice thank you for verifying houses purchase and now we can go ahead and download or install all these required plugins so for that you can simply click on this link begin installing plugins if you don't see this thing don't worry if you don't see this link for example if you don't see this notice if if you have by mistakenly canceled or cut this notice then you can hover over appearance and under appearance you can see install plugins you can click on that and we need to install all these required plugins so you can simply tick mark this thing under bulk action click on install and click on apply so this will install all these required plugins for you alright so sometimes it might happen that this will stop at some option for example three three plugins installed in for the fourth one it has stopped so if this happens for you don't worry again click on install plugins and you can see most of them are in fact all are installed in this case so you can see all our install we just need to activate them so click on plugins from the left hand side and from here you can activate all this plugins so again tick mark this thing under bulk action click on activate and click on apply this will activate all these plugins for you and after that if you see any notice like this you can click on this thing in fact I just noticed that we don't need this slider Revolution plugin you can deactivate it because we are not using slider anywhere on our website in fact you can go ahead and delete this plugin because this is a very heavy plugin we don't want to use that unnecessarily on our website rest all the plugins are fine so with this we have installed all the required themes and plugins so if you come back to your website and again refresh it now as you can see it looks a little bit different obviously still it looks very boring very simple we'll change the design and everything later on in this video now the first thing that we need to do is we need to create all the required pages so if you click on pages at the left hand side we just have this privacy policy page and this is also just a draft we need to install or we need to create all the required Pages like we have a home page search page listing property single property create listing page and under this you can see favorite page save result invoices messages profile log out all these pages so let's do that very quickly let's do it one by one so can click on add new to add a new page first let's start with the agents page so wherein you can see all the agents at once so you just give it any name I'll give it a name of our I'll get a title of Agents now they write inside you will see this template written over here and besides that you will see default template click on default template and change this thing to template to all agents you will see this thing if you scroll down if you search for that here it is template all agents select this and publish this page okay this is now become your agents page now again come back so click on this W icon WordPress icon you will come back click on add new to add a new page let's add the board page so give it a title of board now at the right hand side this time instead of default template we have to select houses CRM I think it is at the very bottom here as you can see houses CRM select this and publish this page this is your board page CRM board page come back add new now let's add the compare properties page so give it a title of compare now at the right hand side under templates so search for this thing compare properties template and publish this page okay so this is now your compare properties page again come back click on add new and let's add this page very important create listing page so or you can just type in add listing or add property you can name it anything you want not necessary that you have to name the same thing so in the demo website we have added query listing here I am adding add property just to show you that you can add any title doesn't matter most important thing is the template so under template for create listing or add property you have to select this thing create listing template so it will be under user dashboard create listing okay if you see we have user dashboard option so here it is at the very bottom bottom fourth user dashboard create listing select this and publish this page this is your create listing page then after that we have favorite properties all right so I'll give it a title of favorite Properties or I'll just give it a type title of favorites and at the right hand side templates you have to select user dashboard favorite properties publish this page again come back now let's create a new page and let's create the insights page okay and again at the right hand side under template you will see user dashboard Insight template all right so here it is user dashboard inside template publish it come back now let's create the invoices page and this time again under a template user dashboard invoices which is over here publish it come back again membership info so if you want to enable membership if you want to charge money to add a listing then you have to create or if you want to keep this process free that anyone can come and they can create a listing or they can add a property listing on your website if if the process you want to keep that process free you don't need to create this page but because I want I this is a tutorial I want to create I want to add everything that is all the features that is available then that is the reason why I'm showing you so I'll give it a title of membership okay and at the right hand side you will select under dashboard user template user dashboard membership info okay now publish this page as well again come back now my profile page okay so give the title of my profile and at the right hand side you have to select this option user dashboard profile here is user dashboard profile publish this page again come back now it is my properties page so all this page again I'm saying you can see these Pages favorites properties create property okay all these pages are given to you so right now we are creating this page my properties okay which is this property specifically click on property space this is your my properties page so I'll give it a title of my properties all right and under this option you will select under template option you will select user dashboard properties which is so here user dashboard properties publish this page again come back now let's create the message messages page so give it a title of messages and under template again user dashboard messages here it is publish it come back again now let's create the packages page so that whenever somebody wants to create a listing they will get an option here we don't have that option but I'll show you they will have to first select a package you can create multiple packages like a free package bronze package silver gold package and under different packages you can have different features so they will have to pack purchase any one of these package to to add a listing on your website so that is the packages page under template now select use the dashboard packages or maybe it is not user dashboard packages it is just the packages page template okay you can see just packages so give it a title and select this option packages template and publish it again come back now let's create all properties page okay this is going to be a page wherein you can display all the properties this is the listing page basically property listing page okay this page so this is your all properties now they write inside template for this one uh we'll select this option in fact you have to you have to you have different designs you can see template listing grid 1 grid two list one list two we have seven eight different uh designs in fact 20 plus designs available over here and you can see examples of those over here so this is the first option list version one with sidebar so if you see over here under template here as you can see uh this is grid this is list list version one full and this is list version one sidebar okay so this is the one if you want to select some other option with Grid or with some other option you can select that now in this example I just want to select a simple option later on you can change this thing so I want to select a template list grid version one okay grid version one with three columns I don't want a sidebar with three columns okay I with three columns also you can have a sidebar it all depends on you okay so I'm selecting this later on icon again I'm saying later on you can come and change this styling if you don't like this one now again click on ADD page and let's create this page saved searches okay so I'll give it a title of saved searches and this is again going to be user dashboard saved search Okay publish it come back and finally the last page but a very important page is search page so I'll give it a title of search result or search results and now at the right hand side template you can select search results template or scroll down here it is search results template select this and publish this page and come back so with this we have created all the required pages so all the pages that were required to use this website or to create this kind of website we have created all now let's do one thing let's let's first come back to the home page now let me do one thing let's create all the required types and features and labels in countries so to create a listing if I try to create a listing here as you can see you have to select type you have to select status you have to select label right now if I come to my website and refresh it first of all click on create listing and if I try to add a title and all now under type I don't have any option under state is also under label also I don't have any option so let's create these options okay so come back to the pages option now you will see real estate option at the left hand side under real estate you have types you have status features labels so first click on type okay we have to create different types of properties so first create uh click on type and if I come back over here you can see under type we have different options we have apartment office shop studio all these options so you'll just add it like this for example if you want to add apartment you can just type it like this under name type in apartment and rest everything just leave it as it is don't need to add anything just click on add new type okay new type is added similarly if it is a shop just I'll give it a title of shop and click on add new type if it is a villa you just give it a title of villa and click on add new type similarly if it is a studio property type in studio if it is a bungalow type in Bungalow and just you can add as many type of properties if it is a plot if you're even selling just plots lands you can just give it a title of plot and click on add new type and you can add as many property types as you want okay so these were types now we have property status so under real estate you have status come over here and it could be for rent it could be for sale so for rent I'll give it a title of for rent and click on add new option for sale okay so give it a title of for sale now it could also be for lease or for some other option you can add those options as well then we have features so under real estate click on features Now features could be a lot of things if you open any property for example family home let's open this property now what all features available in this property so if you scroll down you can see the features with these icons air conditioning barbecue gym so this property maybe has a garden maybe has a garage maybe has you know air conditioning something like that so you do these are all the different features okay table TV cable washer Wi-Fi so if it is for rent these are important if it is for sale some other properties or some other features will be available so whatever the features are you can add them over here so maybe air conditioning is a feature you can give it a title of AD conditioning don't need to select anything else just click on ADD feature similarly barbecue is a feature you can give it a title of barbecue and similarly laundry gym okay so maybe this property also has gym soluble type in gym if it has Guardian we'll type in Garden if it has a pool swimming pool will type in pool so these could be different features of this particular property then we have labels so under real estate you can click on labels now label are these options if you come back if you see here as you can see for some uh we have this for sale thing then after that we have this thing open house so open house is a label similarly there could be some other labels actually let me come back similarly there could be some other labels uh we have open house label similarly it could if it is a hot sale then that could be a label okay so hot sale is a label the open house is a label okay these could all be different labels so or if there is any other label that you want to add you can add that thing as well all right so these were labels now State countries all those things you can even add that so under real estate we have as you can see country state city so under country I'll add India maybe I'm listing only for India okay only for one country so I'll type in India click on add new country now under India you can order in the real estate now you can select state and you can add different states so I'll add a state called Maharashtra this is this is a state in India now which country has this state so we have we have created India so you can link this state with this country and click on add new state similarly Kerala or whatever the state is you can select the state you can keep on adding these states and select the country and click on add new state then after that you can even add cities so under real estate you can add City and after that maybe if I'm adding Mumbai I'll select Mumbai and after that uh which state so this Mumbai is in Maharashtra state of India so I'll select Maharashtra now in this case for Mumbai or for cities I would recommend you to add image because if you see here we are adding cities on the home page and for each City we have these kind of images so for Mumbai I would recommend you to add some image now if you need free images for different places you can go to different websites there are many websites wherein you can get professional images for absolutely free for example there is this website unsplash.com if you want image related to Mumbai if you just search for Mumbai you will get so many difference as you can see a Gateway of India we have this thing station BMC office all this uh we have the Taj Hotel okay all these are different images of Mumbai City if you want you can use these images or if you want if you're searching for some other City Pune City for example or any other City you can search for that and you will get all these images you can use these images for free on your website okay by the way there is a link given in to you in the video description below if you click on that link you will be redirected to my website blogdo.com and here as you can see for every single tutorial whenever I create a tutorial I always create a blog post related to that tutorial so once you click on that link you will be redirected to a similar blog post now you'll see the video that you're watching right now and below that you will see some important links and at the very bottom you'll see download free images and once you click on this blue download button you will download a zip file let me show you that file so it will be something like this you have to right click on that file and click on extract files okay once you extract this ZIP file you will see the media folder once you open the media folder you can see you have all these images given to you for free so if you if you don't have images or if you want to use these dummy images you can use them on your website okay so if you download that file so I'll use any one of these images so I'll click on ADD media and I'll upload any one of these images so let me scroll down maybe I'll upload this image Okay click on open click on select okay so once you add this image click on add new city and new new city will be added for you so this is how you can add you know types status features labels countries and cities all these options now we have all the things required to create a listing now there are way two ways of creating a listing first is to create from back end so to create a new listing from backend you can hover over real estate and click on new property and you can create a new listing from the backend so you as an admin can create a listing both from the front end and from the back end but when users come to your website they can only create listing from the front end this is the front end option okay front end is this option create a listing button and then you have to follow the process so we'll see both the options we'll see backend also and front end also so first let's see this backend option so if you want to add a new property from the back end first let me open a single property so that we can just copy paste uh you know details from here so this is the title of the property modern apartment so this is my title and after that some description about the property so you will type in those thing over here you will type in the description about the property over here then if you scroll down you can see all the information so sale or rent price so in this case as you can see this is for sale this property is for sale you can see for sale and this is the price they're charging 4050 450 000 okay don't need to add any comma anything just add the digits okay just add the number now you can also add a second price so second price could be like per square foot as you can see this is the price of the property and if you see if you compare the area and the price then this is approximately twenty eight hundred square twenty eight hundred dollars per square feet okay so under second price you can add twenty eight hundred dollars and uh after the price so after price as you can see square feet is added so this is the after price or basically this is the suffix so I'll select this thing and I'll type in no square foot now what is the area size so in this example you can see area size is 21 49 and again this is square feet so under post fix I'll type in square feet if you want you can even add land area size and land area post fix how many bedrooms and bathrooms so in this case one bedroom two bathroom maybe I'll type in three bedroom uh uh four bathrooms one garage and what is the garage size so maybe 200 square feet is the garage size and you're built this is 2016 built and if there is any property ID or Rara ID you can add your rera number over here like this okay you can just add whatever the Rara number is okay so this this is the basic information about the property then we have map option now under this option you can add the exact locations so I'll maybe let me search for sign bandra Link Road all right so here is sine bandra Link Road I'll just select this thing and then I'll put I'll I'll just place this marker on the exact location so maybe it is over here okay I'm just giving you an example so I'm selecting this option and you can show street view or you can hide street view if you want then we have property settings what is the address of the property so maybe I'll add this address okay what is the zip code maybe I'll remove all these things maybe I'll remove till here maybe this is some address in Mumbai okay I'll just I'm just giving you an example and I'll add the Mumbai postcode or zip code now because you're an admin you can even mark this property as a featured property then we have media options so these are the images that these are the media files if you want to upload these media files you can do that click on ADD media and let me upload some media in fact let me upload all these images at once so that we don't have to use them again and again so I'll upload all these images at once now from this I'll select five six different images so let me actually do one thing click on ADD media again and maybe I'll select these five or six images and click on select nouns it is uploaded if there is any video that you have of the property you can upload that on YouTube and you can or or you can upload that on Vimeo or wherever you want and you can add the video URL link or if you want to upload on your website you can go to Media so if you click on media you can upload your video here so click on add new select the video file once you have the video file you can click on that video for example this is the video file once you open that video file you'll see file URL okay this is the file URL you can copy this file URL and you can paste it over here so that will work okay so if you have video and if you want to upload it on your website you can do that or if you have a video and if you want to upload it on YouTube you can go ahead and upload that video on YouTube and you can copy the video link so I'll copy this video URL from here and paste it over here now 360 degree virtual tool so they have several websites wherein you can go and you can have that thing so for example this is matte report you can see the website name you can go to that website and you can upload this thing you can upload your 360 virtual tool file once you have uploaded that you can share this file so once you have uploaded this file on Match reporter wherever you want you can upload after that you can add the link 360 degree virtual tour link over here then contact information right now it is author info later on you can see later on I'll show you how you can select agency info agent info once you create an agent right now I'll keep it at author info okay now slider if you want to have a slider for this property you can have it and you can upload different slider images then submit listing so under this property if you have if there's a certain sub listings you can do that thing as well now we have flow plans so if I scroll down or maybe let's go up let's see the flow plan option here it is so as you can see this is first flow we don't have the image I'll show you the image and in this case we are not adding how many bedrooms or bathrooms we have we are just adding the size so this is uh let's see plant size is this and what is the price yeah yeah we are adding the price 1650 so this is basically per square feet okay 1650 per square feet and uh for this thing also we are selecting this option bedroom and bathroom size we are adding not number of bedroom and bathroom but basically the size if you want to you can add number of bedrooms and bathrooms so if you want you can add this size of this thing now plan image so I have uploaded this thing maybe this is the plan one image so you can upload the plan one image and if you want some text or some description you can type in this thing as well all right similarly if you want to add one more plan click on add more and you can do that then property documents now most of your times it is not required because if you are adding your reader number people can go to Rara website and they can see all the property documents but if there are any documents that you would like to upload over here PDF files you know Word file whatever most other times it is just PDF files you can upload you can click on ADD media and you can upload all those files then if there is any private note or energy class that you would like to add now under layout you can see there are different versions different styles again you can go to this website to see uh and you can go to property and you can see what version 6 or version 5 or version 4 is so if you see version 6 for example this is how the version 6 will look like okay this is version 6 and if you select property version 5 let's see this one okay this is how it will look like so maybe let's Select Property version 5. okay and over here property content type whether you want default tabs tabs vertical so maybe let's select tabs okay or if you want you can keep it at default then after that if you want to add some additional features you can do that thing as well for example if you scroll down these are all the basic features that we have added under additional feature if you want to add some other feature for example here as you can see deposit is 20 so maybe I'll type in deposit but I'll type in maybe deposit in this case is 30 you can click on add more and you can add more options like what is the pool size so I'll add pool size and in this case maybe I'll add 900 square feet add more option okay I mean it is Clubhouse gym okay you can add all these options let's add one more and last remodel here maybe instead of this let me add uh additional rooms all right so you can add these kind of additional information additional features as well if you want now at the right hand side click on this property tab now select type of property so this is maybe an apartment so I'll select apartment what is this status whether it is for sale or rent so I am selecting sale what all are the features so maybe I'll select all the features if you want to add a new feature you can do it from here and this is hot sale maybe I'll select this this is in India in Maharashtra in Mumbai okay so I'll select this you can also add featured image so featured images if you go to the home page for example the top image that displays so these images that is displaying on top of this thing the main image this is the featured image so in this example I'll scroll down and maybe I'll select this image as my featured image now once you add all these things you can go ahead and publish this thing and with this you have completed your first property if you click on view property if if you click on view property and if you have any problem like this if you see page not found don't worry you can go back to your dashboard and you can hover over settings click on permalinks make sure you have selected post name even if you have selected post name just click on Save changes again come back and refresh it now once you do this thing once you click on Save changes and still if it is not refreshing if you still if you refresh and if you see page not found don't worry you can Purge the cache so basically sometimes it happens because of caching so you can do one thing you can see this uh this logo at top you can click on purse this page or you can select this option Purge all CSS in JavaScript cache click on this and now you'll see your property or you can do one thing you can actually do one thing you can first of all let me get rid of all these things you can actually do one thing you can deactivate this plugin light speed cache so while you're building the website you should deactivate this caching plugin because this shows you the older version so once you have completed this website once you watch the complete video complete your website then you can at the end come and activate this thing okay so let me again go back to properties view the property and you can see this is how it is looking okay you have the gallery we have all this thing featured for sale this is tabs option that we selected okay if you if you don't select the tabs option if you just keep it at simple instead of for example let me edit the property and let's go to layout instead of tabs let's keep it at Global or default click on update refresh again now as you can see instead of tabs it will display like this one below another like this okay another few things which are not working but will fix that thing later on property ID the radar number is also working apartment type what is the property type and all these things so everything that we added is now 100 working now click on update again and refresh this page so later on again you can come back and you can change the properties style and type in all those things but right now you can see this is how it is done if you want to see the map you can click on map if you want to see the image you can see the image if you scroll down you can see video all these options are given to you now let's see the same thing from front end in fact let me show you another you know let me show you the complete process now let's see whether a new person is able to come to your website they are whether they are able to create a new account or not so I whether it is a customer whether it's a seller purchaser or a buyer agent or some somebody else whether they are able to create a listing or not okay so before that first we have to see some basic settings so if you come back to a dashboard you will see this theme options at top click on that and we have to see whether you know login and registry is enabled or not so under theme settings you will see login register click on this and you can we have to display the login in the header okay we also want to display the login uh register in the header and we want to show this as an icon not as a text okay and after that so basically make the first two yes and this select this show as icon then whatever you want to disable you can disable that now here select yes user can type password on registration form so they can type in their own password we don't want them to be getting Auto generated passwords right so once you enable these things after that click on Save changes now under user roles select this option enable registration form and enable user roles on profile of page okay make sure you enable these two and don't don't tick mark anything because once you take mark this thing it will disable it okay so if you if you want to disable any role for example if you disable if we don't want agencies to come we only want agents owners buyers and sellers only four types to come so you can enable these two and you can tick mark uh any you can tick mark agency and manager to disable them now click on Save changes again now if you open this website if you open your website in a new private window in a new incognito window let's open this in a new private window incognito window and now if I click on this thing I if I try to register if I select account type now as you can see we don't get the agency and manager option because we have disabled these two options we get agent owner buyer and seller and here if you come as you can see agent owner buyer and seller these are unticked that is the reason why we see these four options so basically now registration is on let's come back to the private website private window uh incognito window let's try to sign up and see whether this is working properly or not so under register I'll type in my username my username as John Doe email will be let me type in my email address and let me set some password for this account and I'm creating this maybe for an agent so maybe I'm an agent self-select agent and I'll click on register okay we cannot use a special character Source spaces in username so I'll remove the space click on register again account is now created now I can log in with this username or with this email address so I'll go to login enter the username enter my password click on login and now I am logged in successfully now if I click on create a listing you can see this thing now let me open a new listing on a new page maybe let me open this family home listing and copy details from this thing now before I copy all the details and all right now it is a free website so if you enter all the details go to next keep on entering all the details you can submit the property for free you can submit this property listing for free now if you want to make this process a paid process let's see how that is done so for that first you have to again come back to your dashboard and we have to enable membership option so you will see at the left hand side you'll see membership click on this and enabled paid membership you have to make it a membership or per listing if you want to charge per listing you don't have to create any plans you can just select this option or if you want to create membership plans you can select membership for example with this plan you can get all these options with other plan you have limited option and so on then what currency you want to use US dollar or Indian rupee whatever currency you want to use you can select the currency and a featured price we don't want to set anything over here for now now the featured price basically if somebody wants to show their uh listing or if somebody wants their listing to be featured on home page you can charge them some extra money maybe we can charge them ten dollars extra so because it is USD 10 uh featured price will be 10 now click on Save changes so you have enabled membership now we have enabled membership we need to accept payments so how do you want to accept payments so for that you'll have to click on payment gateways by default it is houses custom Gateway I am selecting woocommerce so I'll select woocommerce click on Save changes because many a times you want to use some payment Gateway which is not available with this theme with with this houses theme only two payment gateways are available PayPal and stripe but there are many payment gateways that you can use so for that you have to use woocommerce and here as you can see to use woocommerce we need these two plugins houses woo add-on and woocommerce so let me do one thing let me open the plugins page in a new tab let's open this page in a new tab and let's search for houses boo add-on Okay click on add new plugin and search for houses who add-on this is the one install this this is by fave themes so make sure you install this one and then after that we need woocommerce plugin so I'll search for woocommerce and install this plugin as well this is this will be by automatic woocomm is by automatic so install these two plugins and once they are installed you can activate them so once it is installed click on plugins at the left hand side and tick mark these two plugins houses woocommerce add-ons and woocommerce now under bulk action select activate and click on apply now once you click on apply after that we have to set up woocommerce the new plugin that we have installed we have to set up that plugin so for that you will have to hover over woocommerce you will see in this new woocommerce Option at the left hand side hover over that and click on settings again I'm saying all these X extra things membership thing woocommerce plugin is only required if you want to charge money for posting of a listing of a posting different list or for submitting different property listing on your website if you want to keep this process free no need to follow this thing okay no need to install these two plugins no need to enable membership but because many people might want to you know have that feature I am showing you how to have that feature but in my very humble opinion I would recommend you to keep this process free this process should be absolutely free you can make money through Google AdSense or some other option you can charge some commission if you want anything like that or you can charge for leads if you want whatever but make this process free submitting property should always be free but because we have this membership option I'm just showing you this thing now first we have to set up general settings under general settings we just have to add our business address first so this is my business address ABC building and in Mumbai city name your country and state name your postal code ZIP code then after that currency now whatever currency you're using you're selecting make sure you select both the currencies for example here under membership we have selected USD so make sure you select USD over here as well if you have selected Indian rupee over here so then you can you have to select Indian rupee over here make sure your currency is same at all the places now once you do this thing click on payments and now for payments you can use different type of payment gateways to accept payment on your website these payment gateways are basically to accept payment through uh through membership so we will be creating different packages now now we need to have different payment gateways so that whenever somebody wants to purchase these packages they can make payment to us and that payment can reach in our bank account now for that we need some payment Gateway now there are many different payment gateways available in this world for example PayPal is a very popular payment Gateway if you want to accept payment through PayPal you can install a plugin for PayPal stripe is a very very useful very popular payment Gateway mostly used in European countries and in Western countries then for different countries there are different payment Getters for example for India there is a raise or pay there is pay you money there is insta Mojo I guess there are many different payment gateways available for India I am sure for different country if you're from some other country maybe from African country from Pakistan Bangladesh you can just do a simple Google search and you can see which payment Gateway is available in your country and you can install a plugin for that let me show you few payment gateways option so for that actually let's do one thing let's go to plugins again and install few new plugins so click on add new first I want to install the PayPal plugin to show you how you can accept payment through PayPal so search for PayPal and install this one payment plugins for PayPal okay this is the one not by woocommerce this is by payment plugins woocommerce one is not that great this is much better plugin so Buy payment plugins next payment Gateway that I want to use is stripe so search for stripe again select the second option Commerce this is also by payment plugins now then after that if you want to use some other payment Gateway as I said you earlier for India there is Razer pay so I will use Razer pay for India search for Razer pay and I want to use this plugin Razer pay for woocommerce this is by team Razer pay now once you have installed these three plugins you can click on plugins at the left hand side and now you can activate all three so tick mark these three click on bulk action activate and activate all these three plugins or payment gateways once activated you can again come back to woocommerce payments and now you will see many new options will be added for you Razer pay stripe you'll have PayPal at the bottom here as you can see PayPal first let me enable PayPal click on Save changes let's set up Paypal first so to setup PayPal we'll click on PayPal Gateway and under this we'll click on this API settings tab now make sure first you have an account with PayPal obviously only then you can set up your account or connect your account with PayPal or connect your website with PayPal similarly make sure you have a website or you have an account with stripe if you want to use stripe if you want to use Razer pay make sure you have an account with razor pay so if you don't have any one of these accounts just go to Google search for Razer pay search for stripe go to their website create an account and then you can link them both like this that I'm showing and linking them is very easy if you want to link PayPal with your account you just select under environment first make sure you have selected production now under connect to PayPal just click on this button click to connect and log into your PayPal account it will automatically connect so just enter your PayPal account over here just make sure that your you have a business PayPal account okay so regular PayPal account will not work for sure you'll you must have a business PayPal account so enter your PayPal email and password and it will automatically connect your website with PayPal click on agree and connect now you'll be redirected back to your website and you will see it will be connected here as you can see state is connected everything is auto filled for you click on Save changes and now you can accept payment through PayPal again come back to payments similarly for stripe also it is very easy if you search for stripe credit cards click on this and here also you have to click on API settings tab and mode under mode instead of test you have to select live first click on Save changes and just like PayPal you have to click on this button click to connect it will open a new tab for you have to log into your stripe account so just enter your stripe email and password log into your stripe account and it will automatically connect your website with stripe now select your account so it will display your account click on connect and just like PayPal once it is connected you will automatically be redirected to your woocommerce page and now you can click on Save changes and you can now accept payment through through stripe as well now again come back to payments let's see how we can set up razor page so click on Razer pay now for Razer pay we have to do it manually most of the plugins you will have to do it manually so it's very easy by the way doing manually just I need to enter your key ID and key secret whatever payment Gateway you're using they have two options key ID key secret or publishable key secret key those kind of two keys you just need to enter these keys so for Razer pay you can go to dashboard.resurplay.com and log into your razer pay account and after that once you log in at the left hand side you will see accounts and settings click on that then click on API keys and over here you can see you have your Live ID a live key ID and live key secret so copy the key ID paste it under PID obviously and copy the key secret paste it under key secret this is not the key Secret by the way this is just XXX this is hidden uh if you're doing this for the first time you will see it okay so whatever the real ID is you have to copy and paste in this thing this is just for demo purposes that is the reason why I'm just pasting this thing now this is completed you can now accept payment through all these payment gateways now click on accounts and privacy and 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 account page so tick mark these three and untick bottom two these two untick these two go at the bottom click on Save changes now go to Advanced just make sure under cart page cart is selected under checkout page check out and under my icon page my account is selected and after that you can click on Save changes okay so now let me do one thing let me go back to payments and I want to enable cash on delivery you should not be doing that I want to enable cash on delivery only because I don't want to make payment to myself because right now I'm going to show you a demo payment so how a demo payment is done and how you can order how you can do order management how we can approve the order and so on but before that let me do one thing go back to Pages now because of this woocommerce plugin three pages are created for you this card page checkout page and my account page so first go to the cart page now if you open this card Page by default whenever a new page is created if you see the preview of this page preview in new tab so here as you can see we have this extra space over here at the right hand side this is for sidebar we don't want any sidebar in these pages so to fix this thing you can click on this option you can click on a page and change the template instead of default template we have to select this option a page template let me scroll down here is page template select page template now once you select page template page sidebar should be none by default it will be right sidebar you have to set this thing to none and then update this page once you update this page again if you come back over here refresh it now as you can see this is a full with no extra space at right same thing with checkout edit the checkout page and change the template to page template and Page sidebar will be done update this page and finally same thing with my account page so if you scroll down select the my account page edit this page and change the page template or change the template of this page to page template which is over here or not packages page template and Page sidebar will be none Now update this page as well all right now let's again come back to that incognito window that private window that we have opened refresh this page now as you can see when I try to uh now if I try to add a new listing if I click on create listing I'll have to select a package but if I click on get package I am redirected to packages page but it is empty because we have not yet created any packages so let's very quickly create these packages so to create a new package you will come back to your dashboard and under this option you will see packages under real estate you will see packages click on that now click on add new package now let me create few packages first let me create a free package okay so this is a free package this is available for maybe one year and after that what I'll do is how many featured listing no featured listing how many listings included so with the free package you can maybe create only one listing okay and package price will be zero because this is a free package and how many featured listing are included zero no listings will be featured now under package stripe ID you can type in free package something like this uh is it visible yes it is visible and after that how many images are included maybe only three or five images are included with this package all right then after that you can click on publish now after that click on add new package and maybe for this time you can add maybe like gold package of silver package and this is for one year and with this you can create maybe 50 different listings 15 different uh listings or you can even set this to unlimited listings and you can even set how many featured listings included so with this package you can have two listings featured on your home page on this website's home page okay because obviously you're paying some money maybe the package price is ten dollars so because you're paying ten dollars you can add you know 50 listings 50 property listings and two of those listings will be added or will be featured on the home page and under this ID will type in gold and you can set this as the popular plan and unlimited images you can select unlimited images and rest everything is fine you can publish it now if you again come back to this page and refresh it now under packages this user will see these two packages if they want they can select the gold package or the free package okay so okay we had selected zero here we have to type in we have selected one we have to type in one year over here under billing frequency all right refresh it now let me select the gold package click on get started processing please wait now we'll have to first purchase this package so I'll enter my name over here maybe I'll type in John Doe all right some address and pin code all right phone number and after that you can select uh if you want to make payment through credit debit card or net banking through uh through card or through PayPal you can select any one of these options so I'm selecting cash and delivery because as I said earlier I don't want to make payment to myself now I'll click on place order once you place an order you will see this option your order has been placed and now once you receive any once anybody any customer or agent purchases this package you'll have to approve this package so you as an admin owner of the website you will come over here annual hover over woocommerce click on orders and you will see this new order 22 seconds ago John Doe is the name of the person you can open this order and you can change the status of this order to completed and update this page right so you have to do this thing now if you again come back to this page if this person if this agent now tries to create a listing click on create a listing now as you can see they can create a listing they don't see any package option because they have already purchased the package if they click on membership you can see this this person is now using the gold membership wherein they can create 50 listings and two listings will be featured so this is how it works again let me come back to create listing page again I'm saying my recommendation would be to keep it free to leave it free don't install the woocommerce plugin don't enable membership but let's see how this is done now this is the title of the listing family home same thing we have already seen this thing but we are doing we are doing the same thing but from the front end earlier we had done the same thing from the pack-in now this is maybe a villa and this is for maybe rent this time okay open house I'll select so rent price is maybe twenty five hundred dollars per month okay so I'll select monthly okay then we'll select next you can upload some Gallery images okay let me upload these four or five different images now once you upload these images after that you can click on next or you can upload some video URLs same thing same process click on next enter how many bedrooms how many bathrooms what is the area size okay you can set this thing okay how many garages what is the garage size Rara number or property ID year built okay so you can select these options and additional details also you can add like we have these kind of additional details let's see here it is deposit these are all the additional details we will type 20 we have seen these options okay now you can click on add new now click on next whatever features available click on next what is the address so in this case this is the address okay I'll remove this much country you can select country you can select state okay you can select what city or which city it is in in which area and you can select the ZIP code postal code you can search for that location you mark the exact location over here all right click on next 360 degree virtual tour you can upload that you can upload float plans like we have seen earlier Okay so I'll just give it a title of flow plan one three bedrooms two bathroom price is 2500 okay select the image so I'll upload this image add some description now click on next no need to add any sub listing and with that we can now click on submit property and we can submit our property and this is how agents your sellers or purchases buyers anyone they can come and they can add their listing from the front end now this is pending first you as an admin you'll have to go through the listing if you see if you think that the listing is correct it's not a scam or anything then you can go ahead as you can see by right now it is spending approval then you can go ahead and publish this listing once you publish only then it will display on your website because we don't want people coming on our website and you know running any scam or anything so that is the reason why you should first go through this thing now if I refresh this thing now it will be published because the admin has now approved this thing so this is how this is done this is how you can create a listing both from the front end and the back end so you can see everything is working properly we have seen everything related to property we have seen related to agent we have seen payment options membership option everything we have seen till year now only the designing part is left if you see your website it is very blank nothing available over here no menu no nothing basically is available over here so only the designing part is left so let's start designing this website and let's start with the home page let's see first how we can create this home page and later on we'll see how to create some other Pages then header footer designing customization and so on so let's start with the homepage for that again come back to your dashboard and click on pages from the left hand side to add a new page click on add new and give it a title of home because this is going to be our home page so under title I'll type in home now under this option under template will select houses page builder okay select this option houses Page Builder and after that publish this page now once you publish this page after that you have to again come back to your dashboard and you have to set this page the page that you have just created home page we have to set this page as our home page so for that you will hover over settings and click on reading right now as you can see your home page displays your latest post we want to display a static page so select the second option as static page and under home page select the page select this home page that you just created and click on Save changes now we have set this page as our official home page if you again come back to pages and if you see under besides home page now it says front page now you can click on edit to edit this page and we'll be using Elementor page builder to design this website so you will see this button at top edit with Elementor click on this button now we'll be using containers and flexbox to design the website so first you'll have to enable that so as you can see ACT first you'll have to activate it so click on activate container a new tab will open for you if this does not open for you this does not this tab does not open for you don't worry go to your dashboard at the left hand side you will see Elementor under Elementor click on settings and under settings click on features and from here you can select flexbox activate it grid container activate it okay so you can activate flexbox and grid container and after that click on Save changes once you activate these two things again come back to this page and refresh it now once you refresh this page you will see a new Option container option which means that the container and flexbox option is now active as you can see under layout we see container option all right so this is working now first we have to create this section here as you can see this is how this section looks like so what I'll do is I'll add a new container drag and drop the container over here like this and now as you can see we have this container over here now under container you have many different options first option that we need to use right now is select the direction and select right direction okay select this horizontal row horizontal Direction all right row horizontal Direction and after that come back to your elements so to go back to your elements you will see this nine dots icon if you follow my mouse cursor click on this nine dots icon again you will come back to this elements page now drag and drop this container inside the container okay and this will be the direction of this will be vertical column vertical all right so this is a column with that we are creating column vertical now once you add this thing what you have to do is you have to right click on this container edit container if you see if you follow my mouse cursor edit container right click on this and click on duplicate okay now as you can see we have two options over here one at the left hand side one at the right hand side so we have two different containers over here and now we can do one thing at the left hand side first we need this title we need this heading this text so I'll copy the text come back over here make sure to come back to elements now use this heading option so drag and drop the heading option at the left hand side and type in whatever heading you want so this is the heading that we want now go to style first of all text color it is black color we we want this color very dark blue color so the text color is this black color or whatever color you want you can have this color by default it is zero two zero one zero one okay which is a good color so we can keep this thing now for this style of this text okay style is a little bit different or the font family is different so under typography you can click on this pencil button and by default it is Roboto we can change this thing so to change this thing select this option font family and change this thing to joust if you search for j o s t just font family this this is the font family that we want okay so we have to change the font family for this so once you have this font family after that you can change the styling change uh this sizing and all so if you want you can make it bigger smaller like this so maybe I'll keep it at let's see let's let's keep it at 45 pixels okay then after that you can make it thinner you can make it Bolder lighter okay so basically you can select the weight so in this case we want to select 500 weight you can also select line height okay let us spacing all these options are given to you so if you want to increase spacing between each letter if you want you can even add negative which means that you can decrease spacing between each letter so under letter spacing I am typing minus 0.5 okay so I'm reducing the letter spacing a little bit just minus 0.5 okay now if you use the heading again because we have another text over here if you again drag and drop the heading at the bottom you can see we again have to go and change the font family to jaw okay so we have to do it again and again so to save some time what I'll do is I'll first delete this thing to delete it you can just right click on this delete it okay now what I want to do is I want to set my default font family to Joss so that I don't have to change it again and again so first click on update now to change the default font family you can click on this hamburger icon this three lines icon at the bottom at the top left corner now click on site settings select Global fonts and under primary click on this pencil button and select this thing now as you can see default is Roboto we will search for just Jost and we'll set this thing for all the font family options for primary for secondary okay for text as well select text he also and after that for accent which is for links as well whenever there is any link we want to use this thing now come back now select typography even in typography for body we'll select typography change this thing to just similarly for link will change this thing to just okay this is the one for heading one two three four five six for all the headings as well we'll change this thing to just all right heading 3 all right then we have heading 4 5 and 6. same thing all right now whenever you want to use any option it will be by default just now if you click on update and if you cancel this thing come back again if I use heading let me use heading drag and drop the heading over here now it is already just I can see the styling of the font if you go to style click on pencil button it is already just okay default is just now if I search for Jos and if I select just you'll see nothing will happen because it is already this font family if I select Roboto font family which was earlier the default font family you can see the changes okay so just is the default font family now which is good now color and everything is fine you can decrease the size obviously first we can add this text go to content add the text this is going to be our text go to style and decrease this size to 20 pixels and we want to eat lighter so under weight select 300 okay and we can also add some line height so I'll do one thing I'll add line height underline height I'll select em and I'll type in 1.5 okay now the latest facing I'll type in one just a little bit later spacing between each letters all right then after that we have to add this search Builder all right so for this search Builder we'll again come back over here we'll search for search Builder this is the one houses search Builder drag and drop it at the bottom now this is how the default one will look like or you can design it however you want it so first of all what all option we want we want location we want type status and size for options so so location under location we can have cities type status don't want bedroom bathroom and what we want we want the size option so max area we want maybe okay or maybe I'll select price Max price rest everything I'll delete okay so I have this thing now under property type I'll type in just type instead of property type label I'll just select type okay under placeholder also we'll just select types and under cities you can select cities or you can type in something else and Status property instead of property status under label I'll type in status also under placeholder I'll just select status right and everything is 20 which is fine which is good and after that what we have to do is first let me cancel this thing we have these four which is good now we want these two at the top for rent for sale okay these two options these two tabs so before that first of all what we'll do is we'll select this thing we'll make it medium right now this is input size is small we'll make it medium but in size it's also small we'll make it medium and button is aligned at the right if you want to bring the button in Center left wherever you want you can select this I am selecting Justified right okay now select tabs and Under tabs we want to show tabs and we want to show two two tabs so select for rent for sale we want to show these two tabs I don't want to show the all tab so here you have show all tab hide this thing okay now this is how it is looking we have to design this thing but this is how it is looking now we can do one thing go to style and let's see what all styling options so we have over here now first of all we don't want any Gap in between so column Gap will be 0 also row Gap will be zero so both column and row Gap will be zero then after that we are not using label which is good so we can leave the label now for padding and radius so padding is spaced between each so under padding I'll type in 8 from all sides okay eight pixels padding from all sides now for radius how round you want this thing so radius will also be eight okay it is automatically it but if you add 50 it will become more rounder so I'll make it eight border radius will be 8 and padding will also be eight then after that we have background option here as you can see background color I'll change the background color to white like this now now it is looking much better you can see everything is now connected and after that we want to do one thing let's select this option select this box shadow now as you can see this Shadow is added over here now that this box Shadow let's do some changes first of all how uh light or dark you want you can decrease or increase the transparency so I want to bring this transparency to 15 percent so you can see last digit is 0.15 which means that transparency is 15 percent now horizontally I want 0 vertically I want 40. so if you if you want you can just search 40 blur option also I want 40 all right now it is better now this was related to form now let's see related to field these are all the different fields we don't want this these Border in the field okay we don't want this border here as you can see there is no border and this is looking much cleaner so border field will be uh first let's select border color make it white now as you can see those border are now gone and background color will also be white which is automatically white but if you want to change if it is not you can change the background color to white as well now let's select the tabs which is these two at the top so select tab style now tab basically we have to change the color if you see the active type the text is black and the background is white so active tab active tab is fine text is black background is white inactive tab text or background color is blue we don't want this blue color okay we want this kind of transparent color and the text color is white for inactive we want text black so if you see inactive text tab so here it is tabs color this is the inactive tab because here second one is active so which means that tabs color is the inactive so text color will be black so I'll set black color now as you can see and background color I don't want blue tabs background color I want this thing if you again bring this thing we want to make this thing transparent so bring it at left and wherever you think whatever you think looks good you can just keep it at that I would recommend you to bring this thing at left until you see Zero D at the end okay so basically this is around like five percent so five percent transparency for this one now as you can see whatever the inactive is you will see that design transparent a little bit and this color now we want these tabs to be aligned at the left hand side not in the center so you'll see alignment bring it left now as you can see they are right left so now it is looking you know way better than what it was looking earlier now only thing left is okay we have to do one more thing uh go to this option go to theme options and here also we have to set typography to just because if you see over here these text apartment types these are not just these are again these are still in a Roboto so go to theme options and select typography from here and here as you can see instead of Roberto you can search for this joist or just phone family navigation also and body we don't want 300 we want medium 500 just 500 okay letter here also footer also we want the same thing top bar we are not using top bar but still I will change this thing heading also same font family now click on Save changes now once now once you click on Save changes now if you notice once I refresh this thing these font family will also be changed to just or just so if I refresh this page and now as you can see these font families are also changed okay now it is looking much more better so this is also changed uh finally we have button so go to style button styling so select button background color we want this color so if you are if you go to any website if you like any color and you want to get that color code you can right click on that for example if I want this background color for this button so I can right click on this button click on inspect now at the bottom right you will see this background color and here as you can see the color code okay I'll copy this thing 0 2 5 4 7D and I'll come over here under background color I'll type in this color code 025470 now I want to save this color code because next time when I whenever I want to use this color I can simply select this color so to save this thing you'll click on this thing plus button add new Global color give it any name and click on create okay this is now added in your Global color and rest everything I think looks good now go to Advanced let's add some margin in fact we have to add this negative margin at the right so that you know if you see properly this column ends over here you can see the difference the column ends over here but this search bar is going Beyond this thing so it is you know it is getting inserted into the right column so to achieve this thing you have to add negative margin so first dealing the margin okay you click on this link icon it will be d-linked so at the right hand side so select write type in minus 80. now as you can see this is now getting in this right hand side option and from top and bottom I want to add 15 pixels okay just a little bit 15 pixel stop in bottom and most importantly right it will be minus 80. you can now update this page now after this we have this thing we have the icon list we have this icon at the left hand side and right at the right hand side we have the text so you can come back to elements and search for icon list and here it is drag and drop it at the bottom we just need two so we can delete the third icon list now for the first one click on this icon under icon view on the map icon and we want this address so under text we'll type in the address under icon we'll click on this and search for map okay whatever icon you want you can select that and click on insert now for the second one we'll select this phone number all right so I'll type in this number and we'll select this phone icon so under text we'll type in the number and under this option we'll search for phone icon so whatever icon you like you can select that and click on insert now let's style this thing so go to style now for this one first we have the list option okay so you can see we have space between so space between I'll type five and then we have the icon I'm going to increase the size of this icon to 20. all right 10 color is this color so we'll change the color we have added this color earlier if you remember under Global color so if you already have added some color and if you want to use that color you can simply click on the globe icon and select that color then after that we have the text now in the text I want to change this thing I want to increase the size of this or maybe size is fine I just want to make it a little bit lighter maybe a three or 300 or 400 is fine right and maybe we can also increase the size to 16 pixels 300 and later spacing of one pixel right now you can again go ahead and update this thing now if you see at the left hand side we have this extra space over here so for this we'll select this option I will select edit container for the left hand side click on edit container go to Advanced and under margin first dealing this thing remove the link or maybe under padding you can add in fact we have to add in the padding because this is inside this thing so select padding remove the link and at the left hand side first select percentage instead of pixels instead of PX select this percentage now at the left type five percent and as you can see we have this space that we need at the left hand side right now come to the right hand side select the right column okay select this option edit option edit container edit container write container now in the background we want to add this thing now if you see properly this is actually if I refresh this page this is actually a slider kind of thing and you have a little bit of zoom in animation so to add this thing you will go to style and you will select under background you will select slideshow and we can add few images over here so maybe let me add uh let's add these three images maybe click on create new Gallery insert gallery okay this is the one now we'll select this option Ken Burns effect okay you can turn on this thing now transition time you can increase or decrease the time transition effect you can you know again increase or decrease or change the transition effect and background size I'll make it cover all right now go to Advanced margin and padding will be zero so I'll type in zero margin and zero padding right now select the main container okay select this option if you see this edit contain option six dots icon at top click on this thing if you don't see for some reason if you don't see this thing you can click on this icon Navigator icon at the bottom left and here you can see we have container then we have another container then we have another container so this is the main container this is the left container this is the right container so you have to select the first container the main container okay so you can simply click on this edit container or if you if you don't see the edit container option you can click on the first container now over here I want to increase the size okay width of this option so default is 1140 I'll make it 12 40. okay just a little bit bigger then after that in the background we have this color so this color is if you again come back over here and we first go to style select background type classic and add this color so for this color code you have to type in E5 F2 F6 okay you'll get this very light blue color as you can see over here this is the color that we want then after that we want this option as you can see we have this border radius of 16 okay so basically the corners are rounded so here we'll select border and under border radius will select 16. now we also want to select this option if you see go back to layout now the minimum height we want to select 550 okay and we want to bring it in Center okay vertically and vertically also Center and Alignment horizontally also Center so select the center Center option justify content Center and align items will also be center now the right hand side if you see this option we want to add this option we want to add spacer so search for spacer and drag and drop it over here and type in 550 okay select this 550 then after that do one thing select this edit container top the main container and type padding zero now as you can see the extra space that was uh there at top and bottom is now gone all right so I just noticed one thing that we wanted to create a design like this one but uh this is touching both these sides so actually there is one problem over here we should have changed the layout a little bit but don't worry we can still do that thing we can actually add a new container at the bottom okay so you can select the first option we want a single row now inside this thing we wanted the container okay like this and this direction should be horizontal like this okay so once you add this container over here after that we can do one thing we can right click on this thing click on copy then right click paste okay so this will save you some time then right click on the second copy and over here right click paste all right so we can still do these things now for this styling whatever styling is we have done so right click on this container the main container edit container click on copy now come over here and select this container okay the outer container right click paste style and this is how it will look like okay so this is the style that we wanted so just a little bit changes here and there you can achieve this thing now you can delete the top thing and this is what you have now the only thing that is left is to make the borders like you can make the corners rounded so for that you can select this main container the outer container go to style and select border and Border radius you can make 16 pixels now if I hide this thing you can see it is now rounded right come over here again now if you again uh there is one more thing if you see this search bar is behind this image we want it on top of this image so you can select this left container edit container go to Advanced and you will see Z index type in one and now as you can see once you type in one or if you don't see after typing in one type two and then you will see this search bar is now on top of this thing all right so you can achieve it like this now the background color of this page is this gray color a very light gray color we have to change the background color of this page to white color so to make this thing white you can select this option main container edit container go to style and select this option classic and change the background color to this white color right now we have this white color container click on edit and also uh we we wanted to change the layout to 1250 all right so make sure it is 1250 rest everything is fine click on update now this is our first section is now completed now we have just two or three more sections this was a little bit complicated I I totally understand rest all these sections are very easy you don't have to do anything or it's all simple and also uh because I missed that one single container everything was a little bit confusion confusing for you I totally understand that so I apologize for that all right so to create this second section we'll again have to start with this option all right let's do one thing uh let's add a container so we'll select this thing add new container select the first option now again come back to elements and here first we have to do one thing we have to select this option this divider option so again come back and search for divider you'll see the divider option drag and drop it over here all right now we want icon divider so under add element select icon and we want map icon over here so I'll select this map icon click on insert now as you can see this is how it is looking uh with we don't want this big we want maybe just 20 percentage and we want it in Center so select Center align go to style now you can change the heading you can change the divider you can change the icon size and so on right but if I don't want to do this thing I just want to change the icon color okay so I'll select the icon and select the color to this color that we have already saved in fact we also have to change the divider color to this color all right then after that we have this text we have the heading so we can drag and drop this thing at the bottom type in the heading bring it in Center it is already just and everything so it is fine you don't have to do anything then we have the we have another heading we'll drag and drop at the bottom paste in the text bring it in Center go to style and change the color to this color okay and change the size it is very big I want to make it 18 pixels and make it lighter 300 and we will do a little bit let us let us spacing will remove this so we'll make it minus 0.5 all right and uh yeah rest everything is fine then below this thing we have this option we have the places option so for that we'll again come over here and search for houses grid okay if you search for houses grid here it is houses grids drag and drop it at the bottom now what do you want to display now here proper type is getting displayed if you want to display City okay so we have one and you can select this style four the one that I'm using in the demo website is style four so under style four once we add more two three four five six it will you know keep on adding these cities okay so select style four now for this also select this option edit container change the background color to white color all right now below this thing we want to display these counters so for that we'll select this option will in fact add another container at the bottom and this time we'll do one thing change the container layout to grid okay and when you say change this thing to grid it will ask you how many columns and rows you want so under columns we will select four columns and under rows we'll select one row so four columns one row because here we have one two three four and just a single row now inside this we have to add the container so search for in now inside this we have to add the counter so search for counter drag and drop the counter over here number is 2500 plus and the title is listing for sale so under number I'll type in under ending number I'll type in 2500 under suffix I'll type in Plus okay and under title instead of cool numbers I'll I'll type in listing for sale now let's change some styling over here first of all the color let's see the color code all right so this color is 283044 okay so I'll copy this color code under number I'll paste in the color and I'll save this color as well 283044 and we'll decrease the size of this thing this is pretty big so we'll decrease the size to 30 pixels all right rest everything is fine you can just right click copy right click paste it in these empty columns then after that for the second one it is 1350 listing for rent so select the second one change the title to listing for rent and change the number to 1350 and so on and so forth all right click on update hide this thing and this is how it is looking this is your second section then after that we have the third section so for that again we'll come back we'll add a new container so we'll add the container over here now for the title and subtitle these are very similar to this first one so we don't have to do anything we just have to copy this title paste it over here copy the subtitle paste it at the bottom all right you just need to change the text styling is same just need to change the text or you need to change the content then below this thing we want to add this slider all right you can see this slider we have to add this slider so for this we'll have to search for this option cards option property cards now there are many different options property cards and we don't want to use the regular one we want to use the carousel one okay because we have this option so actually search for Carousel c a r o u s e l you'll see property Carousel version one two three four whatever style you want so in the demo website I've used this style one property card Carousel version one if you scroll down this is how it will look like okay here as you can see previous and next option is given this dot thing is given at the bottom so all the elements are now present now you can go ahead and Design This thing however you want it so in this case uh let's see as you can see this is the design and what all things you want to hide so in this case we have hidden this button details button you can see we don't have that button and also John Doe and one hour ago this thing is not present in the bottom so you can select this option uh show or hide and in this you can hide the detail button and hide date and agent now this is how it is looking all right then below this thing again we have the same thing we have a you can see we have this these options so I'll actually do one thing copy this paste it at the bottom then copy these two title and subtitles I'll copy this title paste it over here change the text to featured homes then we have the subtitle copy it paste it the bottom and below this thing we have these three columns okay these are the three columns so for that we'll again come back over here we'll add another container at the bottom and again we'll change the layout to grid and we want three columns and only one row and inside this thing we want to in we want to insert this image box so search for image box drag and drop the image box at the bottom whatever image you want you can upload that image so in this case I want to put upload this image and the title over here says apartment for sale okay so I'll type in this thing I don't want any description so no description now go to style let's change the styling of this thing first of all before that under image size because the image is very small so under image size select custom and select 400 width and 600 height and click on apply and you will see this is how it is looking still looking small so to fix this thing you can go to style and you can increase the width so the default width you can see is 30 you can change this thing to 100 and spacing is 15 you can change this thing to 25 so that there is space between this text and this image all right now copy this thing paste it in the second and third option and to change the content just click on the second one title is single family homes for sale okay and some other image so in this example let's select this image all right and you should always link this thing with something so you're adding this thing you want to link this thing for uh to apartment so if you want to see the apartment link you can go to this thing uh you can go to your realistic thing and under types you will see apartment thing here it is you will see the view option right click on The View click on copy link address now come back to this page and under apartment for sale paste in the link so that whenever somebody clicks on this image or this link apartment for sale they will be redirected to the apartments thing okay now select this option edit container okay and here we have to do few things so these things are looking very big we want to decrease the size first of all uh the width will be 1000 okay 1000 pixels and space between each grid we want to increase that thing so you will see this spacing thing column and GAP so column Gap will be 40 here as you can see now it is uh looking much better and finally we have this color this blue color in the background so for that again we'll come back over here we'll select the main option first let me add some spacing at top and bottom because here as you can see we have this spacing at top here we don't have any spacing so padding top and bottom I'll add 70 pixels all right top and bottom now go to style and add the color but this time you don't want to use the classic color we want to use the gradient color and under first color type in this blue color code all right which is E5 F2 F6 now for the second color we don't want any color we want to make it transparent so to make it transparent you see the second option bring it at the extreme left it will become transparent all right but uh but this is how it is looking right now at top it is dark but at the bottom when when it reaches the bottom it becomes very transparent I don't want it like this I want to have a different style so for location one I want to select maybe 70 percentage and location 2 you can select maybe 50 or whatever number you want till it reaches over here right here as you can see it is now stopping over here and the first option first color the blue color basically is starting and stopping over here and the you know transparent color is at the bottom so this is the style that I wanted so I have achieved it now I can click on update and finally for the last section this is also a section this is also part this you know newsletter thing that you see this is a part of this home page so for this we'll add a new uh option we'll add a new container and we'll select this thing okay we we want two columns so under this we'll add another container and in fact in fact we don't want to do this thing we'll I'll delete this thing I'll just add a container and I'll divide this into two columns okay you can see this is the one now in this first option we want a title and subtitle which we have used several times I'll copy the title and paste it over here at the left hand side text is sign up to our newsletter add this text bring it at left and then we have the subtitle so I'll copy this subtitle bring it over here paste it and this is our text so I'll change the text bring it as left now the right hand side we want this newsletter form or any kind of form it could be a contact form whatever form you want so you can search for contact form and you will see contact form by houses drag and drop it over here now this will give you a full length contact form we don't want that we don't want the name section we don't want the messages section we just want email email also we don't want label at top so I'll remove the label now for the input it is 100 100 I want 80 percent okay so ATN first submit button we can make it 20. and now as you can see this is besides this and I want to make it large by the way I'll select large field of field also I want to make it input large all right now color and all you can go ahead and change the back the color go to style go to button add the background color whatever color you want and finally select this option edit container and change the color to this blue color so we'll select this option edit container go to style and add this color as the blue color all right if you want to add some spacing at top and bottom so maybe you can add like 25 pixels or maybe not 25 35 pixels both at top and bottom this is how it will look like all right now click on update and with this we have completed our home page now when whenever you create any page or you should always see right now this is the desktop view now it is looking really beautiful in desktop but we have to see how this page will look in a mobile phone and in a tablet so to see that thing we'll have to select this option at the bottom left you have the responsive mode click on this icon click on the mobile icon now as you can see this is how it is looking in a mobile phone let's start from Top first of all for the text I'll select the text bring it in center and decrease the size in the mobile phone all right so maybe 30 pixels is fine select the second text bring it in Center again for this also I'll decrease the size to maybe 14 15 pixels is fine this is looking good the sale and all these things so don't need to change anything over here all right rest everything is looking good I just want to do one thing add some space at top of this grid so I'm not able to click on edit grid so you can do one thing again use the Navigator and let's see where we are using the grid not here scroll down we want to see where we have used the counter so you can see here it's a counter so on top of the counter we have the container click on container go to Advanced and let's add some margin at top so maybe 75 pixels or maybe let's add 100 pixels margin at top so that we can see text like this okay now you can scroll down rest all the other things are looking absolutely fine don't need to do anything click on update so this is looking now good in a mobile phone uh in fact I want to do one thing you you see we don't have any extra space at top so on top of this text I want to add some space so I'll select this option select the left column go to Advanced and padding is zero from all side which is fine but at top I want to add maybe 25 or 35 or maybe even more 50 pixels now it is looking much better at Top we have this nice space okay and one more thing this search bar because we had we had added this minus 80 if you remember margin it is in Mobile also it is going towards right so to fix this thing select this thing go to it go to go to this option first click on this option edit search Builder now go to Advanced and here as you can see we have this option minus 80 make it 15 okay so we want to maybe 15 from all sides this is how it will look like right and rest everything is fine don't need to do anything just press update now similarly you can go to Tab and see how it is looking in a tab so for the tab for first text you can decrease the size this is fine in fact you can now for tablet it is fine don't need to do anything I guess all right so with this we have now successfully completed our home page we have seen how to make it mobile and tablet friendly as well now you can again come back to your dashboard make sure you have first updated this page so that all the uh changes that you have made are now saved now again come back to your dashboard now let's import all the remaining Pages uh like we have the about page block page and contact page so for that we'll click on pages and let's first import the about Pitch so first click on add new will have to add a new page let's give it a title of about us all right and change the template to Elementor full width okay change the template to Elementor full width and after that under header type select Elementor and main menu transparent select yes and publish this page now click on edit with Elementor we don't have to design it from scratch this is your about page we don't have to design it from scratch because that will take a lot of time we just have a template we can use this template so for that to import the template you have to click on this second icon add template icon go to my templates right now it will be empty because we have not yet imported any templates so you can click on this import template select file and under media folder we have this Pages folder open that and now I'm import the first file about us click on enable and import and once it is imported you can insert it or maybe let me do one thing let me import this second file as well the the contact page file okay so in it is imported now again click on import and now select the second file houses contact us now because we are creating the about us page we will insert the about us template so click on insert and this template is now inserted for you you don't have to do anything the only thing that you need to do is just change the content everything is created for you just need to change the content and sometimes it might happen that refresh and it will look like this to fix this thing you can change go to settings and change the uh page layout to Elementor full width okay all right now click on update so this is how it is looking right fine now if you want to do any changes we already know just click on that thing and you can change the text and all uh we cannot see any block because we have not yet created any blocks but don't worry we'll do it very soon so again first come back to your dashboard now let's create a contact page click on pages now click on add new let's give it a title of contact us or just contact same thing or template will be Elementor full width header header type will be Elementor and main menu transparent will be yes now publish this page and once it is published you can click on edit with Elementor now again click on import template or add template go to my templates we already have the contact page template so insert it click on apply and here you have this thing you have your contact page template as well again you might need to click on settings and change the page layout to Elementor fullway then click on update all right so here you can see we have the contact form we have everything over here all right with this we have completed this thing as well now again come back to your dashboard now before we create the blog page in fact let's create the blog page click on pages and click on add new give it a title of blog don't need to do anything just publish it all right now it will be empty so we need to create blog post but before that we have to set this page as a Blog Page so our Hardware settings and click on reading just like the home page we have to set this page so under homepage we have home now on the post page we want to set this block page now click on Save changes now to write a blog post click on post we have one dummy blog post hello world first delete this one now to add a new blog post you have to click on this add new button let me open a dummy blog post let me open some blog posts from the demo episode so that I can show you how it is done this is the title of your blog post so I'll add this title then below this thing you can add your content so simple text like this okay you can just add the content and if you want to make anything heading for example this is first let me to add a heading you click on this plus button and you search for heading and paste in whatever heading you want so just like Elementor we have different elements you click on plus button you search for elements and for example if you search for Block code here we have code and if you scroll down here as you can see this is block code style so I'll copy it paste it under this block code then below this if you want to add these kind of gallery then you can search for gallery here it is media library you can upload few images so let me actually upload one two three four five six seven eight images click on create new Gallery insert gallery and once you click on gallery once you click on this Gallery link if you see at the top at the right hand side you get some options I'll change the column to 4 and this is how it will look like so you can add these kind of things now click on this post option at the right hand side under category you can click on add new category and you can give some category for example here we are talking about business so I'll add a new category called business now click on add new category and then we'll add this featured image at top so I'll search for this featured image click on set featured image maybe I'll set this image or this image is the featured image click on set featured image and publish it so this is how you can create a blog post now again come back now let's see how we can create a menu header and footer is left so if you scroll if you refresh we don't have a menu header looks a little bit different we'll have to fix it first let's create a menu to create a menu hover over appearance and click on menus now Under menu name give it any name I'll name it main menu you can name it anything you want now what all pages you want in the home page in the menu you can select that so I'll click on view all under pages I want home a Blog about then we want all properties we want to uh these all pages compare board agents these are all already available under this option so I'm not adding those links I want contact page and very important search pages and packages okay now unders instead of search results I just want to type in search all right so I now want to bring this search at top all properties over here and tick mark this thing main menu click on Save menu now once you click create this menu again if you come back to your website refresh it you will see you have this menu over here all right now we need to create few more menus so click on this link create a new menu because if you see the footer in foot also we have two menus this is also a menu and this second one this is also a menu so I'll create a new menu name it footer one click on create menu and under this I want to add these three links a board compare and favorite okay no need to tick mark anything at the bottom just click on Save menu now let's create this second footer menu so click on create a new menu give it a title of footer 2 click on create menu and this time I'll add these three links my profile my properties and so this one let's see save searches okay click on Save menu okay so we have created these menus for the footer now let's create the footer let's add these menus in the footer so for that uh under appearance you will see widgets click on that and here we want to select footer one two three four so under footer one if you see we have the contact option okay so under footer one click on plus and search for contact okay you will see houses contact us select this option now the text there is no text which we have the address so I'll copy the address paste it in the address we have the phone number so I'll copy the phone number paste it under number all right just some number over here then we have the email address I'll copy the email address paste it under email all right so this is uh your email and your phone number and all then after that we have a second and third so second under footer 2 select foot area two click on plus search for navigation menu I'll give it a title of about and select footer one that we have just created all right now select footer Area 3 again click on plus search for navigation menu select this thing I'll give it a title of help and select footer 2 that we have just created Okay now click on update now if you again come back to your website and refresh it with the bottom or we need to change the style of footer change the color and layout and all but for now it is working we have the contact we have the these two nav menus okay so this is working for now now we need to create a sidebar for the block page so if you see the blog page okay we need to create a sidebar for this page like we have over here if you see the blog page at the right hand side we have categories and latest post so for that you will see that thing under default sidebar click on plus search for categories okay select this categories list okay and after that again click on plus and search for latest post okay select this one houses latest post now click on update again if you again come back to this page and refresh it okay categories and latest post now finally let's go to the theme options and see all the other settings that are left let's start from Top let's start from Journal settings or make sure you have selected container with this 1170 pixels back to top is on breadcrumb is on and uh square feet is the default option which is good and just font family is available over here Okay now click on Save changes then we have logo N5 icons so whatever logo you want you can upload that logo so we want this logo option I'll remove this and upload the logo I've given you this logo file as well this is the one click on select and for these as well let's select this option mobile also we want the same logo mobile retina also for retina screens and transparent also we want the same logo all right there it is click on select all right then okay so logo width and height so low height I want this thing to be maybe 24 25 pixels and width will be 130 same for mobile 24 and 130 so height is 24 with 130 now click on Save changes again if you go back to your website this is how it is looking we have to change the style of this thing a header that is the reason why it is blue we have to change the style so go to styling and select navigation bar in fact let's go to header first click on header and select the fourth header okay this one fourth one click on Save changes and box layout left line first let's see how it is looking let's refresh this page okay this is how it is looking uh navigation I want write a line okay create listing button let's see click on Save option for now we'll fix the button but this is how it is looking for now navigation all right create listing button under header you can see create listing button okay we'll see the create listing button later on first let's see some other options we have seen the login and digest already price and currency make sure if you if you want to use Indian rupee instead of dollar make sure you change the currency symbol from here instead of dollar you can select Indian rupee or whatever currency you want so whatever currency you're using it should be same throughout the website typography we have seen now under styling primary color I want to let's see I want this color as my primary color this dark color and the color code is this 283044 right this I want this to be my primary color primary hover color you can select this color change it a little bit right secondary color is this button color which you'll see a lot for example these buttons and so on so for that let's see what color we can use for that we can use a little bit lighter color let's see uh at this color we can use this color this button blue color button all right so this is going to be our secondary color instead of this green color here as well a little bit lighter all right let's save let's click on refresh this page now as you can see button color and all these things are now changed then we have a create listing button over here under styling click on this create listing button button background color will select again this color or whatever color you want if you want some other color you can change that color and Border color button background color on Hover lighter a little bit in border on Hover in fact let's select this thing border also will be the same color click on Save refresh let's see the create listing button okay now it is looking better and let's see what we have next property details which is select the property detail option uh default I want to maybe this one okay or maybe this is also looking good maybe the fifth one I want this as my default option and we cannot see the video okay video and everything is on let's see three columns fine and under show hide option make sure everything is enabled and under layout manager default now under layout manager default uh I want to enable these things schedule a tour version 2. I want to enable this then nearby places also we want to enable we want to bring it at the bottom and yeah rest everything is fine these two things were not available earlier but once you refresh it you will see these two schedule thing as you can see schedule 2 is now available and one more thing nearby places let's see where that is gone okay we don't have any places nearby this property that is the reason why it is not showing and uh yeah this is good let's see some more options add new property and all is fine search result page so for the search result page I want half map and instead of list I want grid and let's let's see the changes click on search page now as you can see half we have map and we have grid style so if you select a grid if you select list Style let's refresh this page it will be half map but at the right hand side it will be a little bit different list style option okay so this also is good if you click on this thing you can you can see this option on the map you can zoom in zoom out a bit if you want all right rest everything I think is fine okay footer is left footer let's see where footer is here is photo all right so footer under footer we want uh this option the last layout okay and styling will have to go to styling for that so select styling and select footer which is over here now background color for the footer is this light blue color again so let's see what this color is this is E5 F2 F6 so we'll select footer top foot of both background color both footed top and footer bottom will be this color link over color is fine if you again come back refresh this page in fact we have to go to home page or any other page to see the footer this is how it is looking text color will have to make it black so text color make it black refresh it now it is looking much better all right and I think rest everything is fine your rest everything looks good let me see and whenever somebody you know goes through any property if they you know if they contact this person this person will get some email that this somebody is trying to contact you so if this all works on email at least everything is fine I guess everything is working properly create listing we have seen all the things which is working absolutely fine and with this we have completed this tutorial I hope you guys find this video helpful if you find this video helpful if you want to watch more useful videos like this one make sure to subscribe and click on the Bell icon if you like this video give a thumbs up to this video and 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 sessions for me you can always leave them in the comments section below and finally thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 68,461

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

Id: fm0biCinGeM

Length: 153min 38sec (9218 seconds)

Published: Mon Jun 19 2023