How to Make Tours, Travels & Hotel Booking Website with WordPress & Traveler Theme 2022

hello friends amnesia can train this real teach you how to create a professional and beautiful tools and travels and hotel booking website with wordpress this website that we're gonna create in this video has all the essential features and functionalities that a professional two and travels and hotel booking website must have now before you start creating this website let me show you a demo of the exact same website that you will be creating in this video if you follow my step-by-step tutorial so first of all as you can see this is the website that will be creating if you see from top to bottom we have so many different beautiful things going on over here now the best thing about this website is that we have included many different things in one single website so as you can see i'll show you how you can create different hotels then we'll see how to create different rooms so hotel booking and room booking and after that we'll also see how to create different tools and also how to create different activities now let me show you what these things are so basically you have to create four different websites for these four different things but here you can include all of those in one single website like i have done over here so for example if i open this hotel stanford here as you can see first of all the rating the title you can view this thing on map if you click on this link and after that you can see the average rating hundred how many how much percentage of guests recommend this thing and after that you can see a simple gallery of this hotel now there are many different styles this is just one of the layouts which is available there are many different layouts available now at the right hand side in this sidebar you will see you can select any check-in and check out time and after that you can select how many guests you have or how many rooms you can also set pricing based on per room or per person so here in this example as you can see we have set this thing to per room okay so here as you can see we are setting per room you can if you want you can set price based on per person and in that you can also set different price for adults and different for children then you can check the availability and after that we'll see how the process goes on how we can you know book this thing if you want you can just submit this form and you can send an inquiry then if you scroll down here you will see about the owner who the owner is and some information about this place or about this hotel then at the left hand side you'll see we have this description so you know a short description about the hotel some rules and how many rooms and how many different types of rooms are available so here as you can see family suite standard room superior penthouse so if you open any one of these for example if you open this one you can see this is how this looks like you know it will tell you the size how many bedrooms how many people allowed children allowed you can set all these things and again pricing if you want you can submit some rating here also you can select check in checkout date how many guests and you can also add more options so if you want some vip service for how many people you'll have to pay some extra money so i'll show you how you can create these add-ons as well people can also share this thing if they want they can like this and they can favorite or wish list this thing if you want to ask any question to the owner you can just click on this thing and you can send this person some message and you can ask him anything you want if you scroll down you can see more about this room and so on okay so booking system is available over here so we have seen the hotel and rooms now let's see tools and activities so if you open any tools single tool for example if you open this store this is some you know tour in this city so if you select this thing you know what location for how many what is the duration so this tour is of eight hours daily tour whether it's a daily tour how many people allowed and after that more highlights of this tour itinerary so you can see all those different details on first day what you will be doing and what all other special things about this thing which all thing or what all things are included and excluded in this thing so all these things can be added okay you can also add this frequently asked questions facts over here at the bottom see the rating and so on here also people if they want they can simply fill in this form select the date and everything and they can book for this tour or for this activity activity is different but before we see that let me show you one very important thing in this website we also have a front-end dashboard so yes you can see this is one front-end dashboard and the most important thing about this website is that this is a multi-seller or a multi-party or a multi-vendor website which means that you can create your hotels tools and activities other people can also come to your website they can also create their hotels and they can submit that on your website and whenever they receive any booking successful booking on their on their hotel or on their room or tools or an activity you can charge them some commission so you can have like 10 percent commission on every single sale that they have or maybe on every single booking that you know that is done on your website you can charge some commission on that and all your sellers and customers will see this front-end dashboard from here they can control everything if they want they can add a new hotel or a new room from the front end itself they don't have to go to the back end for that they can do it from the back end as well and here as you can see we have so many different designs for every single thing so for a hotel design we have different layouts for rooms for activities everything we have multiple layouts so they can follow this four or five different simple steps and they can add their hotels they can also control the hotel booking they can control the inventory they can control everything from the front end they can set the pricing and if they hover over any date for example if they hover over this thing in this particular hotel that they have added they can see how many bookings left or how many slots are left they can see everything from here so very advanced everything is done on the front end and a very advanced website you can see yourself if they want they can you know interact with each other customers and sellers can interact through this email system or through this inbox system in fact even you can interact with your sellers and customers so all the sellers that are present on your website you can interact with them then we'll also see the withdrawal option so if person for example if any seller has some amount of money how they can withdraw that money will see that process in this video in complete detail now if you again come back to your website if you see in the home page at the header you can add your social links you can add your email address you can add your phone number you can also add multiple currencies so for example here as you can see i've added three different currencies euro us dollar and australian dollar so you can add multiple currencies and i'll show you how to add or how to set the exchange rates for these currencies so basically you can have multi currency system then we'll see how to create this simple menu you can upload your own custom logo on this website and we'll be using a page builder to design this website so creating and designing this website is super easy now we have this search bar over here you in fact you'll see similar search bar and similar booking form throughout the website so what destination you're looking for for example i'm selecting la from what date to what date and then you can select some more advanced things related to tool if you select a hotel you can see some other options related to this so based on the selection things will change and you can click on search and you can see all the results related to your search query then we'll see how to create these banners and you can add you can give some special discounts and you can generate some more bookings then we can also convert this thing or we can sort out this thing based on different locations as well so in new jersey or in nyc you can see there are 23 different activities 20 hotels and 24 different tours so if you click on that thing you will see all those things in one place if you click on any one of these options you can see all the different tools activities and hotels available in this option or available in in this particular location then as i said earlier you can see all the hotels tools and activities and if you want you can just select any one of those and bookmark that thing so let me actually show you a very quick demo if i select any hotel and if us maybe i want to select this room okay standard room i'll select the room details option and select some options from here check in and check out date how many adults if any vip service for how many people and after that if you click on book now you will now be redirected to this page here you will see all the different details and here you can make payment through credit card debit card through internet banking through net banking we'll be adding all those different payment gateways in this website so we'll see how to integrate those payment gateways on our website so you can accept payments through that and after that how to manage payments we'll see that later on in this video now there are many more different things for example if you select the search query how this search page will look like you can control that thing how the tool search page and all those pages will look like in fact we'll see how to create some other pages as well for example i'll show you how to create the about page then we'll see how to create the destination page how to create the contact page so basically we'll be controlling and we'll be making this website a complete package so we'll not be missing anything so here as you can see if somebody wants to register on your website as a seller or as a hotel manager or if they want to add their tour or hotel on your website they can click on register now they can sign up as a partner and they can now create that thing okay so we'll see how everything is done like this all right so this was a very short demo of the website that we'll be creating in this video now i hope you guys like the demo website now if you like this demo website info create this website make sure to watch the complete tutorial and before you proceed further also make sure to subscribe and click on the bell icon so that you don't miss any future notifications and 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 website if you have any doubt any comments any sessions for me you can always leave them in the comments section below now let's start creating this website right now to create any kind of website whether it's an e-commerce website a simple blog or a business website any kind of website we need two basic things a domain name and a hosting account a domain name is simply the name or the url of your website for example blogger.com youtube.com google.com all these things are different domain names so we'll also have to register 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 second and the most important thing is your website's hosting hosting is basically a server or a computer wherein your entire website is saved so if you see this website all the different pages all the different blog posts everything 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 live because your website is always up and running now hosting is the most important thing about your website because everything related to your website is directly or indirectly dependent on your hosting so your website speed your website's performance the user experience on your website and even your website's ranking in google search results is totally dependent on your hosting so if you select a good and reliable hosting your website speed and performance will be amazing the user experience on your website will be really good you will have better security on your website so for anybody to attack or hack your website it will be almost impossible and with that most importantly you'll also get better ranking in google search results and obviously in contrast to that if you select some cheap crappy hosting everything will be opposite of this 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 i'll show you one thing just open a new tab and type in blogdood.com hosting in fact you don't have to type in this thing this link is also given in the video description below so you can simply click on that link and you should be redirected to this page now this is the hosting that we'll be using this is the most affordable best bang for the bug hosting that you can get in the market and we are using the wordpress manage hosting over here because we are using we are going to use wordpress to create our website so we want to use we don't want to use the regular web hosting we want to use wordpress managed hosting so that our website speed and performance improves if you scroll down you can see we can read about the rating and everything and if you scroll down you can see we have four different plans over here single wordpress wordpress starter business wordpress and wordpress pro now for most of you guys i would recommend you to start with this wordpress starter package and here as you can see you're getting so many different features with such a small price so here as you can see with this plan you can create hundred different websites so today you're creating this tools and travels website tomorrow if you want to create maybe another website another tool to send travels website or maybe another e-commerce website you don't have to purchase a new hosting again you can host all your websites in one single plan so you can see basically how you can host up to 100 websites in one single plan then after that we also get 100 gbs of ssd storage so this is one of the most important thing about here about this hosting is that here we're getting ssd storage now most of the other hosting providers they use the hdd storage or hdd server to host your website but when your website is hosted on hdd server your website is very slow so it loads very slow the performance is not that great and here they are using ssd server and ssd is approximately 30 to 40 times faster as compared to regular hdd servers so this is very important and here you're getting hundred gbs of storage now to create a website like this one as you know a two cent travels website with maybe thousands of different hotels rooms activities and so on you will need hardly one gb of storage and here you're getting 100 gb of storage so very important this is more than enough then after that you can see you're also getting free business email so instead of a regular email address like niger gmail.com you can create an email address with your own website name like niger newer at blogtoot.com something like that then we also get free ssl certificate very important to make sure your website is secure and also to accept online payments we also get free domain name so you don't have to purchase a domain name you'll get it for free we have unlimited bandwidth so there is no upper limit on the amount of data storage per per month many different hostings have this limit but here there is no such limit and as i said earlier this is managed wordpress and wordpress acceleration so these guys are using wordpress slide speed caching on your server so this improves your website speed because the caching is already running in the background very important then after that you can see there's so many more options and features available at the bottom so whatever hosting package you want you can simply select this thing and click on this select button i would recommend you to start with this starter package now you will be redirected to this page and here as you can see we just have to follow three different steps to create your first account first of all we have to select a billing cycle so for how long do we want to purchase this thing we have to select a period so the most recommended or the most common option is 12 months for one year so if you select this option here as you can see the regular price is 15 per month but if you select one year for 12 months you just have to pay like half half of that price in fact less than half of that price you just have to pay 650 per month and if you want to get more discount obviously you can go with 24 months and here as you can see we just have to pay 550 per month so 5 dollars 50 cents per month and not only that the special thing about hostinger is that the renewal price is also discounted so normally what happens is you will see some hosting's giving discount like 60 70 percent but once you renew after one year for example for the first year you get it for maybe nine dollars per month for the next year when you renew after one year you have to pay like 15 or 20 25 per month but here that is not happening if you select for example for two years for 24 months you'll have to pay five dollars fifty cents for the first year per month and after that after two years when your plan renews in 2024 as you can see you will have to pay just nine dollars per month so the renewal price is also very heavily discounted very important so obviously i would recommend you to start with at least for at least a year 12 months and obviously the best option would be to go with 24 months which is two years so that you get even more discount and here you can see this subtotal is just 133 dollars for two years and if you see for other hosting for example before this thing i was i was recommending a2 hosting so if you see my earlier videos my old videos you will see i was recommending a2 hosting in a2 hosting you have to pay 130 for the very first year and here you're getting that thing for two years very important and also the domain name is also free so whatever option you want you can select that thing in the second step you can just enter your email address so just by entering your email address they will create an account for you with this email address just make sure the email address you're entering is correct there's no spelling mistake or anything then after that you can select the payment method so there are many different payment methods available you can make payment through credit debit card or your regular atm card you can make payment through paypal alipay coingate no cryptocurrency you can also make payment through google pay in fact if you're watching this video from some other country based on your country you will see even more payment options let me show you right so as you can see now i have opened the indian version of this so if you're watching this video from india if you open that link blocked dot com showstinger you'll find out that you have many different domestic payment gates for example in the credit card we have the rupee card rupa is a domestic card which is used only in india but here as you can see because you have this option you can also pay make payment through upi which is again domestic card or domestic payment method in india we have the net banking paypal google pay paytm all these options will be available for you so whatever option you want you can select that thing and also make sure to enter the coupon code so that you get some extra discount for example if i select one year the regular price is just like 4200 rupees which is a very small price by the way now if i enter this coupon code mayor and a double y ar i'll get even more discount now here as you can see three thousand nine hundred rupees so once you select this thing just click on this submit secure button and make the payment now once you make the payment once your payment is successful you will see that this will reload and you will now see this screen so in the previous step we have set the email address for our account and in this step you have to set your password so whatever password you want you can just set that password under new password and obviously in the next line enter the same password again and after that you can click on confirm just make sure that you remember this password and email address that you have entered in your previous step because this email address and password will be your login email id and password so just make sure to remember that now once you enter that thing just click on confirm and now you'll see this screen hello screen so this is the first screen basically the hello screen for once you do this for for the first time you'll see the screen now click on start now to start this process now in the next step it will ask you whom you're creating this website for for yourself for a client for your company whatever the option is you can just select anything from here for example i'm selecting myself and after that this will ask you more question what kind of website it is a business blog portfolio again just select anything you want or if you want you can completely you know skip this whole process so this is basically just a simple survey if you don't want to fill in anything over here you can go ahead and click on this skip link which is given at the bottom click on that link and you can skip this entire survey now in the next step this will ask you what platform do you want to use wordpress woocommerce some other platform or if you want you can even migrate your website so this option migrate your website is a very important option so for example if you already have a website created with some other hosting and maybe you're not really satisfied with the speed and performance of that hosting you can select this option migrate my website and click on the select button and in the next step you can just follow the process and you can migrate your website basically they will migrate hostinger will migrate your website from your current hosting to host ninja for absolutely free you can do this thing later on as well so i would recommend you to select wordpress for now because that is the platform that we'll be using so just select wordpress and click on select and now you will have to enter your email address and password now in the previous step the email and password you entered that was for you know hosting your control panel this is for your wordpress website so make sure again whatever email address and password you enter make sure to remember that thing so whenever you want to log into your wordpress dashboard you will have to enter this email and password again make sure to remember this thing just select this thing and click on continue now in the next step you will get this option so they will basically they have created few templates for you if you want you can use these templates but we don't want to use that thing because we are creating a completely different type of website so again i would recommend you to just go ahead and skip this thing and now as i said earlier you are getting a free domain so if you want to claim your free domain click on this option click on the first option select option under claim a free domain and just type in whatever domain you want so for example i want neyashik dot in or if you're on dot com.net dot info whatever domain name extension you want you can just search for that here as you can see so many different domain name extensions are available so whatever domain extension you want just select that thing and click on search it will search whether this domain name is available or not if it is available it will automatically be added for you for your account and after that you can click on continue and proceed further so as you can see it says domain is available so you can now go ahead and continue this thing now there is one more option which is this third option use an existing domain now this option is for those people who have already registered some domain name on some other website maybe on good any name chip or some other website so if you have done that thing and if you want to use that domain name with hostinger then you can select this option use an existing domain and after that click on select now enter your godaddy domain name or wherever your domain name whatever domain name you want to use existing domain with hostginger just enter that domain so for example i have a domain name block dude on godaddy so i'll enter that domain over here so maybe i want to use this godaddy domain with hosting so i'll select this thing and again click on continue and now as you can see this will tell you that this domain name is available it is already registered on godaddy and everything so you can now just go ahead and click on continue and in this step they will first show you the data center location so based on your location a data center will already be or automatically be selected for you so because i'm from india for me the asia data center location is selected if you want you can just go ahead select some other data center location maybe in singapore in some country in europe usa north or south america wherever you want you can select that data center location i would recommend you to leave it as it is leave it to default and again just click on cancel cancel this thing and click on finish setup now once you do this thing wordpress has basically now started installing on your domain name or this is a small process hardly takes around two to three minutes so let's wait and now as you can see this is hundred percent completed now once this is completed i would recommend you to click on this host ginger icon which is given at top this so stringer logo click on that and you will now be redirected to your edge panel or if you want you can uh in future whenever you want to come to your edge panel you can just type in hpanel.hostringer.com and you will now be redirected to this page your edge panel now here first of all i would recommend you to click on hosting and here click on manage you'll see your domain name click on manage now if you've just registered a new domain name you don't have to worry you can click on dashboard and proceed further but for those of you who have selected that option existing domain if you want to use the existing domain name with host danger for example you want to use your good idea domain name with host changer first you have to connect that godaddy domain with host danger so let's see how that is done first go to godaddy.com and login to your account now once you log into your account you will see all the different domain names that you have registered so maybe i want to use this domain block dude so here you'll see this option if you click on this option you will always see manage dns so whatever option you're using whether you're using godaddy name chip whatever option you're using or you'll always find manage dns option so select that option and scroll down you will see your name servers click on change we need to change these name servers and select this option enter my own name server you know advanced option now delete these two name servers current name servers from here come back to your account and here in the dashboard you will see your current your name server that you have to use okay so copy your name server number one paste it into line one and this is your second name server copy it and again paste it under line two and click on save now once you click on save it can take up to 24 to 48 hours to link your domain name whatever domain name or wherever it is registered whether it's on godaddy name chip name right wherever it is registered it will take around 24 to 48 hours to link this domain name with your current hosting with your host danger so if you just done this thing i would recommend you to take one day rest and you know do all the other things in the next day so when you come next day click on dashboard click on this option dashboard option and for those of you have just registered a new domain name you don't have to wait you can just you know proceed further watch this video and do whatever i'm doing now once you do that you will see this screen and here basically this is how it will look like if you're doing this for the very first time you will have to install ssl certificate so for me it is already installed here as you can see it says enabled if it is not for you you will see a button which should say set up ssl you need to click on that button you need to install ssl certificate on your domain name so just click on that button uh this will take around five six seconds this fill this page will reload and after that you will see ssl enabled and after that i would recommend you to see this thing that light speed should be on for you light speed web server should be on so that your website speed and performance improves and also force https should be on now if you see the demo website this lock pad that you see besides the domain name this is the ssl certificate basically so we want this thing and we also we always want https this secure version to run if you don't understand this thing just don't worry make sure force http is on lightspeed is on and also make sure ssl is installed for you now once that is done you will see this button edit website click on this button and now you will automatically be redirected and logged in to your wordpress dashboard now once you visit your website dashboard for the first time based on different plugins you you might see these kind of notices you can always click on go back to dashboard and you can cancel these notices and come back over here come back to your dashboard now this is how the dashboard looks like in this page the dashboard page this is the most important page of your website because you will be controlling your entire website from this page so if you want to change the website style manage payments manage bookings whatever you want to do you'll be doing everything from here from this dashboard page and whenever you want to log into your dashboard page there are two ways first option is we have already seen you can go to your panel click on hosting manage and after that you can come over here click on edit website and you will automatically be logged into your dashboard no no need to enter any email address or password second option is that you have to enter your website name and after that you have to enter forward slash wp hyphen admin so if your website is blocked dot com enter blog dot com slash wp hyphen admin you will be asked your email and password enter that and you will now be logged into your dashboard now whenever we install wordpress on a new domain name there are a few basic things that we have to understand and there are few basic settings that we have to do first of all in the dashboard page you will see there are so many widgets these are not really useful so first of all the very first thing that i want to do is i want to get rid of all these widgets so you can click on screen option and you can untick everything from here just like that okay everything is gone just make sure everything is unticked now we have a nice clean screen over here now at the left hand side with the second option is the post option now in this website we will also see how to create different blog posts so if you see the pages blog page under the pages option if you click on that here you can see we will also see how to create these different blog posts now these blog posts will help you to generate some extra traffic through google search results so make sure you do this thing okay blog post is very important so you'll be creating your blog post from this post option then we have the media option so whatever images media files you have on your website you will see all those under media library and you can manage them from here then we have the pages option obviously which will be used to create and manage different pages now at the left hand side you will see the appearance option under appearance if you see the few themes will be automatically installed for you and one of those will be activated so in this case this 2022 theme is activated and if you see your website right now if you just open your website in a new tab you will see this is how your website is looking now this style design and layout of this website is because of this theme 2022 theme if you just go ahead and activate some other theme for example let's go ahead and activate this 2020 theme again if you come back to your website and refresh it you can see your website design is now completely changed so this is basically what a theme does a theme changes your website style and appearance now we don't need these themes basically so you can just click on that and you can delete them click on this theme at the bottom right corner you'll see this delete button delete this thing we don't even need this 2020 theme we'll be using some other theme but for now we can just keep it as it is now click on plugins now we've just seen what a theme is a theme is basically the design and appearance of your website now it is a plugin plugin is kind of a software or an add-on that will add some extra features and functionalities to your wordpress website for example this plugin is an anti-spam plugin it will help you to delete spam comments on your website all in one seo this is an seo plugin so if you want to do seo on your website you can use this plugin there are many other plugins as well so all these plugins have different purposes so they have different features okay now again i would recommend you to first of all tick mark this thing you can just tick mark one by one or you can just select this thing this will select everything under bulk action deactivate all these things all these plugins we only need those plugins that are really you know required so again select this thing except for this light speed cache delete all the other plugins so just untick light speed cache and after that make sure all the other things are tick mark and delete all these plugins you can activate and you can download these plugins later on if you want okay now i would recommend you to activate the lightspeed cache plugin once you have completed your website so at the end of the video if i even if i forget to do this thing you can just once you complete this video you can come over here click on plugins click on activate and you can activate this plugin this will help to improve your website speed and performance right now i'm just deactivating this but again i'm saying at the end of the video once you complete this website come back and activate this plugin now click on settings from the left hand side and here you will see your site title change your website title so whatever title you want to give to your website i'll name it traveler okay maybe this is the name of my website and after that tagline i'll just type in hotel booking website okay you can type in anything zondo website name you can type in your website name brand name company name under tagline you can describe your website in few words then make sure your email address is correct after that also make sure that this thing is tick mark for you anyone can register under membership very important and after that time zone select the time zone based on your country so i'm selecting kolkata because i'm from india if you're from some other country select the time zone for your country and click on save changes now under settings click on permalinks and by default some other permalink structure will be selected for you we want to select this one post name this is the most seo friendly permalink structure so make sure you select this one and click on save changes again and after that again come back to your dashboard and with this we have completed all the basic settings related to our wordpress website let's now let's do one thing let's install all the required themes and plugins so for that we'll have to again open a new tab and type in blog to dot com slash traveler and again this link is also given in the video description below so you don't have to type in this thing simply click on that link and you should be redirected to this page now this is the theme that will be using travel booking wordpress theme and if you scroll down as you can see very popular theme you can read more about this thing you can see all the different features that are available with this theme so we need to purchase this theme the price is 79 but you don't have to worry about this because this is a one-time payment so once you purchase this theme you can use this theme on your website for lifetime there's no extra fee or anything like that just have to pay 79 and you can have this theme on your website for lifetime in fact even the future updates you will keep on getting those updates whenever new features new layouts are added you will keep on getting those updates for lifetime again and with that you also get six months of support from the theme developers so if you have any doubt any problem not able to set up the website anything like that you can always come over here go to support or comments and you can raise a comment you can you know type in any comment or you can raise a new ticket and they will help you out so just click on add to cart and purchase this theme now once you purchase this theme you will see this username your username at the top right corner hover that and click on downloads and here you will see all the different themes that we have purchased so we want to use this one travel booking wordpress theme click on download and select the second option not the first one second option installable wordpress file only click on that a new zip file will start downloading for you once it is downloaded you have to upload that file so again come back to your dashboard click on appearance now click on add new now with this theme will also get all the required plugins so you don't need to you don't need any extra plugins you don't need to purchase anything extra with this theme you will get all the required plugins so now click on upload theme choose file and select the file that you've just downloaded select this click on open and now click on install now now once this theme is installed you need to now activate it so click on this activate link and obviously this theme will be activated for you and once that is done again we need we can just go ahead and you know delete this 2020 theme we don't need that theme now and as i said earlier with this theme you'll get all the required plugins so you just need to click on begin installing plugins and you can install all these plugins for you if you want you can uh untick the woocommerce option if you don't want to use woocommerce with this option okay so we can select bulk action under that click on install and after that if you want to use woocommerce obviously you can install all the plugins but woocommerce is not really required so you can just leave that plugin no need to install that plugin and again once all these plugins are installed we have to again go back to that screen go back to the plugin screen and now we have to activate these plugins so you'll see this thing at the bottom you'll see this return to required plugin installer click on that again tick mark everything and now under bulk action select activate and click on apply this will activate all the plugins for you now once that is done just click on plugins just to make sure that all the plugins are activated if you see any screens like this you can just click on skip or you can cut it from here at the top right corner you can click on that you can exit this thing or you can click on skip you know both the works what the thing will do i'll just click on this thing i'll cut it and we don't need these two widgets as well now click on plugins at the left hand side and now as you can see everything is activated you can go ahead and activate the lightspeed cache plugin at the end of the video now the very first thing that i want to do right now is i want to create all the required pages so here as you can see we have so many different pages we have the user page we have the home page we have the dashboard page we have the search page many different pages are available so let's go ahead and create these important pages so first click on add new and let's start with the most basic page the home page that is the most you know basic page so first we'll just go ahead and name this thing home obviously because this is going to be our home page now the right hand side you will see template option we have to use this template for every single page whatever template you want you can set that so for home page we want to set a blank template so that we have a blank canvas and we can you know just design the page however we want it we are not going to design it right now by the way we'll do the designing later on for for now we're just creating all the pages and i also noticed that we have both elementor and wp bakery page builder we just need one of those both are page builders we just need one page builder so first let's come back and first let's set the home page and after that we'll do that thing so the page that it just created this is just a regular page you have named it home but we have to set this page as a home page and once your page is set for example this is your card page and it is set so because it is set at the right hand side it says cart page at the right hand side here it says my account page and shop page so we have to set this page as a home page and to do that thing you have to hover over settings and click on reading and over here you will see your homepage displays right now it is displaying latest post we want to display a static page so select the second option and under home page select the page that you just created this home click on save changes and now your page is set if you come back to pages here as you can see besides home it says front page now again come back to plugins and let's deactivate the page builder wp bakery page builder we are going to use elementor so we don't need this wp bakery page builder you can go ahead and delete that thing as well i also don't want the woocommerce page uh woocommerce plugin if you want you can install that but i don't think that is required so i'll just you know remove that thing you can delete both those plugins now click on add new now the next page again very important page we want to create the dashboard page the front-end dashboard okay this one so again come back you can name it anything you want so i'll just name it dashboard and at the right hand side again under templates you have to select user dashboard okay and now click on publish again come back now again come back to pages click on add new next page that we want to create is register page okay if somebody wants to register they can select this thing and at the right-hand side under template select register form okay register form template and publish this page come back now again come back to pages click on add new now whenever somebody successfully completes booking we want to create a booking success page so that you know on that page on this success booking page or bookings success page they can see all the booking details that we'll see later on in the video when we do a demo booking will see that page okay and for now just name it booking success or whatever you want and after that under template again select this option payment success search for this payment success and click on publish so this page is also created again come back to pages next page is auto confirm page okay whenever a new order is received you will see this page okay again under template you have to search for confirm order template okay publish it again come back to pages next page we need to create is the checkout page we already have a checkout page but that is for woocommerce okay here as you can see actually you can go ahead and change the name of this woocommerce we are not going to use woocommerce file name it checkout2 also change the permalink to checkout 2 okay so that we can have our own checkout page come back to pages click on add new let's name it check out this is going to be our main checkout page and under template again just make sure to select checkout template and publish it just like that again come back now let's create this search page now for search pages we need to create different types of search pages so before that let's create one more page reset password so if somebody wants to reset their password a page for that okay and under template select reset password template if you see here it is as you can see reset password publish this page come back to pages now see let's create all these search pages so if you come back to your home page or if you come back to a demo website we have different search pages for hotels we have a different search page for tour for activities and so on we have a we have one search which for everything and then we have different search pages for diff for different services so let's create that so first let's create one common search page click on add new i'll just name it search this is going to be our common search page or maybe if you want you can just select this thing to search okay let's create one by one so maybe this is going to be our tool search page so you'll search for two search result okay this is going to be our template to search result again come back to pages now click on add new and now let's create a hotel search okay you can name it hotel searches or hotel search results you don't have to follow the same thing that i'm doing you can name your pages anything so let's name it hotel search results and the template search for hotel search result here as you can see hotel search result publish it now again let's come back and now let's create our activity search page okay so activity search result or just activity search come over here and i'll search for activity search result template and publish this page okay so we have created these pages now we need to create members pages so if you're planning to add members packages so that if somebody wants to you know sign up on your website for example if somebody wants to become a local expert they will have to purchase some member and i'll show you all those things okay so we have to create different member packages and after that we have to set that thing first let's create pages and then we'll create packages so click on add new first let's create a packages page i'll just name it member packages so all the packages that you create those packages will be displayed on this page okay members packages page for now just let it be default template because we have to we have to design this page so we'll do that later on now come back again add a new page and this is going to be member checkout now this is for those people who want to register on your website as a partner to to list their hotels and services so whenever whenever they purchase this member packages they this is the checkout page that they will see okay and over here you have to search for member package checkout new there are two member package checkout and member package checkout new select the new option again come back and finally let's create a last page click on add new and this is going to be member checkout success and for this also we have to select the template and this is going to be member checkout let's see here is member checkout success new okay this one publish it again come back so with this we have created all the different pages if you just open any page for now activity page we haven't created any activities but you can see the basic thing is working we have this search option we couldn't find any activity but the basic layout of the page is working similarly if you open any other page maybe register page we cannot see the register page because we are logged in if a new person opens this page they will see this thing okay so basically all the pages are created we'll design and we'll change the layout and everything of these pages later on now let's see the theme options so you'll see the theme options at top if you don't see this thing you can click on this theme settings at the left hand side so both the option will bring you over here now what all options you want to use and what all you do don't want to use now i want to use the hotel option i'm not planning to resell cars or offer any car services uh also any rental services so i want to disable these so these two services car and rental and click on save changes then we have to upload the logo obviously if you want you can upload your logo for example over here as you can see this is my main logo now if you see there is a link given there will be a link given in in the video description below if you click on that link you will be redirected to my website blogger.com and over here if you see for every single tutorial i create these kind of blog posts so for my last tutorial how to create a social networking website i've created this blog post the title you'll see the video and so on so once you click on that link which is given in the video description you will be redirected to a similar blog post and once you scroll down you'll see at the end at the bottom download free images you need to click on this download button and you will download this file let me show you this file all right so you will download a zip file you have to right click on that zip file and you have to click on extract files once you do that you will see the media folder open that and here as you can see i've used what whatever images i've used to create this demo website i've given you all these images for absolutely free so if you want you can use these images for your dummy website okay i've also given you some pages and all i'll show you how to use these things later on for now you'll see there are so many different logos if you want you can use these logos okay so let's upload a simple logo i'll click on modern logo and let me go back to that folder media folder and here if you scroll down you can see there are so many different icons okay mix logo these are the logos that you if you want you can use them so maybe i want to use i'll just upload these three logos and whichever i like maybe this example i want to use this one okay and this is the svg version so i want to use this logo this is mix logo 2 dot svg i want to use this one okay for dashboard so if you see the dashboard in the dashboard also we have used the logo okay in this case this logo so again for logo for dashboard again i'll select the same logo now retina logo you just have to select a double sized logo for this again i'll just select the same logo for mobile phone and fab icon so mobile phone you can have a different logo if you want by default it will be same but if you want a different logo for mobile phone you can have that you can also upload your fav icon okay your fav icon will be something like this if you can select that thing it will only be your logo so it will not be traveling just just this much okay a square image that will be your fav icon no this is not a good five icon i'll just delete it click on save changes for now and rest everything is good now come to styling options very first thing make sure under theme style it is modern okay very important and what page builder you're planning to use we are not planning to use wp bakery page builder we'll be using elementor obviously if you like wp bakery page builder you can use that one as well then if you see we have you can set a star color main color link color basically you can set your primary colors and so on now we have the menu option we have the header option we have the menu option so basically it should be menu over here header over here they meshed up over here i guess so under menu or under header you should see different header styles whichever style you like you can just select that thing okay maybe okay we want to use the second option okay second one if you see this is the header that we want this is a transparent header if you see the demo website as well we are using this transparent header in the demo website okay as you can see top one we have this blue color but the main menu main header is transparent so that is the second style okay so i'll select the second style click on save changes if you want the top bar you can have this top bar if you if you want you can create a menu for the top bar so in this case as you can see i've added this social links in the top bar i've added this email address phone number all these things the uh currency converter everything in the top bar so whatever you want to add in the top part first of all just make sure uh you add you enable top bar and what all options you want so first click on add new first we want this option okay all the social icons so for that we are going to use the custom link option so i'll add facebook first and under item you have to select custom link and you have to select this option is social link okay you have to tick mark this thing that this is a social link and after that let's see i think we also need the facebook or we have we need the icon so you you already see the facebook icon link so you can just enter this search of f a dash facebook for other icons i'll show you how we can get that for for now just add this thing okay position we want this thing it at the left hand side so select this much and after that minimize this thing and very important thing we did not enter the social link which is the most important thing so if you see over here we have the title link we have the link so under link you have to enter your facebook link so i'll just type in facebook over here all right facebook.com you have to enter your facebook link click on add new maybe this is twitter okay so now again under item we have to select custom link and we have to search for twitter icon now for this you can go to font awesome as you can see awesome font icon you have to go to fontawesome.com and over here you will see the icons tab click on that and search for twitter icon or whatever icon you are looking for and maybe i want this icon so i can click on that and here as you can see you can get the name fa twitter i think this should work for twitter so come over here under icon link type in fa twitter okay that that was the thing and this is also a social link and this is also this will also be in the left-hand side so i'll select the same thing similarly you can add more options if you want and then we have the email address so for email address again we'll select this option click on add new select this option and under title link i'll add this email this is not social so i'll leave it as it is and this is also position left and item will be custom link again okay so item custom link title link will be or whatever title you want okay and that title will also have a link so that is the reason why we are adding title link now uh this will also be at the left-hand side i hope we do yet yeah we have the left-hand side now let's add one more let's add the phone number so i'll add the phone number select this option add the title uh under title link also you can add this thing and then for item this is also custom link and position this is right okay so here you can see this is at the right hand side not at the left hand side then we have two more click on add new under title we can name it dashboard maybe or if you want you can name it login okay for for new people it will be login okay so i'll select login and under item select login item very important and this will be at the right hand side so select right minimize it and finally we have the currency converter so you can type in i'll just type it like this and under item it will be currency and again obviously this will also be at the right hand side now once you do all these things you can just go ahead and click on save changes if you come back to your website refresh it your website design is changed we have all these things working okay this is icons are not working maybe let's see the facebook icon all right so the reason it was not working is because we uh this theme is using font awesome five so i have tried several things and found out that the search that we were doing that was first font awesome six so when you're when you're searching this thing when you come to font awesome dot com you have to select this uh this option five point whatever it is so we have to use font awesome five and now if you search for facebook let's see you will get these options and here as you can see the link is a little bit different fab space fa facebook okay so let's try this one come over here and fab space fa facebook similarly for twitter let's search for twitter as well and here as you can see we have the twitter and again this is also fab fa twitter so select twitter and this is going to be let's delete this much all right now let's try it again come over here refresh it and now as you can see this is working so we we want to use the font awesome five icons then after that if you want you can leave this featured option come to footer and whatever footer text you want if you go at the bottom here as you can see this is footer copyright in so on so whatever copyright text you want you can type in uh i'll just type in 2022 made by now you shake and you can add all the links and all now all the cards accepted if you want you can add an image for that i have given you these images as well so if you search for that here as you can see cards image open this and use this image now click on save changes again again come back over here refresh it and here as you can see you have the photo okay copyright is also working and we have the card image and now select the page options and here we just have to set those pages that we have created so for the dashboard page obviously we'll search for the dashboard page now where do you want to redirect your users after they log in so after they log in maybe you want to redirect them to the home page or maybe to the dashboard page similarly after they log out and show pop-up and register you can select this thing select page for reset password we have selected we have created this page reset password page checkout select the regular checkout page okay just the checkout okay select page for successful booking so select booking success page order confirm page we have created all these pages you just have to select those pages over here uh partner page i don't think we have created yeah we haven't created these two pages footer page and partner page will see these two pages later on for now again just go ahead and click on save changes now select the blog option and over here where do you want your right sidebar to be and what blog style do you want so here as you can see we have few a single blog post and also some archive blog post style so whichever you like you can select that thing for example if you like this one for single this for archive you can select these two and click on save changes then we have the booking option now we want to select the calculated agex price on single service page which is good i don't want to show capture but i've seen that you know you might face some or some problem with captcha so what i would recommend you to do is select capture on click on save changes refresh this page and then deselect or just turn the captcha off okay now list of currencies if you want to use multiple currencies so for example usd and title will be usd under name just select united states dollar okay currency symbol you can select this symbol and exchange rate maybe this is going to be my default rate so i'll select one dollar exchange rate okay currency position 1000 separator in this case is a comma decimal separator is full stop currency decimal okay maybe two points then let's create one more okay so i'll create inr indian rupee currency name i'll search for indian rupee symbol okay add the currency symbol exchange rate uh it is very fluctuating so still i'll uh keep it at 80. then after that again thousand separator decimal separator and currency decimal similarly you can just keep on adding more currencies if you want now my primary currency is going to be usd for now just first save changes refresh this page and here as you can see under primary currency you have usd currency conversion you can add new and you can add the rate and all those things from here i don't want to do that now if you allow guest booking you can make it on and allow create options okay so i want to allow these two options we don't want to use woocommerce you might want to use woocommerce if your payment gateway is not available but here they've created different you know add-ons or kind of plugins for all the different payment gateways so i don't think you will require this thing you will need this thing so i'll just keep it off tax options also i don't want to add anything like that i'll just click on save options then we have the locations option uh we don't want to make it on reviews option uh review approved i don't want to make it on just come to hotels now what is the distance to nearby hotel so when somebody selects a search hotel nearby what is going to be that location uh what is going to be that distance 100 meters whatever the distance is you can just select that distance or whatever you want that distance to be you can just type in that distance now here the most important thing is the price option so what pricing do we want to show uh average or minimum so we want to select minimum or whatever let me just show you what that thing is so if you select any hotel okay if you open this one so here as you can see it is showing some price so what is this price is it the minimum price per night or it is the average price per night okay so whatever price you want to show you can select this thing i am showing maybe the minimum price show hotel stars hotel reviews or stars you can select this thing i'm selecting hotel stars then hotel search page we have created this so if you search for hotel search page select that items per page we want to select maybe 12 pages and what layout do you want to use layout one two three you can select that default layout now you can go ahead and add different layout to different hotels if you want but this is kind of the default layout now maximum adults in search field maximum children in search field you can set these things and review option you can make it on because if somebody wants to review any hotel what should be the criteria so if you scroll down if you try to review review any one of these for example let's create this thing so here as you can see sleep location service you can create these criterion so maybe first let's create sleep and the stat name also will be sleep and you can select icon review okay you can select any icon for that i don't want to do that thing you can add your icon by the way then we have a location okay how the location was cleanliness all those things show feature hotels on top of search results yes then the map marker icon so i've given you few icons for markers if you see this is for activity then this is for hotel okay as you can see and let me just upload this one as well and there will be one more this is for tour okay so you can use these as the markers so if you see the map anywhere click on map now this is the marker as you can see hotel marker so you can add any these uh this is going to be our hotel marker so i'll select this click on use selected okay and show it else nearby i you can make it on you can make it off click on save changes then we have the room option again first of all make sure review option is added and room based review based on what criteria so if you so if you again open any single room scroll down and see that option review option what option so maybe i've i've made the reviews off over here but if you want you can make it on and again based on sleep based on whatever option you want you can add multiple options okay maybe i'm adding cleanliness as well all right so maybe i'm adding these two click on save changes and again you can change the default layout for the room rental we are not using car also we're not using come to tools now you'll leave the first option this is not useful for us this this is just leave it as it is now or here also we want to add review option and you can add different criteria if you want to display show information if you want to display information on tool page you can add that thing then for the tool search page you can search for that you can select the layout items per page maybe 12 or 10 show featured on top yes then at once search you can just select two categories and again under map icon uh just select the icon so this is the tour icon click on this now is restriction for adult so maybe it must be 18 plus children maybe 8 plus 10 plus in front you can select these options then you can add different icons for this for example if you open a single tour you will see there will be different icons now there is already some icons present but instead of that icon if you want to use some other icon for example this is for duration this icon is for two type this is for group size so if you see these icons are already present but if you want to use some other icon you can go to this website icons8.com line awesome and you can use those uh icons over here okay now again go ahead and click on save changes then we have the activity select this option activity search page very first thing search for this page items for bits so very similar settings uh review option show information all these similar settings you can create the criteria show feature on top and then you can create select the category then we have the marker icon okay then edge restriction so all the same options are given over here so just select that click on save options again and then we have let's see we have the partner option very important so first of all make sure that user registration option is on so that people can come and they can register on your website as a partner so if somebody wants to become your partner they can click on this thing and they can register now as you can see as a partner very important so make sure this is on now header background so maybe you can set some image for the header background so i'll upload some image let's upload some image for the header background okay maybe let's select this image click on new selected automatic approval so whenever somebody applies for a partnership they want to approve their account automatically i want to remove review that if you want to make it automatic you can do it you can make it on if you want to make it manual you can make it off i'll show you both the options let's keep it manual because automatic there's nothing to show once somebody register on your website as uh as a partner it will be automatically approved but let me just make it on just for tutorial purposes and you also want to allow partner feature okay if you want you can show partner email address and so on then partner post must be approved by admin very important and after that what commission do you want to give to the partner in fact it is something different it is enter commission of partner for admin after each item is bugged so this is for the admin so this is maybe 10 percent commission okay 90 percent goes to the partner 10 percent to the commit 10 percent to the admin partner can set feature no we don't want to set this thing or maybe yes partner can set feature we can create different packages and for the higher packages partner can set feature i'll explain you this thing later on partner can set external links for services not really show avatar we can make it on now what all contact information of partner do you want to display on the page okay so if you if somebody sees the partner for example let me show you that thing if you open any single tour or anything this is how the partner will show like like this is the owner you can see the name of the uni owner and member since now here if you want you can display like the email address phone number uh address all these things okay so if you want you can display it then we have the membership option for this also we want to make it enable so we want to enable membership i i don't recommend this thing but i'm just showing you this option if you want to enable membership option on your website maybe you can do that now member package page we have created this so select member packages members checkout page also we have created member checkout and member checkout success page also we have created then we have the layout dashboard okay so make it on in fact make everything on so that that on the dashboard page this partner can see everything now for withdrawal allow request with also if this person has maybe a minimum value value may if this person has maybe minimum hundred dollars they can submit for withdrawal and after maybe seven days okay days of successful payment in this is uh for how long they should have at least hundred dollars minimum in their account only after that they can request for withdrawal and for email that you can select uh you can inbox everything basically just make everything on so that you can allow request inbox allow send to partner allow sent to buyer so they can send messages to partners to buyers and they can also receive messages then we have email partner email options email templates i want to leave all these things just come back to this advanced option and i will show we want to use let's see we have some shortcodes so when this week starts so in this case i'm selecting monday uh time format you can select this thing if you want to add anything under head tag you can add that thing over here mailchimp shortcode form if it is required yes mailchimp will be required for our website so we'll see this thing later on how to add this shortcode for now just leave it as it is so again we'll come back to this page now click on other options and we want to enable google maps very important because maps are really important in this page because we are displaying locations like on every single page on every single element and post so we have to display maps now to display maps on your website you need to create the google map api key and to create this thing you have to go to console go to this website console.cloud.google.com login to your account basically if you if you have an email address you can just start like this you just need to create a new project so if you if you have an email address we basically already have an account with google cloud okay go console.cloud we just need to create a new option and let's see how to how that is done you to create a new project you click on this option okay and click on new project okay and you can name it anything so maybe i'll name it traveler okay click on create now once you do this thing as you can see this project is getting created once it is created you will see uh this will be check marked and here now you can select the project if you want you can click on here and here it is click on traveler okay now you can see this thing now once you create your project now we have to enable some apis for this so we want to display map api so we can click on this hamburger icon this three lines icon and search for this option first of all make sure you go to billing this is really important make sure you have some card linked with this account only then this google map will work okay so once you click on billing you will see this billing account click on manage and over here the left hand side you will see payment method make sure you add any one of your cards over here so visa mastercard credit debit card atm card all type of cards will work over here hopefully so here as you can see i have added few cards so you have to add some card only then this thing will work only then the google map api key will work okay so make sure first go to billing and link some card over here now the next step is to enable apis so click on this api send services and you need to search for map api so we need to enable all the map apis so if you click on this button enable apis and services click on this button and here as you can see the very first option is this map click on view all 16 so there's 16 apis you have to enable all of these so one by one click on ar core api click on that click on enable now once you click on enable obviously this will be enabled for this particular project traveler and once it is enabled this page will reload and you will go back to your previous page so as you can see reloading coming back to previous page and now we have to enable the next api key and now because it is enabled it says disable api key we don't want to do that obviously again come back to apis and services click on enable now click on maps view all 16 so second option is directions api so as you can see it is going to take some time so i'll have to do it very quickly so once you basically go ahead and enable all these apis one by one again click on uh apis and search for new option or as you can see and under additional apis you can now click on the third option click on that and enable this api as well so you keep on doing that thing now once you enable all these apis after that you have to click on this navigation icon again this hamburger icon and now we have to click on credentials okay which is under apis and services if you see under apis and services we have credentials click on that and you have to add your website name over here so to create first we have to create a new credential so click on create credentials select api key under credentials this will create a new api key for you and this is how it will look like okay you can just go ahead and use this api key okay so you can copy this api key you can do one more thing click on this actions edit key and you can restrict the key okay so that other people's cannot use this key very important so name it anything you want so under this option under application restrictions we have to select http referral and after that under item you have to add your website name okay so your website for example my website name is blogdude and here as you can see under example it says how you should enter that so first you this asterix then full stop then your website name slash astrix so it will be like this astrix full stop my website name which is blocked then like this okay if you cut this thing paste it you can see this is how it is done now click on done and click on save now this is this key is restricted if you again come back to that page come back to credentials now here as you can see it says keys restricted now you can click on show key and you can copy this thing okay now you can click on copy to copy to clipboard come back over here on your theme settings page and under google api key paste in the api key and click on save changes now you can add and you can show maps on your website so this is very important and finally we have the payment option so what all payment options you want to give so if somebody is trying to book any hotel or room or anything like that they will have to make the payment so how they can make the payment the default option is bank transfer obviously they can do the bank transfer so you can add your bank account details over here so if they select if they select the bank transfer they can see your bank account details okay so bank account name maybe is near shake okay account number is okay maybe some number bank name okay some bank like this so you can add ifsc code you know ibn code all those things and click on save changes now obviously not everybody is going to use bank transfer people want to use more easier options so for that we'll have to enable more options now under theme settings if you see at the left hand side you will see extensions open that in a new tab and here you will see there will be so many different options available first we have to register this product to use this extension so let's register this theme so under theme options you will see uh this option product registration click on that and you have to enter your theme forest purchase code so again go back to that link blogdoot.com traveler now if you click on support and now if you scroll down here you'll see under purchase codes this is going to be your purchase could just copy it like this come back to your website paste in this code and click on submit now your product or your theme will be registered here as you can see thank you for registering our theme again if you come back now again if you go do one thing again if you come back over here and if you select this option extensions let's open this in a new tab let's see whether this is working now now as you can see this is working now here as you can see razer pays a very famous payment gateway for india so i want to enable this one paypal obviously we want to use paypal then we want to use invoicing options so that you can have invoicing option stripe very important again very important international payment gateway so that you can accept their card payments on your website similarly there are so many more payment gateways you can use any one of these pay you money we have uh one pay pay you base to check out authorize.net so many different payment gateways and once it is done you can go ahead and activate these payment gateways all right just click on activate once it is installed again if you come back to theme settings refresh it now as you can see bank transfer is done now if you see the next option is paypal what the currency should be enable paypal and to enable paypal to use paypal to accept paypal payments we need the client id and client secret now first of all remember one thing that client id and client secret is only available for no business paypal account not the regular paypal account so make sure you create a business paypal account and after that you have to go to this website uh developer.paypal.com in fact you can just go to google search for paypal client id you'll get this link developer.google.developer.paypal.com api slash rest and now you can log into your paypal account make sure you your log you log in to your business account business paypal account and now you can select live so that it is used on a live site and now we need to create a new key so click on create app you can name it anything i'll just name it traveler click on create app and now as you can see you have your client id just copy it and paste it over here under theme settings and similarly copy your client secret and again come back over here paste it under client secret and click on save changes now for razer pay you have to enable this thing here also so basically for every single uh payment gateway there are two things client id client secret publishable key secret key something like that so basically there will be two keys so in paypal we have seen we had we need two key for razor pay also for stripe also you'll see if you enable we need the publishable key and secret key so what your plugin you're using what your payment gateway you're using it will always be same you can always go to google and do a simple search for example for razer pay key id and secret you can go to google and search queries search for razer pay key id and secret so if you search for razer page secret key you you you can see as you can see you have to go to settings and this will guide you how you can get this key so basically you just have to go to dashboard dashboard.razorpay.com and log into your account login to your razer pay account obviously first we need to have paypal resupply or whatever payment gateway you're going to use first you need to have an account with that payment gateway so log into your account so in this case we have to log into dashboard.razorpay.com and at the left hand side you'll see settings click on that and now click on api keys and here you have okay you have your key id copy it like this click on paste in the key id and if you're doing this for the first time you'll see a button which would say generate key okay generate like you have to click on that thing and paste in the secret key over here or if you want you can just click on and after that you'll also once you generate the key for the first time you'll download that file let me show you that file right so once you generate the key for the first time you will download this excel file automatically and here you will have your key id and key secrets also copy your key secret all right now let's come over here theme settings paste it under key secret click on save changes now similarly for stripe now go to dashboard.stripe.com and again login to your account obviously needless to say make sure you already have an account with stripe as well once you have your account just log into your account now once you log into your account you will see this option developers option over here click on that and over here at the left hand side you'll see api keys click on that and you will get your api key so under click on this just click on that it will copy this publishable key enter it over here now click on reveals the secret key okay copy this key paste it over here and click on save changes now i'm just copying pasting the test uh key make sure you make it off make the test key off and make sure you're copying and pasting the live key so instead of test key here you should say live key okay make sure you do that thing and then then after that finally just click on save changes and now you have enabled and you have you know integrated these payment gateways let's now start creating different packages and these packages will be for different partners so when people want to or when partners or hotels want to sign up on your website and they want to list their own hotels tools and travels on your website they will have to purchase any one of these packages not really necessary not compulsory but if you want to have this feature i'm just showing you how you can have that so first of all we need to create different packages we have created one page uh members package page so we need to create now different packages so that the these packages will show up on that particular page that we have already created now under theme settings you have to click on member packages and here you have to create different packages now first let's create a simple free package okay so i'll name it free and sub name you can change this thing price will obviously be zero and from with the free package they can add maybe maybe they can add everything but this thing will only be available for seven days so whatever hotel tour or travel whatever they submit on this website for example this person submitted this tour okay now this tour will only be available on this website will this tour will only be online for seven days after seven days it will be offline and with that we also want to charge some commission so maybe because it is a free package i want to charge higher commission so maybe i am charging 20 commission so whatever booking amount they receive i will get 20 of that number of items they can upload so maybe they can upload only three items okay maybe they can upload only three different uh elements like this then after that number of items that can be set featured it should be zero they cannot set anything as featured now click on add package now let's create a maybe a next package this is this is maybe a standard package okay so i'll name it standard package and under sub name you can type in something in price maybe ten dollars and they can add anything now this will be for maybe one year okay 365 days and we want to charge less commissions or maybe 10 commission and they can upload maybe 10 items they can also set one item feature or maybe not featured with this as well so let's create the third package pro package this is 50 dollars probably okay i'll select everything so they can add anything they want this will be unlimited so i don't want to add any time this is unlimited because obviously they are purchasing the highest package so their account or their post or their services will list on this website forever for unlimited also i don't want any commission maybe i want to charge very little commission maybe only two person and number of items they can upload maybe you know again unlimited and how many posts of services they can set feature maybe three all right obviously you can go ahead and change these things i'm just showing you that this is how it is done now let's go ahead and start creating different hotels let's see how we can list a hotel on this website or how we can list a tour or activity on this website so for example let me first open a single hotel so that we can just go ahead and copy paste the content of this thing so for example this is the title of this hotel so to add a new hotel you will hover over this hotel at the left-hand side and click on add new now you can also do this thing from the front end you can go to your dashboard and add this thing from the front end now in the title it will be hotel stanford or whatever your title is and after that we have the description this is going to be your description so you have to describe this hotel so type in anything you want you can add you can style it as well you know there are so many different options for styling this thing then we have the hotel basic information first of all hotel location first of all actually we have to add a location we haven't added location so first for let me just go ahead and publish this thing first we need to add different locations so let's open this locations option in a new tab click on add new so maybe i'm dealing only in india and that too only in big cities in india so maybe i'll create mumbai and these kind of cities okay and you can do one more thing if you go back to your home page here you can see for different settings and states we have these images so you can upload these images for different locations so under location type you can add maybe this is metropolitan city so we'll add this under location type some could be villages some could be towns you can add these location types and after that make sure to set featured image okay so i've given you these images as well so if you see this place this places folder here you can find these dummy images that you can use obviously if you're adding mumbai it is better to use some image for mumbai now if you don't have a high quality professional image for mumbai for any other state or city you can go to this website unsplash.com and another website pixels.com and here you can download free high quality professional images for example if i'm searching for mumbai okay let me type it okay you can type in the name and here as you can see all images related to mumbai high quality you can download these images if you want okay similarly if you if you're looking for some other location for example if i type in this uh city you can see so many different images for this city as well so you can use this website for free images then after that we have the location settings you can you can change this thing for example under featured image again you can upload some image then after that you can set this location as feature you can make it on and you can also select the country so maybe we are selecting india and you can select the pin code for this location okay so i'm i'm selecting maybe this pin code and after that you can select the latitude and longitude of this particular location so let's just search for mumbai and you'll all automatically get the latitude and longitude you can also zoom out a bit so that we can see the entire city all right so this is the mumbai city all right so maybe i want to display like this okay now once you select this thing there are map styles as well which map style you want to use you can select that thing and we can we also want to build location build content for this location so that whenever somebody clicks on new jersey they can see all the different hotels and everything in that in that particular city gallery style you can select some style uh you can check about all these different styles a location tab uh notification and what all location or what all content do you want to display under this option so maybe we want to display all these contents then rest everything is good fine you can now just go ahead and publish this post now again come back to this hotel refresh it and obviously go ahead and add more locations now you can go ahead and select this location all right and you can say you can type in the exact address of this particular hotel so maybe uh let's select taj hotel so maybe i'm selecting this location taj hotel churchgate and again over here also i'll type in the same location so that we get the exact location right so i'm adding this location maybe this is the location of this hotel that we are creating now hotel detail whether you want to set this hotel as your feature basically whether do you want to display this hotel on so when sub somebody see the search result this this particular featured hotel will show at top and something like that okay then we can also add some logo for this hotel so a different logo for this hotel if you want now what layout do you want to use this is the default layout layout one then we have layer two and three as well so whatever layout you want to use maybe here we are using layout one this is layout one if you want you can use layout two three any layout that you want maybe let's use layout three for this now let's add the gallery okay so these gallery maybe i'm i'm using layout two and let's add gallery okay these images that you see over here these gallery images so click on add to gallery upload files and let's come back to hotels uh you'll see this folder let's upload all these images from here right so maybe i want to display these images as my gallery images so i'll select this thing click on update gallery if you have any video for this hotel you can just upload the link for example you can go to youtube find that video for this hotel and you can just copy the link address for example this is the video so you can right click on this click on copy link address come back to this hotel and paste in the link okay and hotel rating standard you can select that thing as well like five star hotel four star hotel you can select that thing then contact information whether you want to display asian contact information or item contact information so your email address of this hotel is maybe email at gmail website is all right so hotels details some phone number for fax now what is the average pricing of uh this hotel so maybe i will type in we are set uh dollars or maybe 500 okay we can also set a check in and check out date then we have some other option number of days before you have to you know check in or you have to register for booking i i'll just keep it zero now hotel policy you can click on add new and you can add your policy and after that you can set different pricing for this so maybe if i select from today till the end of this month click on view alright so it says undefined because we have not yet created room so you just create a hotel and most important thing is the room obviously because you'll be booking the room not the entire hotel in most cases by the way so let's set any featured image for this hotel so maybe this is the featured image so i'll select or maybe this one i'll select this click on set feature image now click on update once you create this thing if you open this thing in a new tab right click over here now this is as you can see your hotel this is all the different things if you scroll down this is the description facilities rules or reviews if there is any review available okay we have we haven't created any rooms so that is the reason why it is not showing if you come back again and if you change the layout maybe let's uh go to hotel detail let's select layout one click on update again come back refresh this page right now as you can see layout is changed if you scroll down this is how it's looking now you can click on view on map you can see the hotel location or if you want you can go ahead and select the third layout okay just to see how it looks update this page again come back refresh it and now as you can see this looks a little bit different we have the gallery at the left-hand side of the right-hand side we have this map and when you scroll down we have the booking info we have not yet created any rooms so no rooms but you can see the facilities rules reviews all these things okay now once you create a hotel now you have to add different rooms in that hotel so we'll select rooms click on add new room so under rooms click on add new and here as you can see i've created this family suite standard room superior penthouse maybe let's select this standard room okay let's create this standard room this is the title of this room and then we have the description all right so we'll just add it like this under description now location again this is in mumbai room address uh again you can just enter the hotel address over here all right so maybe you will enter this address all right and you you'll get this option now under general you have to select the hotel that you want to link this room with so that was i guess hotel stanford yeah here it is now how many standard rooms do you have available in this hotel maybe we have five standard rooms okay and booking option we want to give both instant booking and inquire booking now for this particular room you can have a different gallery so gallery images showcasing this particular room okay so again for for that i'll go to this uh rooms option and this as you can see this is the standard room so i'll upload these six images for now now click on add to gallery and click on update gallery now for this also whichever layout you want you can select this thing you can enable or disable adult name or children name room price what is the pricing whether it's per person or per room if you make it on it will be purpose and if you make it off it will be per room so maybe we want to make it per person and for adult maybe it is 300 dollars per adult and maybe 100 dollars per child okay you can also give some discount so if you click on add new uh if you book for maybe seven days plus you can get some discount something like that so seven plus days booking okay something like that so from one day to from seven days at least seven days to at least uh to 14 days you will get maybe a discount of 10 percent then you can add more for one if you you know add more than two weeks two weeks plus then from 14 days to maybe 30 days you'll get maybe 20 discount okay something like that similarly you can go ahead and add more discounts nowadays the discount it is percentage because we have added this 20 percentage if you if you select 20 amount then that will be 20 or whatever the currency you have selected extra price maybe if you want to charge something for extra for example some vip service all right so for this you can charge some extra so name of the item i'll type in vip service again over here and just make sure you don't use any capital letter in spacing just make sure everything is smaller case or lower case and instead of space we have either hyphen or this dash now maximum of number how many vip services can you avail maximum so maybe five and what is the price per item maybe 50 per item okay if you want you can make this extra required but not really necessary so i'll just keep it like this extra price unit per day or fixed price um maybe you can have a fixed price of per day all depends on the service discount type and again discount rate you can set all these things from here and if you want you can also select this option deposit option so if you want uh maybe they have to at least pay 10 deposit to book this room then you can select that option as well then we have the room facilities so you can upload the room facilities preview if you have any one of those things you can upload that thing then after that how many number of adults uh are allowed in one room so maybe we are selecting uh four adults so we'll select four and maybe one or two children so two children how many beds you have maybe we have four beds and room footage in square meters so maybe 100 meters okay and room external booking we don't want to enable external booking other facilities that you want to add you can click on add new and you can add different facilities and you can also use the icon so maybe uh it is a condition room so we can select air condition and again you have to go to a font awesome so you can actually just go to this link fontawesome.com v5 version 5 so that we don't get any error if you search for air conditioner here as you can see we have this icon if you want to use this icon this is f a air conditioner or we have to use the full thing far air conditioner okay so i'll paste in this thing over here we just need this much okay and we want this thing not in value but in icon thing okay then maybe uh what all other services that you have you can add that thing so maybe i will add spa and let's again get an icon for this all right so whatever option you want to use whatever icon you want to use i'll just use this icon okay then again come back over here add this thing and make sure you just use this much so you can go ahead and add more facilities and services now room description i think this is the room description we have already added it if i'm not wrong but still if you want you can add this thing availability now here you will be setting price that we were seeing in the previous step now for you can also do it in bulk here so if you click on bulk so maybe i want to set pricing only for weekdays and for this year okay only for 2022 okay and maybe not not for december only for these months okay so you can select this much and after that you can set the pricing so for this maybe we want to charge 300 okay for these if i if you just click on save this pricing will be added for these days and for weekdays you can add different pricing for saturday and sunday because as you can see i have unticked that thing so this pricing will not affect that thing if i close this thing if you hover over in this first let's again click on bulk edit and now let's select these options okay all right and this time again not for december we can set different pricing for december if you want now for weekends i want to charge maybe 500 so again i'll click on save and once that is done you will see this option now you can click on uh you can cancel this thing and after that i think it should already work but let's see let's click on update or maybe let's click on this refresh okay now as you can see for weekdays uh for weekends you are getting this 500 and for weekdays the price is 300 so you can set this thing if you want now you can go ahead and you can if if you want you can set different pricing per day it all depends on you now whether you want to allow cancellation after booking and number of days before arrival you can set all these things and if you want to charge any cancellation fee maybe 10 percent or whatever you can select this thing as well okay so this option is also available now what all payment methods do we want to accept so maybe we want to accept all these payment methods now what is the room type so i'll add maybe this is a standard room okay this is the type of the room click on add new room now featured image some image of this room so maybe i'll add this image as the feature image click on publish now if you go back to the hotel page and refresh it now if you scroll down you will see this room is now available in this hotel and if you go to facilities and all if you first click on this room now here you can see icon and everything is working the discount that we added this is also working room type is uh this type okay all these things that we added everything is working perfectly fine now if somebody wants they can come over here they can select the check-in and check out date so maybe from here till here for three days how many adults they can select this thing how many rooms they want they can select that how many adults children everything and after that if they want to okay it says this room is not available from this date to this date so for some reason it is saying not available again come back to this room refresh it maybe that bulk edit is not working i guess yeah again here as you can see when you come back to availability here everything is now again back to zero because i think because we added the child option as well so we can again try we can click on bulk edit and how i hope okay we did not add the price maybe for children maybe that is the reason why let me very quickly do this thing now i want to add for all days i want to add maybe 500 for adult and maybe uh 300 for children okay not doing any changes for weekend weekdays i've already shown you how that is done but i'm just doing it very quickly right now and make sure that this is available calendar is set to available for or whatever we select below all right now once these things are added now you can go ahead and click on close and we can update this thing hopefully this should work now we can come over here update this thing [Music] again let's go back to availability and now this should work let's again try refresh this page let's select some check-in checkout date how many rooms adults you have you can select this more option if you want vip services and now as you can see this is available so we are not getting any error if you click on book now you will now be redirected to booking page you can go ahead and submit to your details and after that you can make payment through bank transfer paypal raiser pay or if you want you can also use your card to make the payment and after that click on submit and your booking will be made okay so this is how the booking is done and this is same for all whether it's rooms whether it's activities tools anything the booking process is all same again come back to your dashboard right now let's create our first store and activity so obviously to create a new tool we'll hover our tools and click on add new and let's go ahead and open a single tool page so that we can see how it looks and we can just copy paste the content so here if you again scroll down we can select this option and maybe let's see whatever the first option is i'll just copy everything from here so this is our title we'll go ahead and add the title we have description just like we have seen multiple times this is a simple description and then we have the location option maybe this is also in mumbai so again we'll type in the same thing in mumbai and i'll just get some location from mumbai so this is the regular location you can type in the same thing over here so that you can display this thing on the map all right so you can move the marker you can change these things from here then if you scroll down straight view whether you want to uh make it on or off then we have the general option if you want to set this thing as a featured option and again if you want to add what kind of option instant booking or inquiry booking you can select both of those options for layout i want to keep the first layout and then we have the two gallery so again we'll add some images i've given you these images as well so maybe uh let's upload not maybe these these much maybe all right so let's upload only these images these six images maybe one more for featured image so maybe we'll select this image uh this one okay has a featured image so we'll upload that one now once all these images are uploaded obviously we'll click on add to gallery and upload update this gallery go ahead and again if there is any video for this tour you can upload that video you can add the contact information we have seen these things multiple times or maybe one time before so we can you can follow this same process again over here all right so i'll just copy paste these things just to save some time price setting again whether it's per person or fixed price if it is per person what is the price you can say set that thing okay and again you can add discount which we have seen in the previous option you can add discount you can add different pricing for and you can also disable for example this is not for infant so you can make it on okay so no infant booking only adults and children are allowed right so let's see what we have next we have the information now whether it's a daily tour or only on specific days you can set that thing and what is the time what is the duration maybe it is for eight hours so i'll type in eight hours now minimum uh number of days to book before the departure maybe we'll select three days whether you wanna allow external bookings we don't wanna do that minimum how many people maximum so maybe this tour can only consist of maximum 12 people then we have the includes and excludes what all things it includes okay you'll add these things and after that what all things it excludes so no insurance no drink no tickets or no additional services okay then top uh top highlights or two highlights whatever it is based on the tour or the activity you can add that thing now to program style so this style that you see this is with image okay this one image with text we have some other option text with icon background image with text this is image with text so we'll select this thing and we'll add a new program over here okay so this is the title maybe okay at 8 00 a.m or p.m wherever you will be doing you know you'll see the impressive la grid from a top mountain hollywood or whatever the activity is okay then after that the image okay uh the description and you can also add some image so maybe i'll just add this image let's add one more all right so [Music] maybe will select this second one all right so we'll add this title some image for this maybe uh let's let's add this image and after that again for this also you can add some text once it is done you can go ahead and scroll down let's see okay we also have two facts so frequently ask questions uh if you want to answer these questions you can come and you can add these questions all right so maybe this is the question title and this is going to be your answer click on add new which had experience all right so whatever the question is that you think most people will have in their minds you you can add these frequently asked questions over here then we have availability which again we have seen multiple times and here you can go bulk edit okay maybe for all days for all right so maybe the price is kind of fixed so 50 for adult 30 children and maybe 10 10 we we are not allowing infant so but still i'm just adding this thing you can also add start time or whenever this start time is so maybe let's select 8 a.m okay and make sure status is available click on save and now this thing will be applied on this map or on this calendar all right now as you can see it says added successfully you can uh have this thing now two package now if you include any hotel services or any flight services with this package you can add that thing from here so for example you can click on add new and you can add that you will you'll get this hotel this is uh this is a hotel nearby you can add the pricing and all those things if you want you can also get hotels by location so this is a hotel uh located nearby you can type the price of this thing and click on add new and click on just save data similarly for activities also you can add that thing i if you want to allow cancellation and how many days before arrival what is the cancellation fee okay in percentage you can type in that thing and payment which all payment options you accept okay two category what kind of tool uh it is not really necessary if you want to leave the tool category blank you can do that thing as well and maybe i'll add this as the two featured image click on publish now if you open this one in a new tab this is how it is going to look as you can see everything that you've added is now present over here right so if you scroll down everything is now present information uh packages okay what this hotel if you want to select this hotel with this package start time vacancy everything is now present and people can again go ahead and book this thing now similarly for activity also steps for tour and activities almost there is hardly any changes if you click on add new you can see yourself okay all the same things okay if you again go to general also same things okay availability payments so you know how to do this thing we don't need to cover this thing so you can go ahead and you can also add different activities and different tools just like we uh just like have shown you right now right so with this all the technical part is now completed only the designing part is left so let's see how we can start designing this website so first of all we'll start with the home page because this is the you know most basic most common page so this is going to be our homepage let's see how we can design this page now to create or to design this page we have to come back to pages i think we have we have already created the home page here as you can see front page we just need to design it now so click on edit to edit this page and we'll be using elementor page builder as i've said earlier for this so click on edit with elementor click on this button and now you will see this new screen a blank screen so we'll have to use this page builder to design this website this website is designed using this page builder now we have to do it section by section so for example as you can see this is the search section then we have the banner section then we have the location section and then the trending section and so on so we have to do it section by section now let's create a first section and doing this thing is very easy you'll see it yourself it is very easy to create and design this thing so in this first section to create a new section first of all you will have to click on this plus button and at the left hand side you will see there are some elements we'll be using these elements to design our website so first to add a new section to add a new row or a section like this we'll click on this plus button and then we have to select how many columns we want so maybe we want a single column so i'll select the first option now once you add any element or once you select any option like this you will see left hand side options change and we don't uh see those elements now so if you again want to go back to elements you have to click on this nine dots icon okay if you follow my mouse cursor this icon again if you come back over here now as you can see first we have the title and we have this text so first i i want to add this title hi there so for this we'll be using this element heading element so simply drag and drop it over here now whatever your title is so in this case this is my title and uh you can now go ahead and style this thing so first of all you have to change the color but i don't want to change the color right now because if you change the color to white as you can see this will disappear so we'll change the color later on first let's add this styling so let's add the typography changes basically styling let's add some styling to the font so we'll click on this pencil button for this the default font family used over here is roboto in this case i want to use dominate font family there are many more font families if you want you can use any one of those you can use any serif font so if you search for serif you'll see there's so many different fonts if you hover over that you can also see how that design will look like okay now in the demo website i've used this font family domini and so you can use this one i think there is one more glassy or gelasio okay this is the one galaxy so you can use this one as well this is also a nice font family if you want to change the size you can just type in any size or if you want you can do it like this so i want to make it around to keep it 54 and you can also change the width okay so if you want to make it bolder or lighter you can select this thing then after that we have this text okay so again for this also i'll use the heading element so again come back to elements use the healing element and type in whatever text is again we'll change the text color later on first let's change the font family now for this i'm going to use the poppins fund family in fact this is the font family that we'll be using throughout our website poppins font family size of this will be 18 pixels and we want to make it lighter so we'll select 400 okay like this if you want to make it more lighter you can select 100 now as you can see so it all depends on you how you want your style to be now before we add in fact let's add this search thing now so if you search for this option form search drag and drop it over here and now as you can see whether you want a single search or a multiple or mix service now because we are offering make service we'll select mix service and what all service you want to offer so hotel tour activity okay and all these options if you want you can also add a few more options by default as you can see these three options are now added you can now go ahead and update this thing now i want to do one thing i want to add some space between this text and this form so for that we can do one thing we can go to advanced and here you will see margin so at top of this margin i want to add 35 if you just add 35 like this it will add 35 or whatever the number is from all sides i want only at top so for that i'll delete it first we have to delink this thing so click on this option link option and now we can add 35 at top and rest everything is zero and now we have to change the background image so let's see how that is done so for that we'll click on the six dots icon edit section if you follow my mouse cursor again go to style and we have to add this image in the background so select background background type will be classic and you'll have to upload this image in the background now whatever image you want you can upload that for example if you want to add this image you can select this image as well for size you can make it cover and position you can change you can make it center center you can make it bottom center top center okay maybe i'm selecting bottom center and i don't want this image to repeat so we'll select no repeat and now let's add some spacing at top and bottom so here as you can see at top if you see this entire section at top we have this space and also at bottom we have some space so for that again we'll go to advanced and we'll add padding for this again dealing this thing at top i want to add 200 pixels and at the bottom i want to add maybe 90 pixels and once you do this thing now we can go ahead and change the color of this text to white color which is the color code for if you just do it like this you can find any color if you want for example if you want white color you can see the color code is hashtag fff six times so i'll and if you want to you can do one thing you can select this color and you can click on this plus button so that you don't have to you know use the color code you can just use this color so i'm saving this color in my palette so for the second option now i don't have to go and type in fff i can just click on the globe icon select white from here so this makes your job much easier right now again go ahead and update this page and just like that so easily we have created our first section now let's see how we can create a second section which is this banner section so for that again we'll come back over here we'll add a new row and i'll divide this row into three different columns okay now my first column will be 50 percentage so here's you can see this is wider and these two are not that wide so my first column will be 54 percentage so to change this thing you have to click on edit column okay say this thing click on edit column and column width to make it 50 percentage now for the second and third one click on edit column and make it 25 each now in the first column we have to use we have to create a banner like this so first if you see we have this image in the background we have the button we have two buttons actually one at top one at bottom and then we have some you know some options over here some text heading subheadings over here is the first we have to add this thing okay this ribbon or this banner whatever you want to call it so it says holiday sale so for this we have to use the button element so we'll come over here and we'll drag and drop the button element over here the title or the text says holiday sale if you want to link this thing with some page some sale page or discount page that you have created you can just paste in the link of that page now let's go to style and let's style this thing so for typography again we want to make it pop-ins instead of roboto will just make it poppins and after that you can do some more changes i don't i do not change anything from here i rest everything looks looking good but i don't do want to change the background color so let's get the background color so the background color over here is let's see if you want to see the background color you can just right click over here click on inspect and over here if you see at the right hand side you will see this background color okay you can copy the color code to come over here and you can paste it over here okay just like that and you can also save this color in your color palette in your global color then for the text color it will be white it is already white so you don't have to change that thing now if you want to make it circular you can add some border radius for example if you add 50 pixels over here now as you can see this is how your button will look like if you add zero it will be very rectangular with sharp edges okay so it all depends on you how whatever style you want you can have it so maybe i want to make it rectangular in this case i've added some uh some border radius so here this is eight pixels border it is but in this case i want to just make it you know rectangular so i'll add zero border radius now padding also if you want you can go ahead and change the padding but i think it is looking good we don't need to change the padding and finally we i want to do one thing below this button we have a nice amount of space so let's add this space go to advanced and at the bottom let's add 60 pixels margin and then after that we have our text special offer so whatever text you want you can add that text for this again we'll use the heading element drag and drop it over here add this text go to style and the color is white but again if you change the color right now it will disappear because the background color is also white so we'll change the color later on let's change the typography first so for this also we'll be using poppins and let's change the size of this thing so let's make it 35 and make it 500 a little bit lighter and after that below this thing okay we don't have to do anything right now let's keep it at like this now i want to do one more thing next color is also white so before i change that thing let me first change let me first add this image in the background so for this i'll use this column edit column click on edit column go to style and background let's upload this image i have given you these images as well if you again come back to media folder you'll see these banners okay here as you can see this is one banner this is another and these three panels click on open first we want to use this one so we'll select this click on insert media we have the banner again make sure it is uh cover and position is center center now we can select this color we can select this text and we can change the color to white color okay now let's add one more text let's add this text okay so again we'll use the heading element if you want you can also use the text element for this i'm just using the heading element go to style again change the color to white color change the typography instead of roboto we'll make it pop ins again and after that change the size to 14 and make it lighter at 400 you can do one more thing if you see there is nice amount of space between these two lines so we can do one thing we can add line height you can you can add it in pixels or if you want you can add it you know in in em so by default if you just type in 20 pixels as you can see we have the line height and finally below this again we have a nice amount of space so we'll go to advanced and we'll add uh this option margin option at bottom maybe 20 pixels margin maybe not 20 we want to add more so we'll add maybe again 60 or 70 pixels margin all right and finally we have this button so we'll again use the button element over here drag and drop it the button says c deals so i'll type in c deals or whatever that button text is now in this case again first let's make it poppins change the font family to poppins now in this case what i want to do is i want to change the color the background color is transparent the text color is white and also the border color is white so first select the background color and if you want to make it transparent you will see first first option is to change the color then we have another option at the bottom and that is to change the transparency so if you just bring it at extreme life this this will become a transparent color so if you bring this thing at the extreme left this becomes transparent now let's add borders so under border style will make it solid and we'll add one pixels border white color and this is how it will look like okay let's add border radius maybe of 8 or 10 and after that if you want to make this button bigger you can add custom padding so in this case i want to add 15 from top and bottom and 30 from left and right okay custom padding and finally we want to add some space from all sides so if you see from all sides there is some space and here we don't have that space so again we'll click on edit column go to advanced and we can add some uh padding from all sides so from top and bottom i want to add 60 and from left and right i want to add 30 pixels so maybe from left and right also if you want to add more or 50 or 60 you can do that thing as well now click on update and with this you have created this banner now for the second and third banner steps are all same if you want to save some time you can do one thing right click on edit column and you can duplicate these columns okay now you can delete these empty columns and again change the width click on edit column change the column width to 50 click on edit column 25 and third one also 25. now i've just noticed that uh you if you see there is no space between these columns like we have over here so because we i think we forgot to add you know margins so you can click on edit column again and we have to add margin from left and right so margin from left and right i'll add 10 pixels from both sides again select the second option okay 10 from left and right select the third option okay margin left and right 10 all right i think we are added a lot of space at the bottom i guess click on edit column okay maybe it is not because of this thing it is because this uh these two are a little bit taller that is the reason why now second for the second option you will save a lot of time just click on edit column change the background image so maybe let's add this yellow image and after that you you can change the button and after that the text over here says newsletter so click on special offers and instead of special offers will type in newsletter instead of this text will type in maybe this text okay so now as you can see this makes your job more easier and after that if you want to decrease some padding at bottom so maybe instead of 75 let's add maybe 60 pixels at bottom so you can do that thing as well similarly for the third option as well so you can do it like this and after that you can update this thing now let's add some spacing at top and bottom so for that we'll select this option edit section and let's add some margin at top so 90 pixels margin at top okay now click on update and with this we have completed our second section as well now let's create a third section but before that we can do one thing i wonder one thing actually i want to change the default font family using again and again we have to change the font family to pop in sensor so we can save some time and we can change the default font family so this will save you a lot of time so first you have to click on this three lines icon this hamburger icon over here this or this option and click on site settings now you click on global fonts and change the primary and all these font families so all the font families will be poppings but just change this thing for the primary option uh change the weight to 500 okay rest everything is good secondary also let's make it poppins right and 400 is fine then we have text let's again change the font family to poppins and again for this also 400 is fine and then finally we have the accent which is your links and all the for this it will be 500 all right now click on update we can also do one thing we can also change the default colors so the default color as you can see the primary color is this blue color and the text color is not that good very light gray or it's it's a different type of color we don't like that color so for primary and text color i want to change this thing to this color okay if you see the color code over here okay this is the one i'll tell you the color code don't worry about this thing so this is let's paste it to your host first so this is one a two b four eight so this will give you this blue black type of color okay very good color so i'll copy this thing now for the accent color also we want to change this color and click on update now you can cut this thing come back over here now let's create a third section so first of all we have this title over here so we'll create a new section click on this plus button single row and inside this thing we want to add a heading whatever your title is type in that thing and make it in center now as you can see it is already poppins and it is already this color okay so this is good now you can go to style you can see the primary color is supplied so we don't have to change the color also if you see the typography it is already popping so we don't have to do that thing as well so this will save you a lot of time you can change the size if you want you can make it bigger smaller and after that let's create this thing now let's add these options these categories are locations so for that we'll have to search for destination element okay as you can see drag and drop the destination element over here and now select what layout you want and all that thing so layout will be masonry not the normal layout and for style i think normal is fine now choose all the locations that you want to display so first of all we have just created one so we can display only one but if you have multiple locations it will display those locations now number of items in one row so here as you can see in one row we have three columns or three items so we want to select three right now it will display only one because we have created only one okay so once you create more uh you should see that let's see whether okay we cannot show the same thing multiple times now after that we can do few more things we can select the row finally edit row click on advanced and add some padding or add some margin at top right and just like that this section is also created then we have this section let's create that as well add a new option and inside this we have to search for list item search for this option list item service drag and drop it over here now what style do you want whether you want the grid style or some other style you can choose that thing and search form again we want to make sure we have mix service and what all service you want to select so we're selecting these three so that people can choose from these now what text you want trending hotel or featured hotel so instead of training you can type in feature hotels feature tools and so on okay so this option is also available you can click on update and you can set this thing now by default we have four columns if you want you can make it three columns in a row so this option is also available and after that once you complete this thing click on update and finally again edit section and add some margin at top and this this section is also created in fact this entire homepage is created now whenever you create any page whether it's the home page or any other page you should always see how that page is looking on a mobile phone and also on a tablet so basically let's see whether this website is mobile and tablet friendly or not so for that you have to see and click on this link in fact click on this icon at the bottom left corner responsive mode and select mobile phone now here as you can see this is your first section it is looking good so everything is basically looking good except for this thing we don't have any space in between so what i can do is i can just select this edit column for this middle banner go to advanced and uh just select this option make sure uh right and left was 10 so in in this example we can do one thing we can set everything at 10 okay so right and left was already 10 for top and bottom also we can make it 10 or maybe for top and bottom we can add a little bit more maybe 25 both from top and bottom all right now it is looking good now you can go ahead and update this page and this website is 100 mobile friendly as well now i can close this thing and with this we have completed the home page come back again to your dashboard now it's time to create some other pages there are many different pages left but we don't have to worry about that because we will not be creating them from scratch i'll just give you all the pre-made layout so you can just import them on your website and you can have these pages dismiss this notice first of all now let's first see the blog page okay so if you see we have this blog page over here now before we create the blog page first we'll have to see how to create this blog post okay so these blog posts how you can create that let's see how you can create these blog posts so first of all this is how the single blog post or blog page will look like featured image then we have the title or date how many comments and after that you have the content okay pretty simple so again to do this thing you have to click on post from the left hand side first delete this hello world this is just a dummy blog post to create a new blog post click on add new and let's uh see this is the title for this blog post so we'll copy and paste in the title all right and after that we can just copy and paste in this content right like this okay if you want you can do some more just like elementor you can use these options as well here also we have elements if you click on this blue plus button if you want to add any image you can just search for image element for example so here as you can see you can just drag and drop the image element over here and from media library let's select some image so maybe let's select all right let's select this image okay heading image and let's make it full width so if you click on this image at the left hand side you will see there's so many changes so if you want to change the width of this what should be the large full size or whatever size you want you can select all these options and after that you can publish and similarly if you want to add more options in this you can click on plus button you can add many different elements are given we have the column element if you want to add multiple columns so just like elementor here also you have to use elements to design this thing now if you see at the right hand side we have the post option click on that and here you have to select the category okay by default it will be under uncategorized if you want you can do one thing just create any post category or any category like that or maybe if your maybe this post blog post was related to uh some uh some location kind of thing uh or maybe some destination some tour guide or something like that then you can create a category like tour guide okay and after that click on add new category and just make sure to untick the uncategorized then you can also add the featured image so let's select maybe all right let's see maybe let's select this image as a featured image probably this one click on set featured image click on update so just like this you can create your first blog post now again let's come back to our dashboard and now we can create our blog page because now we have created different blocks so we can showcase these blocks inside our blog page and under pages make sure to first delete this sample page uh not really necessary but that is that page is not really important that is again a dummy page so i just wanted to delete it if you want to keep it obviously it all depends on you now click on add new to add a new page and let's create a blog page so let's give it a title of blog or post or blogs anything you want and after that just go ahead and publish this page in fact we have to we also have to change the template so on the template you will see this block template select this thing and you can also add a featured image okay so under featured image you can add some image so that this image shows on that page okay if i click on set feature image click on update let's open the block page so as you can see this image in the future image and also you can see this thing let's see all right so this archive page is not looking good so you can do one thing come back to theme options go to blog option and you can change the change the archive style maybe i'll select the first option for both the single style and archive style i'll select the first option click on save changes come back refresh it and now as you can see this is looking much better before you open the single blog post as well okay much better now again come back to your dashboard so this was your blog page now we have to create few more pages and as i said earlier you don't have to do it from scratch i'll just give you the files you have to import it so let's create the partner page okay this page so people can come they can become a local expert or they can they can become your partner they can you know upload their own hotels and you know tools and travels like that so this will be our partner page or partners page now once you add the title whatever title you want partner register page or partners page maybe i'll just type in partner register or partner registration anything like that now under template it will be blank or template so select blank template and after that you can also do one thing or you can add some featured image and after that you can publish it now let's click on edit with elementor and let me show you how we can import that file now to import a file you have to click on the second option okay this folder icon click on that go to my templates right now we don't have any templates but we can import so click on this import icon import template click on select file now in your media folder you will see this pages folder open that and here as you can see we have the about page local expert page all these pages so right now we have to import the local export page so click on open make sure to click on enable and import and once it is imported you can just go ahead and insert it so what i'll do is i'll import all the other pages as well because we'll need them in the future so i want to import all these pages from here if you face any problem while importing the page for example you selected this file and if you get any error while importing the page always make sure to come back to your dashboard and you can do this same thing from here if you click on templates from the left hand side here as you can see about page and local expert page that we have just imported if you want to import more pages you can do it from here as well click on import templates and contact us page so you can do this same thing from both the space and then let's import our next page which is the fix page all right then again import template we have the footer so footer also is a page and i'll show you how you can set this page as a footer page so that it displays all the elements in the footer and finally we have the member packages page okay we have created the page we just have to import the element now here you have to import this become a local expert template so just click on import and now here as you can see this is your page if you want to make any changes on this you you know how to do that thing just click on this text instead of know your city if you want to make know your state anything like that we have already seen how to do some changes this is your button once you click on that thing you will see this pop-up then if you want to change anything from here again if you want to change the icon just insert this icon maybe if i want this icon i can select this thing instead of this text open your network i can type in something else so it's all pretty easy now click on update so this is your partners page again come back to your dashboard now let's create the packages page so click on pages i think we already have this page member packages click on edit all right now make sure you have featured image set for this page so if you see okay we don't have that page over here so we can set some featured image for this bit so maybe i'll set maybe this image has a feature image click on update now again click on edit with elementor and we just need to again import the template we have already uploaded the template we just have to import it so again click on add template my templates and select members package page click on insert and here it is now you have to select the package by default it shows four packages we have created only three so we can go ahead and delete the fourth column so that we have only three packages page over here now here as you can see this was your free package then we have the standard package then we have the pro package if you want to do any changes on this just click on that so for the free package as you can see image gallery it says check if for example uh a height competitor ads if you want to do some changes in that for example instead of time kit if you want to type in a commission over here so uh commission i'll type in uh we had a i guess 20 commission over here so we'll type in 20 commission and i'll check mark this thing i'll bring it over here okay at top so if you want to do any changes you can do it like this and rest you don't have to make any changes then we have the facts page again we have seen just click on this thing title uh add your question and after that add your answer and after that click on update so this was your members package page again come back to your dashboard click on add new pages up under pages click on add new now let's create our you know about page contact page those pages now let's give it a title of about us because we'll be creating our about page and under template you have to select full width template you will see this thing full bit template just like that option and again we have to give some feature image for this thing as well so maybe let's select this image as a featured image and click on publish now click on edit with elementor now again click on add template go to my templates and select the about us template or about a space template and insert it once it is inserted again you will see the dummy uh content over here if you want to make any changes you can just click on that you already know how to do this thing click on this image instead of this image if you want to add some other image just click on that and after that instead of ceo if you want to type something else you can do that thing as well all right click on update come back to your dashboard again now let's create the contact page so click on add new again give it a title of contact or contact us again under template type in select full width template and add some featured image maybe this time let's select let's see let's select this image as a featured image click on set feature image and just publish it again click on edit with elementor and after that let's import the contact page template now if you want to learn more about elementor right now i'm not showing you how to do this thing i'm just importing the template if you want to learn more advanced things about elementor how to design your website from scratch everything then you can again go back to my youtube channel and here you will see this video how to make a website wordpress website for free this is the elementor tutorial so if you want if you're watching this video in future if you you can just go ahead and search for new shake elemento and whatever the year is for example it is 2022 so you can search in 2022 and you'll see the very first video if you're watching this video in 2025 hopefully you can uh search for ninja stick elementor 2025 and hopefully i'll upload a new video for that here okay now again come back to this thing here everything is looking good just make sure to first click on this thing instead of this telephone number add in your telephone number instead of this email address add in your own email address like this and similarly instead of this location just click on this location you have to click on this pencil button over here if you see and instead of this location you can type in your own location all right and finally uh you see this contact page is not showing for you so you have to do some changes come back to your dashboard click on contact option here as you can see this is the one and you will see contact form one you can edit this form and delete it we don't want to use this form again go back to that page media under media folder you have the pages folder and inside this you will see contact form open contact form you'll see a form or a page like this just copy everything under this page come back over here paste in this thing and click on save then after that copy the short code which is this thing under this blue line copy that and click on this contact form 7 shortcut and paste in this code and now as you can see we have this form all right click on update again come back to your dashboard again click on pages and we have one more page we have the facts page so click on add new give it a title of facts frequently asked questions full with template so search for that all right and again some featured image all right so maybe this time maybe let's select this one click on set feature image publish it and this is a very simple page so click on edit with elementor again now again click on add template go to my templates and import the fax page template and here it is okay if you want to do any changes just click on that and add your question at the answer and it's done and again come back to dashboard so let's again come back to the dashboard now let's see the footer so we have created all the pages we need to also create the footer like this one so again the the element is all given to you so you can do one thing you have to again create a page for this so click on add new and just name it footer and this time this will be a blank template okay so select blank template no need of any feature image or anything just publish it click on edit with elementor again and over here you will have to click on add template my templates and here we have the footer template inserted alright so you have the photo if you see this image is not working for you can click on this thing and i have given you this image i guess so if you go to the media folder you should see that image here is icon image email subscriber okay you can import this one and here you have the logo or that icon now instead of this phone number again instead of this email address you can change this thing instead of this text and this link you can change this thing we have the currency convert over here now this thing is not working for now mailchimp uh thing is not working so first update this page and as i said earlier in the very beginning we'll see mailchimp thing so first you'll have to connect your website with mailchimp so you'll see mc4wp at the bottom left click on that and you need to enter your api key now again if you don't know anything about mailchimp what is mailchimp how to use it mailchimp is a simple website or a platform that you can use to do free email marketing so again if you want to learn more about that you can search for new sheikh mailchimp you should see videos related to that so as you can see free mailchimp uh tutorials however and also with automation e-commerce website features and so on now for now you can just connect this thing with mailchimp go to mailchimp.com make sure to create an account it's free uh once you create an account you can just go ahead and log in now once you log in you will see this page here at the bottom left you will see this option you will see your username basically click on that and click on profile and under profile you will see extras select that and select api keys under extras and you will see your api keys go ahead and copy this one come back to your website paste it over here click on save changes you have to paste in the same code under theme options as well so if you go to theme options you will see under advanced option here you can see mailchimp shortcode okay we don't have to i don't think we have to enter the api key here i think we have to enter the shortcode form so api you just have to enter it over here click on save changes now let's create a new forms under mc4 wp click on form and select any list from here let's give it a title of form one i'm selecting this list click on add new form and again delete everything that you see over here go back to that page and now open this one mailchimp form again copy everything paste it over here click on save changes you have your form and this is the shortcode that i think you have to paste over here under mailchimp shortcode form if i'm not wrong hopefully again come back to this dashboard again come back to this footer page refresh it and uh let's click on this and instead of this shortcode again paste in this shortcode that we just copied right now once you update the page you should now see this form as well okay so this is now completed again come back to your dashboard now everything pages and everything is completed now let's see how we can create a menu now for that you have to hover over appearance click on menus and we have to create a simple menu like this one now what all things you want in the menu they have already added hundreds of different things we don't want to use this one so i'll just click on create menu for for now and i don't want to use this one because this will take a lot of time i'll just click on this link create a new menu and create my own menu from scratch so i'll name it main menu you can name it primary menu anything just click on create menu and select go to pages select all the pages that you want to display over here so i want to display these three search page and then under pages i want to display a few more pages so home page about page block page activity search obviously then dashboard page is not required because we have the dashboard option over here fax page hotel search and member packages and partner register to research okay i want to add these things now first home then hotel then activity and we had one more things tools so i'll change the title instead of tool search i'll type in tools or all tools and instead of hotels i'll type in hotels or maybe all hotels instead of activity i'll type in activities now i'll create one thing i'll create a custom link under url i'll type in hashtag and under this thing i'll type in pages now click on active menu bring it over here just below activities all right we messed it up all right now bring all these pages under this pages custom link okay so that we get this sub menu okay this one under pages now make sure to tick mark primary navigation at the bottom and click on save menu now again if you go back to your home page or any other page you will see this is now working you have the menu we have the header we have all these things working for us if you click on tools or hotels or any other page okay make sure you when you create this tools page hotels page you add a featured image edit this page because we see everything is blank so make sure you add some featured image over here right let's weave this page now it's looking much better all right and if you go to pages member packages page or register page you can see all these pages from here all right now if you see over here right now if you scroll down we still don't see our footer so for that you have to do one thing you have to go to your theme options and you have to set footer so page option uh scroll down at the bottom you will see modern footer page search for footer that we just created click on save changes again come back to this page refresh it and now you'll see your footer at the bottom go to any page and you will see your footer if you go to home page you'll see your footer all right so this is now working and basically with this this tutorial is 100 completed but i want to maybe just show you one more thing uh how your website is looking to people who are visiting your website for the first time and how you can how they can do things like how they can register as a partner then after that how they can add a hotel and after that how they can get paid and so on so let's see how that is done so i'll copy the link open this in a new private window in a new incognito window open this in a new private window or in a new incognito window so that we are logged out and we can sign up or a login from some other account now here if they're visiting for the first time they will not see the dashboard page they will instead see login or sign up page so maybe i want to sign up so i can select partner sign up you can see the same thing under pages if somebody wants to become a partner they can come over here they can click on this button and let's see let me select some username name will be john doe email right and then and then the password all right so any password of your choice and just check mark this thing whether you want to register as a normal user partner user select that and click on sign up once you sign up you will see this thing this registration is successful now you can use your uh email address or you can use your you know username and password to log in so if you click on login let's see enter your username and password and click on login and now as you can see it will say logged in successfully and you will automatically be redirected to your home page if you want now you can go to your dashboard and here as you can see we have this option now right now you're seeing a regular dashboard this is a dashboard for customers uh in in order to become a member because we have created membership packages you will have to purchase any one of these packages if you had not created these packages this person would have become member instantly so let's see how that is done so if this person wants to become a member or this person wants to become a partner they'll have to come to this page they will have to purchase any one of these packages so maybe i'm just selecting with this say simple package free package so i can click on get started i can uh type in my first name last name email address phone number all these things and then after that i can select the payment gateway if i want to make payment through stripe through razer pay through paypal anything like that i can select that and i can after that just click on submit and make the payment now as you can see this is the member checkout success page so that this person and again make sure to add a featured image on this page as well now on this page as you can see this person will say that you just check out your successful uh commission package everything all details will be given over here now again if this person goes to dashboard they will still see the regular page okay uh they have selected the package but this is not yet completed okay they have selected the free package but this is still incomplete now the reason it is uh still incomplete is because you as an admin you will have to verify that this person made the payment or not because this person selected bank transfer so did this person really transfer the money to your bank account you have to first see that thing so for that uh if you find this money in your bank account if you see this person or this thing was successfully transferred this money then you can do one thing you can accept this thing so you can go to partner statistics from the left hand side and under that you will click on list partner and you'll see this person john doe needs triple seven you can click on view details to see more details about this person you can verify the email send notice all these things and after that you if if you think this is good this is correct you can mark this as completed so click on completed and this will be completed okay again if you go back to this page refresh it and now as you can see this person is now become a partner that is the reason why they see all the new options now this person can create a new hotel so they can go to hotels they can click on add new hotel and they can click on this button add new hotel and here as you can see just like this from the front end itself this person can add this hotel facilities photos location policy everything we have already seen these things similarly this person can add tools and activities and they can also verify the account if this person wants to verify itself this person has to enter these details like what is your name they can add the images photos of their passport their whatever the identification proof they have now once they create this account and once they have some payment in their account for example many people you know book the services of this person and this person has some account some money in this account now remember one thing if this person creates a room for example and a customer comes a customer books this room now the money which is this booking amount it will not go to this partner's account it will go to your account okay your stripe account paypal account whatever account or you have selected so it will basically go to your account then you will have to charge your 10 percent commission and rest 90 percent will have to transfer to this partner's account okay so remember this thing so how that is how that works is this person will go to withdrawal and they will add their details so for example this person wants bank transfer so this person will add bank account details over here okay or if this person wants paypal payment this person will select paypal and enter the paypal email address okay so let me just enter some email over here all right copy paste okay okay so here it says you cannot withdraw because your balance is zero so once you have some balance you'll have to enter the detail stripe account uh then after that bank account and after that click on submit our withdrawal request will be sent and you will see that withdrawal request over here under partner withdrawal under partner statistics you will see that our new withdrawal request is sent and you will see whatever the amount you have to transfer to this person and you will also see this partners bank account details or paypal details and you can just go ahead and transfer that money after that you can again mark this transaction as completed and with this this entire transaction will settle okay and with this we have 100 successfully completed this website as well now i hope you guys find this video helpful i hope you have learned something new now 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 now if you like this video give a thumbs up to this video share 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: 124,205

Keywords: travel booking wordpress theme, wordpress themes, how to create a travel booking website, nayyar shaikh, wordpress, traveler wordpress theme, tour and travel booking wordpress theme, travel wordpress theme, hotel booking, hotel booking wordpress, create a webbsite, make a website, wordpress booking plugin

Id: 5g_fy73_RS8

Length: 149min 27sec (8967 seconds)

Published: Wed May 25 2022