How to Make a Profitable Dropshipping Website with WordPress - AliDropship Tutorial 2021!
Thursday, March 18, 2021
Profitable Dropshipping Website
How to Make a Profitable Dropshipping Website with WordPress - AliDropship Tutorial 2021!. I want to show you how to create a online food ordering website in WordPress so essentially your customer can place an order directly on your website and The order will be pushed through to a smartphone or a tablet in your store and then you can either accept or reject the order You can also set the time for when it's ready So then your customer can either pick it up or you can deliver it to them So I'm gonna be showing you step-by-step how to do it. It's gotta be really really amazing. So we're gonna jump straight into the computer Alright, so I'm back behind the computer now I'm so excited to show you guys because I personally think this is gonna help so many local businesses out or Even if you are like a freelancer web developer I think you can take the skills that you learn in this video and Apply it today like you go out to a restaurant or a cafe Or any food business and set this up front for a fee So it feels me like I will definitely pick this over like drop shipping or e-commerce because you don't have to invest anything Alright. So anyways, this is like really amazing. So I'm going to show you exactly how It all works, right? So this is the website that we're going to be actually creating now You can create any website that you want. Everything's going to be drag-and-drop, but the most important feature is the ordering feature, right? So if your customer comes onto your website, they can also view it on mobile devices or their tablet So here you can add in all your menu items and it'll be displayed So let's say for example they are ready to place the take away order and They can click into the item view the item and they can also add in any special instructions, right? You can also set in like vegetarian or whatever it is. And then they can also select the quantity add that to cart and Let's say for example, I click on Friday wontons so you can set different sizes for different items so for example, if you have a 10 piece version of it, then you can also set that in and Click on Add to Cart. So it's really really customizable. So for example fried rice You can also add additional toppings So let's say if you're selling like pizza or something like that and they want to add prawns or chicken Then you can set in whatever it is and add the dollar amount like that Okay, they can also choose the spice level and you can also add in additional sort of Conditions whatever it is that you need.
It's really really customizable and it's something that I use for my dad's restaurant so I know exactly You know what restaurants need so here let's just say hot and then add that to cart. All right Then once they're ready to place an order Maybe let's just add it right here. Right so you can also add like a dipping sauce as well Okay, add that in and then they can also click on the information here which shows your delivery zones so if you do do delivery, then you can set in specific zones each with a specific minimum order amount and also a specific Like feet that you charge, right? So for the orange section, right? The minimum is $25 and with a fee of 3 For the shape that you draw in here so you can set in specific shapes or you can do like a radius Now the shape is 30 minimum and the fees 5 so this is all up to you. And then this is just some basic restaurant information here Right, so you can use this sort of website for any type of food ordering like groceries milk bar You might be selling like fish. You might be a butcher I think it's so so important like these days especially to have your own platform right now Your customers can also put in their contact detail and they can click on here to add in The different ordering method so it could be like a pickup or delivery or a table reservation and they can click on save Ok, and they can also order for now or maybe they want to order for dinner.
Then they can do that as well So even if your shop is not open then they can also come to your website and place the order for later So this is really amazing. Let's just say for example tomorrow and if they can set it for maybe dinner time, so 6:30 click on save and Here for the payment method so click on this and they can pay by cash Once you've actually delivered the goods if they're coming in store Then it's up to whatever payment options you have for example cash and card Now if you want to accept online payment, which I personally have done Then you do need to pay $29 a month. So this is how the platform actually makes money So it's completely free if you want to accept cash But if you do want to add a card and online payment then it's $29 a month, right? So I personally highly highly recommend it because then the customer can just pay online and that's all confirmed So once they once they come they can just pick it up and go right So they don't have to like, you know They don't have to come in and then pay and then you know stuff like that. Everything is like super super efficient like this So it's completely up to you. But if you just want to get started with cash, that's fine and they can also add additional comments and Then once they're ready, then they can place an order okay, so they're placing an order and that's gonna be redirected on to your iPad or your tablet or your Smartphone in the restaurant. So I'll show you how to set this up now it didn't make a notification sound because it's actually connected to my Computer so you can click into the order right and you can look at the order and see if there's any like crazy sort of Thing they're requesting and because sometimes they do Then you can actually reject the order but most of the time you can just click on accept Right, and then you can accept the time as well Alright, and what's that going to do is within a few seconds It's going to confirm the order in real time for your customer right So within like five seconds your customers going to get a real-time confirmation Which I think is really really important because some other services like if you know WordPress and WooCommerce and things like that a lot of the plugins send the notification to the email and That's not good because you can't sort of accept the order or reject the order. So with this one it's all real time And it's really amazing So let's close that and let's say they want to make a table reservation So let's click on that so you can also set the number of people.
So this one I've limited to eight people So let's just say five the date they can set it to today and maybe for dinner. All right, and then click on next and then can check it place the order and over here Okay, then you'll see the notification click into that and you can see number of persons accept accept and confirm and That is done. So what I forgot to mention is that it actually allows you to print as well So that really helps with your workflow So once the order is accepted then on the bottom here Then you can click on this and you can print it out, right? So setting up a printer is really simple so you can just go to thermal printer alright So here you need to click on next and then you can connect it to your Bluetooth printer or your network and Wi-Fi So essentially for us what we've done is we've connected the printer to the sort of Wi-Fi network Wi-Fi modem And then we just select the Wi-Fi and then that's all connected And once we click on print it's going to print out the order docket into the kitchen and then the kitchen can start cooking So it's really really efficient. You don't have to like retype out your order anything like that and it saves a ton of time I'm also going to show you how to build this complete website as well so that your customers can come in your website They can view like your gallery your hours any type of information as well So it's actually really easy to create a website these days if you haven't created one before Everything is drag-and-drop. So for example we can click in the text module over here and let's just say your Food Business, right and you can also zoom out so we can move things around.
It's everything's drag-and-drop, so. Okay So let's just move the image over across here and maybe move the text Move the heading and move this little divider line and squeeze it in there, right? I also show you how to display your menu like this with a button so that some people Might want to download a mini PDF and just like stick it on their fridge or something like that you can do that as well add in a gallery and Also, you can add in a video background to showcase your restaurant as well as adding in a contact form Alright, so it's super super amazing and basically that is it, so If you're ready then I'm ready, I'm gonna go through exactly what you need to get started So to create a website we'll be doing in just five simple steps So the first step is to get a domain name now a domain name is essentially just your website's address So for example Google.com your one will be yourbusiness or yourfoodorderingbusiness.com and that will cost you around Fifteen dollars every year the second thing you'll need is hosting so hosting is basically a computer that's on 24/7 Where you store your website's files, for example the text and the content so when people go to your website then basically the content will be Hosted on the hosting account so that people can access the content and navigate your website and things like that So the third thing is to install WordPress. So WordPress is essentially a content management system and Basically that allows anyone to create a website without learning how to code the fourth thing is I'll show you how to build your website and That will be free of course and then I'll show you how to connect it with Gloriafood so Gloriafood is a zero Commission free online food system that we're going to sync together and I'll show you how to connect it to an app on your phone or on your tablet So that everything syncs together and it's essentially the same thing that I use for my dad's business and it's really really awesome So to get started it will be like less than a hundred dollars Which I think is really really awesome since a lot of other services cost over $100 per month or if you do Third-party then they charge a huge commission. For example last weekend uber eats charged us a thousand dollars in commissions already So I think having your own platform is just really really amazing and something that every business needs moving forward Especially right now in the current time So we're gonna get started by clicking on the link down below and that's going to take you to siteground And that's where we're going to get our domain and hosting together So by clicking the link down below that is a discount affiliate link and what that means is that if you purchase through the link Then I may get a commission for that sale and that essentially just helps me to create free tutorials for you guys Now essentially why
I recommend Siteground over other web hosts is because of three factors So the first factor is easily choose your country specific domain name So for example, let's say if you are a local business in Australia You can choose com.au if you're in UK You can choose co.uk then the second thing is that you can actually choose your hosting server location So for example, if you're in Australia, then you can choose your website to be hosted in Australia So that makes your website load a lot quicker For your local audience and the third reason is because of the performance and speed so when you're actually building your website Everything is just a lot quicker like all the Builder and all the functions work a lot faster Right. So right now I'm actually on the Australian version of the website so you can select the region down here And basically you might see your price to be a little bit different If you're in the United States, then it should be like 3.95 and 5.95 I'm pretty sure so as you can see this is just in the Australian currency Okay so there's three different plans that you can choose from the startup plan the Growbig plan or the Gogeek now the main difference is That for the startup plan. It's only good for one website So you can only host your website And for the grow big you can host unlimited websites So you could do like your friends website your clients website all hosted under one account So that's going to save you a lot of money for the go geek you can do unlimited websites But it's probably a little bit too much for what you need unless you are Planning to start a web agency or something like that But you can actually just upgrade within the dashboard which I'll show you a little bit later on So what I do recommend for most people is probably the startup plan if you want to make unlimited websites Then get the grow big you also get additional Features as well, which you can check out. So I'm just going to click on get plan Okay, so here you want to enter your domain name? So for example might be just foodorderingdemo and here you can choose your extension So for example .com.au or you could choose like just .com or co or in really up to you So I'm just gonna choose the dot-com extension. So click that and then click on proceed Okay, so if your domain is available, then you'll be redirected here If it's not you might need to be a little bit more creative So what you'll need to do is you'll need to fill in your details For example, your email and your password as well as all your client information and payment information So I'm gonna quickly do that Okay, so for the data center you need to select one which is closest to your main audience
So for example if I'm a local business in Australia, I would just choose Australia if you are in Singapore or near Singapore think over Singapore. Okay, so I'm gonna click on Australia and here for the period So what I do recommend is choosing 12 months or more so that way you can actually lock in the discount. Okay, so You can choose 12 months 24 months or 36 months. That's up to you But I've already got a few accounts with siteground. So I'm gonna choose the one month trial and Here for your domain registration that will be automatically ticked. What I do suggest is domain privacy So for example domain privacy is gonna hide your information like for example Like your name and also your email address to prevent people from like spamming you okay, so I do recommend it I mean it's not necessary but highly recommended so I'm gonna scroll down over here Okay, so I'm gonna select this and for this one I'm gonna leave it as empty and then I'm gonna click on and pay now Okay, so your account has successfully created. I'm gonna click on proceed to customer area Okay, so you should be redirected over here and you can click on the services So whenever you do want to upgrade your plan, then you can upgrade here. Okay, so we're gonna click on websites up here and Here we can click on complete Okay, so what we're gonna do is we're gonna click on skip and create empty site and click on finish Okay. So once you've done that then what I need to do is just go to websites again and over here click on site tools and Then on the left here click on WordPress install and manage Okay, so as you can see there's no installation yet so what you can do is click on select for WordPress and what you want to do is scroll down over here and Leave everything as default and you want to deselect the install Wordpress starter You don't want that and for the username, so this is the username that you're gonna log into your WordPress dashboard So I'm just gonna do maybe Hoganchua Set in my password Okay, and then put in my email and then scroll down and then just click on install Okay, so that basically has installed WordPress onto our domain name So what we can do is we can click on admin panel right to take you to the login page or you can click Here to login as well. So let's just click here Right and that's going to essentially log you in Automatically, okay So what you want to do is you want to go back to your Gmail account that you signed up with and you? want to click on the verification required so, just click into that and scroll down okay, so we just want to approve that and Want to verify our domain name and things like that. So that's gonna take a minute okay, so let's scroll down just verify that information and
Then that should be done let's just go back over here Okay, so we also want to set your domain data use consent preferences So just click into that one scroll down and set data use and then scroll down again So here consent is optional. So what I want to do is I just want to click on safe consent Okay. So basically we haven't allowed that consent. So what we can do is go back to your WordPress dashboard Alright, so your WordPress dashboard is essentially sort of like the back end of your website that only you can see So if we go to the front end of our website, so we click over here on the left so this is what our website looks like now and doesn't look like anything that That I've showed you in the demo, but don't worry. We're gonna transform it in a second So let's just go back to our dashboard area Alright, so what we want to do is we want to clean up our dashboard a little bit and configure some of the basic WordPress Settings. So what we could do is just click on dismiss and we can also hide these ones It does make it a little bit messy. So I want to hide everything like that So what we're gonna do first is we want to make sure that our website shows secure so right now it says not secure and this is very very important because once your customer arrives in your website And it says that then they're not gonna trust your website so if for example Google they have this lock icon and that's what I'm gonna show you how to do so go back over here and What you want to do is hover over plugins and then click on add new So what we're gonna do is add a plug-in to our website and plugins are essentially applications that we can add on to a website to add extra functionality So for example by default if you have a Iphone then it doesn't get many functions But you can download a lot of different apps that add extra functionality for example, like productivity for example If you want to test your your phone speed you can download after that or like social media and dating apps and things like that So what we could do is here type in really Simple SSL. All right, and then you enter and then what you want to do is click on Install Now So this one over here with four million active installs. So click on that and Then click on activate Alright. So before we go ahead and activate SSL we need to log in again. So make sure you know your password Otherwise that's gonna log you out and you can't log back in. All right, so Jot down your password and click on go ahead and activate SSL Alright, so I want to show you how to actually log into your WordPress dashboard without logging in to your site ground account So what you'll need to do is just type in, you know, yourdomainname.com and then yeah, just delete all this for now Okay, and what you need to do is type in WP dash admin Okay, and that's gonna take you to your login page over here, right? So what I suggest is just bookmarking this page So whenever you want to edit your website you need to log in and so just bookmark the page and then anytime you want to Get back to your website then just click it okay, so here just enter your username and also your password that you set in before and Then just login.
Alright, so what I want to show you now is click on the pages Alright, so we're going to add some pages. So what I'm gonna do is just delete these pages all right, so move that to trash and click on apply and Then click on trash again Select all and then delete permanently and apply so click on add new Alright, so I'm just going to close that and over here we want to type in home Okay, so we're going to create a current page. So click on publish and publish in All right, so that page should be active. So if we click on that Then that is going to take us to our home page Alright, so what we need to do is because we're creating a one page website then we're just going to just create one page Right. So if you do ever want to create more pages, then you can go back to your dashboard area and Then go to pages You can click on all pages to view all your pages and then you can click over here to add new and you can create your about page or like Services page blog page whatever page that you want over here Alright, so since we've got that page now what I want to show you is how to add in a theme So as you can see right now website doesn't look anything like we showed you in the demo So we need to add a theme. So what you can do is below this video There is a download link for the theme so download that onto your computer Ok, and it should look something like this Themify - ultra zip now sometimes if you're using like Safari it might automatically unzip into a Folder what you'll need to do is just right click the folder and compress it back into the zip file ok, so go back over here and hover over appearance click on themes and Then we're going to click on add new Right, so there are literally thousands of different themes each with this different appearance so I personally recommend the themify theme because you can literally create any website and adjust it to anything that you want and everything is just Connected like for example the theme and the builders are so that way you don't have to download a bunch of different plugins and things Like that, so click on upload theme choose file Ok. So upload themify - ultra.zip open And click on install now So sometimes you might have some error here where it says that the file that you're uploading is exceeding the upload limit now generally What you need to do is contact your web host
Because your web host has limited how much you can actually upload So this normally happens if you're using a cheap host or a free host or things like that Which isn't good to begin with but if you're using SiteGround, then you shouldn't have any issues. So click on activate to activate the theme So here they have a bunch of skins and demos which can import directly onto your website But I don't really recommend that I'm going to be showing you how to build it from scratch, which is really really easy And it's going to be fun. Anyway, so we're gonna click on close up here Okay, and I'm just going to close these ones as well So now that we've installed our theme we can hover over here and click on visit site So as you can see that changes the appearance of our website So the first thing that you'll need to do is if we actually hover over here and click on our homepage You will notice that it says the domain name.com forward slash home So we want to make sure that this home page will actually just be our domain.com All right. So what we need to do first is click on customize and then click on back and Then click on homepage settings and then set a static page. Okay. So for our home page, we want to select home and then click on publish and close So essentially if we click on our home page that's going to be just redirected to our domain.com which is exactly what we want so what we're going to do first is to configure the basic sort of layout of our pages and also the header section and also the footer section so to do that we can go back to our dashboard and hover over themify ultra click on themify settings Ok scroll down over here so generally what I like to do is I like to open my Website in a new tab so I can see what I'm doing visually. So let's just click over here and click back and here we can click on default layouts and We can click on default page layout. All right, so here what we want to do is we want to remove the sidebar
Okay, so we want to click on no sidebar and we want to hide the title on the pages So if we go over here, we want to hide the title and also the sidebar section so once you've done that, we also want to remove the comments and Then over here click on save so if we go back to our home page here and refresh Then that should be good to go. So we have a blank canvas to work with now I'll show you how to configure the top section and the bottom section so go back to the themify settings click on the theme settings and Click on theme appearance scroll down to the header design So generally what I recommend is sticking with this one over here header top bar. This is my favorite It's nice and simple and really really easy for your customers to navigate So click on that, but you do have other options here, which you can explore later on scroll down over here we want to exclude the site tagline and Also the search form Okay, and maybe we'll just leave that as is and then what we could do is let's go back here So that's the tagline and this is the search. Ok, so we can click on save and Then if we go back here and refresh Then that will be gone. Ok, so it's nice and simple So for your footer section, we can go back here scroll down to footer design So you can choose from different footer designs as well as well as no footer So I'm gonna choose just the first one over here Ok, and I also want to remove the site logo and also powered by WordPress. So go back over here so exclude site logo and you can scroll down over here to the bottom to footer text and we want to remove footer text 2 select that and click on save Now if we refresh our page Then we'll be good to go Right. So now I want to show you how to add in your social media on the bottom of your page here So let's go back again click on social links Ok, so here is where we will need to put in our links, so I'm going to pause the video and get my links So what we need to do is just go to let's say your Twitter profile URL just copy that and paste that in same for your Facebook so copy over your Facebook profile URL paste that in same with YouTube so you can paste in your channel URL and Let's say you don't have Pinterest but you've got Instagram so you can just change that to Instagram Right, and I'm just gonna paste in this and just change it manually Instagram, okay, and for the icon where you want to change that to the Instagram icon just click on insert icon and Over here just type in Instagram Okay, and select it and Then you can also add additional links as well if you've got additional social media links alright, so you just click on save on the bottom here and Then to display that right now if we refresh that page it's not going to display okay, so we want to go to appearance and click on widgets Alright, so here on the Left we want to scroll down to the themify social Links so click it and scroll back up and drag it and drag it below footer social widget Okay so widgets are essentially different areas on your website where you can drag the widgets, and then basically we'll show So here I want to select open link in a new tab. Ok a new window and click on save So if we refresh our page Then our social links is going to appear. Okay.
So right now we can click on turn on builder So now I'm going to show you how to build out your website really really easily So you can click this module tab and just drag it and put it against there and that's gonna pop out. Okay. Alright So what we're gonna do is we're going to build this hero section So this is the first thing that your customer will see so this is really really important So what we need to do first of all, turn on your Builder and if you actually hover over here You'll see the purple line. Okay. So once you hover over the purple line click on the styling tab, okay, and Then click on background and then here for the background type We're gonna set in an image, but you can select gradients video and slider as well, but I do recommend an image Right, and then for the background image click on plus to upload your image and then all we need to do is select file and upload your hero image so I've cropped my hero image to about 1920 x 1080 in pixels, and you do want to try and keep it below 500 kilobytes. Otherwise your website's going to load really slowly Okay, so click on insert file URL and as you can see the image is not stretched So what we want to do is we want to select full cover. Okay, so that's the first thing that you want to do and Then what we want to do is we can let's click on done Alright, so here we can drop in a text module. So drop that into there Okay, so we're going to type in our heading.. so we'll type in we're open? Okay, and then we're going to set this to heading 1 Okay. So this is important that you said it's heading 1 and for each page on your website You should only have one heading 1 font. And then for the rest you can use heading 2 heading 3 or 4 All right, so set it to heading 1 and then what we want to do is we want to click on styling Click on font and we want to align it into the center just like that Alright, and then we're going to change the color to white so we can see that text a little bit better So now what we want to do is we want to click on done here Alright, so we want to stretch the image a little bit So hover over here until you see the purple and you can just drag it down like that to sort of stretch it Okay, so you can stretch it just like that and the same thing over here. Okay, stretch it over there and That adds something called padding, right? So it's just like spacing So what you do want to do is you want to try and keep it even All right, so I'm not sure if you can see that but it's 193 now so I'm just gonna I get to about 200 pixels and Same thing for the bottom just like keep it like 200. All right. It's very very small so you probably only can see it on your screen or you can go to styling here and click on padding and adjust the padding here as well, right so once you've done that then as you can see, you can't really see the text properly because The image it's like not dark enough, right? So we want to make the text to pop a little bit So what we can do is click on Row styling again.
Click on the row overlay Okay and set in a black overlay? Okay, then what we want to do on the right here is drop the opacity So basically like the transparency lets drop but to about zero point maybe zero point one or or let's say a zero point two Something like that. It makes the text pop a little bit better and that Way your customers can see what you know what you've written here So you can also click on the text to make it a shadow as well. So click on the text click on styling click on font ok, scroll down to the text shadow so you can set one here and one here and blur, let's just do like maybe five and Then we're gonna set the color to black okay, and I think that is pretty good. All right, so what we can do is just leave that as is and click on done Okay so we're going to focus on now is just to make sure that we have in our text and Sort of build out the structure of our website first, right? So don't worry too much about the design and the layouts and things like that. We saw that the basic structure first So what we want to do now is add in a sub-headline okay, just like that and Here, I'm just gonna copy over the text here So order direct on our website and save 10% Okay, so I'm just gonna paste over the text Just like that Okay, and we can go to styling again the font Let's align it into the center Change the text color to white so we can see that and for the font size. Let's try and a little bit bigger so maybe something like Maybe not 18. Let's just try 20. Okay. So 20 is not too bad. Okay, so click on done and Then what we're gonna do is drop in a button Okay, so I'm just going to show you how to drop them in a button just below that then we can align it into the center and then Here we can choose the size. I think that size is pretty decent and What we could do is we can edit the text button So like something like order now,
I'm actually going to show you how to add in Different a different button, which is the Gloriafood and that connects it to that I'm just going to show you this just as an example. So just in case you want it added some other button so here you can link it to a Any link that's on your website or an external link if you want to you can also change the color here Okay, so I'm gonna show you how to edit the styling later. So don't worry too much about that right now just click on done and Then we're gonna click on save all Right, and they can actually preview that by clicking here Okay. So this is what it actually looks like. So what we want to do is want to make it full width So go all the way across from the left to the right and also minimize that spacing on the top So what we can do is deselect the preview and what we want to do is click on back end Okay, that's going to take you to the back of that page Alright, and then we're going to scroll down To the themify custom panel content width click on full width and then we can click on update Okay, so once that is updated we can go and scroll back up here click here and then we can click on the link And then you'll see that he is fixed per head So you can also make that a transparent header if you do want to right So what you can do to make that a transparent header, you don't have to but I'm going to show you anyway so you can click on edit page and Again we're back here to themify custom panel page appearance click on header scroll down to transparent header okay, and then click on update and over here Click here again and click on the link Okay. So now we have a transparent header. So that's looking very nice what I'm going to show you now is how to edit your Logo here. Okay, so you can click on customize And That's going to take you directly to themify options so click on site logo and tagline click on site logo and For your logo right now. I'm not going to show you how to make a logo So I'll show you we can get a logo for five dollars a little bit later But here let's just type in Let's just type in logo just like that Alright, so if you do have a logo then you can click on the logo image and upload your logo It should be a PNG file.
Okay, and then you can set the sizing here All right But I'm just going to set in the site title for now and keep it nice and simple for you guys for at the moment You can just put in your business name So if your business is like, you know, like Hogan's kitchen or something like that and set that in first, okay? So it's gonna keep it nice and simple. You can also change the color here as well as well as the sizing Okay, let's click on publish So since we're here already, then I want to show you quickly how to edit your heading one font right because it might be a little bit too small right now so we can click on headings here and click on heading 1 and Then here we can set the size. So for example, we can set it to 95 Okay, and then here we can set the font So I personally like this Arial and you can set it to any font that you want but you have to keep in mind each font has a different personality and I do recommend if you choose for example Arial then the rest of your heading two three and four They should be the same font as well. So ensuring that everything is consistent on your website and Your let's say your body font. You can also change it over here Okay Click on body font and change it and I do recommend keeping it to something that's simple and nice and something that everyone can read So let's click on over here And what you're going to notice is the spacing here has changed so I'll show you how to fix that But we can go over here to the main navigation Alright menu link and over here. We want to change the link color to maybe let's say a white color Like that? Okay, so don't change the background color because that's going to change the Background it's something like that. And that's not good. Okay, so delete that and change just the font color here. That's the menu link and Also for the menu link hover This is when you actually hover over that link so you can change the color to maybe just look like a light gray. Okay? So when someone hovers over that then they know that is a link Okay, so that is an easy way to do it The active link is essentially when you are on the specific page and then you can set the color Okay, so don't worry about that yet. So we're gonna click on publish and close All right. So let's quickly fix the spacing over here. So turn on your builder. Okay? So we need to click on the text module to reduce the spacing.
So click on that and then select styling and then instead of padding what we want to do is click on margin and For the bottom margin, so we want to decrease this. So we want to select minus and then set in let's say 40 Okay, and that's going to decrease the margin? So the padding and the margin both essentially do the same thing, but let's just say for example We changed the padding on the bottom to 100 Then it's going to add the spacing Sort of within the box. All right So within the box is going to add 100 pixels within the text module box, right? so if we delete that, right and If we set in here instead the margin So we put 100 pixels margin then it's going to move the spacing outside of that blue box Right. So what we're doing when we - in the margin is that we're minimizing the box, so we're going below that so 40 It's minimizing the box, right? If we let's say we add 20 Then it's inside the box or let's do 100 Then it's everything inside that box. You see that blue box. It's expanded. Alright, okay, so that's the difference I don't want to confuse you guys too much but Hopefully you guys understand let's just click on done and then click on save and then Close that So what I want to show you now is how to set up the Gloriafood app and then add your order button right here because I know a lot of people want to get up and running as Soon as possible. So we're gonna get right into that so the first thing that you'll need to do is head over to Gloriafood.com so just type in Gloriafood.com in your browser and you should arrive on the website That looks something like this. So what you'll need to do is type in your restaurant name or your business name? So for example, I'm gonna do food Demo and then click on get access now Alright and then click on restaurant manager and owner Ok, so every you registered this and it should send you an email which looks something like this click into it and just click on validate email and That's just gonna verify that Ok, and then just click on close this window and then we're gonna set up the details So I'm just gonna call it. Let's just say Hogan's kitchen or something like that and then put in your restaurant number and then fill in the details over here and then once that is done, just click on next and then What you need to do is you won't need to select the exact location of your restaurant using this pin ok Let's just say for example the restaurant is over here and then once you've selected that then only you can click on next and then here we've already got our website before so we can click on yes and We need to link it to our website URL.
So I'm gonna grab the URL copy it and Paste it into here and then click on next So I'm just gonna select Let's just say Asian All right, and then click on next? All right, so you just click on next here and Then it's gonna ask you do you offer a pickup at your location? Which is yes click on next now If you do offer delivery we can select yes, and I'll show you briefly how to set that up So click on next and here you can set in your zones, right so we can have a zone so it is owned one click on got it and then you can basically expand it just like that if you want to so depending on how you want to Price your zones then you can use the radius function right and then let's say for example Minimum is 25 with the delivery fee of $3. You can click on the shape You can add another zone so you can actually draw a shape if you want to as well. So click on shape Just click it and then you can click it to wherever you want to draw it. Just like that Let's say here and then like that ok So for that shape over there then let's say that minimum is 30 and then that's 5 click on save and If you want to do another zone you can do that So all around there make it bigger something like that and then you can change it to minimum to be 30 and then the minimum Delivery fee is going to be set to 7 click on save right? So that's how you setting your delivery and click on next so this is if you accept table reservations, so Right now in the current times in Australia, at least we can't accept table reservations yet, but we can select yes And I'll show you some of the settings so click down here and you can select the minimum amount of people so here for up to let's say 10 guests and Table is kept for 15 minutes. Keep those defaults and I'm just gonna click on clear 4 here so for the reservation placement Essentially what that means is let's say someone wants the book for 6:30 Then they can't book at 6:20, right? They'll have to book at least 15 minutes in advance. So they'll have to book before 6:15 in Order for them to actually make that booking online so you could be like 30 minutes if you want to maybe thirty minutes might be good because Just in case you have a lot of walk-ins and things like that Here the reservations can't be placed more than maybe seven days in events. Okay, click on next and Order ahead is essentially people can actually order on your website and Then they can pay or maybe they can pay in by cash when they arrive basically, it will pre order and then you can start cooking and The customer can arrive and then the dish will be ready for them okay, so I'm not gonna allow that so I'm gonna select no click on next and For the opening hours. So this is really flexible. So click on add new and then here let's say Monday. It's closed and maybe Saturday afternoon is closed as well.
Let's just set in the afternoon time. So maybe 11:00 to 3:00 3:00 p.m. Okay Click on save and then you can add more so. Do the nighttime now, so. Let's say dinner service starts at oops 5:00 p.m. Until 10:00 p.m. Okay Something like that And click on save right? So for Tuesday to Friday to Sunday. It's 11:00 to 3:00 p.m So Saturday lunch is essentially closed and then for Tuesday to Sunday This is the dinner service time Right, so you can add specific ones as well and you can also set in specific operating hours for specific services Right. So for example, you might only deliver between 5:00 to 9:00 p.m. Or something like that so you can set that in I'm just gonna leave it as default click on next and order for later I think is really good because if your shop is actually closed then your customers can actually pre-order the takeaway meal and once your restaurant opens the notification will be pushed through onto your iPad or Your tablet or your phone and then you can accept the order within 15 minutes And then if you accept it Then they'll send a confirmation to your customer and then they can come pick it up at whichever time that's specified So this is really good. So I suggest you put it yes and Here settings for pickup you can scroll down here. So it has to be placed. I generally put it at 45 minutes in advanced and Four days is fine. That's completely up to you and also same for delivery delivery, I would say at least Yeah, at least 16 minutes. Okay, and then we're gonna click on next alright so you can like it, but I'm just going to close it right now and Here essentially what I've done is in Australia, I normally just add The the menu prices which include taxes already. So I'm just gonna select that and I'm gonna call it GST and Then for this I'm going to leave it at zero here. You can set the currency and then click on next and for the payment method so he can enable cash which is completely free and you can also enable card for the delivery or pickup depending on if you have a f hoc machine at your restaurant or Establishment, okay, and you can also call back and take the card details via phone, but I normally don't do that so here maybe I'm just gonna select this one and then click on next and Here you want to put in your official?
Restaurant details, so I'm just gonna fill this in really quickly Okay, then you can tick that and then we're gonna click on next and then click on next over here Okay, so the next step is to install the app on your phone or your tablet, so we're going to click on next and Here you can select it to be your smartphone or tablet. So in this case, I'm going to install on my iPad Alright, so select that click on next and I'm gonna put in my email so you can also send an SMS instead So it's gonna send you a link to your smartphone or twhirl@gmail.com Ok, click on next Alright so now I'm gonna log in to my gmail on my iPad Ok So just open up your iPad or your smart phone and then log into your Gmail Or email account and then you should be sent an email which says Gloria food order-taking app download and then click on download and install and Then just open that Okay, that's gonna open up the App Store to download the app and then we're going to download that on to our iPad alright, so once that is done click on open and I'm gonna allow notifications so you should automatically input your Gmail and also the password so you just click on login and that is essentially will be connected to your employer food web site now and click on OK got it and then click on next and Then it's going to automatically create a test order so which is create next For it to generate a test order Ok, perfect. Click into that and Then you can look at the order let's say you want to accept then you can set in the delivery time So lets you say 45 minutes accept and confirm and That is good to go. Right so here. Let's click on back and click on the tab here So if you want to connect it to your printer click on thermal printer, so these are the printer that the app supports So I personally use like a star printer I think and then you can click on next So if it's a Bluetooth printer You'll need to connect the Bluetooth With your smartphone or iPhone and then you can click on the Bluetooth now, I've basically connected mine to the Wi-Fi network So I will click on Wi-Fi And once that is done, then that is pretty much it right so you can set that now I'm not the restaurant so I don't have a printer at home. But that is basically all you need to do.
Ok So once you've done with that then here it should say it's connected then you can also connect it with another device if you need to so im going to click on next and Then click on next year next here. I'm gonna show you how to edit the menu So let's just close that. Ok. So what I'm gonna do is I'm just gonna delete everything first All right. So let's just delete everything Just like that, alright so you can also click on show me and things like that But I'm gonna show you what you need to do. So for your theme picture We want to change that So for example over here, okay? So let's just change that you click on change theme picture and I have my better theme picture so here you can upload and change the theme picture for the web ordering and also web ordering for mobile phones and Also the order accepted screen. So for example, we just click on change and then click on browse and I'm just gonna set in maybe this one over here. Okay? So you can move it around like that, I think that's fine click on set image and What I'm gonna do is quickly go through all these ones So for the order except the screen what I generally do is I would change it to maybe something where the chef is preparing the dishes like maybe they're Cooking or something like that. So I'm gonna set in this one over here all right, so, they've started cooking and then I can click on set image and Then I'm just gonna do the rest of these ones quickly. Okay, then once you're done, then we can click on next and Here you can see the image, right? So we're gonna click on apply and Then we're gonna start adding the categories. So add in the category. So let's just start with maybe entrees Okay, and then click on save and then let's add in our first dish So for example veggie spring rolls, and then here you just set in the price so for example five and then here you could write like - Whoops two pieces something like that and then you can write your description So we can click on save Right. So what's cool is you can click on the drop down here the options and You can also hide from menu So sometimes you may run out of an item, then you can come in here and say hidden from menu You can also hide until so for example Like last weekend, we ran out of lemon chicken then for that specific day.
I would hide it until the next day All right So you can hide that until the next day so you can also show only from so let's just say for example you have specific lunch deals or lunch menu, then you can show Between a specific time and set that in as well All right So and we're gonna set that in here you can put vegetarian and maybe let's just say like it's vegan Whatever it is and then scroll down over here You can also hide the special instructions input fields if you need to because this item you can't change it So there's no point having it there In case someone like adds a special request right so you can put that in there and then that is good to go Okay, so it saves automatically. Alright, so let's just say you want to add an image so you can click over here and browse library and then I'm gonna upload this one here click on open and Then that should be done so you can actually adjust it to where you want it You can also zoom in so that's fine and click on set image Alright, so that's how you add in a simple product. Ok, so I'm gonna show you how to add in another item But this one's gonna be a little bit different so add in item, right? So this one let's just say it's fried wontons Okay, and then the regular price is $7.00 fifty for maybe six Six pieces like that Okay and this one does have multiple sizes so you can click on multiple sizes and The smaller size which is going to be just like the regular Okay, the size price is going to be 7.50 and Then we're gonna select that. So that's gonna be pre-selected if they don't select anything and click on add size this one's gonna be large or maybe let's just say Ten pieces or something like that. Alright, and then this one size price is going to be let's say $11 something like that and then click on save Right. So what's gonna happen is I might just Change the label. So just click on edit. I'm gonna label this one and six pieces So it's gonna be a lot clearer for the customer, right? So this one's going to be pre-selected and they also have the option to select the ten piece option, right? So we're gonna add in an image click on browse and select the wontons click on open Alright, so make sure that image is cropped nicely and click on set image All right, so that is done now the next variation that I will show you is the choices and add-ons, okay So let's just say for example We go rooty here Set in the price to be $5 click on save And then here you can also add a group so besides adding additional toppings Which if you click into it? then let's say if you have like a pizza shop and you have a pizza and you want to add like chicken you want to Add like cheese ham whatever it is.
Then you can just click into it right edits, and let's just say like cheese It's extra dollar and you can edit all these just drag it in and drop it into here Alright and link it to the product. Alright, that's what you have to do If you do have something different, so let's just say for example I Want to add a group so this one's gonna be like maybe like something called dipping sauce or something ok, and here we can set here to be optional right click on save and then Add choice so this one might be like saute sauce peanut sauce Something like that and then $3 click on save I'm gonna add another one so curry sauce and Then like $3 right And then we can just click it drag it and then drop it on top of the item to link it up Right, then we can click on add Choose the image and choose the picture and that's going to upload. All right, so arrange that nicely set image Ok, so that is essentially all you really need to know. It's really really simple to to set it up I might just delete this image here because it's not mine and then you can add in additional categories, right? So you might be like means or something like that. Click on save you know, and then add in your items, right? so just add in all your items and once you've completed that click on next and then Here, we're just gonna select no, alright and click on next So the alert cool is actually a really really good feature Basically, it will call you on your mobile phone or your restaurants number if a customer is Placing an order and have placed an order but you haven't turned on your iPad or your phone or maybe the internet connections not working then it's gonna call you up right so That's really cool. So put in your number over here and then click on next and then Here if you want to take orders from Facebook we can click on yes and then basically all you need to do is log into your Facebook and Then it will add this button on to your Facebook page, which is really cool So I'm not going to show you how to do that right now, but that is really really simple to do Okay, click on know next So this is the additional services they offer we're going to select no because we already created our website click on next year Okay, so this is asking you do you want to take orders and table reservations through your website? So here we can click on. Yes and what its gonna do is Let's say if you have like a webmaster who controls your website you can put in the name and also email it's going to send them these details here and It's gonna send them the HTML code to to put that in right so I'm actually going to show you how to use it By adding a plug-in on to our website, which is a lot better. So I'm gonna click on I'll do this myself Right. So this is basically the code that they'll tell you to paste into your website, but we're gonna use the plug-in So let's just go back here and then we can click on next
So here I'm just gonna select no, it's a shared mobile app click on next This one here is if you want them to create a branded mobile app So for example, they're gonna create an app which is just for your restaurant exclusively. So it's got your logo and everything like that So this is a add-on service. So I'm gonna select no for now. Click on next and Here if you want to accept online payments, you can select. Yes and you can link it up to your PayPal really easily So you can also accept credit cards as well. So if you click on next then here generally, what I suggest is connecting it with stripe and what you'll need to do is you'll need to create a account so you can click on start now and what you'll need to do is put in your email your full name and create an account with stripe and then basically what you'll need to do is you'll need to put in your business if and your information to verify your account and once you've done that then you can come back over and log into your stripe account and What you'll need to do is you'll need to Select stripe here. So for example select that Click on next right? You have to pay the $29 a month and then you can subscribe and then you'll need to paste in your API key From your stripe account, right? So if you have any troubles with that, what you can do is actually contact the customer support So they're really really responsive so you can click over here and then you can start a new conversation if you need help, right? So generally that's really really easy for now. I'm not gonna select that So I'm gonna click on back here and back over here and just like know next so for the fulfillment options This is a new option that they released lately because of the current pandemic in the world so you can select that I'm just going to select defaults and click on next and Then here we don't really need to do this right now. So we should click on next here and Then here ok, so it's gonna ask you do you want to offer a discount for first online order purchases?
I recommend this we're gonna click on yes, what you want to do is you want to encourage your customers to order online? So you want to give them a discount especially for the first order and the next time they'll keep on ordering online? From your website directly, right? So click on next over here and here we can set in our first promo So let's just say it's a 10% off Oops first order And then you can let's just close this over here So then you can put in any description here maybe say like limited time only until let's say May 30 21 whatever it is. Alright, so we can click on change picture so you can edit the picture here. Click your own picture Browse library and I might just use This one over here. Maybe we're gonna open Set image Okay, that's all good. And then we can click on next and then Discount amount So ten percent and then the order minimum amount you can set that in click on save and then our promotion is live So I can click on next over here. Okay. So this is some of the add-on services which you don't really need yet So we can click on over here This is the reporting so for your orders You can click on the list view and click on orders over here and all your orders will be listed over here All right, which is good and then you can click on over here Here you can set up promotions and things like that click on down here so here you can click on printing and then you can set up your printing templates and things like that as well and click on advanced settings You can also set in these ones as well. For example notifications Changing the language and things like that. You can also integrate with third-party apps as well for like delivery tracking alright, so you can also enable these which I haven't looked into so you might want to look into these and Then you can also click on Google Maps API and then click on add your API key So what I suggest is Watching this video over here, okay It's like a I think eight minute video to get your API key to paste in your API key So this is only mainly for if you're doing delivery, right?
So what its gonna do it's gonna help you calculate the Delivery fee and things like that more accurately when your customer is placing a delivery All right So to get your API key you do need to sign up for the Google console and then you need to put in your credit card details and Generally, if you don't hit the quota, then you won't need to pay anything Okay, so that is pretty much it for your setup on Gloriafood website. So what we need to do is head back to our Website, so go to your website and we're gonna log in again. So WP dash admin and then he don't enter and then fill in your details click on login and Then I'm gonna close that and we're gonna head over to logins and hover over here. Click on add new and Here for the search plugins we're going to add a new plugin so this is going to be called, Gloria Food and then just hit on enter All right so it's this one over here by Gloria food click on install and Then click go and activate and then once that is done Then you should see this on the left here click on dashboard So here we need to log in ok. So since we have an account already then go down here. I already have a restaurant account so all we need to do is type in our password and login Ok, so I'm going to close that and we have already set up the profile as well as the menu Right. So we're going to do is just click on publish and Here we can add in the button and by using a shortcode So for example, if you want to customize the look of the button, you can click on customize So let's say for example We might want to make the button a little bit smaller. Let's say for example 16 pixels and maybe the padding to be 14 like that and you can also change the color So you can change the color later when I show you how to get the color palette
We can apply the border radius to 0 if you want to make it like like a rectangle, okay without the rounded edges and then click on save Alright, so same thing for the table reservation So want to make sure that everything is consistent So let's change it to 1614 0 click on save alright, now what you need to do is is we need to click on copy and that's gonna copy the shortcode to our clipboard and go to visit website turn on your builder and What we're gonna do if you want to add in two buttons what I suggest is we're gonna delete this one first Then you need to drag in two columns and drop it below here all right, and then we need to find the text module so I drop it into there and Click on the text tab up here paste that in so that's the shortcode for the order Okay, so I'm gonna click on done and what I want to do is just click on save first and close it Alright, so that's the button we do need to align it. So what I want to do is go back to my dashboard So I'm gonna open it in a new tab and just get the other shortcode. All right, so for the table reservations click on publishing All right and click on copy copy that come back here turn on the Builder and What we could do is we can actually duplicate this module okay duplicate it and then just put in here click it click on text and Then paste in the the other shortcode, right? So what we want to do is sort of align it to the right hand side and this one to the left So what you can do is click on Let's start off with the first one here. Click on the styling tab click on font and We want to align it to the right just like that. I'm not sure if you can see it Click on the other one. Okay, click on styling Font align it to the left Alright just like that and then we can click on done and save and close Alright, and then we have the button. So right now if you share this URL to your customers Then they can click on the button and they can actually order Directly from your website as well as taking bookings already Alright, so as you can see, I haven't added many items in yet But hopefully you guys have added all your items and then they can you know start ordering right? So that is pretty much it for Most of this tutorial like the the main like benefit and the main features that I want to show you now
I do want to show you how to finish off and complete the website, right? because I think it's really important that you do have a complete website because The goal of your website is to ensure that when the customers come they're like, okay I want to eat here and I want to order from you. So you want to include a little bit more information, right? So I do want to show you how to ensure this one is also mobile friendly as well So let's click on turn on builder first Let's click on the mobile styling and I want to make sure that's on mobile these these two buttons are centered so I'm gonna click into that and click in the styling font and Select Center. Okay, so this should only apply for The mobile devices click on the bottom one styling font fly into the center Same thing for the tablets. So the tablets is essentially because it's big enough. So then it can display like that for the mobile It's not big enough. So it stacks on top of each other. So Let's give that a preview see if the button actually shows up save it and close it and I'm gonna just Minimize the screen. Okay just like that. So that's what it looks like on mobile. So that is awesome Now I also want to show you how to apply the The button on the top menu section on the top here, right? Because I'm pretty sure some of you guys want that so I'm gonna show you that right now. So click on the dashboard section so let's hover over plugins and click on add new and then Here it's actually called short code in menu ok, and you don't enter and I believe it is this one over here short code in menus click on install and then we want to activate Then we want to go to appearance Click on the menus and then we want to click on screen options Alright and click on a short code So once we have that what we need to do is actually set in a new menu, so we're gonna call this top nav and create menu and Then what I want to do is click on shortcode and Then I'm gonna paste in the shortcode. Okay. So this is the reservations one. I want to copy over the ordering one so I'm going to copy that over paste that in there and then click on add to menu and I also show you how to add in the row anchors and the menu items a little bit later on but we're gonna select a main navigation for now click on saved a menu and then we can go back to visit our website and Then as you can see, it's gonna appear on the top here. Alright, so that is awesome. And Also on mobile screens, then you should have the button in the mobile menu like that Alright, so right now I'm going to show you how to build out the rest of the website which is going to be amazing so let's click on turn on the Builder and We're basically going to recreate this section over here and it's really really simple. So here.
I've got two columns So one on the left and one on the right, so what we need to do is we can drag in the row So we want two columns so you can click it and just drag a below your hero image Right and let it go and they've got two different columns So on the Left we want to add in a text So drop that in and then here you can - maybe like our story or about us Okay, something like that and here you want to change it to heading 2? Right, so you don't want to use heading 1 again? Because heading 1 you should only have it one for each separate page right because that's for search engine optimization purposes which I have a SEO video on my channel as well, which you can check out later, so Here, we're just gonna click on done and we're not going to add any padding right now I'll show you how to fix that in a second drop in another text module and Then here you want to put in some text so a little bit about your business so right now I'm just gonna paste in some lorem ipsum text so you can go to lipsum.com and Generate the thing. Okay and copy over some of the text. So Some dummy text that we're going to use right now so you can come in here and edit the text later I'm just gonna try and format the text a little bit better Maybe something like that Okay, so it's just a little bit more easy for people to read Okay, and the next step is gonna click on done and we want to add in an image and go to the right upload files select files and Then here I'm gonna upload this image here click on open Right. So as you can see this image is 2,000 by 1000 pixels It's probably a little bit too big for that section there now you can Crop the image, too. I'd say probably below a thousand maybe 800 pixels by 400 on fotor.com or you can actually click on edit image here and That's going to take you to the image editor in WordPress. So I personally don't really like to use it this much I normally just crop it on photo or Photoshop, but we can change the size here. So let's change the dimension to 800 by 480 Click on crop okay, and then you can save Okay, so I'm not gonna crop any bit out. Everything's fine like that. I'm just gonna click on update All right, so that should update the the size here.
Okay, so I'm gonna click on update again and I'm gonna take the file URL because the file URL has changed Okay, so let's just copy that to your clipboard control-c or command-c and then come back here and What you want to do is click on insert file URL Alright come back here and just delete that for now and paste in the URL that we have Cropped okay, because that's gonna update with the new Size that we have and the size is only 38 kilobytes, which is tiny that means your website's gonna load quickly alright, then the next step that you want to do is click on done and What we could do is want to make sure everything is spaced out evenly So if we preview our page you can see that's not good, right? No spacing in between there no spacing there and it's just really really ugly So what we need to do is we need to add some padding on the top So if you hover over the purple Which is the row we can just click it and drag it right so we could do let's say 100 pixels like that and For the bottom bit. Okay, 100 pixels again. Okay, keep it even as you can like that All right. Now if we sort of zoom out of the screen, right that looks pretty good. Okay Now the next step that you want to do is click back on the 100% and then over here Hover over the row and you can also align the content Okay, so as you can notice the set of the text and the image is not aligned in the middle. So hover over here and Align it to the middle just like that. Okay, you can also hover over here and you can also align to right to left Okay, so if you want to move things around Then you can easily do that as well. So Click on back and that's looking really good So don't worry about the sort of the fonts and stuff like that yet so you can go to styling and change the font Don't worry about that yet. Okay So what we're going to do is focus in on the main structure of the website and they're not going to show you how to change the colors and Manipulate the fonts and things like that. Okay, so we're gonna create the next section which is here our Hawker menu or your menu section and what we could do is simply Let's click on done here. Click on blocks. So there's three different tabs up here. Click on blocks and Here we can search for different blocks that's gonna help us build our template. So I want to show you guys this feature so type in menu and Here, you've got some simple menus, right? So I'm just gonna use the menu grid 3 and Then I'm gonna click it. Oops and then drag it below. That's and Hopefully, that's all good Okay, so I'm gonna zoom out a little bit to see if that's all good Yep, that is looking good Now what we could do is zoom back in Click on this and this is heading one so we want to change it to heading two All right. Now here we can add in a background image or a background color So what we need to do on generally most websites Okay, so I'm going to show you this layout over here on the right Okay, so this is the layout data screenshotted so generally on most websites you'll see a hero image and then some white space and then they separate the content with the background color and then white again, and then sometimes I separate the content with Maybe like a video background or another image and then a colored background and things like that All right You don't want to have like a whole sort of white background with no sort of space separation or a line divider or a color Separation, right?
So what we're gonna do is separate it with a color Okay now generally what I recommend is hovering over here click on styling and then click on background alright so for the color background Let's put it in just like a light grey. So f6 f6 f6 so you can come in here and edit this later or you could also use a dark grey if you wanted to something like maybe Three three three. Okay. Dark grey, that's also fine as well All right does make your website a little bit more sort of expensive feeling you could say So what we need to do is I want to change the font color for the entire row Alright, so for the row options Click on font and I'm just going to change it to white. Okay, so that ensures that the text is readable okay, so then you click on done and We can click on the item here. Alright, and then here we can change the title I'm actually going to find the image first. So I'm gonna go and find my image upload files select files and then I'm going to upload maybe all the images. So what you can do is you can click it and then click on Command or control and then select all the images that you want to upload so that we don't have to keep on uploading them One by one. Okay, then I'm not going to upload that one Click on open. All right, so let's just select the satay skewer if you want to crop it I recommend fotor.com and then you can crop it to around this size. Okay, insert file and Then that should be done. Okay, so obviously I want to change the Name chicken satay Skewers like that and then I can edit the pricing here. So let's just say $12 and then I can edit the description You can also change the image appearance if you want to So generally what I want to do is I want to delete the height Okay, because it's automatically going to crop it click on done and then we can click on save So I just want to view it right now It's going down Yep, that is good The thing is when you actually select the crop image as you can see It's cropped it and then it looks blurry. So that's why if we turn on the Builder and We click into it. I just removed the height so it only crops the width to 100 pixels in width So I'll show you another one so you can then go out and do it yourself. So click into this one I'm gonna change the image first and This one I'm gonna do maybe this one nasi goreng insert and then change the name Oops Like that and then You can also change the layout of how you sort of want to lay it out as well But I'm just gonna keep it simple for you guys and just keep it the same
Okay, and then we can change the price. So for example, 16 dollars and Then delete the height click on done. Alright, so that's basically it so what I'm gonna do is actually I'm just gonna duplicate everything and Then I'm going to remove these ones Let's duplicate it and put it into there Okay duplicate that one and delete that's Okay, and then duplicate that okay, so I'm gonna set this up myself a little bit later on so that's what you can do If you do want to add in like a button Like let's say for example a download button where people can download your mini PDF Then I'll show you how to do that really quickly. Alright, so what we're gonna do first is just click on save and Close it alright, then next step is go over here to your dashboard and Then we can go to media Add new so click on select files and Then select the sample PDF Okay, the one that I just saved in the word document So here once we've done that click on the PDF and we want to copy the link. All right, so just Control a or command a select all and then command C so ctrl C copy that to your clipboard close it and What we need to do is go back to our home page. So visit site Turn on builder Ok, so scroll down over here and we want to add a button so to add a button we can grab the button and We want to drop it below Just here. Okay below the column right? Not in here. Okay, like in here alright, then what we could do is for the button text just type in like download menu and Then put in your link. Let's paste in your link Right, so you can also change the menu color over here Which I'll show you a little bit later on how to style the bottom link. Okay. So let's just keep it as black and aligned it to the center and I'm going to make it a downloadable and Also, I might open in a new tab. Okay, so click on done and save Close it Okay, cool that's going to download to their computer and that is awesome Right. Now the next step is we're going to create this gallery section, which is really simple all Right, so what we're gonna do is we can get the text here and duplicate it right and Let's zoom out so we can see the layout a lot easier let's just grab it and Actually, we need to create a new row. So it's gonna drop in a new row below that Okay, and then we're gonna drop in the text module put it in there just like that And then what I'm gonna do is I'm going to change the title to your gallery Click on done and Then what I'm gonna do is look for the gallery module here over here and drop it in All right, so we're gonna upload files select files and it's gonna upload some gallery images
Okay, so I've cropped these to under 800 pixels and width as you can see so the image is not too big add to gallery and Then you got your gallery, right? So here you can really just configure your gallery I'm just going to delete the thumbnail hide again because I don't want it to sort of crop the image Right, so it's only gonna crop the width and if I only crop the width then the height is gonna automatically crop by itself So here I've got three columns Just like that which will be fine and I'm gonna zoom back in a little bit Okay, so there is some spacing here so what I'm gonna do is I'm just gonna reduce that spacing down to maybe easier okay one and Then I want to add some spacing to the top okay of the row just like that's about maybe 100 Okay, same thing for the bottom Okay So what what I'm gonna do actually I might add a little bit so to make it look a little bit nicer maybe 25 Okay, and I'm going to zoom out to have a look Okay, so I think that is pretty good I might reduce some of the spacing over here it's just a little bit too much So maybe 25 as well? Okay, 26 close enough and That is looking great Now the next section is this section over here where you can display your opening hours as well as the map Okay, if you want to add a map so what we're going to do is What we need to do is add in a new row so you can click here as well. So this one's going to be Two columns, so I accidentally press one, but that's okay. You can hover over here. Let's just zoom in a little bit Okay, and click on this so now you've got two rows Okay. So what we're gonna do is we're gonna add opening hours. So let's drop in a text module In here let's just do opening hours Change it to heading two. All right, and then I'm gonna drop in another text module below that and I'm going to just copy over here the hours and I'll show you how to add in these cool icons later So just paste this in first like that Click on done and then we've got the icon module here drop in an icon and Then here we can select the icon Sort of the style. Okay. So the Here I want to change it to a mobile. Okay, so Let's see if we can search up a phone icon label okay like that and I want to make it transparent Okay. So for the icon label, then I'm going to put in a phone number. So like nine five five five okay, so you can put in your phone number like that and then if you want to actually link it, so for example if people on their mobile phone they can actually just click it and then that will take them to their call screen with the number in there so you can do tel : and then you can put the number in so, something like that Okay I'm going to delete that That - there. Okay, so we're going to open in a same window.
That's fine Okay, and then we can also change the font color as well if you want to change the font color then what I suggest is going back here styling link and Let's just change it to The default sort of grey color. I think it was I Think it should be five five five Okay like that and also the icon I change the color of that as well five five five Okay, and then click on done? Duplicate it. Next one is the email so click the icon Change the icon. So this one we can type in mail on the search select it label, we're going to put in let's just say support at hope enjoy calm and for the link you can actually do your mail to like that, and then we can do support@hoganchua.com and Essentially what's gonna happen is it will if people click on it? it's gonna open the default mail browser on their computer and it'll input the email on the Send okay, so we're gonna click on done for now right and What we can do is let's just add some padding to the top again. So let's do like a hundred And maybe 100 for the bottom, okay, so it's nice and even so What we can do now is we can add in a text into here and here could be like find us here so it could be like a Set it's heading to Like that, so you could add a map here. You could also add in a address So generally I just like to use a text module Each sort of like a heading. I normally just keep it as its own text module Here we can do like I'm just gonna copy the address here like that Paste it in and then that's all good. And Then what we could do is add in the map. All right, so you do actually need to set up the Google search console And add in your details to use the map so what we're gonna do is Look for the map module somewhere over here and drop up below that All right, so it does require the API key which I'll show you at the end of the video So here you can set in your address. So one two three Queens streets And then it would be like melbourne 3000 victoria Like that, you can also set it to zoom and things like that, which you can edit later So we can click on I might change to hide actually to maybe 200 Okay, cuz I sort of want to make it a little bit smaller So it sort of is aligned with the text on the left, right? Otherwise if I do like if I do like let's say, you know 400 Then it's just going to be so big and it's not gonna be even on this side, right? so either you can add some more content on the left or What I suggest is making a little bit smaller like that and Then that will be good to go Okay. So now the next step that I want to do is
I want to sort of style it a little bit I might just add in a background color first, so let's just Okay, so what I've done here is I need to change it 200 pixels and Then here I think there is another row, I'm not quite sure so. Let's just zoom out a little bit look Okay, so I think there is like another Row here or something like that I'm just gonna move that back to zero Okay, so I think that's better now. And what I want to do is click on the row styling and for the background I'm just gonna set it as a light gray Okay like that and then the next thing I want to do is click on font Align everything to the middle. Okay, so that looks better now You can do it individually for each module but I generally just like to sometimes just do it all together if The content is in a row then everything that you set for the row. It's going to move everything Into the middle. Okay. So we're gonna leave that as is for now Now the next section is your contact form Okay, so to get a contact form is we'll need to download a plug-in and that's in the description below Alright, so download that plug-in to your computer. We're gonna click on save And close that So the plug-in that we're gonna be downloading is build a contact dip, right? So this it's the contact form plug-in that we're going to add onto our website So it's below this video in the description download that onto your computer and It should be a dot zip file If it turns into a folder then what you'll need to do is right click and compress it back into the zip file okay, so go back to your website and Once you're done here, let's go to dashboard Click on plugins Click on add new and Then we can over here we can click on upload plugins choose file and Then we can select the builder contact dot zip And install now activate the plug-in Okay, once that is activated click on visit site Turn on your builder again scroll down and Let's add in a contact form. So I'm going to duplicate here and I'm gonna add in a new row First of all, and then I'm gonna drop in the text in here Click it and let's just change it to contacts us Okay, click on done and I'm gonna drop in a contact form. Okay, so it should be down here add ons and Drop in your contact form and then there you go, right so you can select from different styles as well So depending on which one you want.
What I've got here is I think I think it's this one over here. Okay, so Here you can send it to Your email. So for example if my email is creative way 10 and chima calm then I Put it in here, or you can just send it to your admins email, which is the default sort of login email that you have So I'm gonna send it to My email here and the contact form messages will be sent there, right? So here we're gonna scroll down and Obviously you can play around with the different The labels here with the name. So for example, you know first name Like that? Okay, so I'm just gonna leave it as is and you can play around with these settings here But it's not really necessary to do that. We're just gonna click on the Center for the button Okay like that and the next thing that I want to show you it's gone done. I Sort of want to make the contact form a little bit more the width not as wide Okay, so it's a little bit too wide. So what you can do is hover over the row and Select this one here. So it's got a column on the left a bigger one in the middle and one on the right Okay, so I'm just gonna move the text and as well as the contact form into the middle Like that, so just looks a little bit nicer okay, and then I'm going to add some padding to that row so about a hundred and Maybe at 100 to the bottom Like that Okay. So let's have a look at our general layout. I haven't really done much color styling to it yet I think that is pretty good Okay So the next step is how to sort of style it and edit everything Okay before we actually move forward and change the colors and fonts if we click on the menu up here It's going to scroll down to each of the different sections and that's going to add to the customer experience When they are navigating your website, so that's exactly what I'm going to show you right now. So we've got no links up here so turn off your builds our first and save it and Then we need to navigate to our menu section So you can either go to the dashboard and go to appearance and menus or you can click straight here Alright, so appearance menus. So here we want to add in a custom link so generally if you do add in like new and separate pages your pages will be appearing here and You can select it and add it to your menu Okay, so click on custom link and what we want to do is just copy over the URL so copy that to your clipboard paste it in so we want to label it a Section, so as you can see if we click on our story Then as you can see, it's got a hash and an hour story. So that is the link location, right? so for the link location Okay, we need to add it to the end of the URL So we're going to do hash and then just our story and for the link text or the link title We're gonna call it our story. All right, click on add to menu Okay, so paste in your URL again Hache the next section is going to be Menu, right. So make sure you keep it all lowercase and then your title Okay, and then the next section I think is going to be the gallery section so paste in that hash oops, gallery and Gallery so ensure that everything spelled correctly especially here at The menu paste that in hash the next one is going to be I think The hours okay lower case again Add to menu right and then paste again Hash and then this one's gonna be contact right? So it doesn't really matter. What name you put in here. It just matters Later on when I show you how to link it up. It has to be the same name Okay, so paste in contacts and that is done so if we save to menu now and What I'm gonna do is we go back and visit side What you're gonna notice is that the menu has been added. That's all good, but this button is appearing here So we want to move it across over here So what we need to do is rearrange it so click it and drop it and set it to be after contact save And Refresh and that should be moved right?
So that's really really simple and really easy to do so The next thing that I want to show you is how to actually create a drop-down menu So in case you do want to create a drop-down menu You can click it and you can indent it below whichever thing you want it to drop down from Okay, so that's really really simple. Let's just click on save again and I'm gonna close this So if we click it, it's not gonna link anywhere, right? so now we need to set in where we want it to link to and label it, right so we can turn on the Builder and We can start labeling it. So for example Here we want this to link to Our story so hover over the purple the row. However, the gear icon row options Here we're gonna set in the row anchor. So we're gonna label the name and it's gonna be called our story Okay, so make sure there's no Hash there right and then it's automatically going to save so on the right you'll notice Our story as the link location Okay, next one Okay gear icon row options and this one's gonna be menu Okay, scroll down next one Row options. This one is going to be gallery all lowercase. It has to match up exactly. Otherwise, it's not going to work so next one is going to be row options is going to be ours and Last one is going to be contact Okay, and once that is done then we can click Save it and then we can test it so close it So before you test it make sure that you've set it to show co-domain.com and let's try and click it our story menu gallery Your hours and contact right? So if it doesn't work, then it means that you have labeled it wrong and it's not connecting, right? So make sure everything's lowercase and everything like that and just re-watch the video If you have any issues, okay So now we're going to do is change the fonts and change the colors and really going to you know Make our website look a lot better. So before we can choose the font, we need to understand the fonts So there are basically two different typefaces one is sans-serif and one is serif now The sans serif typeface as you can see the edges are plain and the strokes are even width right So this makes the feeling of something that simple clean and modern and most websites will use this typeface right So when you actually use the serif typeface, which is a little bit different It has different curves and thick and thin strokes This makes it look a little bit more traditional and elegant and a more handcrafted look So depending on sort of the restaurant that you want to create maybe the vibe the feeling that you want to create or evoke in When your customers come to your your restaurant or establishment, then you need to think about which typeface should you use? Okay So maybe if you are a pizza shop And maybe if you are like you are creating your pizza dough from scratch and like all these things from scratch Maybe you might use the serif typeface right? But maybe if you're something that's More modern and then you're attracting a younger audience. Perhaps maybe like a 20 year old audience. Then you might stick with something That's more modern, right? So it really depends on What you want to you know, go with right? So here you can navigate to the fonts
Google.com and With our WordPress theme we've got access to all the google fonts So there is a lot to choose from so what you can do is go to this website right and then you can select the serif typeface like that and then you can see which one is trending and which one is popular and Have a look at which one you you want to choose right? So it doesn't necessarily mean you can't change Sometimes you have to play around with it. So don't don't be scared to like Choose a font and then come back and then maybe switch it up a little bit because each one has a different Personality and it's really about the feeling right? so you want to test it out and see how that see how it feels for your brand and Yeah, and then implement it right here. You can also select a sans-serif one as well And you can also select the most popular one so you can see which one is the most popular ones that people actually use so for example what I've used here is the Oswald for the title and For the body, I think it's like melee or something like that So you can select it this one over here, right? So what I might do is I might try something a little bit different for this. So let's just say Okay, let's just do something will be different. So let's go serif and Maybe let's try the Playfair display. Okay. So Playfair display i've made the decision to use it for my headings okay, and then for the body font, I'm just going to stick with maybe a sensor, okay, so I'm not gonna use serif again because that's gonna make it to sort of Too traditional almost.
I want to still make it modern that, you know have that traditional touch to it okay, so maybe I might use something like Poppins, okay, so I'm just gonna try it out. So I want to see what it'll actually looks like for myself as well So what we're gonna do is we're going to go and go to customize first alright and Then we want to edit the heading fonts, so we want to go to heading here heading one okay, so if we actually try to choose the fonts what you're going to notice is that I think it might not actually display his We have not set its yes. Okay. So Playfair display appears. Okay, that's fine as well So that makes it look like a really nice and elegant as well like almost like a something more fashionable Okay, so that's really cool. I think In my opinion. So heading to then for heading to I would keep it the same nice and consistent So Playfair display? Okay. Well, it looks really nice. I think Okay, so then once we've done that Then you can also set it for heading 3 and heading 4 as well if you do have that on your website then what I would do is click on body body font and Then let's try and change it to Poppins Okay, so that one appears, okay So as you can see, that's a little bit too thin so you want to change the font weight to normal? I think that's not too bad. I think What I want to do is maybe minimize the size a little bit to 15 So by default, I believe it is 16 Maybe 14 might look okay as well. I think a little bit too small. Let's have a look Yeah, I think that's not too bad So my stick with 15 something like that and as you can see the color of the font here right? It's great so I think that is nice because in terms of the The sort of hierarchy with the title and also the body fonts, but you can change the color here as well But again, I don't suggest changing the color to something that is like full black I think that makes it a little bit too too much contrast yeah, I think what we're gonna do is I'm going to change this to let's say 333 just something a little bit darker. So it makes it a little bit more designer feel I think that's quite nice. Okay. So here we're gonna click on publish and Then we are going to close Right. So if you don't actually find the font that you want to choose then go back to your dashboard area and Then go to themify settings and Then you want to scroll down to I think the theme settings on a Google Fonts over here and Then you want to show all google fonts, right because by default it's not going to show all the google fonts So if you can't find the one that you want to select then select here and save it okay, so let's go back to our website and I think everything looks not too bad at the moment So what I want to do is show you how to apply the colors on the website So there are many ways of choosing the right colors for your website for example, if you go to google and type in color meanings Then you can read up on color meanings and find out what each color actually means and then you can pick a color based on that logic Right or I think which is easier for beginners is to actually choose an image which they have used on your website So for example, we've used this image here. Then we're going to use the colors from this image and apply it onto our website So that everything is very consistent when you are scrolling down Alright, so this is what a lot of top websites actually do as well. So you're not going to go wrong this way But again, there are also some other ways because you've also got to take into account. Okay, what's your competition using and You know who you want to attract and things like that? But I think this is one of the easiest ways to get started so select the file and you can choose a nice image right, so you can either choose the image that you see here our image or maybe something that that is maybe you can take a photo of your interior or something like that or you really like or you can take a Logo and you can upload it and it's going to take colors from that logo.
Then you can apply it onto your website, right? So you can extract it using different color moods as well for example here and So what you could do is maybe I want something that is Nice and colorful and bright and just energizing then maybe I can use use this Okay, so then click on color wheel and then you've got your color palette okay, so I'm going to show you how I apply it onto my website and walk you through it because Sometimes it just takes a lot of feeling to do it. So what we're gonna do is turn on the Builder and Then what we're gonna do is just sort of maybe zoom out at the screen Okay. So what I want to do is I want to add a color background here So I'm gonna add maybe this yellow background. So let's call it that copy that come over here Okay, hover over here styling background and just add in a color like that Okay. So now what you can notice is that the text here we probably need that to be white So we can click that and click styling here font line it into the middle. Maybe change that to white. I Still think that's okay, but I might need to add some text shadow onto that so let's just try one pixel and maybe you want things all there and just Change that to black and then drop the opacity down a tad to maybe Something like that. Maybe I might add a little bit of blur more blur to that Let's zoom in a little bit Yeah, I think that's not too bad, okay, so I'm gonna click into the contact form as well so we want to make it blend into the background so click on styling and General tab click on the I think the input input fields. I think so for the background. We're gonna select Maybe white and then drop the opacity down like that To zero. Okay, so it's like transparent and For the font, I'm gonna change it to maybe Let's see if we can change it to white Okay, so that's the input field So when people actually type in its gonna be white, so let's go back to the field labels change that to white as well okay, click on here and then click on maybe the Field labels input fields. I think we need to change the border Okay to one pixel change it to white as well and Maybe we might want to change it to just a little bit more transparent like that. Okay more subtle Okay, 50% opacity. I Think that looks not too bad and then we can also change the button color So what color should you change the button to so I can click on the send button? We can take the color from our color palette, right? So what we could do is take maybe this orange and try it out So some things are you have to try it out so that you can actually get it, right? Okay, so I think that's not too bad that orange And you also want to select a hover color generally to select a hover color. I just go to 0 to 255 calm Okay, and then I paste in the color code over here click on next and then I choose either a lighter shade or a darker Shade, so in this case, I might go with a lighter shade and that Means when people hover over that It'll go lighter and it will give the feeling of a button right just like that Okay, so we can click on done and I think that's not too bad now the next section that I want to edit is maybe this button over here and I want to do the same style because you want to Keep everything consistent. So click on button link background color. I'm gonna paste in the hover color here the the normal color was Here, so, let's go back here and copy that and I'm just going really quickly because I know a lot of people They feel bored. So maybe you can just watch this part Because you can see and then you can sort of edit and play around with yourself So let's go over here and then click on that Now what I want to do is I want to change change this so I want to add a background video Because I want to add blue be more depth to my design right now right now It's very very simple and you can keep it that way or you can go and find a youtube video, which I'm gonna do Right now, all right, so I found my youtube video So generally if you have a video that you want to upload as a video background Then you should upload your video to YouTube and that's basically going to load on the YouTube servers
Which is going to be a lot faster so here click on styling background change it to video and paste that in and Then you should have your video background like that. Alright, so now we can't see the text So we want to make sure that the text is viewable by clicking on font and Let's change the color to white Okay, and then we also want to make sure that the icon color is also white as well for the links is set to white And the icon is also set to white Like that and then click on that again Same thing for the fonts actually not the font the link. Okay change that to white and then The icon change that to white as well Just like that. Okay. So if you want to make the text pop we need to add a row overlay So go to styling again wrote overlay. What we're gonna do is just gonna add a black overlay and then drop the opacity down To maybe like 20% or 30% So we can see the text a bit better Okay, so that's how you do it. And what else we're gonna add is we're gonna add a little Divider line. Okay. So as you can see on this website, we've added a nice little divider line here, which looks nice So we're gonna do that So go over here and we can find the divider and just drop it below where you want to add it so for the thickness, we're gonna set it to two and for the color What I suggest is taking a color from your color palette again So what I'm gonna do is maybe just change it to this light yellow and we'll see how it looks okay Let's paste it in Okay, I think that's not too bad. What I do want to do is click on custom Okay, because I don't want it to stretch all that way. Then what we could do is just duplicate it. Okay, and then Click on it Oops, click on it and drag it and put it below here Okay, so that is not in the center. So we need to click on edits align into the center Let's move the padding up Let's zoom in a little tad Okay, so let's do zero What we do need to do is we do need to add some spacing still. So try that Okay, that's not too bad and then what we could do is just duplicate this again drag it wiggle it down and put it over here and Let's reduce that spacing over there and let's Increase the padding for that image gallery module like that and then what we could do is I want to add is add some more depth to the menu section by adding a pattern something like this, right so Right. Now if you want to find some patterns you can go to google and type in patterns for website and go to the first result, I think it's called top Telkom click into it and That's going to give you some nice patterns, which you can use for your website. So depending on what style that you want Perhaps you feel like an Asian restaurant. You might do like Oriental and search that up or you can just browse the library section here and choose one for your website So there are quite a lot of nice patterns that you can choose from you can browse all these pages But what I'm gonna do is I'm just gonna pick one so maybe I think either this one or that one maybe maybe this one over here click on download and Just download that onto your computer Okay, and then what you'll need to do is just double click it Okay, if you're using Mac if you're using Windows Then you need to like unzip it right and then you've got the pattern in there. Okay, so we can upload that to our website so let's go to here and go to the wrote options and styling click on background add a background and upload files select files and Then click it and then upload it yell Insert file URL. Okay, so that's not too bad, but we can't see the text now. So what we can do is we can Set it to a fixed background.
So it's almost like a parallax background feel All right, and then wrote overlay we're going to select a black okay, then we're gonna drop the opacity down a little bit maybe something like that to 80% and Then you've got a nice pattern overlay, right? Because the the pattern is sort of Green so you can see some of that green through there which I think is not too bad because We do have some green with the coriander and also the leaf there and things like that and it also blends in with the Theme so the Asian vibe as well so you can click on done save it and Lets you zoom out Okay, so that's not too bad. You can find something. That's a little bit better, hopefully But it does add some nice depth to our website. So let's click on save and let's close it Okay, so maybe the last thing that I want to do is edit the color for the button here So we're using the same color from our color palette. So I do want to add some space spacing over here It's just a little bit too close 25 Okay, so that's looking great now, let's go back to our dashboard and then go and click on publishing and Let's take our color palette color and Input it here. Okay. So the color that we've used for the button is this one so I'm gonna just apply this one here So just because you have five different colors doesn't necessarily mean you have to use it on your website Sometimes you just add it into like different sections, you know Just like a little bit you don't really need to use it that much. So maybe that's a little bit too light I'd say Unless you change the text color to maybe darker. Okay, so that doesn't look really good. So What I'm gonna do is because we can't really see that properly.
So I'm gonna use maybe like a dark color perhaps that one and then we're gonna Paste that in okay, so that looks a little better. I do also want to make the text a little bit maybe fourteen a Little bit smaller padding doesn't need to be that big click on save customize Customize and then here I also want to change the color as well change that for 14 first to twelve and The color I'm going to use may be Okay, so we don't have a color maybe a red one. I don't know how a red one will actually look Let's try Let's try and click on extract theme See if we can move that to your maybe green Okay, maybe you something like that So we're gonna use the same color that we find on our image Maybe something like that. Okay, and then I'm gonna take this green copy it, and then I'm going to paste it into here and then we're gonna click on save and Hopefully that is saved and if we go and visit our website Okay, so that doesn't look too bad right because we're taking the same color from the image and Implementing it on our design, right? We're not introducing like a completely new color like a pink or something like that. And that just makes your website. Look very very inconsistent So as you can see, our website is not too bad just with some quick editing of color Obviously, it's not perfect. You do need uh, sometimes play around with it If you don't know which color to use then you can use like a neutral color like a grey or a dark gray Light gray something like that, which is fine as well So if you want to display your Google Maps on your website, then we need to add in an API key Alright, so we need to get that API key from Google itself so we need to go back to our dashboard section over here and I'll show you where you can paste in your API once you have it so themify ultra themify settings Then you need to scroll down to integration API Google, map API settings and paste in the API code over here Alright, so you can click on generate API key and I'll give you instructions or I'll just show you how to do it right now So you can go to Google type in Google Cloud console and Click on the first results. I don't need to login with your Gmail account. So if you don't have one make sure you create one Alright so select your country and I'm gonna agree agree and continue So sometimes the interface might be a little bit different. So I'll try and walk you guys through What you do need to set up Generally if it's your first time over here Then you can claim your free trial which has three hundred dollars worth of credits and I think every single month they give you two hundred dollars worth of credit anyway, so Generally, I form a local website. It never goes over so I don't have to pay anything So generally you don't have to worry about it. I think it's just for people abusing it. So I'm gonna click on activate and Then here you can select your country again. Okay, and I'm gonna continue and here I'm just gonna fill in my business information and also my payment information So I'm gonna pause the video and do that. So do that as well Alright, so once you're done click on start my free trial Click on got it Alright, so what we need to do is we need to set up the API so I think we'll hover over here API and services and then we can click on credentials and We need to create a credential. Alright, so generally it should show your first project So if you click over here, if it doesn't show then you'll need to create a new project So just name it like your business name or your website name doesn't really matter and once that is selected then we can click on create and then Click on API key and that's gonna create your API key. So you gotta copy that key Right, and we're also going to restrict the key to our website domain.
So no one else can take the key and use it so what we need to do is we can just click on this alright add item and What we can do is just actually just copy over this URL first Don't worry about the API that we just copied just paste in your URL first and click on done Okay. So what else I'm gonna do is I'm just gonna Paste that in and actually just delete that and delete that like that as well alright and then click on done you guys just leave them both and Once I'm done here then I'm just gonna click on save Click on got it. Ok. So we've got the API key We can copy that over and go back here and paste that in and then click on save But I don't think it's actually gonna work now We have to enable the actual map API thing so I think we can go to library and What we need to do is we need to go to Maps JavaScript API so winning it enable some of the services before we can actually Turn it on. So click into that one Enable it and I'm also going to enable a few others which I believe you need as well So that is enabled I'm gonna go back and Then I'm gonna enable the geocoding API Ok enable that one click on back and I'm also gonna enable maybe the places as well enable click on back again and I'm going to enable the maps in bed Ok, so I set this up a long time ago, so I sort of forgot but I just wanted to show you guys how to do that anyway, so once that is enabled then we can go back over here and visit our website and Hopefully the map is going to show Alright, so what we're gonna do is let's turn on the Builder and we're gonna set in the address Okay, so set in your address over here, right? I don't think it's gonna load up instantly It's gonna take maybe five to ten minutes to actually load up with the new dress that you put in here I think it does take some time for that to Take effect Okay, so I was gonna scroll down Okay, so, I think it's working right at the moment so let's just zoom in a little bit Okay, so yep, that's all working so that's how you put in a map Sorry that took a while. But yeah, that's required. Anyway, so if you want to get a logo
What you can do is go to fiverr.com And just type in like a logo Okay, so you can get logos for five dollars I just personally think it's much better to get a professional to do your logo for you and you can also request a fab icon So five icon is essentially the little icon here so you can see the little W The little FI green thing and my one is like a HC, okay So tell them to send you like a fav icon and then they'll send one to you which should be like a PNG file so to upload your fab icon we can go to dashboard here and then go to themify settings and Then you can click on the general tab fav icon upload and Then what we're gonna do is we're going to click into here And upload the file icon open Save it Okay, hopefully that's good visit website and Then that should be updated right so for your logo then you'll need to click on customize And Then here we can go to site logo and tagline site logo So here you can upload your logo image right and it should be a PNG file and that is it So for your site tagline, you might want to change this because it does appear on the top site title so for example, let's just say this one is like a Malaysian Restaurant and Melbourne, okay, something like that we can publish and Close it and essentially that's gonna change the site title which will sort of appear in these search engines as well All right So if you do get a message, for example, something like this themify ultra the update is now available So you have a few options? The first option is that you can just download it from our website So go to hug intercom forward slash update, right? And then what you can do is download the latest theme, right? So themify ultra and I do have another tutorial like covering ecommerce. So I have another theme as well click on it and That's going to download the new version to your computer All right, and then you can go back over here Dashboard and then you can go to the appearance and themes and Then what you can do is like activate another theme first. Okay, because we do need to download And delete this one. All right, so we need to click into that. Delete the old one. Okay All right. So right now your site's going to be It's not going to be showing Okay, it's not gonna be showing properly.
So what we do need to do is we need to click on add new Upload the theme choose file and then Let's go back to our desktop and upload that one install and then click on activate Now that has activated to the latest theme, okay, so I'm going to click on visit website and Everything should be back to normal. Okay, so that is awesome So if you do want to backup your website, you can click on the link here and watch the video So if you do want to get automatic updates Which come with license key and also support then you can also check out the themify membership Right, so you can also use the code Hogan for 30% off right if you have any issues You can also email me and support at Hogan ChiCom So this is actually a premium theme, but I've punted up themify to share it with you guys for free This is essentially the thing that I use for my own website so that's why I wanted to create a tutorial around something that I personally use and That I really think it's gonna benefit you because some of the other three themes it's not as good because you don't have as many features and you can't do a lot of things and If you do want to do something, you need to download like another plug-in and then you need to upgrade and stuff like that So it's not really good. Alright? so once you're done with your website, then make sure over here on the right top, right you can click on logout and That's gonna log you out of the website and now you are basically a new visitor to your website, right? So congratulations, I'm really happy about this tutorial So hopefully you guys found a lot of value in this video and share it with your friends Maybe help other people to create a website for their own local business.