How To Make a Hotel Booking Website with WordPress (Like the Hilton Hotel)

Hey , welcome back , party people .

My name is Darryl Wilson .

If you guys are looking to build a hotel booking website , then this tutorial is for you today .

In this video , I'll show you how to build a hotel booking website with wordpress step by step .

So let's take a look at the websites that I'll be showing you how to make today in this wordpress tutorial .

Here is the hotel booking website that I'll be showing you how to make today in this video .

And as you guys can tell it looks professional and modern , your website visitors can select check in dates and also check out dates .

Next , they can select the rooms they need and how many adults or Children need booking .

Then they can click on book .

Now on the next page , your website visitors will be brought to a really professional booking page .

First , you'll notice that we have this step section which makes it really easy for your users to understand the booking process below that we can see the check in dates , how many nights were booked and also how many adults need booking ?

They can also adjust this at any time below .

That we can see all of the hotel rooms that we offer .

It's neatly arranged and displays your rooms in a really professional layout .

Here we have a room , we have the title of the room , some description , the amenities that we offer .

We display the recommended adults per room the price and you may also see additional photos of the room by clicking on these arrows .

Additionally , if they click on the plus box , they can get a closer look at the room of what we have to offer .

Plus I threw in this really nice urgency sale to encourage users to book rooms on our hotel booking websites .

Now when a user clicks on the room , it will display the title of the room , give some room images and also some brief description about the room .

Here .

We also have a pricing table of where we can offer up sells or different variations of the room .

Now , below that , we have some available room options for users who can select additional add-ons .

For example , we have the breakfast buffet , the luxury airport transfer and also maybe even offer a private boating tour .

And lastly , your visitors will be brought to their booking page where they can confirm their appointments .

They can enter their billing information , apply coupon codes and pay with credit card , paypal or pay on arrival .

After booking the room , your visitors will be brought to a booking page where they can confirm their booking details .

And also get notified via email that they have successfully booked on your website .

You will also receive an email notifying you of a new booking .

Now , this is the demo website that we will be using today in this video and you will get this entire layout for free to help get you started .

You can also use any wordpress page builder like Diy Gutenberg or Brizzi to build out your hotel booking website because we will be using a premium plug in to build out our hotel booking website .

Now , for this video , I'll be using element which is a drag and drop builder that allows you to drag in elements anywhere you want on your website .

So even if this is your first time making a website , you'll have no problem making this hotel booking website .

So next , let's talk about the back end .

You'll be able to see the check in and check out dates , the total paid and what rooms the customers booked .

You can add as many types of rooms as you want .

You can adjust the price to any price that you want and set any specific tax rate or even add a resort fee to all of your rooms .

What's also really cool is you can completely change the language of your hotel booking website to any language that you want using the translation options located in the plug in settings .

Now , what's even better is you can upload your website to popular online travel agencies like Expedia dot com , booking dot com , tripadvisor and Trivago using an additional premium plug-in that's created by the author .

And I'll talk more about that in the video .

So overall you can do anything you want with this hotel booking website and is suitable for all type of hotel owners no matter how big or small the hotel is now making this hotel booking website is pretty simple and we're gonna build it in four simple steps .

So for step one , obviously , I'll show you how to get your domain and hosting for your hotel booking website .

We will be using cloud hosting .

That's really fast to make sure your hotel booking website loads fast .

Step two , we will install wordpress and import a charter template and build out the website .

Also , remember you may use any page builder that you want and still follow along in this video .

Step three , I'll show you how to integrate the booking system on your website .

The plug in that we will be using is free .

However , it does have a pro version that I recommend in order to add payment gateways to your website .

And I'll be showing you how to use the pro version in this video .

Step four , I'll show you how to design and customize parts of the hotel booking website in order to make it look really modern and really professional .

Also , another really great part about this video is that there's many services out there where you have to pay commissions and transaction fees to various websites , but we'll be using a plug in .

So you keep all of the profits to yourself and you only pay a one time fee to get everything set up .

Now , with that said , let's go ahead and get started and build your hotel booking website with wordpress step by step .

Now , there is a link in the description of this video .

It'll take you to a page to purchase fast cloud web hosting .

All right .

And this is name hero dot com .

Now name here dot com has performed as one of the fastest and most reliable web hosting companies out there .

Now , how do I know that ?

Well , actually tested their service against like 20 other competitors and these guys came up as the fastest and the most reliable web hosting company .

All my sites load at under one second with name here dot com .

Now , through my link exclusively , you guys will receive these discounted prices if you guys go to the website normally , sorry , you guys don't get those discounts .

So make sure you guys use the link to get the lowest prices available .

Now , here we have four different plans , right ?

We have the starter cloud , the plus cloud , the turbo cloud and the business cloud .

Now personally , I'd recommend the Turbo cloud or better because with the turbo cloud or better , you get the new NVM storage plus you get more CPU and ram .

So you'll have an optimal running fast word press website .

So go ahead and select the package that works best for you .

So once you select a package , you will then click on order now .

All right .

And this is where you're going to enter your new website .

So this will be like my real estate website , my hotel website , my whatever website , you'll go ahead and enter it right here .

So just put like , you know , demo to tour .

Let's see this one , Darryl , see Darryl demo .

Darrel website .

I don't know , you know , something like that and you click on search and if it's available , it'll tell you if it's available or not .

So yeah , and you also do get a free domain name with name , Hero .

That's also really cool .

So you save another 12 to 15 bucks a year .

So right here , you'll click on continue .

All right , next , you'll select the billing cycle .

Now , personally , I would recommend at least one year .

This will kind of give you enough time to decide if this is for you or not .

So , go ahead and select a billing cycle .

Of course , the more you save or the longer you select , the more you save personally , I would go with longer possible because um you guys do get this discount as a one time thing .

So if you guys do sign up for longer , the discount does extend longer .

So , uh that's kind of up to you .

But once you select a billing plan , you'll go ahead and scroll down here .

Just keep scrolling here .

I'll just do one year .

So , yeah , one year , here we go , just keep scrolling .

And , uh , I don't want backups .

To be honest , guys , you guys can get a lot of , uh , free plugins to do backups for you .

You don't really need any , any of this stuff and , uh , you don't need any of this stuff actually .

So uh on the right side , you'll click on continue .

So here we have the domain configuration and guys personally always get the ID protection .

This will protect your personal information .

So people won't find all of your personal info .

And if you guys do not have this , you're gonna get a lot of spam from a lot of different companies .

They're gonna offer you Viagra , they're gonna offer you seo packages , all sorts of marketers are gonna send you all sorts of crazy stuff .

So make sure you guys have the ID protection selected and then click on continue .

So this is the check out and review page .

And here you guys can see you guys get a year of hosting and a free domain for just $100 .

So that's a really good price for web hosting because remember you're getting cloud optimized hosting .

So you're not getting like cheap shared hosting .

You're getting optimal fast cloud hosting .

You guys also do get a free domain and you guys can see how much that discount did save you guys .

So you guys did save $200 using that link in the description of this video .

Now , here you'll go ahead and fill in your billing details , like your address , your company name , yada , yada , yada , your social security .

I'm just kidding guys .

No social .

It's a joke here .

We have the um payment methods so you guys can actually use Cryptocurrency .

How cool is that ?

We can use credit card and also paypal as well .

Now , once you guys go ahead and go through the checkout process , um I'll go ahead and sign up with you guys .

I will meet you in your customer portal .

All right , cool .

Now , this is your customer dashboard .

So here you can access your hosting .

You guys can buy more domains .

You guys can see your billing information and if you guys do have problems , you guys can open up a support ticket .

You guys do respond to tickets very fast and then they also have your services , your domains and these are your hosting packages .

So , yeah , this is your dashboard and congrats .

Now , we're going to install wordpress .

So let's go ahead and install wordpress onto our domain that gives us like the dragon drop builder and all the stuff that we can add to our site .

So right here you'll click on my cloud next , you're gonna see your hosting accounts .

Now , you should only have one now , I do have a few here , obviously .

So just go ahead and select your hosting package just by clicking on the package , you can click anywhere .

So just click on the hosting package next , you'll go ahead and click on log in to see panel .

All right .

So let's go ahead and scroll down here .

Just keep scrolling .

Just keep scrolling .

Now , what we're gonna do is that we are going to install the Wordpress installer and install Wordpress onto our domain .

So right under software , you'll see Wordpress manager by soft .

Go ahead and click on this .

All right .

And this is where we're going to install wordpress .

You guys can see I do have other domains here , but uh I'll go ahead and click on install and we're going to install a fresh copy of wordpress .

All right .

And right here , you're going to go ahead and select your domain .

So whatever domain that you sign up with or purchase , you'll go ahead and select it right there .

And then we will scroll down now for the site settings , we can adjust all this later within the Wordpress dashboard .

So don't worry about this .

We can adjust this at any time .

Let's go ahead and scroll down here .

Now , this is actually very important and I want you guys to write this down .

So this is your user name and your password .

So for example , I'll put Patty and Patty 99 .

Now , this is the user name and password that you are going to use to log into your website to adjust it to see all the settings to build the pages .

So make sure you write your admin account down .

Also , make sure you put a email that you have access to .

So I'll put in my email address because let's say for example , you forget your password that will go to this specific admin email accounts .

And for those of you who speak various languages , you guys can put any language here that you want .

So there are quite a bit and yeah , you guys can choose a language also , if you speak Thai or I want to say like other uh languages , there are more available in the um in the in the back end of wordpress .

So don't worry about that here .

I'll go ahead and scroll down and once you're here , you'll click on install .

Now .

It's installing wordpress onto our domain .

All right , cool .

And right here you'll see this administrative URL .

Now this is the log in uh link that we will use to log into our site .

So go ahead and click on this link right here .

All right .

Awesome .

And this is your new wordpress website .

So this is the back end and we have a bunch of few options which I'll teach all of you guys about these settings in this video .

Now , if you want to see what your website looks like right now , you can click on visit sites and this is your new website .

So congrats and of course , I know it's a little bland and boring , but not to worry , we will make it look really good .

All right , good job guys .

So now you guys have your domain and hosting and we're all ready to go .

Now , this next part of the video I'll be showing you how to import a starter templates and then using the page boiler to design and customize and change all the images for your hotel booking websites .

Now , also , I just want to make a quick note if you are using their page builders like Diy Gutenberg or Brizzi or even oxygen , you guys can still follow along just by skipping to the booking part .

But in this part of the video , we'll be building out your hotel booking website with the element or page builder .

So with that said , let's go ahead and go back to the video .

All right , before we go on any further , let's adjust some of the general settings .

So first let's go over here to users and click on profile .

Now this is where we can change the back end color of our websites like that ocean is good .

No , no , no , no , no , no , no .

We're going , we're doing midnight midnight .

It's just so easy to see .

I always select midnight on my videos because it's just really easy to see where like , you know , the bar is and then scrolling down here .

If you guys need to change your password or your email , you'll go ahead and select the email that you would like to change it to .

And also , yeah , for your password , you'll go ahead and select on set new password .

And this is where you can adjust your password for your Wordpress website .

And then once you select your settings , you'll click on update profile .

So next , let's go over here to settings and click on general .

Now , if you guys do need to change the language for the back end of your wordpress dashboard , you guys can go ahead and select all these languages .

So I told you guys before , they do have quite a bit of languages that you guys can select .

So this will change everything in the back end of wordpress .

You can also adjust the date format and the time .

But uh once you select your language , you will then click on save changes .

Next , we're gonna do one last thing and that's clicking on Perma links under the general settings .

Now , you want to make sure this is selected to post name and the reason why we do this is right here .

For example , you can see your website dot com dash about us , right or dash contact us , not these other , you know , settings where it looks really messy and cluttered and also post name is optimal for seo purposes .

So once you select the post name you'll then click on save changes .

All right .

And now let's click on our dashboard .

Now , let's say , for example , you want to log in and log out of your wordpress website .

So you can see right here how we can just hit this bar right here and go to our dashboard .

But let me show you how to log in and log out of your wordpress website .

This way you guys can work pretty much anywhere you want .

Um You know , you can work on your website anywhere .

So on the right side , I'll click on , log out right here and this will bring you to your like dashboard .

Now , even if I go to my website , you now see that that bar is gone .

So if I want to log into my website , I'll go up here and type in dash WP dash admin and this will allow me to log into my website .

So I'll click on enter and there we go .

So now you'll go ahead and enter in your login credentials .

So mine was , what was it admin ?

It was like patty 99 or something like that .

Once you select your admin user name and your password , you will then click on log in .

All right .

So that's how you guys can log in and log out of your wordpress website .

Now , in this next step , I'll be showing you how it's to um install a theme and then import demo content .

So , right here , go to appearance and click on themes .

All right .

And then right here you'll click on add new and then you'll click on popular .

Now , there's a lot of different themes you guys can use .

I've actually made a whole another video on like the top 20 best wordpress themes out there .

Um And I kind of test out a lot of different themes .

Uh There are tons of themes and every one of these themes has different features from each other , although they are very similar now , however , with page builders coming out themes are becoming less and less important .

And I think they're the only really concern is to control the header and the footer , which is what the themes usually do , but we're going to download and activate the Astro theme .

So this is the theme right here under search themes , you can click on a ST or sorry type in a STR A and this is the theme that we're going to use .

It is called Astra .

Once you see this theme , you'll click on install .

All right .

And then we'll click on activates .

All right .

Cool .

Now , once you guys install and activate the theme , you will then click on this .

Get started .

You can also get here by going to the Astra options .

And what this is going to do is that this is going to uh install some starter templates that we can use on our websites .

So here you can select the page builder .

And as I said previously , you guys can use Divi Gutenberg Brizzi , any page builder that you want , because the majority of the functions are being done by the plug in .

If you guys don't understand what I'm talking about , don't worry , we will uh I'll show you a little bit later , but for now , we're gonna select elements or as our page builder and you can see here , we can filter this actually by free .

Now , I do have a coupon code for their premium layouts .

They did actually have a new layout for hotels uh under their premium section .

I think you can just type it in right here hotels .

So yeah , this will actually allow you to import their like uh you know , I think this is the new one .

They just created the budget hotel , they give you like what it looks like on all the pages .

They do have some really nice designers over there um over there at Astra .

But what we wanna do is we want to use the free ones because most of us are broke .

But not to worry , we can always , you know , upgrade later or you know , whatever .

And I want to use this one right here .

It is called the Travel and Tourism .

This is the one that we're going to use .

Now .

As you guys can see what I did was I really just kind of adjusted the home page because you might want to like use these templates , but you just need to make some minor adjustments to it .

So I'll show you how to do that in the very next section .

So right here on the bottom , you'll click on import complete site and now they're gonna ask you some questions .

They're gonna say , well , who are you ?

You know , are you a beginner ?

I'm just gonna say , I'm an expert , I'm an expert and I'm building this for myself and click on next here .

You can go ahead and sign up to their offers .

They do send you guys discounts for the Astra Pro and that's pretty much it .

So if you guys do wanna sign up for their mailing list , you are more than welcome to .

But for now , I'll just go ahead and select skip now .

It's importing our demo website onto our wordpress website .

So just give it about like one minute .

All right , the import is done and right here you'll click on view sites .

All right , and you can see our website is right here .

It is loading some of this stuff right there .

Yeah .

So your first time , it might be a little slow , but don't worry .

Uh your website will always be fast with name here dot com .

And what you guys can do is just kind of scroll down , make sure everything imported correctly .

If you see anything weird , you guys can always go ahead and fix it and uh yeah , but you guys can tell that this imported uh successfully and everything looks good .

So yeah , you guys can just go ahead and just navigate through your websites and make sure everything is all good and go .

Also , you can see we have our pages .

So we have our rooms page and also we have our amenities page and then also our contact page where users can submit any information or ask us any questions about our websites .

So yeah , we have our contact page and everything looks good .

So the next thing that we're gonna do is that we are going to kind of mess around with this page builder really quick .

So let's go back and click on home now at any time , if you guys want to design it and customize your website , we're gonna do that with the page builder .

So right here , you'll see edit with mentor , go ahead and click on edit with element to , all right .

And from here , we can start designing our website .

So for example , you know , we can change this to my new luxury , you know , luxury hotel and then we can change the alignment here .

So I want it in the center and then I can do the same thing for this text .

We can also align it in the center , but the center is actually in the style section for the text editor and the same thing for the button , you know , obviously , you can see we can kind of adjust this and kind of mess around with it .

And if you guys do want to change stuff like the fonts and everything here under style , I can change the fonts .

I like Poppins .

In fact , I think Poppins is my go to fonts but you see Poppins is actually kind of ugly unless you don't bold it or unless you , yeah , you have to bold it to make it look good .

So for example , for the weight you can see now it looks kind of more professional , you know , but when it's kind of skinny , it just kind of , yeah , I don't know , I just feel like it kind of looks weird .

Also , Lao is a good font .

Lao and Roboto are also really good fonts and the more kind of skinnier you make it the more high end it looks .

So you can see there how that looks pretty cool and then you can also do Roboto .

That's a good one .

I do like that one .

A bottle is a good one to you .

So yeah , this is where you can adjust the color and also the topography , you can give it like a shadow , make it more high end and stuff like that .

So you guys can go ahead and check out some of these options and then again , the content is just changing the position and actually changing the actual content itself .

Now let's go ahead and click on these little squares up here .

Now these are your elements and with element or you can simply go ahead and drag in elements .

For example , if I want to put more text below this big header , I'll just put in some more text like that .

So uh this is actually part of the text .

So this is one module and this is the second module , let's say , for example , I want to drag in a button , I'll drag in a button below that to make it look more , you know , more appropriate .

Here we have an image , right ?

But uh I can change this image .

So right here I can choose the image and we actually can get free images from Pixie Bay .

How cool is that ?

And you guys are running a specific hotel website , you guys might probably not have all the images you need .

So just type in hotel and I'm sure we can find some images that will work for our website .

You know , like uh there we go .

This is a good one , right ?

I will answer this .

Oh My bad .

Here we go .

We have to click on this and save and insert , save and insert and there you go .

So now we have this other image .

You guys can see we can kind of adjust it and here we can adjust the image size , we can make it a little bit like smaller or however you want to make it look .

So yeah , image sizing is always kind of a pain in the butt .

You can always do like custom or whatever , but you guys get the point .

You guys can kind of adjust images and then we can drag and drop it .

You know , you can take this image and you can put it over there and then take this image and then drag it right there .

So you can see how this is a very visual dragon drop builder .

It's really simple to use .

I do like this a lot nicer .

Well , that image actually makes this look a lot more high end , doesn't it like ?

Wow .

Yeah , I should , I should , I should pat in all these ideas instead of accidentally finding them in my tutorials .

But um yeah , go ahead and just click on the , the little , you know , the , the circle , the square , the square thingies and then you can adjust in elements at any time that you want .

Now these are pro elements .

So these are included in the pro version of element or because we are using the free version , I will leave a discount .

If you guys do want to upgrade to the pro , it does give you a little bit more elements and then also we have general and the general are also more elements .

So if you guys want to get like those star ratings or something , uh Here , here we go .

Here we go .

We'll do .

No , no , no .

Yeah .

Wait , wait .

Should we do above er , perfect .

That works out perfectly like that .

So we have the stars and the stars , of course , they just let everyone know that it's like amazing , right ?

So we can just drag it there .

That's really cool .

Now , one thing you guys can also do is that you can drag in elements and duplicate them .

So for example , I'll right , click here and click on duplicate and with this little pencil , I'll hold on to the pencil and this is where we can drag in elements .

Now , you guys can also do this by right click and clicking on , delete if you want to delete elements .

And uh there's , but there's other , there's other settings here like copying styles like for example , if you want to copy like the style of this .

So let's say for example , you did something here where um or actually we'll do this one , right ?

We'll do this one .

Let's say for example , you know , image box , let's just find some regular text right here .

See regular text is this image box , no regular text .

Where's the regular text at ?

Here ?

We go regular text .

Let's say for example , I want to copy this design and paste it over here , right ?

Because I've already done the font and the size and I just wanna paste the style .

So what this will do is that it'll completely paste the style of whatever you did up here and it'll apply it to this elements .

You guys can also see that this is white .

So it also did uh you know , take the , put the white text there so we can't see it no more .

Now , let's say , for example , you guys messed up here like I did , you made a big mistake not to worry , we can always reverse everything .

So on the bottom of the screen , you'll see this history , right ?

And here we can kind of say , well , let's go back a step .

I messed up and now it's gonna take us back to the previous step we made before , which is the stark ratings .

So yeah , that's pretty much how you guys can adjust stuff .

Now , let's say , for example , you want to add in a new column , right ?

So every section you'll see this plus little icon and we can click on this little plus section and here we can add in columns , right ?

So let's say I'll put in three columns , right ?

And let's just go ahead and drag it something in here really quick .

We'll just do um we can do something like an image and then below the image , text editor and then we'll do a button , right ?

And that's that .

Now , let's say , for example , you want to duplicate this whole section instead of doing it all over again under this little uh column section , I'll right click and click on , duplicates right , click and duplicate .

Now you'll notice that it does create another column by default , but you can just go ahead and just delete that column and just go back to the three columns .

So you guys can see it's a very fluid builder .

You know , there's just a lot you can do with it .

Now , I can't go over every single option in this builder because you know , the advanced tab does have a lot of options .

However , I have already created a full video on element or it's about an hour and a half long .

It goes through all the options with mentor , including the pro version , like the theme builder and everything .

So if you guys do need help with this page builder , I highly recommend to watch this video , but I don't want this video to get too long .

And obviously you guys can learn this builder just by kind of messing around with it .

You know , just by clicking on this and saying , oh , this imports a block section and they also give you blocks , which are also really cool with astro .

So yeah , that's basically the elements for a page builder in a nutshell .

It's really simple to use .

Just go ahead and practice on your own time , give it about an hour and I'm sure you guys can make a really nice looking website .

So let's go ahead and click on update .

Now the update will save your changes .

So for example , if I click on these hamburger menu and click on a view page , you will then see it just takes us back to the websites where uh it added all of the changes and everything is saved .

Now , let's say , for example , you want to add a page and also add it to the menu right here because you can see we have these default pages yet .

We might need to make our own custom page , right ?

So right here under plus new , we'll click on page and this will be like the About Us page , right ?

You know , or I don't know , you know , close this little thing .

That's weird .

It's asking us about Gutenberg .

It's just their default builder .

I'm not a big fan of Gutenberg .

I'm not a big fan of their builder .

You know , I think it needs more work .

But uh hey , that's just my opinion .

So once you guys create your page , you'll click on publish and publish .

Now , one thing you might also want to do on the right side right here .

We have astro settings .

Now for the content layout .

I want this full with contained and I also want to disable this title .

If you disable this title , this will disappear on the page because I just want to use the builder .

Let's click on update and let me just go ahead and edit the builder and just show you what I've done right here .

So I'll click on edit with Element mentor .

Now , we can go ahead and build the page again from scratch and you'll notice how it's full width and that about us section is gone .

So let's click on this little uh starter template section right here .

I'm lazy .

You know , if you guys ever do want to use any of their free layouts , you guys can go ahead and do that .

I don't know if they have any for hotel here .

Let see , hotel the about us pages .

No , I don't think they do guys .

Sorry , you'll have to make it on your own .

But uh hey , that's where all the fun is , you know , so that's all the fun of , of making uh you know , making websites .

But uh yeah , I don't think they have any free about us pages .

But let's just say for example , we'll just use this one right here or uh yeah , we'll just use use this one right here .

You guys can just import their whole template .

So I'll click on import templates and now this template will be applied for our About Us page .

All right .

So you guys can see I imported this now , you can turn this into your About Us page by simply just going over this text and just doing like about us , right ?

Like about us , you know , just keep it really simple .

Now , I might want to add an overlay to this image because you can see that this white white water or this white tech kind of blends in a little bit with this water , just a tad .

So right here I'll click on this little six little dots right here and under the advanced section or I'm sorry , under the style we'll go to the background overlay and you can always just add a small tint .

So for example , I'll just click on this classic and I'll just add a very small tint of black or , or something like that , you know , or whatever color that you want to mess around with or Yeah , there we go .

So now you can see that this is a lot more legible and we can see it a lot more clear .

And then from here you guys can design your page if you want to delete this section .

Delete this section .

Oh , delete that section , you know , keep the about us page short , you know , you don't want it too long .

This section right here also needs an overlay , don't you agree ?

Let's go ahead and add one in .

Here we go .

Let's go out over here background overlay and let's just add in a small overlay .

Oh , that is good .

That is good .

So that's pretty much it .

I clicked on updates and now let's view the page .

All right .

So one thing that we didn't do right was we did full width contained and we want to do full with stretched in the astra settings .

So now you can see how the settings on the page do make a specific difference .

So right here you'll see that this is full width but it's contained .

So let's change that to full with stretched .

So right here , I'll click on edit page .

I did that on purpose , guys , I did that on purpose just to show you .

I swear .

Now , under the content layouts , I'll change this to full with stretched and we'll click on update .

Now , let's take a look at our page and see what's going on here .

So view page and voil now , we can see that this is stretched across the whole page .

So that's what the page settings mean .

And you know , that's why they're there .

Now , let's say , for example , I want to take this about this page and add it to the menu , right ?

Because you know , I want it to be on the menu .

It's not there .

Let's go ahead and go to our dashboard .

Now , when we imported the Astros starter sites , a menu was created for us automatically over here in appearance , we'll click on menus and right here we have our current menu .

So here I want to select the primary menu , right ?

Because Asher created one for us automatically and this is our menu .

This is the home , the rooms , the amenities and the contact .

Now , I'm gonna click on view .

All right here under pages and I'll select the About Us page , right ?

Cool .

There we go .

And , and now our About us page is connected to our website .

Now , you can add pretty much a link to anywhere .

So let's say , for example , you want to link them to your positive reviews on uh booking dot com or you want to link them your social profiles , you guys can use this custom links .

So this is really simple , let's say , for example , you have your , you know , your Facebook page , you know , page or whatever , right ?

And this is social or our Facebook or whatever our , you know , our our booking dot com or our social site or whatever , you know , whatever it is , we'll add this to the menu and now you'll see that our Facebook is added to the menu .

Now , you can also add this , add this as a dropdown .

So let's say for example , I want to take this and put it like that .

Now , our Facebook is a dropdown of the about us .

So let's go ahead and check it out .

Let's click on save menu and let's go to visit sites .

All right .

So you can see we have the home , the about us , the rooms and the amenities and the contact .

So that's pretty much it .

Now , this is just plain like this because we need to adjust the text color for our menu .

Now , we can do that with the theme customizer .

So let's go ahead and turn on the theme customizer right here .

We'll click on customize .

Now , what the theme customizer does that ?

This kind of gives you control over the header and the footer and other various parts of the website that the page builder normally does not , for example , how do you want to move this header around ?

Right ?

You might want to move it into a different format .

So right here we have header builder and this is where we can kind of adjust our menu .

So here we have the primary menu , right ?

And we have our logo , but maybe I want to take this and just move it over there and we go like that .

There we go .

So now we have the primary menu , right ?

And then we have the button right there .

Now , here I can click on primary menu and then I can design it .

So the design tab , we can go ahead and design this , we can adjust it , we can change the color and all this really cool stuff .

So we have the menu color the background and all this these options right here for our dropdown menu .

Now , since we are using a transparent menu , there's actually different options for our transparent menu .

Now , that's your choice .

You guys can have a transparent menu on your website if you do decide to have one .

However , you can see right here under the header builder under general , we have customized transparent header .

This will enable us to customize our header if the menu is transparent .

So I'll go ahead and click on this .

Now , we do have a few options right here .

So we have our logo and we have all these other settings .

So let's say for example , I want to change this to a black text .

So let's first click on the design tab and here we have the menu color , we have the text , right ?

We have the sub menu color and then we have the social color and all these other various colors .

So for the sub menu color , I want to change this to black , right ?

Because this is our sub menu , right ?

It's a secondary menu right there .

So now my sub menu color is black and if I hover over this , now you will then see that the text appears .

So yeah , that's pretty much that .

Also let's go ahead and say , let's say you want to add in your logo for the transparent header options under general .

Here , we can select a logo , right ?

So let's go ahead and add in a logo .

Now , if you guys do need a logo , you guys can go to fiber dot com .

These guys will make you a logo for dirt cheap like 10 bucks or something like that .

Just go to fiber dot com and type in logo .

I do have a link in the description .

So if you guys do use any of their services , I do get like a dollar or something like that .

It's really , really small and you guys can go ahead and find a professional , a logo designer to create a logo for your hotel business .

Now , I recommend using this website .

Because if you guys use those free logo maker websites , you guys actually don't have any rights over those logos .

So anyone can make the same logo you have and there's nothing you can do about it .

So , uh , don't do that .

Just buy a logo here for like five bucks , 10 bucks and you'll be all set .

So you can see here on my demo website how I have this logo right here .

What I want to do is I want to go ahead and upload this logo to my website .

So I'll go back over here to my website , click on the select image and I'm going to click on upload files and now I will upload the logo .

So right here , I'll upload this and click on open and now I will click on choose the file .

Now , the cool thing about Astra is , let's say , for example , your logo is too big , right ?

And that's a very common problem .

You can actually adjust the logo right here .

So you can see here how we can adjust the logo with to just kind of make it fit to our site .

So that's always helpful .

So make sure your logo is a little bit bigger because Astra can always reduce the size of it to fit your hotel booking website .

So once you've done that , let's click on publish now on your own free time , please feel free to check out these other options you really don't need to mess around with all these options .

You know , a lot of these are for like sidebar options , your header and your footer builder and the footer builder and the header builder work just the same .

So on your own free time , feel free to kind of mess around with the theme customizer .

And just remember that the theme customizer controls various parts of the website , like the blog , the header and also the footer part of your website , which is this part right here .

So yeah , go ahead and mess around with those settings .

It will take a little time to get used to .

But after probably 10 minutes , you guys will be pros with a theme customizer .

All right .

So at this point , you guys are getting more comfortable with the builder .

You guys know how to design and customize stuff .

Now feel free to take as long as you want guys .

I understand I made it look really easy by building out a website in like , you know , a few minutes .

But I understand this process does take a long time .

So feel free to uh step back and just kind of take the time to build your website .

But in this next part of the video , I'll be showing you how to integrate the hotel booking functionality to your website .

Now , we'll be using the free version at first and after we use the free version , we'll move on and install the pro version and then I'll show you all of the features with the pro version .

So with that said , let's go ahead and jump back to the video .

All right .

So in this section , I'll be showing you guys how to integrate your booking system onto your website .

Now , we will fix the home page a little bit later .

I kind of wanted to wait until we got the search bar so we can kind of mess around with the home page all at the same time .

So let's go ahead and go to our dashboard here .

So let's go down over here to plugins and click on add new .

Now , the plug-in that we're going to use is called , it's called VIC booking .

So just type in bookings here .

Let's let's kind of find it together bookings .

It's probably hotel bookings , actually hotel bookings and this is the plug-in that we're going to use .

It's actually the highest rated .

Now , personally before this video , I purchased many themes and I tried many plugins and a lot of them just didn't really fit the criteria of quality that I wanted and , and this plug in hands down , it's great .

It offers really nice features and it has a beautiful layout .

So right here under VIC booking and engine or whatever , uh go ahead and click on install now and then you'll click on activate .

All right , cool .

Now , on the left side , once you install the plug-in , you will see you have this VIC booking tab .

So go ahead and click on vic booking .

Now , this is the setup wizard right here .

So first we would configure our price , configure our rooms our costs and then we have short codes for which we can paste anywhere on our website .

However , I would like you guys to click on the select sample data .

Now , what this is gonna do is that this is just gonna import some demo content on our uh plug in and it will kind of help you guys follow along on what's going on right here and I'll just give you a better visual of what's happening .

So I want to go ahead and select hotel right here and then click on install sample data .

So just give that about one minute while it imports some data on our sites .

Oh , it looks like that was done .

Wow , pretty fast .

So uh you guys can choose to opt in or opt out this kind of helps them uh collect errors or anything else uh on the sites .

So once you select an option , you'll click on save .

All right .

Now , before we get into any of these options options , I now want to add the search bar to our website because we're going to come back to our search page and everything .

And I just want to kind of keep referring to our home page .

So let's go ahead and design and customize our page right here .

So right here , I'll click on it with Element or now I want to turn my landing page into something like this where we have this background image , we have this text and then we have this button and then this is the search bar that we now have from VIC booking .

So let's go back to our main page right here .

So what we can do first off is uh we can go ahead and just say , you know what um I just want to start over from scratch , so I'll right click on this and click on deletes .

So at this point , we're just gonna start from scratch .

So you guys can follow me , you know , step by step and I want to just insert a heading , text , right , heading , text and center that and then here we can adjust the title and I think right here I just put luxury hotel and best resort .

So you go ahead and put whatever you want and under the style you guys can go ahead and pick whatever you like .

Now , I'm gonna select the white and Poppins bowl because that's just my go to fonts .

That's what I use on pretty much all of my videos .

So here Poppins bold and then we can adjust the size .

So I'll just put this to like something like 65 .

And yeah , that is my title for my home page .

Next , what I'll do is I will insert a text editor below that .

And I will also under the style tab center this and change this to something like white .

So I want it whites and that's a little red .

There we go , that's white .

And then maybe that's too long .

So we can kind of just reduce the , the , the font or reduce the text right there to , you know , if it's something like that , you know , our amazing hotels .

In fact , I'll just copy this and then just paste that right there like like that .

All right , cool .

And then below that , this can be some sort of promotional button .

So this can link them to your sales or this can link them to somewhere else on your websites , uh wherever you want them to go .

So I center that and the link of wherever you want to take them would be input right here .

All right , but I'm just gonna leave this blank .

Now , I do want to make this a little bit more darker .

You guys can tell this is a little faded and if that's a look , you guys wanna go with , you can do that .

But for the color , I wanna make sure that's black , just like a dark solid black .

I do like that a lot more .

Now , we also have the vic booking search tab .

So what we can do is we can add this to our sites .

So there's a few ways on how you can do this now right here , I'll click on these little boxes or whatever and we're gonna scroll down , just keep scrolling , just keep scrolling and we're gonna click on wordpress .

Now , these are like the default widgets that come with wordpress .

And when you install plugins , sometimes you will get more options .

And here you can see that we have the VIC booking search form .

So what we can do is we can go ahead and drag this to our websites .

So for example , if I want to take this and just drag it , there you go .

So first I want to change this layout design .

So right here under dates , layouts , I want to change this to human readable .

So now you can see it has this different kind of style right here .

It has like this different uh you know , it looks a little bit different and it's kind of , you know , making it look a little bit more uh legible and nicer .

I do like this design a little bit more .

Now , later on , we can select like the default adults .

So for example , when people search on this , it'll just say one person now , what we should do right now is actually change this font because it's kind of hard for us to see what's going on right here .

So for the advanced section , I want to add a background .

So over here we have background , right ?

And I wanna add a background to this and I probably wanna add a white background , something like that .

All right .

So this looks a little bit more legible .

Now , we can see the texts and everything else of what's going on .

Now , what we can also do is we can kind of add in more space .

So you see how this space is kind of crunched .

It looks really kind of too tight .

What we can do is we can add padding to this .

So up here under the advanced section , we can now add padding and padding is just again , space and this just kind of gives it a , a better look , you know , and you can add more padding on the right side and on the left side just to kind of give it more , uh you know , more of a a cleaner look .

So now you can see that this looks a little bit more , you know , more nicer , more legible .

So I wanna click on apply , ok ?

And then we'll click on update now , to be very honest , when you are using this search bar and you're trying to adjust stuff , sometimes it might be glitchy and there's no problem with the plug in or the builder .

It's just how wordpress works .

And if you want to see what the changes look like after you adjust them , you can click on view page and here is our , you know , search bar .

So that's pretty cool .

Now , one thing I also do want to start doing before we go on any further is I want to install a cashing plug in .

Now , what the cashing plug-in will do is that once we make some changes , sometimes guys , it doesn't look like it worked .

And the reason why is because sometimes Wordpress uses old cache .

So right here under plugins , we'll click on add new and under search plugins , we'll type in cache , cashe and I want to install the light speed cache because we are using Lightspeed servers and now I'll click on activate .

All right .

So let's go back to our website on vi visit sites and now you'll see this little diamond and right here you can click on purge all .

Now , you should always have a cashing plug-in on all of your websites because what happens is if someone visits your website and you make changes and you don't cash it , they're gonna see that old version of your website .

So you do want to make sure that you do cash your plug in .

It actually will help speed it up as well .

Now , you guys can see here how I added this section to the bottom .

Now , there's a few ways on how you can do that .

You know , you guys can use the margin or you can uh drag it .

So let me just go ahead and show you a few ways on how you can approach your search bar to give it that kind of modern style look .

So here , for example , you guys can see how this just kind of looks funny .

Now , there's nothing wrong with it just sometimes that's just how it works .

So first I wanna click on the little plus icon and I wanna click on this little add a new section and I'll add one row .

Now , I'm gonna take this and I'm gonna drag it inside of this like that .

Now again , you guys are more than welcome to just take this and leave it here .

I think that's also very suitable .

You know , this is also really good .

But if you guys do want that style where it's kind of clashing up and it kind of has that little modern style to it .

And what we can do is we can add margin here .

So over here under the advanced section , I first want to click on this little links value together , so I want to add negative margin .

So right here , I'm gonna click on this little down arrow and we're gonna push this up just a little bit to look something like that , you know , 70 or something like that .

Now , here I can go ahead and close this and we can kind of see how it looks .

So it does look a little bit nicer .

You guys can also tell here I added a lot more padding so it does look a lot bigger .

And if you guys want to uh you know , if you guys do want to approach it , you guys can do that .

Now , also , what I've done here is I have added a , a border radius , I'm sorry , a drop shadow .

So you guys might notice that we have this kind of shadow over here and it just looks really clean , right ?

It just kind of makes it separate because here it just kind of looks like it's , it's all clumped together and we don't really know where it's uh you know where it starts or ends .

So let's go ahead and add a box shadow to it .

So down here under background , I'm sorry , under border , we're gonna click on box shadow and now you can see how this kind of gives it that little shadow look .

So now it kind of looks like it's away from the actual section .

So that looks a lot nicer and of course , we can just go ahead and add a more padding and then that will be done with this section .

So over here under the advanced , I'll just give it some more padding , you know , just give it uh Well , just give it a good 25 of 25 maybe something like that .

There we go actually less on the top .

I think top is too much .

What do you guys think ?

Here , you guys can tell me in the comments below .

Here we go .

We'll just mess around with this and we'll apply that and then we're all set to apply that and then update it .

All right .

And let's see if I made it the same here .

So view page .

All right .

So maybe I need to push it up a little bit more .

So you guys can see , I just need to add in some more margin to it and then that will be all set .

So that's how you guys can kind of design and customize your home page to kind of achieve this specific look right here .

All right .

So I gave it about 100 and 10 margin .

I think 100 and 10 pixels is , is pretty good .

So now that we have this , we can now search by the check in date and everything .

So , uh actually what I'm gonna do for this remainder of the video , I'm probably gonna put this up here because it just looks a lot easier to read on the eye .

Now for this tutorial , what I'm gonna do is I'm actually just gonna go ahead and delete this and I'm gonna drag this up because I don't want to have to keep kind of looking down there , you know , throughout the tutorial .

So I think this will just kind of give us a clear concise uh you know , booking section .

So as we use this , um you know , search bar , it'll be easier for us to follow in this tutorial .

Now , in order to link this search bar with the actual search results over here under page , we're gonna click on your booking details and click on that and then we're gonna click on apply .

So essentially what we're telling this search engine to do is we're saying let's go ahead and take a look at the bookings of what's available .

So make sure that you select this to the actual uh booking detail or else you're gonna have some errors down the road .

So let's go ahead and update that and let's click on a view page .

So now I'll select some check-in dates , right ?

So let's just go ahead and test this out .

We have July 2nd to July 3rd .

We want one adult and that'll be one night and here I'll click on search .

So now you'll see our booking details and this is some of the demo content that we used .

So here we can see the rooms , the options and the book and everything .

And then here we can just select on a room , right ?

And then this would be our room .

We have the price and they can click on book now and then here they can just go ahead and navigate through these billing options .

They can fill in their billing information .

And uh here I'll just put in Darrell Darrell Wilson and scroll down to the terms and click on confirm reservation .

Awesome .

So at this point and you know , a lot of this is already kind of coming in play , right ?

So you guys can see how now you guys have a good visual of the booking process .

So not that we have a good visual of the booking process , we can now go ahead and insert our information onto the plug-in .

Now , before we do that , I just want to adjust the outside of this website one last time by adding in a contact form .

So we designed the home page and that's set in stone , right ?

That's done .

But maybe you need people to message you on the uh contact form , right ?

So let's go ahead and turn on the contact form .

Now WP forms is already installed .

We just need to assign the contact form .

So right here , click on edit with element or right ?

And now you guys can see this little like uh this little edit form or whatever .

Just go ahead and change this to contact form and then click on update .

Now , this email will go to the email that you used to sign up with with wordpress .

So uh if we fill this out right here , this will go directly to your inbox .

So right here , I'll click on view page and now you have this beautiful contact form .

So like uh you know , here we go rates .

This is expensive and then if we click on submit , this will go to our uh email .

Now , you guys can also assign this contact form anywhere you want by using the WP forms , widget with element or so there is a widget that you guys can use and you guys can add a contact form to pretty much any page that you desire .

So that's how you guys can add the contact form .

And I think at this part , all of the website is done .

So we have the home page .

I've showed you guys how to make a menu , how to add pages , how to add a contact form .

So now let's go ahead and focus on the plug-in .

Now , one last design tip , if you guys do want to change this background image , you guys can go ahead and do that with the builder .

You can see on my demo website here , how I just uploaded the um just an image I had uh If you guys do want that image , I'll leave that in the description below this video .

So on these little six dots right here under the style section , this is where you can go ahead and adjust the image .

Now also you guys can go to free images from Pixie Bay and just type in , you know , like hotel or beach , right ?

I think right here we can type in beach and you guys can just get some , you know , some ideas for your background for your hotel .

They do have quite a bit .

So yeah , that's just something that you guys can do and check out .

So what I wanna do is I want to upload the image from my demo website .

So I'll click on upload files and I will upload it to my website .

I believe it is right here .

Again , I'll leave it in a zip folder for you all and you guys can just go ahead and click on it in the description , you guys can download it .

So here I'll click on insert media and now we can kind of see how that image has changed .

Now , if you guys do want to adjust it , you guys can go over here under position and this is where you guys can kind of adjust it to fit your liking .

You guys can also click on custom and this is where you can completely adjust the actual position of this .

So let's go ahead and just do something like this right here .

Yeah , like that .

And of course , this does like a little , it does look a little glitchy , but once you guys actually save this , uh it will not appear like that .

So sometimes this displays like that when you are editing the actual page .

So uh yeah , that's that .

And also what I want to do is I want to actually change this layout to something like full width .

So this whole background I want it to fit to the screen .

So something looks like that , right ?

So you know , I just feel like that looks a little bit more nicer , right ?

So here I'll click on updates and then I will view the page so the fit the screen will actually fit it , fit the background image to the entire screen .

So it just has that full with page look .

You know , I do like that look a lot more than just like the typical cut off look and stuff like that .

All right .

So let's go ahead and jump into the whoops , click on the space bar .

I know what happened there .

Let's go ahead now and adjust some settings in the back end .

So right here , let's go to dashboard and let's go back to vic booking .

All right .

So the first thing that we want to do is over here under rooms , let's click on categories .

So this is where you can adjust the categories for your rooms .

So here we have hotel rooms , we have studios .

Now , if you only have just one category , like just hotel rooms , that's ok .

But uh that's really up to you .

You can add this in the search bar on the home home page if you want to or it's totally optional .

But this is where you would add categories .

So let's just say , for example , I'll add in a new category just to , you know , walk you through it .

And so I have , you know , I have a hotel , right ?

But I also have like special , we have private villas .

So these are like away from , you know , these are away from the actual resorts and these are private , right ?

So I'll just go ahead and click on save .

It's kind of annoying .

It's actually at the top .

So whenever you guys save something , it's at the top right there .

Ok ?

So these are our categories and again , you guys can make categories for your hotel .

So next , let's go ahead and click on room list .

So right here we'll click on room list .

So here is a list of all of the rooms .

So whatever rooms that you are offering , this is worth , you can display them .

So for example , we have a double standard room , right ?

We have a single room , a studio with balcony and also a triple room deluxe .

Now , what I'm gonna do is I'm just gonna go ahead and walk you through the process of creating a new room .

So right here , let's create a new room and this will be something like the presidential suites or something that uh you know , any kind of room , right ?

So this is the presidential presidential presidential suite .

Now , how many rooms of these do you have ?

So this will actually help because let's say , for example , you only have one and somebody books it , it will then disappear from the search results because uh this plug-in will not allow people to overbook .

Now , you do have the option to allow overbooking , but I'll talk more about that a little bit later in the general settings .

So I have around five of these units .

Next , we have the adults , right ?

So what's the minimum and maximum of adults that can be in this room .

Well , I'll just say , you know , 1 to 10 , you know , 1 to 10 .

Do we allow Children ?

Well , sure , why not ?

You know , 1 to , to 10 or something like that ?

This will actually help people , uh , search for rooms in the search bar .

So here we have the total people that can be in the room 20 is quite a bit .

But , uh , again , that's up to you .

So maybe you're saying , you know what's , you know , three adults max and just two kids because maybe they're allowed and they're annoying and they're gonna bother a lot of our guests , right ?

So uh here we have the total minimum people , you might want to change that to zero , right ?

That makes more sense .

So that means if they don't have kids , that's fine .

Right .

So here we have room category .

So this is where our category is going to play , right ?

So we have the hotel rooms , studio and private villas and I'll just select private villas and here we have room characteristics .

So what I wanna do is I wanna go ahead and select some of these .

Now , in the very next section , we will create more characteristics .

So for example , let's say you have a blazing fast wi-fi or you have , I don't know something about a room , maybe you have like a big windows or uh you know what's a good one is ocean view or something like that ?

I don't know , you know , but you can add in characteristics about your room right here .

Now , this is room parameter .

So do you want users to book multiple units ?

Um I'm not sure about that .

That again is up to you .

But that saying is they can like book three rooms at a time .

Uh preferably you might want your guests to book once , you know , just one at a time .

That just makes a lot more sense .

So here show how many units are still available when less than two or less than three .

And this will say something like the last two are available .

So this plug in it adds urgency to our users or visitors to say , oh , we only got a few left .

Go ahead and you know , buy that or you know , you must book now .

So if you do want to add like a custom starting price , you can go ahead and do that .

That's uh the price label .

This will just be something like per night or per weekend .

You can go ahead and adjust all of these custom settings right here .

Uh This again is his preference and personally , I wouldn't , you know , it , it's up to you if you want to have something custom , which I'm sure many of you do .

So let's go ahead and scroll back to the top .

So next , we have photos in description and when I first used this plug in , I got a little confused because room main image is applying to the actual room image .

When they click on the actual image , the image that displays in the search results will be the first image in the extra image , right ?

I hope that makes sense .

Now I have demo images for all of you in the description of this video below to help you guys follow along .

So over here , I'll click on browse .

So the folder in the description is called hotel images .

And once you open it , you will get this little folder so you guys can use some of these images if you need .

Um Just to help you guys follow along in this tutorial .

So I'll just go ahead and select this one right here , right ?

Hotel living room , right ?

And I want to add extra images , right ?

So right here , I'll click on brows now .

This is where you're going to show like the actual inside of the hotel , right ?

So I'll just grab in like these four just for demo purposes here .

Let's do the bulk upload .

I think they have bulk upload , right ?

Let's see .

Let's see .

No , no , no , they don't .

Uh I think in the pro version in the pro version , they have bulk upload , that's kind of inconvenient .

So here we go , I'll just add it in one more right here and there you go .

So now you're gonna add in a short description and this description will be displayed in the search results .

Let me give you an example .

So here is my list of rooms on my other demo websites .

And here I want to copy this and I'll display the short description .

Now , the room description will be displayed when they actually click on the actual room .

So here I'll click on select and this is the actual description of the room .

So I'll go ahead and copy that and paste it like that .

All right .

And then scrolling down here .

Uh That's pretty much it for creating a room , right ?

So now I'll click on save and close .

So now we need to insert a cost for this specific room , right ?

So what is the standard rate for the room ?

Well , I'll just say it's 100 and $20 a night .

Now , if you have a non-refundable rate , you can go ahead and insert that there .

If you choose , I'll just put 100 10 and then click on insert base rates .

All right .

So now you can see that the plug-in will automatically propagate the prices for whatever nights that you select or the users select .

So we have all of these prices right here .

So we have standard rate and also a nonrefundable rate for your rooms .

And you guys can always go ahead and adjust any room at any time and adjust the rates for your rooms right here under pricing .

So that's pretty much how we can create a room .

Now , the next thing I wanna talk about quickly before we actually search is the characteristics .

So earlier , I did show you guys these characteristics .

So whenever you want to add a characteristic to your room , you'll click on new characteristic .

And again , this can be something like we allow pets .

So characteristics are basically characteristics of the room .

So maybe they have a double fridge , right ?

Two fridges .

So double fridge , you know , I don't know , whatever .

And then here we have the font icons preinstalled .

So they do have some icons for us .

And uh you know , I don't know what to put in here .

Let's just put in , I don't know , gift , right ?

And then we have rooms selected .

So which car six is this room ?

I'm sorry .

Which rooms are these carer ?

64 ?

Is that , is that right ?

Yeah , I think so .

I'll just say all of them , right ?

So we have double fridges and all of our rooms and then I'll click on save .

All right .

So now let's go ahead and take a look at our rooms .

So over here we'll go to visit sites and now I want to go ahead and search for some rooms and we'll go ahead and scroll down .

You can see we have a list of our rooms right here and there it is , we have the presidential suite .

Now , here we have a list of our amenities .

So you can see that we just added in the uh what was it ?

The double fridge , right ?

So we have the double fridge .

So everything looks pretty cool .

Now let's click on select and let's scroll down .

Now you notice right here how the main image changed , remember how we selected this as the main image .

So let me go back to our website really quick and show you why this is .

So here we have our settings for our room .

Now , remember this first image , this is the image that going to display in the search results .

This image right here is going to display as the main room image .

OK ?

So this will need to be displayed right here .

And that's how you can kind of differentiate the different styles of images versus your search results versus your main page .

All right .

And let's go ahead and keep scrolling .

So we have our characteristics .

We have the non-refundable rates and the standard rates and they can go ahead and book now .

So congrats , we have successfully made a booking .

Now , later on in this video , I'll show you guys how to customize everything like the colors and this page because I know this has like that squared style to it and we can adjust that and we'll talk about the design process a little bit later in this video , but that's how you can create a listing on your booking websites .

So now that we know how to create a listing , let's go ahead and go back to our dashboard right here and we're gonna kind of keep digging on this .

So let's go back to vic booking .

Now , one thing I did notice is that this is in a different currency and I don't really want to purchase in the euros .

A lot of people watching this video might be purchasing in US D so you just have to go to global and then configuration and then you go to prices and payments and then you can change this to us D and then the dollar sign .

Oop , doop , doop , doop , doop , that's not it , the dollar sign and you can go ahead and select whatever currency that you want .

So this will be again us D and uh yeah , I think that's pretty much it .

So here I'll click on save .

So next , let's add the rate plans .

So we created rooms , right ?

But maybe we need to add a specific tax or a resort fee to our rooms .

So right here we're gonna go to uh tax rates .

So this is where you can insert tax rates for your rooms .

You can also add in specific resort fees , which I know a lot of hotels do like Vegas .

It's really annoying .

They have like a like a 30% tax rate .

It's ridiculous .

This will just be like a tax rate and you know , resort fee or something like that or , I don't know , you know , whatever you wanna do like tax rate , tax rates and this tax rate will be 10% .

All right .

And then I'll just go ahead and just save it and there you go .

Ok .

So we have a tax rate of 10% and then also 18% we can also add in a resort fee .

So this will just be resort fee , a resort fee and we'll add 5% because I think Vegas before they actually would give you the option because if you wanted wifi , you'd have to pay for it .

And now they just said , you know what it's , it's included , you know , we're gonna just tax you and that's , you know , that's it .

So now we added tax rates and we can apply these to the rooms and we'll do that a little bit later .

But uh let's go ahead and go back over here to rate plans and click on type of price .

So next , we have the types of price and the types of price are just different levels or whatever rates you want to offer for the room .

For example , you can see here we have standard rate and non-refundable rates and right here we have the non-refundable rates and the standard rates .

Now , what we can do is that we can actually add another type of price and we can add a tax to that specific type of price .

So for example , let's just click on new price and the price name , this will be something like , uh , I don't know the deluxe options , the , the deluxe style , I don't know , something like that .

And then now that we created a tax , we can go ahead and apply that tax to this specific room details and you can adjust the settings right here like breakfast included or whatever you want .

And then right here we'll click on save .

So now that we created the deluxe style , let's now add it to our pricing .

So right here under pricing , let's click on rates table .

Now , this might be a little confusing , but don't worry , I'll walk you guys through it .

So uh here we have the standard rates and we also have the non-refundable rates .

Now , I want to add the deluxe style .

So what this will do is that this will add more options to the room .

Maybe you want to add , I don't know , you can even add breakfast here , you can kind of add in whatever you want .

So from right here , also selected one and I want to add in the deluxe style .

So I'll just go ahead and just insert one right here .

I know that seems a little weird , but uh let's just walk you through this .

So make sure one nights is here and then also deluxe is one and then just click on insert .

I know it looks a little weird .

I'll explain why I'm doing this .

So I've added that in to the double standard room , right ?

And now let's scroll down .

So now you can see here how we have the option .

So for one night , the standard rate is 100 the nonrefundable rate is 90 but we do have like a deluxe version of the room and the deluxe version of the room is gonna be 100 and $20 and now I can update the rules .

All right .

So again , what that's saying is for one night , they'll have the option for deluxe .

Now , you can select more nights .

So for example , from one night to 10 nights , right to 10 or something like that , the Deluxe will be like , I don't know , $100 or something like that .

And we can insert that in the rules and that will apply for all of the rules .

So here I'll click on insert and scroll back down and now you can see how it applies for every night .

So the deluxe style , you know , it's $100 for this night .

We should have made it a little bit more because this is deluxe versus the standard .

So let's do that .

Let's just put in 100 and 20 right ?

100 and 20 from 1 to 10 nights , which I'm assuming that's all they're gonna book , right ?

You should probably put 30 .

I don't know .

How many nights do you think people are gonna book ?

And then I'll click on insert .

All right , and then we'll scroll down here and there you go .

So now we have the deluxe style is 100 20 the non-refundable is 90 100 .

So you can make more pricing types if you want and then you can add them to the room .

So now that we've done that , let's just go ahead and take a quick look at our website and make sure everything is good .

First , let's click on update rate rates , right .

Update rates .

Yep .

All right , cool .

And now let's go back to our websites .

Let's go back to the beginning here .

Let's just walk you through this .

All right , and let's clear the cache .

All right , let's purge the cash .

Make sure we're all on the same page here and let's go ahead and do some booking .

All right , we're gonna book uh here we go booking .

Yeah , there we go .

And we have the double standard , right ?

Also like that I should have done it for the presidential .

We were working on that one , you know , and I kind of mixed it up there .

So now you see we have the deluxe style .

So that's how you guys can adjust the uh the pricing options for your rooms .

All right .

So now that we've covered some of those options , let's go ahead and keep digging here .

So next we have the bookings tab .

Now the bookings tab will just display the general overview about the bookings .

So for example , you'll see all bookings , uh you'll see bookings on your calendar and then you'll also have your dashboard where you can kind of see the total bookings and then see arriving departing and also at the bottom , we can see upcoming reservations and stuff like that .

And you guys can also add widgets here and you can kind of customize your own personal dashboard .

Uh You guys can mess around with this on your own free time and I'm not sure if people are even going to use this dashboard , but uh this is where you would access all of the bookings on your uh website .

Also here you have management .

Now , most of these are available in the pro version , but there are options like statistic tracking that are available in the free version where you can see uh who's visiting your website from where and then also look at conversion rate .

So maybe people are stopping at a specific section , you might want to work on that part of the website .

So that's just what management is also P MS .

This again is referring to a lot of the pro features and we'll be talking about all this later in the video .

So let's go over here to Global and then we'll click on custom fields .

Now , on the pro version , you do get more custom fields .

But right here , you can see that you can adjust your custom fields for your terms and conditions here .

You can go ahead and put a link for your terms and conditions because when they purchase the hotel or the or they're about to purchase it .

They'll be forced to create a or I'm sorry , uh check the I have read to the terms and agreement .

So for example , you would want to create a page and then put your terms and conditions on that page .

Just to give you a quick example here , I'll just go ahead and quickly uh just make one up really quick .

So terms and conditions , right ?

Conditions and then this would be like your terms .

So your terms , you know something like that .

And then this would be like upon using our website , you can't charge us back , you can't leave negative reviews on Yelp or whatever you want to talk about .

So this would be your terms and conditions page .

So here click on a view page and then what I wanna do is I want to copy this .

Now we can go back to our options and we can paste that link in the configuration options for our plug in .

So yeah , there we go .

OK , we're back here .

Cool .

Sometimes you get a white screen , just click back , just , just keep clicking until you make it to where you need to go .

So right here , I'll click on this and then I'll just paste that in there .

All right .

So they must check the terms and conditions in order to proceed with the booking .

All right .

So that's what the custom field is .

We'll come to translations in just a little bit but let's click on configuration .

All right .

So first , what we're gonna do is we're gonna click on main settings .

Now , the main settings are again the main settings of the website and a lot of these are just general options .

You know , like the sender , email , check in time , check out time .

Uh , this is pretty important .

So usually I think for hotels like the Hilton , it's three o'clock , right .

So , I guess like the check out time for Hilton is 12 , is it 12 p.m. And then the , the the other time is three , I think , yeah , three o'clock .

So , uh that is the check in time for the Hilton .

I know that because I stayed at the Hilton in PAA Thailand and here you'll just go ahead and adjust some of these options .

Now , this is all preference and stuff like that .

So you'll just have to go through this , see what you want to add and yeah , all that good stuff .

So these are , again , are just general options where you can adjust the search parameters and stuff like that .

So yeah , once you have made the changes , you'll click on save .

Always remember to click on that save button because I've done it a lot spot where I don't click on save and then nothing saves next .

Let's click on prices and payments .

So here you can adjust the currency .

If you want users to pay with a deposit , you can go ahead and uncheck that and then they can pay with the deposit or you can make them pay for the entire amount and then you can include or exclude taxes um , on your website , just depending on if you want to go that route .

Next , we'll click on views and layouts .

We're gonna come back to the design process after the pro version and I'll show you how to use custom CS S to design the website .

We'll also touch base on customer email and show you how to adjust the fonts and the colors .

But that will take quite a bit of time .

So I'll be saving that for the end of the video and here you would go ahead and just , you know , adjust these options , uh anything that you want to change here as far as colors go or something , this is where you're gonna do it .

Now , for example , over here , we have headings and titles or sorry , titles and headings .

So let's go ahead and open up my Darrell Hotel website right book now and let me just show you where these are being applied to .

We have the titles and headings , right ?

And this would be the title , right ?

Ok .

And you can adjust that elements with background .

So this is referring to the actual button right here .

So if you want a different color button , you would change the background color and then you can adjust the font color .

The hovered elements is referring to if a user hovers over this element .

It will change colors depending on what you want to put on your um you know , on your , your website and , and your style and your brand and stuff like that .

That's what the preferred colors is referring to , right ?

So I'll go ahead and click on save next .

Let's click on company and reservations .

Now , this is pretty important and as you can tell , I have already changed my logo here .

So this is where you want to put your company name and also put your company logo .

Now , this will appear on emails .

So it's very important that you put this correctly .

So you'd want to go ahead and , you know , just put like in , you know , a logo here that represents your business and you can also send the email when either when it's confirmed or pending , it's up to you .

And these again would be your additional terms and conditions for whatever reason .

And uh this is also a footer text .

So if you want to add some more texts in the footer , you can do that .

And then this can be your disclaimer saying , hey , you know , if you're allergic to something , sorry , you know , you're , you're in , you know , I don't know what country you're in .

Maybe you're in uh uh Costa Rica and they're allergic to mosquitoes .

It's like , well , there's nothing we can do about that , you know , so sorry , you're screwed , you know , but uh here , I'll click on save .

So again , make sure you adjust this because this will appear in the back end and also it will appear on emails , guess reviews .

This is for the VIC channel manager plug-in , which we do not have installed and also S MS gateways .

I will talk more about this a little bit later .

There is uh services that VIC booking recommends where you can send out uh text and message notifications to users .

So that's also pretty cool .

And I'll talk about that a little bit later .

Next , we have conditional texts .

Let's say , for example , a user does something on your website .

You might want to send them a message or an email depending on what the user does .

Let's just go ahead and give you some examples here .

I'll click on new conditional texts and this will be like the uh I don't know the welcome email .

There we go .

Welcome email .

OK ?

And this would be like uh get 20% off , you know , off your next visits .

All right .

Now , if I scroll down here , you will see that I can add a rule , but I'll just put returning customer .

So let's say for example , someone books on our websites .

We want to go ahead and say , well , if they book on our website , I do want to give them 20% off , you know , use code Darryl , right ?

And yeah , we out of that rule and then I can click on save right here .

All right .

So that is one condition that we have done .

So let's go ahead and take a look at it right here .

Let's go ahead and see if we can here , save and close .

There we go .

These are kind of , I , I get tricked a lot .

I get tricked .

So here we can kind of see , uh , you know what this looks like .

So here I'll click on the customer email and uh yeah , it'll basically send in this format .

So it'll put the order ID and everything in your email .

Now again , we will customize the email a little bit later when we talk about the design process because uh yeah , I just want to stay on track here .

Let's do one more .

Let's do here a lot of new conditional texts and this will be like , um you know , let's say , for example , you are uh a , I don't know , like a , a hostel or a villa keys are in planter or an air BNB or something like that .

I don't know , something like that .

All right , add rule .

And what I'll do is I'll scroll down and click on rooms and click on , add a rule .

Now , let's say , for example , somebody actually booked .

Uh let's see , you see here we'll do the uh presidential suite .

I don't know , you know , I spelled that wrong , you know , I'm so it's embarrassing studio with balcony , right ?

ST someone books a studio with balcony .

Uh They will then get this message when they book the studio with balcony .

That's it .

And uh I'll just click on save and close .

So there's a lot of different conditional texts you can add to your websites .

I'm not gonna go through every one .

You guys might want to explore those on your own free time .

But uh that's what that is referring to .

So the last part of this section , we are going to talk about translation , you can actually translate your website into various languages .

Now , in order to activate this , you will need to go to your general settings and you will need to kind of select another language .

I know it's kind of weird here .

So over here under general site language , we will select another language .

Now , I want to do something where I can kind of like read a little bit here .

It's English , let , let's just do Spanish , right ?

So we'll add Spanish and click on save changes .

All right .

Now , you will see how everything changes and that's just how it is .

But I want to change it back to English because what we did is we actually installed it on wordpress .

That's what we've done .

We have just basically saved that language .

So now we can go to our uh vic booking options and now we can apply that language in the uh I guess you wanna say translation section .

Let's go back over here to global translations And here we have Spain or Spanish .

That's weird .

Yeah .

So , but uh what we'll do here is I'll go ahead and say , all right , for the room section .

All right , we'll load the translations and these are the translations for the , uh , I guess you want to say for the rooms and this kind of helps us decide or this just kind of helps us , like , remind us like , OK , you're using this for that , this for this , this for this and so on and so forth right here .

We can click on Spain or Spanish .

It's weird because they speak Spanish .

I know and everywhere in South America , I've been to Costa Rica , I've been to uh Costa Rica , Colombia , Mexico .

Yeah , I've been to quite a few places down there .

But anyways , so for the room name , we have the room name .

So you want to go ahead and change this to something like Spanish , right ?

So instead of this , you'd want to put like a something , you know , I don't know .

And then for the room description , this is the long description of the double room standard .

You would want to put that in the room description in Spanish .

OK ?

And now I don't have a Spanish keyboard , unfortunately .

So uh sorry short description here .

You'd want to go ahead and put it in the short description .

Now , this is important because again , the short description will be displayed right here .

It is very important that you put this correctly .

Now , I'm not sure if the translation plugins like translate press or poly lang will translate this automatically .

I don't know .

I don't know if Google translator will translate these .

I don't , I just don't know .

You know , I never , I never went that deep into the translation process , but this is how you can kind of translate everything .

And once you're done you click on save and that's it .

Now you guys can also check out Poly lane over here .

Let's go to plugins a new now , I'm just guessing here .

I don't know .

But uh translate press .

This is a very good one .

This is a very good plug in to use for translating websites into Spanish , Arabic , Portuguese , Indian , Hindi , whatever .

And then also we have poly but I do like translate press the most .

I feel like it's a lot more easier to use .

You can also use this plug in here that does have more active installs , but I'm just more comfortable with translate press .

I just feel like it's , you know , a little bit more easier to use .

That is pretty much it for the free version .

And this part of the video , I basically covered everything on how to uh you know , create all these different packages .

Now , a lot of these other options are only available in the free version .

So I did purposely skip over them .

Unfortunately , if you guys do want to see a lot of the pro versions , I'll be talking about that in the next section of the video , I'll also be talking about how to design your website accordingly .

So , uh again , for example , you can see here that we have this search page , right ?

And you know , it doesn't look that good .

You know , it's very plain , very boring .

And you can see on my website how I added in this background color here .

Um Also added in this drop shadow right here .

So you can see the difference , right ?

A big difference .

Actually , it's a big difference .

I've actually also added this section to the top and I made it a lot larger .

When you install the plug-in , you do need to do a little design work .

And again , I'll be covering that in the design section at the end of this video .

If you guys are content with that part of the video , you guys can just kind of skip to the design section .

However , in this next section , I'll be talking about the pro version .

So as you guys can see even the free version of this plug in is really helpful .

Now , in this next part of the video , we will be downloading and purchasing the pro version .

Now the pro version does unlock more features like uh options and also payment methods as well .

Now , if you guys have used the free version and you feel like that's good for you , then yeah , go for it , you know , have fun and con congratulations .

But in this next part , we will be downloading and purchasing the pro version of VIC booking .

So let's go ahead and jump back to the video .

Ok .

So in this part of the video , I'll be showing you guys the VIC Booking Pro version and all the features that it offers .

Now , the VIC Booking Pro plug-in is located on their website and I'll leave a link in the description to this uh plug in .

Now , the main Pro plug-in is around 100 and €40 and that unlocks all the features like the packages , the offers special pricing management and other cool tools .

So I'll leave this again in the description .

It's not required that you guys buy this plug , but I will be talking about all the features that it offers .

So if you guys do see something that you want , you guys can just kind of watch it and see if the pro version is for you or not .

Also for those of you who are located in other various parts of the world .

I realize I have a lot of users that watch my videos from different parts of the world and usually stripe is not uh I guess you want to say it's available at specific countries .

You can definitely find a payment gateway that's available in your country .

So they do have tons and tons of payments gateways .

Now , I do want to talk about the pricing .

So you do have to purchase the actual pro version and you also need to purchase the stripe plug in for those of you who are in either America , South America or also Europe .

Now , I first thought that was very expensive that the fact that you have to buy this and the payment gateway .

However , when I looked at their competitors like servo dot com , roomy and other third party websites , I realized these people are charging you on a monthly basis .

So for example , if you are running a hotel website with this website , you're gonna have to pay $59 a month and that kind of sucks .

Also rosy dot com , which is a very popular uh platform .

You can see here how , you know , you're gonna be paying 100 and $54 for every single month , you know , and yeah , that's pretty expensive , you know .

So when we take a look back at these products where you only pay a one time fee , you don't have to sit there and pay any other fees , you don't have to sit there and give them like a transaction fee or none of that .

I think that big booking is actually the much cheaper option because you just pay a one time fee and that's it .

You keep all of the profits .

So I do like that route rather than paying these larger websites .

And also they may or may not take part part of your sale depending on the plan that you go with .

So I think VIC booking here kind of takes the cake as far as pricing goes .

I know it seems a little expensive when you first look at it .

But in the year you're gonna save a lot more money than going to these other websites where they charge you like 100 and 50 bucks a month , you know , for a hotel booking website and everything that these websites offer .

Vic booking also offers .

So you're just saving yourself more money and you have more control over your website .

So what you'll do is you'll go ahead and purchase vic booking here and then you'll go ahead and activate your license key .

Now , let's go back to our website .

I'll show you where to insert the license key .

So I don't think they actually give you a plug-in .

They only give you a code and with that code , you go ahead and you insert it onto your vic booking dashboard .

So I believe it's uh is this it right here ?

Let's see .

No , that's channel manager .

Is it this one ?

And you go ahead and you insert your key right here so you can see that my key is uh available and everything is good and all set .

So let's go ahead and go back to VIC booking and let me go ahead and talk about .

Now , some of these pro features that you can use on your hotel booking website .

Now , the first thing that you can do is over here under your your rate plans right here .

You can now add coupons and also packages and offers packages and offers are pretty cool because this is means you can display your rooms anywhere on your website .

It's kind of like a separate uh it's like a separate thing from the search feature .

So first let's click on packages and offers and here you can see I've already made one .

Now , you can click on new right here and then just go ahead and create a new one .

However , I'll explain how this all works .

So I created a new one right here and I called it super amazing deals .

Here is some short description about the actual package .

We have some description and then here I put an icon to kind of represent the actual sale .

And then here we can exclude dates and we can end dates and all that stuff .

Now , we can also select the rooms available .

For example , if you want to run like exclusive deals on these rooms , you can go ahead and do that here .

You'll select the number of the minimum number of nights and the maximum and then also the package cost .

So you can just put a package cost and then also put a a tax rate here .

If you choose to do that , then you can change it as per night or a total if you want to do that .

Now that we've actually kind of made this package and we've applied it to all of our rooms .

Let's just take a quick look at what we've done so far because I think if I give you guys a visual , you'll understand more about what's going on .

And now what I'll do is over here , I'll go to uh vic booking again .

Right .

I'll click on that and now I wanna click on short codes .

So now I want to place that sale somewhere on my website .

So right here we have new and then for the type I want to select package list , right ?

I'm sorry , package details , package details , my bad and then for the select package , we then want to select these super amazing deals .

And this can be something like a winter sale .

This can be a spring sale , summer sale , you know , whatever you want to add , you know , we can add that there and then click on save and close .

So we have the summer sale right now here , I'll just click on this little short code and now we can take this short code and place it anywhere on our website or even make a new page and it will display those sales .

So let's just do this .

I'll go over here to plus new and page and I'll just make a new page , you know , and this can be separate from your search result .

Summer deals , right ?

Summer deals .

Something like that .

I'll paste that and click on publish and publish next .

I'll click on a view page .

All right .

So here you can see that added in my logo for some amazing deals .

And now we can take a look at the deals here .

So now we can say , all right , cool .

We can go ahead and book these rooms , we can check the availability and then here we can go ahead and take a look at everything and see if we wanna go ahead and book this room .

For example , I'll just say , yeah , why not , man ?

Let's just go ahead and book it .

We got the summer deal going on , you know , it'll just cost us a little bit .

No problem .

I'll go to book now and now you can see all it costs us is $50 .

So this can kind of be separate from your search results .

So this is how you can run private sales , which I really do like because uh you don't really want to put this in the search results because then maybe , you know , you just want it to be for an exclusive uh people like maybe an email list or something like that , right ?

That makes a lot more sense .

So that's one option that you can add on your website with the pro version .

I really do like that .

I think it's , I think it's pretty uh pretty unique .

Now , let's go ahead and take a look at another feature .

So also we have coupons are now available and coupons are pretty straightforward .

Let's just click on new here .

Now , coupon codes work the same way .

Woocommerce does , for example , Darryl 2020 .

Now this coupon code is a gift or permanent , right ?

So maybe like a , a few times they can use it or permanent right now , you can do here select a dollar amount or a percentage .

So for example , if you want to give them 25% off their total uh amount , you can do that or you can say I want to give you $25 off your order only .

And then here you can select the validity dates , the minimum booking total and exclude tax and fees if you choose to do that .

So I do like that option .

I do like that .

I'll change that to the percentage and I will click on save .

All right .

So now that I've shown you guys a little bit about the rate plans .

Let's go ahead now and talk about pricing .

So here we have pricing and let's go ahead and click on the special prices .

So here you guys can see , I already kind of made some other special pricing .

Now .

You can kind of adjust special pricing depending on seasonal needs or if you just want to be generous and give out sales , you are more than welcome to do that .

So let's go ahead and click on new special price .

And for example , we have the season , you know , so here we can select the dates , right ?

And then this will be like a promo summer , something like that .

You can select these specific days .

So maybe you don't want to offer it on , uh , maybe Friday and no , no , no , no , no , Saturday , Sunday , Friday .

So you kind of wanna attract people on the weekdays because maybe weekdays are the slow time of the year .

I'm not really sure .

Then on the right side , we can have a discount of , you know , I don't know , 5% right ?

And then we can say this is for all of the rooms .

And also we can go ahead and say we will also discount the types of pricing as well .

So you can go ahead and add these features as well to your search results .

So let's go ahead and click on .

This is click on save .

Now , what I'll do here is I'll go ahead and get rid of these ones right here .

I , I want to just get rid of all these because I don't want these to conflict with each other .

So I'll delete these and click on .

Ok .

All right .

So now let's go ahead and take a look at our search results .

All right .

So now you can see that our rooms are discounted .

So $57 I'll click on selects and if I scroll down here , you'll also notice that these custom field pricings are also discounted as well .

So that's pretty cool and we'll scroll down and click on book now .

So there you go .

We have our new price .

We have our tax and everything looks good .

So that's how you guys can add discounts to your search results .

Now , there's also another really cool feature in the pro version that I want to show you .

So here we can see the rooms and now we have these discount and then we have these banners right here that display , there's some sort of sale going on and it kind of encourages them to book the room .

So let me show you guys how to also add this to your site .

So what I wanna do is scroll down here and now I want to turn on promotion , right ?

So for the promotion right here , this is where we can kind of insert some promotional offers or deals and also display it on the search results .

So for example , I'll just put like , uh I don't know , I put last summer deal uh last day for , I don't know , 2020% off or something like that , something like that just to kind of add some urgency .

Now , here I selected zero days in advance and the minimum length of stay is going to be around 1/9 right there .

Now , you can also apply this on the room's final cost or you can just go ahead and display it in the search results .

And um yeah , that's also something really good to add .

So let's go ahead and go over here and then click on save .

All right .

So now let's go ahead and go back to our site .

I'll go ahead and refresh this and we will go ahead and select a date .

I'll just do , I don't know , eight nights or something like that .

And now we can see that we have last day for around 20% off and remember the discount will be applied right here .

So you can apply this and then you can display it in this first results to just add a really nice clean design .

In fact , booking dot com , does this ?

You guys have probably seen Expedia dot com .

They also do this because it creates a sense of urgency and I'm sure you guys have watched The Wolf of what that movie , The Wolf of Wall Street Brad .

So is done .

Boom .

Sell me that pen .

Watch , go on .

Let me sell this fucking pen .

That's my boy right there .

This fucking sell anything .

You do me a favor .

Why'd you name down that napkin for me ?

I don't have a pen .

Exactly .

Supplying the man .

I'm creating urgency getting to want to buy the stock .

It's something that they need .

The number one selling point is urgency .

If people think that the seal is gonna be gone , they're gonna buy it before it's gone .

So uh adding in these urgency notices will really help you with bookings on your website .

So that's pretty much it for the the pricing section and everything .

Now in the pro version over here under global , you now have options for custom fields .

So with the custom fields , you guys can actually add in more custom fields .

So if you want to ask people , um you know , are they pregnant or something like that ?

Because that might be something that you need to accommodate .

You can go ahead and add it right here .

So I'll click on a new and this is the field name .

So pregnant .

So pregnant or are you , you know , I don't know pregnant and we have a text box , we have a check box or you know , whatever whatever it is that you want to have , you know , or to enter in their details .

So like a check box and we can make this required .

And then you can also add a specific link to a page or something like that if there are some specific terms for people who are pregnant that are booking your hotel .

So I'm not really sure , you know uh what you know , I'm just showing you guys how to use this .

Like I know there's various reasons on uh you know , custom fields .

But I think this is also a good example of asking women if they're pregnant because you might need to accommodate that for your hotel .

So that's an example of the custom fields options in the pro version .

Also , don't forget that the management options are now available .

So you can go ahead and see your customers and you can see your invoices .

It looks like people are already booking because I made this live in my Facebook group and they are already kind of like trolling in their , their booking appointments and stuff like that .

They do that all the time .

And then also here we can see like uh you know , reports and everything else .

Now , also there are some other options that opened up in the configuration options like uh S MS notifications .

I'll talk more about this a little bit later and I'll , I'll give you guys a list of providers that can help you guys with S MS notifications , which are text messages .

And then I showed you guys all of these other various options like the prices , the main settings and so on and so forth .

So that is pretty much it for the pro version .

Now , there is one last feature that I do want to show you which are operators .

So what that means is maybe you want to create an agent and then you want the agents to actually log in on the website and kind of take a look at some bookings and stuff like that .

So first let's go ahead and create an agent , right ?

So over here you can see we have or they call them operators , whatever you know , operators , agents , same thing .

So first let's go ahead and create a new user .

So right here , we'll click on new and this is where we're gonna create a new user .

So this will be Jenny Wilson and the email is Jenny at AOL dot com .

And this is our phone number right now .

The authorization code or the I'm sorry , the authentication code is what they will use to log into the website .

So every employee will be getting a specific uh code right there .

And then here we have a website user now , right now , we can go ahead and save this .

We need to actually create a user first .

So let's go ahead and click on save .

I know it seems a little repetitive , but don't worry .

All right .

So we got Jenny right now .

Let's go over here to users and click on add new .

So this is , we're gonna create Jenny's actual accounts where uh she gets like her own personal , you know , first name , last name and whatever .

So here we go , Jenny at or just Jenny and Jenny at A O dot com , Jenny Wilson and then with the website , whatever , you know , uh the language , we'll leave it to site default .

And then here we can give her a password , you know , Jenny Wilson or something like that and confirm the use of weak password .

Now , we also want to send her a email about her accounts and here is the role so we can leave it as subscriber .

Uh I don't think you're gonna have agents logging into your site .

I'm sorry .

Uh visitors .

But uh if you do , you can change this to contributor and then have all the agents act as contributors and give them those roles .

So right here , I'll click on add new user as a contributor .

OK .

Contributor .

Let's just make that really clear .

All right .

So there is Jenny now , stay with me .

If you get a little confused .

Don't worry , I'll talk about why I changed this to contributor uh in just a little bit .

But let's go back to vic booking here and let's go to our operators .

So here we go operators and Jenny , we are going to click on Jenny and now she is Jen .

Oh , I spelled it wrong .

Oh my gosh .

Why don't you guys tell me , shame on me .

So there's Jenny's login , right ?

And this is her her code right here .

Now , what can Jenny do on your websites ?

You know ?

So we gave , we gave her the contributor role , right ?

And um we can kind of give her permissions or limit her permissions based off a specific role .

So right here at the top , you're gonna click on permissions .

So go to your dashboard and click on permissions .

Now , I want to select contributor , right ?

Because a subscriber might be people who actively registered on your website .

So you don't want to give the customers or you don't want to give your agents the subscriber role because then uh if users log in and they want to see your website or they want to see their booking , then they would be a subscriber by default .

So you do want to give them a higher role , like a contributor or an editor or an author or whatever , it doesn't matter which role .

So here's the contributor .

Now , what can Jenny do ?

Right .

So Jenny can uh create users .

She can do this , she can do this , but Jenny cannot mess around with the rape plans .

You know , we're not , we're not , we don't trust them , you know , keep your enemies close but your enemies closer , you know .

So we don't trust her like that .

So we'll go ahead and uh room management .

She cannot do the pricing and then she can do all this cool stuff right there like this and we'll deny that option .

Now , we'll go ahead and click on save and close .

All right .

So now let's say Jenny wants to now log into your website where she can check the bookings and this is where you can have your employees or your helpers or whoever is working on your website , log in to your website to adjust the bookings .

They'll go to your domain and they'll type in WP dash admin just like you would do to log in from here .

They can enter in their email and also the password that we created for them in the user section of the word press back end and then they'll click on log in .

Now , notice on the left side right here , how you can see that all of the options for the page Buller are gone .

A lot of the options for plugins are gone .

A lot of the options that would basically add features to your site or change it are all gone .

So they'll only have very limited options because we set those options in the back end for vic booking .

So here , click on vic booking and even the plug in itself , you can see how we restricted and we also gave them permissions and this is ideal for employees .

Now , remember for your users to log in , they would go to the user section and the password and enter in their password and that's how they would log in .

All right .

So at this point , you guys are pretty much done with the configuration options with the hotel .

Uh I kind of went through every option , gave you guys really clear uh examples of pretty much everything right now , there is one last thing we need to talk about before we jump into the design and customization of the website , which is payment gateways , which is probably the most important , right ?

So over here we have payment methods .

Now , the pro version will give you access to paypal offline credit card and pay on arrival .

So , for example , here we have paypal .

Now , if you guys do not have a paypal account , you guys can go ahead and register .

It's really simple to get set up and um it's really fast and convenient and here you can adjust the paypal settings , right ?

So you can add in your paypal account there .

You can turn it on test mode and adjust all these settings as you need .

So that's paypal in a nutshell .

Just go through the process of creating a paypal account and then submit your information there and your users can pay you with paypal .

Now there is other options available .

So here we have payment methods .

We also have offline credit card .

So if you want to go ahead and just say you know what you guys can pay me later , you guys can always turn on the offline credit card here as well .

If you want to just basically say , you know , you you can pay us later .

You can still get their credit card information if you choose to do that and you can adjust these settings for offline payments .

So just remember for the offline payments , that's they will give you the credit card , but then you will not authorize it .

So there will be no transaction done , ok ?

That is basically the uh offline credit cards and there's also a bank transfer and I I just call this pay on arrival because technically it says bank transfer , but you can just go ahead and right here , just tell them that you'll pay on arrival , you know , so you can kind of use it however you want it to uh you know , however you want it to play out .

So let's just go ahead and take a quick look at these payment methods before we jump into the stripe one , which is probably the most important one .

So for example , let's just say I want to book , you know , one room or something like that , right ?

And here I'll book the single room and I'll scroll down and I will click on a book now and I will scroll down to the bottom .

And here we have pay on arrival , we have credit card and then we have offline credit card .

Now see how we can change the image there .

So you have options to actually add an image or whatever you want to do .

So I'll go ahead and say yes and yes , I'm pregnant and then we can do something like pay on arrival , you know , or something like that .

It's really up to you and then there you go .

So now they'll be they'll pay us on the arrival .

I know it says bank transfer , but you know , you guys can just kind of add , you know , adjust it to your liking or you know , whatever it gets the job done .

So I'll talk about credit card .

So if you wanna accept live payments on your website , like credit cards which I think majority of you watching this probably want to do .

We will need to purchase the VIC booking stripe plug in .

So there's a link in the description of this video .

It'll take you to the VIC payment gateway section .

Now , vic booking does have a lot of different payment gateways .

So it really depends on the country that you're from .

I know a lot of you watching .

This might be in Europe , might be in South America .

You guys might be in the Middle East .

But uh there's a payment gateway for pretty much everything .

Now .

They didn't include these payment gateways in the pro version probably because there's just way too many , you know , so I guess they wanted to make money by offering the payment gateways as a separate service .

Plus a lot of you don't really need all these payment gateways .

Now , the one that I recommend and then the one that you guys should be using is definitely Stripe this one right here .

So Stripe is pretty good .

You know , they're available in South America , Europe , USA and parts of Asia as well .

So I recommend the stripe plug in and I'll be showing you how to use the Stripe plug in .

It's really , really simple .

Now , if you guys do not have a Stripe account , I highly recommend to get one .

It's extremely easy to use .

It's free .

There's no credit check .

It doesn't cost you anything .

Now again , stripe dot com .

Is a free service and all you have to do is just go ahead and link your bank accounts and they will automatically transfer the money to your bank account .

Now , I believe their fees are around 2.9% or something very small .

It's like it's a pretty small fee that they charge , but that's standard for all merchants .

So that's just kind of how business works .

If you guys go to any merchants , they're gonna charge everyone a transactions fee .

So that's just how that works .

So go ahead and sign up with this website and you can start accepting payments on the same day that you sign up .

It's really convenient .

It's really fast .

So I'll go ahead and close this .

Now , once you guys do sign up , this will be your dashboard , right ?

So you'll go through the process of , you know , signing up , submitting your bank accounts , whatever questions they want to ask .

You just say yes to everything and just click on , ok ?

And then you'll get here somewhere , right ?

So once you guys do this , you guys will then go to vic booking and then you guys will go ahead and purchase this plug-in .

So this is the plug in that you need .

It is the stripe payment gateway .

This will allow us to accept credit card payments on our website .

And since we are using well , my American audience , since we're using name Hero and also the South American audience , you guys are using hosting here .

You guys do get the SSL for free on your website .

Since you have the SSL , you can now accept credit cards .

If you don't have an SSL , you cannot accept credit cards .

You just have to enable your SSL in the back end .

But I think most of you um watching this video have already got it installed automatically by the hosting provider .

You guys will go through the process of uh downloading this plug in .

So you'll go ahead and log in and you'll purchase this plug in .

Now , once you guys download it , you guys will go to your dashboard right here .

Go to dashboard , right ?

So you'll download the plug-in , you'll go to plugins and you'll go to add new and then from here you'll click on upload plug in and then you'll go ahead and upload that plug in .

Now , the plug-in will probably be a zip folder .

So it should look something like this right here .

Just it'll be like a zip folder that says stripe .

You'll go ahead and just say , all right , and then you'll click on install now and then you'll upload it to your websites .

Now , once you do that , you will then get the option in the vic booking options to accept credit cards via Stripe .

So here you'll click on vic booking .

Now .

I have already installed the plug-in on this website .

So I'm just gonna show you what it looks like , please don't buy anything .

You know , I get a lot of my viewers who buy stuff and I'm just like guys , why , you know , it's like you're just wasting money .

Here we go , payment gateways .

You guys can click on new up here and once you click on new , you will then see the uh here I'll put the stripe or I don't know , credit card , you know , credit card , credit cards , you know , just a distinction to the difference .

And then here we have stripe is now available .

Stripe is the credit card , ok ?

Now , when you guys actually enter in the stripe PHP , it will then ask for a seeker key and a publishable key .

Now , all you need to do to connect your website with stripe is just copy and paste the secret key and the publish up key and you're done and that's it .

Let's go ahead and run you through on how to do this right here .

We have developers and I'll click on API key and then here I will copy this , take the publishable key and I'll just paste it in there like that and we're done and then we'll go to the secret key right now .

I will go ahead and paste it in there like that .

Here we have the company name .

So I'll put like the Darrow Hotel for this dome hotel .

Now , this is also important .

Um Actually let's go over here to currency first and change this to the us dollar , but you would change this to your currency of whatever currency you want to accept .

So I'll put us D right now .

Here we have the image URL .

Now , this can be a little tricky for users or beginners .

But uh I'm gonna go ahead and go over here to media and open this in a new browser .

So I'm gonna hold shift and press uh click on library .

Now , let's say for example , we have our logo right now .

Here we have our logo 100 by 99 pixels .

I want to copy this little uh this image right here .

OK ?

So I want to copy this and now I want to place that in that empty box .

So let's go back to our sites .

All right .

And for the image URL , I just want to paste that URL right there .

Now , here you have other options .

Like you can enter uh a custom logo , you can enter a payment button position .

Now , remember this is for stripe , OK ?

So they're gonna be going to stripe .

I believe the SSL option .

This will actually make them check out on your website .

And I believe selecting this to know will make them check out through stripe .

Either way they're gonna enter in their credit card information , it doesn't really matter .

But uh right here , you want to put in a custom logo , right ?

You wanna put in a logo of your business , right ?

So right here and this would be like a check out , I don't know , check out with credit card .

All right .

So and then you can change the position of the payment button to like middle .

You can see that right there , right , or the bottom or something like that .

I'll just leave it at the top and you do have some other options .

You guys can go ahead and you know , adjust this to your liking .

And let's say , for example , you guys do want to charge them a little bit more to cover the transaction fee .

You guys can always just say , you know what , there's a $3 we have a $3 fee for , you know , whatever and you can go ahead and charge them or you can go ahead and discount if you want to do that as well .

That's just a way to cover your costs if you feel like the 2% or 2.9% is too high .

All right .

So let's go ahead and save this payment method now .

All right .

So let's go ahead and book a hotel now .

This is gonna be your live customers experience .

So here I'll select in a check in date and a checkout date and I'll go ahead and select book now .

And from here , we'll go ahead and select a room also like the single room , there's only one more available .

So why not ?

And I'll keep scrolling down and I will go ahead and submit this booking next , we'll go ahead and enter in some details , we can enter in our coupon code and here we have some billing information .

I'll just go ahead and just put in like a Darryl Wilson and then just some fake email address .

And then below that , I will just say I have agreed to the terms and you know , are you pregnant ?

I should really change that to like a text or something because that doesn't really make a lot of sense .

So because they have to check it obviously .

And here also like credit cards , right ?

Let's click on confirm reservation .

All right .

So as you saw , I was waiting for the reservation .

Now , what I did was I actually put this in test mode , I'll show you how to do that in just a little bit .

But uh I'll go ahead and put in my secret credit card information .

Here we go .

There we go .

What should my name be ?

Um Let's just put , I don't know , I'll put daddy .

There we go , daddy and then Thailand sure , why not pay $57 ?

And now it's processing .

So just give it about , I don't know , 10 seconds .

I'm not gonna edit the video .

I kind of want to show you guys the process of this .

All right .

And awesome .

So now you can see that the booking has been confirmed .

They can also precheck in as well and they can also cancel or modify the request if you give them the uh I guess authorization to do that and then your customer will get an email that looks like this .

So here they have the booking , they have the details and they can always go ahead and click on this link right here to kind of get information about their booking request .

It will then take them to their booking page where they can go ahead and get the confirmation number , their arrival date just in case they forget .

So as you guys can see , it's a very fast and convenient checkout process .

Also remember that you can edit this page with mentor .

So if you want to add your logo and you want to design this page , you can always design this page as well using the elementary page builder .

So I really like that checkout process .

It's really smooth and clean .

Now , I want to quickly talk about some errors that I got and I actually had to submit support tickets because I had a lot of problems with the checkout process .

And I just wanna make sure you don't run into the same problems just in case you did get some errors .

But before we do that , I just wanna quickly go over here to stripe and see if our uh payments hit stripe .

So here I'll click on viewing test data and right here , I'll click on home payments and now you'll see that the uh confirmation went through .

So you guys can see I was testing this a lot .

Now , if you guys do wanna try test data , all you have to do is click on this little test data and then you're going to use these API keys .

So here you can see how this says test and also this says test .

So you would just go ahead and put these in your website in order to test it in test mode .

And when you're ready to take live payments , you'll , you'll go ahead and click on that and then you'll use these ones right here .

All right .

I hope that makes sense .

Now , let's go ahead and talk about errors .

I ran into a few errors and I'll explain how I got these errors .

So the first thing is if you are using the lights speeded , cashing plug-in , unfortunately , these two plugins have some compatibility issues and light speed cashing plug in is a very popular plug-in .

I hope they do update their plug in to make it work with this plug in .

So this is the plug in that I was using and I just got errors and they told me that I had to deactivate this plug in in order for the payment process to go through which you know , plugins conflict with each other all the time .

So that's just something to look out for .

Also right here .

Let's go to vic booking and let's click on short codes .

Now , right here , we have your booking details .

So there needs to be at least one booking details only if there is a second short code with a booking details , you will get an error and you basically it won't work .

So the customers might come back to an error page .

Just weird stuff happens .

So you wanna make sure that you have booking details and you can actually click on this by checking uh what it looks like right here .

All right , it doesn't show up well , because obviously we haven't booked anything , but you need to have only one .

If you have two of these , then you're gonna get errors .

All right , and you can see the short code right here .

If you do need to create this , just remember , just click on new and then for the type , you'll select booking details and this will be like booking details or whatever and then it'll propagate that page .

Ok .

So yeah , those are some errors that I run into and I just want to make sure that you guys did not run into those same errors like I did .

All right .

So at this point , you guys are pretty much done .

So congrats on making your hotel booking websites .

Now , there are two other features .

I just want to introduce you to , you don't have to purchase these , but this is just an option if you want to add it to your hotel booking website .

Now , the first thing is this big channel manager , you probably don't know what this is .

But what this does is that this will actually connect your websites to various search platforms .

Or I guess you wanna call them , I guess they call them OTAs like tripadvisor , Trivago Expedia booking dot com and all of these other uh you know , search search channels or whatever you wanna call them .

Now , whenever you get a booking , it'll display in your back end .

So let's say , for example , you get a booking from booking dot com , it'll display it right here in your back end and it syncs with your website .

So that's actually pretty cool .

And they just have some other options now .

Uh Personally , I don't really have any hotels with booking dot com or anything .

So I really am the wrong person to kind of talk about this with you guys .

I'm more of like the wordpress guy .

So I don't really know about these search engines and the requirements or that they need , but I'm sure this website can help you out with it .

So if you guys do want to , you know , get help with this , you guys can ask a question about the product and they can kind of help you with whatever you want to do .

So you don't have to buy it , but you can just ask them a question saying , hey , you know , how does this all work ?

Another thing that I want to talk about is the scroll down here is the S MS providers .

We talked about S MS earlier in the video and these providers are compatible with VIC plugins .

Now again , I haven't used any of these services .

So this will kind of be on your own time .

I'm sure these guys are very helpful .

Like you guys can just go to any one of these websites to say , hey , you know , I installed this VIC booking plug in and I need some help with some S MS notifications because when users book on my website , maybe I want to send them a text message notification and you know , see how all that works .

You can see this company works with reputable companies like BMW mini and uh these other companies , I don't know , these are probably European companies takeaway dot com .

That's interesting .

Never , never heard of them , never heard of them , but I'm in America and America is just too damn big for those like delivery services .

Like it's really big , like it's so much driving in America , it's crazy .

So yeah , that's what you can do for your S MS notifications uh if you want to go that route .

So again , guys , I hope this video helped you guys out .

If you guys have any questions , please feel free to let me know in the comments below .

Uh If I get a lot of questions , I got about certain things , I'll always make a secondary video to kind of help users with whatever problems that you guys had creating your hotel booking websites .

All right , in this section , I'm gonna teach you guys how to customize and design your forms and all of the elements on your hotel booking website .

So for example , you guys have probably noticed here how I have this gray background , how I have a different fonts also , how I have this banner here at the top .

So I'll walk you guys through on how to set all this up for your websites .

Now , the first thing that I'm gonna show you guys how to do before we jump into the CS S is show you how to add this bar .

Now , the bar is really simple to add and all you need to do is add it to your specific page in order for it to look like this .

So let's go over here to our pages and click on all pages .

Now , you're gonna see this page right here .

It's called book now .

So this is the page that I'm actually editing and this is essentially where all of your um lists show up .

So right here , I'll click on back to wordpress editor just to show you the short code .

So this is the actual show code .

So it's just the actual uh results of , you know , of your searches .

This is the page that you want to edit .

So right here , I'll click on edit with mentor .

So all you need to do right here is you would just need to add in a section .

Now , I'll show you how I made this section just in case you want to replicate it .

So right here , I'll click on the plus , right ?

And here I'll just put in a one section , column row right now .

This widget I'm using is the uh am I using ?

Yeah , the image box .

So right here , I'll click on this little gear icon and I'll type in image box .

There we go or just there we go , paste it in there and then this is where I want to enter in my logo , right ?

So I'll put it in my logo , right ?

And make sure the the logo is small .

You don't want a big one .

So just something just to like , you know , just kind of show your brand and everything and then here , you know , we'll just put like the K hotel , right ?

And then you know , whatever else your tag line or you know , whatever else you wanna add .

So resorts and spa and for the image size , I do want to reduce this just to be a little bit smaller .

So if I can make that just a little bit smaller , we'll do , we'll do custom here .

And I think custom , I think I sent it to like 50 by 50 or something like that .

So you're 50 by 50 see how that works .

Does that work ?

Yeah , perfect .

That works perfectly .

And then um so that's pretty much done , right ?

Um The next thing I want to do is maybe I want to reduce the spacing right here .

So let's see over here , we'll go ahead and reduce the spacing just a bit like that .

And then also for the content right here , I do also want to reduce this spacing , in fact .

Um Yeah , I've set that to zero just like that .

Now .

Also right here , I want to click on this section and I want to make this section full width .

Have you noticed here how it kind of just blocks and that's it , the reason why I want it to be full with because if we add a color background to it , then it will just kind of stop right here and I don't want that to happen .

So I'll go ahead and make this full width right and stretch the section , make sure you click on stretch section and for the style now , I want to add in a background color .

So for background , classic color and just add in like a subtle color , you know , just something to take away from all this white , you know , you don't want a page with all white because it just looks really boring .

It's really annoying and yeah , so that's how you can apply this specific section to your pages .

So right now I will delete that section .

So that's just kind of showing you guys how to apply it .

Now , this will apply on the search page , the rooms page and also the checkout page .

Now , your success page will look a little bit different .

So right here , I'll click on update .

So now that we design the book now page , you guys can do the same thing for your other pages .

Like let's say , for example , uh if their booking was canceled , you can say , hey , try again .

Um If their booking was confirmed , you can go ahead and use element or and also add the banner at the top .

So you can go through and test out each one of these and just kind of modify it to your liking because it's the same exact process as the book now .

So uh they will have this bar at the top here that just looks really nice , it looks really clean .

Now , this will appear on again on a various pages .

So let's just say , for example , uh they search here , it'll display on the rooms pages .

If we click on select , it'll display on the options pages .

And then also right here , we'll go to book now and it will display on this page .

Now , depending on the type of uh the type of transactions you can change this by uh going back to your pages and adjusting the banner for the next section .

Ok .

That's basically how we can kind of uh add this really nice design to our hotel booking website .

So let's go ahead and go back here .

Now again , I just wanna make , I just wanna make that very clear that uh depending on the the result of the credit card , you can add a different banner and design each page to your liking .

Ok ?

I hope that makes sense .

I hope that makes sense and you guys can kind of understand what I'm talking about .

Now , let's talk about how to actually design everything with some custom CS S .

Yes , everyone loves custom CS S .

So right here , go ahead and click on vic booking on the left side .

Now , personally , I'm a little disappointed that we have to use custom CS S to modify this .

I think in the future they will add in a custom , you know , like a custom color palette to make it really easy for beginners .

But uh for most of us right now , if you do want to change the colors , we have to use custom CS S but it's really simple to use .

It's really easy .

Don't worry about it .

So right here under custom CS S overrides , go ahead and click on edit template file .

All right .

Now , this source code is available for all of you in the description below of this video .

So what I want you guys to do is paste the code .

Uh I'll put it on my website or I'll put it on a link in the description .

So make sure that you have access to the description of this video or make sure you click on that link because if you don't , you guys cannot access this source code .

I have already pre configured it for all of you .

So all you need to do is just make some minor adjustments .

So make sure that it looks identical to this .

So this should be on line one and then line 33 should just be this little bracket .

OK ?

And again , I will put that in the description below for all of you .

So first things , first room item .

So the room item is referring to , let me go ahead and just step back here and just kind of uh let me get in the website here and just show you exactly what we're modifying just so we're all on the same page here and that you guys do not down like this video .

So this is the actual uh page that we are actually modifying at the current moment .

So , right here background , this is the actual color .

Now , where do I get these color codes ?

Well , I'll leave a link to this website right here .

It's called html color codes .

And what you guys can do is just go ahead and just select any color that you want , right ?

So , uh let's say , for example , we're going to select this color and this color right here is the one I want to take .

All right .

So let's go ahead and take that color code .

Go back to our website and now I wanna paste it in there like that .

And then now I'm gonna click on save and write source code .

Now , in order to see your changes , you guys will need to do a hard reset on your browser .

So that's not refreshing the cast that's actually called a hard reset .

So for Mac users , you will hold shift and press the refresh button .

If you are on windows , you will hold control and press F five .

OK ?

So since I'm on a Mac , I'm gonna hold shift now , I'm on Firefox .

So you do need to find out what the command is for a hard reset on your browser .

I'm gonna hold shift and press the reload .

It's saying , are you sure you want to reload ?

I'll say yes .

All right .

So now you guys can see how we have modified the background color for the rooms and they look pretty terrible .

So yeah , that's how we can modify this specific color for the search results .

All right , now , I'm gonna go ahead and change that back .

So mine was F six F six F six .

Now also right here we have a box shadow .

So uh here we have a box shadow of around 10 pixels and the R GB co color .

So let's say , for example , you guys do want to add a specific color .

Um you know , uh a box shadow color .

You guys can use the code right here .

So R GB , you would go ahead and paste that code right here .

I'll put it in the middle right here right here .

By default .

Our , our uh our drop shadow is around 10 pixels , but let's go ahead and modify this .

So I'm gonna enter in 46 right ?

46 just for you guys .

All right .

46 1 94 2 11 , 1 94 2 11 .

And then I'll click on save and write source code , ok ?

And again , we can make the box shadow bigger by , you know , increasing the pixels .

Hopefully , that makes sense for all of you guys .

You guys can also increase it on this size as well or this area as well , which is the side and the also bottom part , ok ?

Now that I've adjusted that again , I'm gonna hold shift refresh and send .

So now you guys can see really closely how there's this color on the drop shadow .

Do you guys see that little color right there ?

I know it's kind of hard to see .

Uh maybe if I make my drop shadow bigger , it'll be more legible , but it has this very faint tint of blue .

So that's how you guys can kind of add a drop shadow to your uh search results or I'm sorry , a box shadow .

Let's go ahead and keep scrolling down here .

So I've showed you guys how to do the background color and the box shadow .

Next , we have the vix dots slider inner uh what I'm gonna do is I'm gonna change this also to something like red , something very legible that we can kind of see what's going on here .

I'll copy this and we will go back to our sites , right ?

And I want to go ahead and paste it right there .

All right .

For the background color .

OK ?

And then save and write source code .

All right .

Now , we can go back to our sites and again , we're gonna do a hard refresh right here .

A hard refresh .

OK ?

Always make sure it's a hard refresh and that you're not clearing the cache .

So now you guys can see how this has added it within our specific background of the image right here .

So it's just another way on how you guys can style things and customize it , you know , to fit whatever need .

Now , this is if the image is not full width , OK ?

So um you know , if your images are not , you know , correctly sized , then yeah , you're gonna have this background color .

But uh you know , there's probably a reason why you want to do that .

You know , I'm just showing you how to actually modify that background color .

All right .

But I want to change that back to uh what was it ?

Uh Here we go , I'm gonna change it back .

You're going , you're going back , you're going back in the dungeon .

All right .

Also right here we have the font name now , whatever font that you guys want to use , you're gonna put it right here .

Now , of course , I'm using pop ins , let's say , for example , we want to add in something like LAO , right ?

LA I will type or I will enter in save and write source code , right ?

Or just press the green button , whatever you want to call it .

And let's go back to our sites and again , hard refresh , make sure it's a hard refresh , shift , reload and there you go .

We have LA who we have changed our fonts .

Pretty cool .

All right .

Uh Yeah , I mean , I like Poppins bold , but , uh you know , whatever you guys want to do it to your website , knock yourself out .

Go crazy .

All right .

So I've pretty much showed you guys how to kind of modify all of this with custom CS S .

So I've showed you how to change the font , how to add background colors and so on and so forth .

Let's go ahead now and move on to the actual room itself .

So let's click on our room and now we're gonna modify this page right here .

All right .

So in this part , I'm gonna show you guys how to customize this page .

Now , you guys might have noticed right here how we have this very subtle background color .

Now , this section is a lot easier because you guys can actually use the page builder in order to modify this section .

But first , let me just show you guys how to customize this bar right here .

So you might want to differentiate this bar between the rest of the page , right ?

So let's go ahead and go back to our little custom code sheet .

I know this is really annoying , really irritating .

And the only thing that we need to adjust is the room head background .

So this color right here , we can adjust to or change it to pretty much any color And you know , just go ahead and pick a color code and then apply it right here to your site and then click on save and write source code .

All right .

And now let's go ahead and go back to our sites and we will do a hard refresh and there you go .

So now we have this red bar as this specific color .

Now , what I'm gonna do here is go back to this section and I'm gonna change this to my uh default setting .

Ddd is like a very subtle gray color and it's like very , very subtle .

Now , what we can do here is we can actually use the page builder instead of using custom CS s .

So let's do that first , I'll go ahead and apply a hard refresh just to get rid of that red .

And then I'm gonna click on edit with element or on this specific page .

So we're gonna click on this little pencil right here and now we have this short code .

Now we're gonna click on the advanced section and we can actively use the element or elements in order to add specific colors , designs and animations to our room list .

So for example , here under background , you can see here how I added just a very subtle color .

You can add any color that you want .

Now , I would add a very subtle color because this will actually carry over to the checkout page .

OK .

So make sure it's something that's very subtle .

That's easy to read .

So I put this little a great color .

You guys can also add motion effects .

So if you guys want some really cool animation to come in like that , you guys can also add in animations on your room list .

So I'll just grab in one just to oh God .

Some of these are so ugly .

It's like why would anyone use this on their website ?

Guys don't use a lot of these ?

You know , I'll just do uh I don't know these are all ugly .

I really wouldn't recommend it .

Why did I even say this ?

Why did I even talk about this ?

I'll just do shake .

All right , we'll just do shake .

OK .

And you can also add a border .

So if you do want like a border radius , we have this border radius as well and you can change the color and you can modify it and you can also enhance it as well .

You can make it bigger or smaller and all this cool stuff .

So you guys can design the outside of all of this using the actual page builder and using a lot of these other elements like motion effects and so on and so forth .

So let's go ahead and click on apply and then we'll click on update .

Oh , it's already shaken .

It's already shaken .

Let's go ahead and view the page .

All right .

So here we go .

Now you've noticed here how this color applies to also our search bar if no one's there .

So here I'll click on search and then now we have these colors .

Now , remember the background color will not apply to your room list .

OK ?

Because custom CS S is controlling the room list .

OK ?

So it'll just be applied wherever it's not , it just gives it more color .

You know , you can see here how it's just giving it a little bit more color , a little bit more design and the colors are also displayed here at the top section right here .

So right here , I'll click on the select oh God , that shake .

But there we go .

So now we have the colors and everything else is good .

We have this big drop shadow right here and uh yeah , we can click on book .

Now , now if you guys want to add more space right here , remember we can add padding to that .

OK ?

So you can add more space right here just so it's not closed off like that just to give it a little bit more design emphasis .

And then from here , you can go ahead and check out and you would be all set and good to go .

So one quick note , if you guys don't want to use Element to , to design this page , you guys can also use custom CS S .

I'll go ahead and put the custom CS S for the back end in the description below of this video .

So I'll go ahead and click on the custom CS S overrides .

You guys can tell I'm not on a script , right ?

I just kind of do this because I , I just know what to do here .

So uh this is the code that you'll need .

You guys can go ahead and just copy and paste it in here and then you'll see this background color .

Now , I'll go back to the AC L color codes and I'll simply go ahead and just copy something here and then I'll paste it in there like this .

There we go .

And we need to make sure that everything is really clean and not no spaces and there you go .

I'll go ahead and click on save and write source code .

Now I'll go back over here and I'll do a hard refresh .

So remember you have to do a hard refresh and there you go .

So now you can see that the background has changed colors and it applies to the whole section .

Yeah , it doesn't apply to the actual whole entire element .

So like for example , you can see how it's not applying to this section right here .

So that's just an option .

If you guys do want to uh apply that to your website , I think some of you might and if again , if you want to change it back , let's just do the very soft gray , I like that color .

It's very smooth , very clean and I'll do a hard refresh .

Then it goes back to the color that originally said .

So I'll go ahead and leave this code for all of you guys in the description below of this video just to help you guys out just in case you wanted to have a little bit more customization with your room page .

Now , you do have a third option as well .

You guys can use the theme customizer , but I don't recommend its .

But uh if you want to do that , you guys can always go to customize and you can change the global color to a specific color .

So you see here how everyone kind of like plays like tug and pool , like you have the builder trying to do it .

You have the theme , doing it , the plug and doing it .

That's just kind of how wordpress is .

So if you ever want to change everything back , you would just go to edit Dementor and then just simply go ahead and change everything back .

Please don't add animations to your hotel booking website .

It is really ugly and it can get very annoying , very fast uh , motion effects .

You're , you're gone , you're gone there .

I mean , there's some that work maybe .

Ok , fade in is good .

That's a good one .

Just something very minimal .

You know , you wanna keep it just very , and I want this color like that .

All right .

And we can go ahead and just go to view the page and see .

I actually like that fade in .

It's a really beautiful fade in .

That's really high .

So I like that .

Let's take a look at one more time .

Oh , I like that fade in .

That's actually really good .

You guys should pay me for consultation seriously .

So yeah , that's how you guys can design and customize different parts of your uh room page .

Also remember that if you guys do want to change the fonts right here under the font family , you guys can adjust a font .

Now , I do want to mention that you can always adjust a lot of these sections using the theme customizer .

So let's go ahead and just kind of step back here and mess around with the theme customizer .

Now , unfortunately , if you want to design the uh I guess you want to say the H five H six tags , you guys will need to purchase the Astra Pro version and it's also very hard because we can't even see what we're doing .

So that is one big drawback .

But uh over here , what we're gonna do is we're going to go to global and topography and headings and I believe the uh here we go , topography headings and there you go .

So here we have heading one right , heading two , heading three and heading four .

Now , unfortunately , for heading 45 and six , you guys will need to purchase the uh Astra Pro version .

So that's just unfortunate , but uh we can go ahead and adjust these , right ?

So let's go ahead and change this to potato sans .

Now , to be honest , guys , depending on the H tags you have on your sites , this font might or might not display correctly .

But let's just go ahead and take a quick look over here .

We'll close this and we'll go back to our site .

So let's go back to our page right here and let me kind of make you understand what we're actually doing .

So I'm gonna inspect the elements now for this specific text right here .

This is the H three tag , right ?

You guys understand that H three tag .

So you'll go back to your theme customizer and here you can control the H three tag , so you can adjust this to a different fonts and then publish it something really ugly , you know , whatever .

Now , if I refresh this page , I'll refresh it .

You will then see this font will change or it should change if it doesn't change .

Yeah , like that .

So this is the H three font and you will use Astra in order to modify that specific font .

Now , there are fonts like uh let's go ahead and check this one out here .

We'll inspect this one .

So this is the H four , ok ?

And unfortunately , you guys will need to purchase the Astra Pro version if you want to modify this because they only limit you to modify up to H three and then H four .

Obviously , you have to buy the pro version .

OK ?

But uh I do have a 10% discount for Astra and I'll leave that in the description below this video .

It's just the premium version of their theme .

I mean , these guys have to make money too , right ?

And here I also inspect this element just to help you guys out .

This is also the H four .

These ones are the uh let's see , these are labels , OK ?

So no , these are labels .

All right .

So yeah , but uh that's how you guys can design this specific section there .

So uh I know the theme and the plug in , you know , I , I wish the plug-in did have a little bit more easier ways of doing this .

But unfortunately , that's kind of where my job ends and that's all I can do on my end teaching this video .

But uh that's how you guys can design uh this part , the backgrounds and everything else on your websites .

Now , the last thing that we need to talk about is the emails , right ?

So let's go ahead and jump to the emails you guys can see here .

Now , all of the headings are all messed up and they all look different now .

So let's just change everything back to Poppins here , Poppins and we'll change this back to Poppins , right ?

And then yeah , heading font or whatever pop ins , OK ?

And then we will publish that .

So now that you guys have a good understanding of the actual CS S and everything , let's now take a look at the email customization .

So right here , we'll go to global configuration and we'll just simply go ahead and check out our emails because now you guys have a good understanding of CS S .

So customer email , we will click on edit template file .

So what you're gonna do now is you want to go ahead and look for areas where it says font color , you know , color code you can see here we have the background .

Um a lot of the times guys you can learn this stuff by simply messing around with everything .

However , if you guys do need a developer , which I highly recommend that you guys get , I recommend going to fiver dot com .

So this is fiver dot com and I typed in email , template html .

And you can pay these guys literally like 10 bucks and they will go ahead and modify and customize your email to your liking .

There's a lot of different freelancers and they're very talented and you guys can definitely , you know , message someone and say , hey , I want to look like this or I want to match my brand because uh I don't really want to cover the email too much .

I mean , if you want to change your font , you can , you know , change your font like that uh right there where it , where it says font , but uh I don't really want to cover this because again , uh you can easily pay someone just 10 bucks and they can make it look however you want to look .

But uh let's just click on save and right source code really quick and I'll just kind of give you guys a quick little uh crash course on the emails .

So right here , I'll click on this little paintbrush and this is where you can adjust the color .

So here we have font color , right ?

You can adjust the font color to something like whites and then maybe a background color to something like black and then also adding in like a border or something like that and the border , you can kind of design and customize as well .

So you'll just have to go through each one so you can click on that one and you can adjust that .

So , I mean , it's already looking pretty good .

It's pretty spiffy , pretty spiffy and the same thing here , we can just change that to black .

And uh yeah , so that's how you can kind of change the colors here .

Just go ahead and click on that paintbrush and then once you're done , you'll click on save .

But uh I do recommend going to fiver or just paying a developer just to kind of give you some more customization because emails are very important in hotel booking .

I do understand that .

So yeah , go to fiver and see if you can get someone to really , really make it look really amazing .

This right here is nice .

You know , it's , it's not bad , but uh if you want to really push the limits , I would definitely recommend hiring a developer for that specific area .

So let's go ahead and go back to visit site and guys , my tutorial is now complete .

I hope this tutorial helped you guys out .

I think I covered everything .

If you guys have any questions , feel free to let me know in the comments below .

I wish you guys the best of luck .

Congrats on your hotel website .

You guys did save a lot of money following this video and I will see all of you guys in the next video .

All right .

Congratulations .

You guys built your hotel booking website .

See I told you guys this stuff was simple .

Now , if you guys have any questions for me , feel free to let me know in the comments below and I do my best to get to everyone's comments , but it's , it's , it's , it's tough .

I gotta be honest it's a full time thing .

So um also if you guys have any feedback , let me know in the comments below .

If anything change on the interface , let me know in the comments and I'll do my best to maybe make it like an updated video on whatever sections updated .

But uh congrats on making your hotel booking websites and I will see all of you party people in the next video guys take care .