Hostinger Website Builder Tutorial - Create a Professional Website, Blog & Online Store 2024

hey guys it's Hogan here and in this tutorial I'll be showing you guys how to create a professional website using hosting as website builder and I think it's the perfect WordPress alternative because it's so intuitive to use as well as being extremely easy to manage while still allowing to create really beautiful and functional websites without any coding experience now personally I still love WordPress and I still use WordPress but at the same time it can be quite overwhelming especially for people who just require a simpler solution unless you do want to create a advanced type of website such as a listing site for example a real estate listing site or a car listing site or maybe a forum or maybe an advanced sort of e-commerce website then you don't really need WordPress and I think hosting as website builder is going to be a perfect option for a lot of you and I'm going to be going through everything they need to know from choosing the right plan getting a free domain name creating a free professional email as well as choosing as suitable template for your business and customizing your site from the layout design changing the colors and the fonts I'll also show you guys how to add important features for your website such as a contact form a map how to add in a language selector so people can translate your website adding an appointment function so people can book directly as well as adding a Blog so you can create content and e-commerce functionality so you can sell stuff online whether that be a physical product or a digital or maybe a service so there's a lot that we're going to be covering in this video and it is going to be quite long but I've also added the contents and the topics I will be covering in the description below with the relevant timestamps so you can skip to any section that you need and if you have any questions you can also drop it in the comment section below I'll try to get back to you as soon as possible so yeah I'll see you guys on the inside so to get started with this tutorial you can click the link down below and that's going to take you to this exclusive hosting and discount page and from here we can navigate to the top click on hosting and then select web hosting so you may be wondering what's the difference between web hosting from the website builder to Wordpress so actually they're pretty much exactly the same thing except on the web hosting page you're able to choose a plan which is suited for your needs and your budget so the main difference between these four plans is that the single plan you're only able to create one website only however with the other plans you're able to create 100 websites 100 websites and 300 websites hosted under just one account so basically you can have your website your friend's website and your client's website all hosted under that account and over here with the single shared plan you do not get the free domain included so the other plans you do get the free domain included as well as the free domain privacy and from here you'll be able to see that it does include the WordPress so you're able to install WordPress and create a WordPress website if that's what you want to do but in this tutorial I'll be showing you guys how to use the hosting and website builder and all these plans will include it so the main difference here is that with the business plan you'll have the e-commerce features so you're able to create an online store as well as the cloud startup that is included as well so if you don't really want to create an online store you don't want to sell anything you just want to create a simple website for example like a restaurant website or a portfolio I recommend generally the Premium plan for most people it's definitely great to get started with because it's relatively affordable you do get the free domain now if you want to create like an online store or if you want a little bit more increased performance in terms of website load times and things like that as well as daily backups then you can get the business plan and if you just want the best perhaps you have an existing business already then you can go ahead and get the cloud startup you also get the priority chat support which basically gives you access to a faster chat response time in terms of the customer service so over here we're going to go ahead and use the business plan because I want to show you guys how to add the e-commerce features for those of you who want to add an online store so scrolling down over here you'll need to choose a period so generally I do recommend 12 months or more because you do get a sort of bigger discount if you go month to month is actually quite expensive so 16 times 12 182 dollars and it's not really worth it because if you actually get the 12 month plan then it's going to be around around 65 and even less with my coupon code so the main difference between the 12 months and the longer periods is that it renews at a much lower rate so for example after four years it's going to renew a nine dollars per month at ten dollars per month and twelve dollars per month but all these plans will actually include the free domain for the first year so for this tutorial I'm just going to go for the 12 month because it's just a tutorial so I don't really need it after this video so over here you can create your accounts and here you can either put in an email and create it or you can log in via Facebook or Google so scrolling down over here you can choose a payment method choose your country and then I do also have an additional coupon code which is going to help you save just a little bit more money so you can type in Hogan tour and then click on apply and that's going to bring the price down to 59 or so so what I'm going to do is just enter in my card details and then I'll see you guys on the other side so the first thing that you'll need to do once your account has been created is you'll need to verify your email address so head to your email that you signed up with and then click on verify email so once you've verified your email then you can scroll down and then click on setup and then here we can click on start now and I'm going to select I don't want to personalize experience and then over here we're going to select create a new website click on select and then we're going to be using the hostinger website builder with AI we're going to click on select now if you do want to create a WordPress website I do have a different tutorial and I'll link it in the description below so we're going to go ahead and click on select and then over here because we have purchased the one year plan then I'm going to claim my free domain name which is my website name we're going to click on select and then here we can enter in a domain name so for example I might do creative demo 23 and then over here we can click the drop down to select the extension so generally I do recommend the.com extension and then we can click on search to see if that is available now sometimes it may not be available for example if you pick google.com or youtube.com that is obviously taken so you do need to be a little bit more creative it could be your name or your brand name and then if it is available then we can go ahead and click on continue now if you want to choose a domain name later then you can use the free temporary domain name and click on select and then purchase it later but I'm going to go ahead and purchase this one right now and click on continue so over here we're just going to enter in our details so once you've entered in your details click on finish registration so once the registration is complete hostinger will send you an email to verify your contact information for your new domain name that you just registered so click into the email and scroll down a little bit and we can validate the domain name okay so that has been successfully verified so once you're done you can go back to hostinger and you should be redirected over here so over here we have two options to create a website one which is using the AI website builder which is new and two using the pre-made templates so in this tutorial I'm going to show you guys how to create it using the pre-made templates because in my opinion it is just a lot better but I'll show you guys how the AI website builder actually works so just in case you guys want to use it so we're going to click on start creating and I'll just show you guys quickly so just enter in your brand name you can choose your website type and even if you choose like a Business website you can add an online store and blog on later as well so I'm just going to click on this one and here we can describe the project and then over here we can click on create website okay so based on what I inputted this is the website that they created for me so it's just a very simple and basic layout and they've also added some content there as well so you can choose from the different templates over here you've got three different types and you can choose the different styles you can change the font and you can also change the different colors as well as clicking on the pages and you can add on a Blog Page or a portfolio or online store from here and then once you are ready you can click on continue so this is going to take us to the hosting as website builder which I'll show you how to use in a minute and you can start designing your website like that however I'm going to show you guys how to choose a template so we're going to go back over here on the top left so click on the arrow and then we're going to go to click on the choose a template so over here we have dozens of fully customizable website templates they look really good so you can go through each of these ones and let's say for example you like a template you can click on preview and see how that is suited for your business if you like it you can click on start building straight away if you don't you can go back over here if you want to create like an e-commerce site you can also choose an e-commerce template as well now it doesn't necessarily mean that you can't create an e-commerce site if you pick the other ones you can easily add that on later so what I'm actually going to do is I'm going to click on blank templates and I recommend that you do the same as well because it's just a lot easier to build starting using the blank templates and to show you guys how the sort of Builder actually works so I'm going to go ahead and show you guys how to create the website using a blank business template so you can click on select template and we're going to click on change template so it's going to remove the previous website that we generated with the AI Builder so over here we have our website right so everything is just showing like placeholder content at the moment so I want to walk you through the basic interface now over the top here you're going to see a desktop icon and a mobile icon so if you click on the mobile icon this is basically adjusting the layout specific for mobile devices so you'll need to do this later once you've finished creating your website on the desktop version here is your undo and then you've got the redo buttons here we can click on save so generally it auto saves every few minutes you can click on preview you can take your website live by clicking over here and if it is live you can click on update website on the left hand side you can click on the plus icon and this is all the different elements that you can drag and drop in to your website and everything is just drag and drop which I'll show you in a second here is going to be a Pages navigation so this is where you add your pages and configure your navigation menu here we've got the website Styles so you can change the colors for your website universally as well as the text your button style as well as animations here we've got the blog so you can click on start a blog which I'll show you how to add a little bit later and an online store and then you've also got the AI logo maker as well as the error writer and the AI heat map which I'll show you during the tutorial here we've got the analytics so this is going to be your page views basically how many visitors are coming to your website here we've got the languages so essentially what this does is you're able to create a language selector so for example if you want your website in a different language you can create that like by selecting your starting language and then you can select a language that you want your website to be translated in and you'll need to manually translate it which I'll show you a little bit later towards the end of the video here we have a search function here we've got a feedback so the website builder is actually quite new and they're always improving so you can submit your feedback as well as featured request here we've got the help articles and documentation so if you need any sort of step-by-step instruction you can see if you can find the information there but generally I'm going to cover most things of this Builder so let's go back over here here we have the website settings so I'll talk about this towards the end of the video and lastly on the bottom right hand side you've also got this chat bubble so this is the customer service you're able to actually contact them if you do need any help so I find that really really helpful because everything is very very integrated within the hosting and website builder unlike if you're building a WordPress website it isn't as integrated so it's very very helpful if you do need any help so let's go ahead and start building our website so over the top over here we've got the header section and on the bottom we've also got the footer section so I'm going to work our way down towards the bottom so what we're going to do is we can click here to the header and then you can click on change logo and then over here we can change our logo so we can click on replace image and then if you have an image we're going to upload the files like that and I'm actually going to upload all the images that that have already so we're gonna upload these and we're going to upload this image over here like that and then click on open so I don't have to upload them one by one later so from here I'm going to select this logo so as you can see this logo is transparent so I actually created my logo on canva.com so if you don't have a logo I recommend going there to create a logo now if you only have a free account you'll be able to download the logo but it's not going to be a transparent PNG file it'll have a background so if you don't have a pro account and you download uh the one that has a background you can go to a website called remove BG to remove your background and you're going to get your logo in a transparent file then you can upload it here like that and over here we can scroll down we can change the logo width so you can change the size of that logo so let's just say for example 124 or 125 something like that and here we can scroll down you can also change the logo position we can click on the layout over here and you can also make the header a sticky so what that basically does is if we click on the preview and if we scroll down then the header is going to stick there like that so we're going to click on back to editor so it does provide a great user experience if that's what you want um sometimes people don't like that so you can depending on what you want so you can click on change logo layouts and you can disable it if you need to change the menu position you can also change the menu items spacing which is the spacing between the navigation menu so let's just say for example we update it like that okay or we want to be a little bit closer I'm just going to stretch it to the max and the padding over here is going to be the spacing of your header so we can minimize it a little bit maybe like 24 pixels like that and then we can click on Save so you can also change the header background color as well so here what we could do is we can change the header background color so if you want to change it to a dark gray color you can but you do have to disable the transparent header okay and you can also change the header text color but I'm just going to keep it as default because I think it's quite simple and nice and having a white background it's very very visible in terms of your many items like that and if we scroll down over here we're going to edit the hero section of your website if we hover over here it's going to highlight in blue and that's going to be a section it's going to highlight in blue section new section and a new section there like that so first of all we're going to change the background so you can click and change background and you can change it to a different color or you can change it to a different image so I can click on ADD image and we can choose image that we like click on select or you can go to free images over here and it's going to pull images from the unsplash website but generally I do recommend getting your own custom images done it just makes the website look a lot better so let's just say for example I like this image I'm going to select it okay and here we have the overlay opacity so this basically adds a sort of dark overlay opacity basically helping us enhance our text a little bit better so if we click on the text you want to make sure that your text is visible so we can click on edit text change the text to a white text like that and then you can also change it for this one over here edit text change it to white as well so it's a very simple sort of word editor so let's say for example you want to change the size you can change it quite easily you can make a bold you can change the alignment of it you can also add a link so for example if you want to link something you can select the text that you want to link link it up like that and put in the URL okay so very very simple to do and let's just say for example we want to edit the text up here edit text so let's just delete it let's just do hi um Hogan like that and then if you want to move it all we need to do is just click it and just select it and drag and drop so very very simple to do and we can click on the background over here what I'm going to do actually going to click on the header click on change logo and I'm actually going to go and disable the transparent header okay let's just move this back to the white one make sure we save that because I think we didn't save it before and close it like that okay so I'm going to make this text just a little bit Bolder to make it maybe more visible and here we have a button so you can drag and drop the button anywhere like that let's just say for example you want to add another element so you can click on plus let's add another button next to the first one like that and we can align it like that maybe move it over a little bit okay so it's very very easy to use and if you want to make the section A little bit bigger so you can click over here on the section height and just drag it down a little bit like that and that's going to make the sort of spacing a little bit bigger and if you want to edit the button click on edit button here we can change the text so for example you can link it to a specific page so for example links to your pages here okay so you can link it to your about page contact page so any page that you create you can link it and find it down here let's say for example you want to link it to an external link so you can click on web address and you want to link it to YouTube or something like that you can paste the URL in here and you can also link it to a section so a section is basically as I explained before a section over here section over here let's just say for example we want to link it down here because you have a contact form or something like that then we can click on this section and then we can click on edit section and then for the anchor so the anchor tab here we can add a name for that so it could be like bottom or it could be like contact anything you want to name it we can click on close come back over here click on this button add a button and then here we can link to the section okay and then here we can select the section so let's click on Save and preview so if someone clicks on that it's going to scroll down to the section let's head back to the editor and then over here let's say for example you want to click on edit button let's say for example um let's say you're a restaurant or something like that you can also do a file download okay so you can select file download and select file and let's say for example you have a menu PDF ready so we can select it and basically once that is done we can just close it and save it so that allows people to download that PDF so for example if you have your menu or if you have an ebook doesn't matter what you have it allows people to click it and download it onto their computer so I'm actually going to perhaps just drop the opacity down a little bit I think it's a little bit too dark okay you can also click on fix background so that's going to be like a parallax scrolling effect so that's really cool so the next thing I want to show you guys is how do you add pages on the top so click on the layers over here like the layers icon and let's say you want to add a new page so just click on ADD page and you can select an empty page or you can select a sort of pre-creator template page so let's just say for example you want to add a Services page and let's just select this one over here it's going to create a new page and here we can change the name so we can create it you can call it services or you can call it a specific service for example if you're a carpet cleaning business it could be like copper cleaning it really depends on what you want to do and here I want to make sure the URL is just my title and then you can also hide the page if you don't want it to display on the navigation menu on the top perhaps you have a separate product page and you don't want to list it on the top you can hide it here we can click on social image and you can add an image over here so when people share your website or this page then it's going to show that image so for example we add this image in here okay if someone shares it on like Facebook or like Twitter or like WhatsApp it's going to show this image which I think is really cool and you can click on save you can also set a password if you want to limit access for a specific page so let's go ahead and click on Save now if you want to rearrange it you can click on this and just drag it like this okay and if you want to create let's say like another page we can do that let's create a another maybe projects page or something so let's select that one and then let's just delete this one click on save so let's just say for example you want to create a drop down menu so let's drag this and we can drop it into the services like that and that's going to create a nice drop down okay so the adder section is just covering it but as you can see it drops down like that all right so it's very very simple to do and that's the basics of creating your pages and editing the navigation menu so let's just click on Save and let's head back to our home page and I'll show you guys how we can add a new section so scrolling down over here you can click on plus section to add a new pre-created section obviously you can add a blank section if you want to I'm just going to select perhaps maybe this one over here okay let's just click on that one and you can click into it edit the text and change it however you want so let's just say for example we change this text over here edit text and it could be like about me or something like that and then here instead of clicking edit text I'm going to show you the AI assist tool so we can click into that and here we can actually ask the AI assist tool to help us create content for our website so you can take inspiration from it and let's say for example I'm going to go to chat gbt and then just copy this and let's go back over here paste this in okay so I told it to write a paragraph for an about section for a website for a freelance web designer so click on generate text and you can use chat gbt as well I normally do use chat gbt I find the answers to be a little bit more precise a little bit more maybe perhaps written a little bit better so I'm just going to copy this one but you can use the AI assist tool that you find on hostinger as well so let's click on edit text and perhaps I'm just going to select that one and I'm going to paste and match Style okay so what you can do is just format everything make sure everything is well formatted so let's say for example let's take that last line like that and that's looking good so perhaps we do want to move this up a little bit like that maybe let's move this text up a little bit too like that maybe move this one a little bit closer okay so I think that's good enough but just make sure everything is aligned as you can see everything is aligned to the lines like that with the snap grids and if you do want to turn off the snap grids you can do that um I do think you go to the edit section and you've also got the layouts and you can disable the snap to guides and things like that but generally I find it really really helpful otherwise everything's going to be really messy in terms of alignment so here we can change this text over here edit text just paste that in like that and that's looking pretty good if you want to change the image click into it change image replace image so it's very very easy to do and let's say for example you want to delete it just delete it you can add perhaps a video as well so you can drop in a video like that you can you know drop anything that you want very very easy to edit so if you want to add a video click on edit video just upload your video to YouTube and then all you need to do is copy the URL and paste it in here and you can easily just resize everything like that okay so let's just say for example we just undo that undo that undo that and I want to change that background oops change that image replace this image with something that is related so perhaps this one over here click on select and let's just align everything properly so another thing that you can do is you can also delete a specific section like for example just clicking on delete let's say for example you want to move different sections you can also click on the move up and move down arrow so for example move it down and that's going to move it down let's just move this one down like that and it works like that right so very very simple to use let's just move this one up and let's just move this back up again so I'm going to quickly sort of create the rest of the sections and you can see how easy it is to actually generate and create a layout um by using the hosting a website builder [Music] all right [Music] foreign [Music] for me to just really change the layout of the surfaces and add a portfolio section to my website and what I'm going to show you right now is how to edit the footer section so a really common thing that people have on the footer is a Social Links so for example they can click on ADD element and editing their footer is pretty much the same as editing anywhere else on the website so you can drag any of these elements on there so for example social icons you can drop that under contact us like that and then click on edit social icons so from here you can either delete it or if you want to add a new link you can add a new link for example a YouTube channel URL if you want to edit the URL here click on the settings click on edit and then just paste in your Facebook profile URL click on Save and then you're good to go okay so very very simple here we can click on style and you can change the icon color to white to make sure that's visible if it's a white background then you might change it to a dark color so it's visible and we can close that so another really common thing that a lot of Footers actually have is their sort of navigation Menu Pages so how do you add that in here so all we need to do is we can for example we just drop in a text element or we can just duplicate it from here and just add it so for example click on edit text and then over here we can just delete this one let's just say for example about then we have let's say we have a Services page and let's just say we have a portfolio like that and you can as you can see when we hover over here the paragraph spacing we can click it and we can drag it to reduce it to set it to something like 16 and maybe do the same for that one there like that okay so if you want to add more pages then you can do do that so to link it all you need to do is to select the text and then click on the link icon and then over here we can link to our Pages for example about and if you want to open it in new tab that may be useful if it's an external link for example link to another sort of website then you can select it click on Save and then we are basically linked it okay so very very simple to do just make sure you arrange everything properly on your footer section to change the background of the footer we can click the footer and just click on change background so you can either change the color of it so for example let's change it to maybe like a blue color or any color that you wish and you can also change it to an image so for example you can upload an image and you can have an image background as well and here we can also click on anchor you can also name this as for example foot up if you want to create a button so allowing people to scroll down to your footer section you can do that as well so another thing you can do is also hide the footer so this is useful if you want to hide it on a landing page for example you might just want to have a for example like subscribe to email opt-in on that page you don't want a footer then you can hide it you can also hide it if you want to create Advanced footer you can basically use a section and create a custom footer as well and then basically hide the main footer and then you can use that section as your footer so it's very very flexible and also very easy to edit because it is pretty much the same as editing any section on your website once you've finished creating the layout for each view Pages you do want to check the mobile responsive settings as well so want to make sure we click on the mobile and you want to check your layout so sometimes you will need to rearrange the layout in order for it to be fully 100 responsive and ensuring that it does look good for mobile so sometimes you may need to move things for example this one over here what we do I think this is actually part of meant to be up here so let's just drag it up here like this and let's put this back into the middle like that scrolling down over here okay so we do need to move this one down a little bit down there [Music] okay so that's pretty much good to go so the layout that your range in the mobile settings it's going to only be on mobile devices so if we click back onto the desktop then it's going to retain the same layout but if we click back on mobile it's going to retain the layout that we set in here so one thing that I do want to show you guys is a call now button so for example when someone clicks on the contact us button when we're on the preview page it does scroll down to the contact Section down here but what I want to show you is I want to show you how to add a call now button so this is very useful if you're a local business so people can actually just click on the call now button and that's going to redirect them to the phone screen so to do that what we could do is first of all click the button and we're going to duplicate it and here we're going to have one of the original buttons and I'm going to set the visibility so click on the eye icon and I want to hide it for the mobile okay and one of them is visible for desktop and then this one over here we're gonna set it to be visible only for mobile and hide it for desktop okay let's just stack it over there and click on edit button and then for the button text we can change it to call now and then for the link two we can do web address and then here for the link we can do Tel short for telephone do Colin and then over here we can just type in our phone number so for example 9000 double zero double zero and then over here and click on save so let's click on preview okay so the contact us it's going to scroll down now if we click on the mobile devices let's go over here click on the call now then that's going to redirect directly to people's call screen and all they need to do is just click on the call and start calling so it's very very useful for local businesses and let's click back to the editor let's click back to the desktop and we can click on the contact page I do want to quickly show you the contact form so let's click into the contact form you can click into the edit form and then you want to make sure that you set in your correct email so this is where the email notifications will be sent and you can also click view form submissions so you can see all the submissions here you can also navigate to the settings here and click on form submissions as well and for your contact page you can easily add a map if you want to as well so for example add click on the plus icon drop in a map module like that and all you need to do is click on edit map and then set in your address so once that is all good we can click on Save and head back to our home page so what I want to show you now is the website Styles so this is where you change the colors as well as the text and buttons and the animations universally for your website so once you actually change the colors here it's going to apply to the rest of your website so what I've actually done is I have applied a bit of color to my website to just show you how it basically works so let's just say for example as you can see I've added some pink or it's kind of like a pinkish type of orange to some of the buttons as well as the hover color okay and you're going to see that color here so let's just say for example you know one day I decide I want to change my brand values and I just want to change my colors so perhaps let's just say for example change it to let's say Okay so maybe not this one not this one uh perhaps let's change it to this orange so let's just copy that color code come back over here and instead of going to each individual button and changing the color up here what we can actually do is go over here and click on change and click on select and then what I'm going to do is I'm going to paste in my new color code and then from here just click on accept and then as you can see it has changed that color universally right so you don't have to edit each individual one and that's going to save a ton of time and then you've also got the text so with the text over here you can also change it universally so let's just say for example I want to change it to perhaps this one over here and then all those changes that you've made will be deleted we'll have to click on reset and that's going to change the font for the entire website like that okay so you can also play around with it by clicking on edit Styles so sometimes you will need to edit the heading sizes on the default sizes and things like that over here okay so you can do that and let's go back over here so sometimes you may need to rearrange the text as well because the sizing is a little bit different for the fonts as well so you can click on the buttons as well and you can change the default style of the button so for example you want to make it rounded you can click on this one and it's going to make all the buttons on your website rounded so it's just a very quick way of editing your website you can also add in animations for your different elements on your website universally as well so the next thing I want to show you guys is how to add in your blog post so this is a great way to create content for your website to actually get traffic to your site so people can purchase what you have to offer because you're able to create content that people are searching for on Google or other search engines and if people come to read your blog post then they can see maybe perhaps you offer some other services and they can purchase premium like that it's also one of the best ways to actually get traffic to your website so let's go ahead and click on start blog so on the left hand side you have the set of pre-made blog posts that have been already added so what we're going to do is you can click over here and you can click on edit to start editing your blog post so starting from the top over here we're going to click on change post title and here we're going to enter in our post title so I've generated some content from chat gbt so I'm just going to copy in the title here and here let's just paste that in over here you can put in a post description if you want to this is going to be a post URL generally this is going to be your title and here we can add in an author so for example we could put in your name or perhaps an alias name and you can set in a post date or you can also schedule a post so scrolling back up here you're going to see two tabs the featured image so this is where you can add the featured image for your blog post so that when you're displaying it on your home page it's going to show this image so let's just find a image so perhaps let's just do this one over here click on select and then you can also click on categories and you can also add a category so click on ADD category so for example let's just do travel save it and then click on Save so from here we can also click on edit block header on the setting gear icon here we can also change the visibility of what we want to display so for example if you want to hide the description you can hide it like that you can also click on layouts and you can also change the padding of the area so let's just move it up a little bit maybe 64. and then you can also add in a background I'm just going to keep it as a very simple white background because I think that's just the best way to do it click on close and then scrolling down here you've got your sections again so to edit your blog post it's pretty much the same as editing any other page for example if we want to click into here this is just a placeholder image we can click on change image and replace image I'm just going to select the same one over here select and then we can just close that here we can stretch out the section height a little bit so just to scroll down and perhaps just pull it down slowly like that okay and then here we can start adding in our post content so you can click into this text module and what I'm going to do is just move it in a little bit okay because I don't want my text going from left to right all the way it's just a little bit harder to read so I want to pull it sort of aligned with this image and then you can click on edit text and then from here you can just type in your text or paste in the text that you have written so let's just say for example we have this text over here let's just copy that over and I'm going to paste a match Style just like that and then from here perhaps you could just change and format everything so it looks really good so perhaps let's do heading three maybe a little bit too big uh let's just do heading four okay so that's a little bit better you can definitely play around with the sizing as well and let's say for example you have a image that you want to add in so we could click on the plus and then add in a gallery or let's just add an image like that and we could just drop it in there put in the middle perhaps you can make a little bit bigger if you want to as well and then let's just drag the section height and let's click on change image replace image and select this image over here and then let's just close that okay so that's just the basics of it adding text and adding images you can also add in video or anything in your Element Section and you'll need to basically add more section height if you want to add more content so once you're done you can click on Save and if you want to display your blog post so let's click on the blog page and you're going to notice your blog posts are displaying over here so if you want to display your post on your home page click on your logo over here taking you to the home page let's just scroll down a little bit and let's just say for example you want your blog post to appear perhaps just below my work and click on ADD section and then here just click on blog and then you can select the blog template so click it and that's going to add it in okay so from here you can click on edit block list and you can also change the post per page let's do like three posts per page and perhaps three columns like that and then that's going to display your blog post on your home page so you can also click on the style and basically edits what you want to display and don't want to display so it's hide the description and you can also show perhaps just a specific category as well and you can also play around with the different background colors and images so I want to quickly show you guys how you can add an online store to your website so you can click on the cart icon and click on ADD store and they have some pre-made sort of products which have been added already so what we're going to do first of all is click back over here okay on the cart icon and then click on manage store and then over here we can put in a store name so I'm just going to put it as Hogan's store so you can put it as your name and or your business name click on continue select your store country so I'm just going to do Australia for this example click on continue and over here on the left hand side this is where you add in your products your categories manage your orders as well as appointments and set in discounts and coupon codes here in the store settings so this is where you'll need to enter in your store details and com company information and if you want to receive payments okay so once you've actually signed up for PayPal or stripe then you can actually connect it to your store and then all the payments will be sent to your PayPal account or your strap account and then from there you can send the the money to your local bank account okay so you can go ahead and go through the store settings over here and fill in the details so for the shipping so I'll just quickly show you guys how to set in the shipping so this is going to be your default local country and you can click into it and then from here we can scroll down you can add in the countries here or you can add in different zones later so we can click into the regular shipping option and here we can set an array so for example ten dollars and we can just label this as standard standard shipping and then you can also click on ADD let's say for example you want to add a free shipping method so we could add option and then we could label this as free shipping and then this one is going to be zero dollars and we're going to set in a condition so you can set in a condition here for example the minimum order price is over a hundred and then the customer will get free shipping okay so it's very very simple to set in the shipping zones so you can click on back over here and you can add as many zones as you want so let's click back again and scrolling down over here you've also got the checkout so you can customize your checkout field and what you want to show on the checkout page click back over here on the emails tab you can basically edit the set of content on your email notifications click on back over here this is where you add in your taxes and invoices so let's go ahead and add in a few products so click on products and here are the ones that have been added already so if you want to delete it you can click on the three dots and and just click on delete like that and you can also click into it and edit it straight away so click on edit and we can change it so let's just say for example we're going to sell some ALU minimum luggages okay so here we're going to delete this image just add in our images over here open scrolling down here we can add in a subtitle so this could be a sub brand or it could be let's say for example it could be checked in so for example this luggage over here is for check-in only and then for the ribbon so this is where you could put in like new or you could put in like sale you can also do something like for example top rated so let's just say top top rated like that and then over here you can enter in a product description and you can format it however you want we can scroll down over here here we can set in a price for the product so you could do like 599 and then discount price is maybe 499 you can also add in a SKU and set in the product weight and then you can also track your quantity as well so let's just do 50. scrolling down over here if you have variations you can add the variations here and then for your categories so for your categories you'll have to add it in in the categories page first before assigning it so click on Save let's head to categories and then add category and let's just label this as luggage and assign the products and save so categories is important especially if you have a lot of products that you want to sell click on Save and over here let's go and view our site so let's go back to editor and then by adding the store you've added a store Page up here in your navigation menu and here is your product and you've got your top rated uh sort of ribbon there click into that product so you may need to actually click on preview first to actually click into that product so click on preview and then let's navigate into the product okay and this is what it basically looks like on your product page let's head back to editor and you can also click on edit section so this is where you can change the layout of your product as well as the style so for example you can change the text color you can also edit how many products you want to display edit the add to cart button add to back button so you can enable it like that and then you can also change the color of it as well in terms of the button color and the shape and here we've got the ribbons so for example if you want to change the ribbon color we can change it to maybe something that stands out a little bit more perhaps it's orange like that and then you can also scroll back up okay and once you're done you can just click on close like that okay so let's just say for example you want to add your products to your home page so we can go ahead and go to our home page and let's say you want to add it perhaps below this blog post add section click on online store and then here you can add a product list or a single product like that or you can also do it another way where it's you can add a section and let's add a blank section and we can add an element and then we could add a at a bag element and then click on ADD button and then here we can link that button to a specific product so when people click on that bag then it's going to add that specific product that you set in here to the cart so for example this is the button and this basically just allows you to really customize how you want to design your section so for example if we add let's say an image and change image replace image proc images here upload files let's just say we add the suitcase image select and then this is just going to allow us to really design a customized sort of page like that okay so that's just an example of how you can actually do it I'm not going to go too much into detail here so let's just say uh we are good to go let's just click on Save now I want to show you guys how I can add appointments so let's head back to our store so click on manage store and then what you can do is you can go to appointments so here we can enable our appointments so this is really great if you want to offer for example consultation calls and you can basically over here set your availability click on edit and you can edit the availability so your times and the days you can delete it as well so for example something like that click on Save and once you've set in your availability we can go to our products and we can add another product so you can also add in digital products for example if you want to sell ebooks you can do that if you want to sell services for example Web Design Services you can do that you can also allow donations and here I'm just going to show you guys how to set up the appointment so click on appointment okay so here we could do something like consultation cool and then we could do like a subtitle so maybe like perhaps one on one ribbon I'm not going to add anything description you can add that in and for the price you can set in a price so for example 200 and then here we can assign a category and scroll down so you can set in a location so online meeting via resume and then here we can set in duration so for example 60 Minutes click on Save and then let's head back to our home page click on the store and then here we have the consultation call and we can click into that so let's just click on preview again and then we can click into that and then perhaps once you've finished building your website you can link your url anywhere perhaps if you want to share on social media or if you want to share it on your YouTube videos you can do that and people can add to bag and then they can also set in the and choose the date so for example 20th 12 P.M and book okay so it is disabled right now but it's going to add it to your bag and then they'll need to pay for that amount and then you'll get an order notification and then you can contact your customer so that's just the basics of the online store I'll probably make a separate video on a just a more detailed um sort of tutorial showing you guys how to create a proper online store with it the next thing that I want to show you guys is the SEO settings so what we're going to do is click on the gear icon on the bottom left and then click on SEO so SEO is short for search engine optimization so essentially what we're doing here is optimizing a website so that it can rank on search engines such as Google so here we can put in your business or your brand name so I'm just going to put in my name and click on next step next here and here you can enter in a page description so I just created a short description about the page and this is basically going to help them generate the relevant keywords and SEO titles as well as the meta description so once you're done click on next and here we can select our main keywords that we want to Target for our website or our page here we're going to select website designer freelance web designer perhaps branding services and let's just go ahead website developer maybe let's just remove this one here select that one click on next and then as you can see they have generated a preview of what your home page is going to look like in the search engines so here we can actually edit it depending on what you want so freelance website designer and developer branding Services bespoke packages and instead of that last bit I might just put my name or it could be your business name and then here we've got the meta description so the meta description is basically a short description that is going to be shown on Google or other search engines so if that is good to go then we're going to click on finish if not you can also edit that as well click on finish so that is basically optimized uh for your home page now you will need to actually do this for the rest of your pages that you plan on ranking on Google so you probably do want to do some keyword research and some tools that you can use is for example Uber suggest to find out which keywords are a sort of low competition and something that you want to rank for as well so if we close over here let's just head back over here let's click on SEO and scroll down okay so over here we've optimized for the home page now for some of the other Pages especially your services pages and perhaps your blog post then you want to optimize those so some other Pages such as your about and contacts they're probably less important but you still would recommend you guys to do that as well so you can go through each individual one and that is basically how to do SEO on the hosting a website builder so the next thing that we can do is click on the gear icon and click on the general settings so here is the Fab icon so it's basically this little logo which is on your tabs so this it helps you sort of allow your visitors to identify your website really easily so you can click on update add image I created this image over here again on canva.com and just click on Save changes link preview image so this is where you basically when your visitors share your website it's going to show this image over here so you may want to select something let's just say for example this one over here okay and then scroll down you can also add a cookie Banner you can also add the www dot prefix for your domain when you actually go live so I'm going to keep it just as is for now and then we can click on integration so this is where you can connect your Google analytics Facebook pixels and other apps as well and analytics is where you can track your page views SEO is what I mentioned before your form submissions is basically where your contact form submissions will be listed so here you can check out everything and that's about it so if you do want to export it to Wordpress you can try using this feature over here but I haven't tried it I'm not sure how well it actually works let's click back over here okay so let's click over here so with the logo maker you can check that out in terms of creating a logo directly on hostinger the AI Rider is pretty much the same as the AI text text assist tool that we've used before okay and here we've got the AI heat map so the AI heat map is going to be generated after when you get traffic to your website and it's going to show you basically where is the most popular parts of your page and it's going to give you just an idea of where people are looking and where people are focused on so you can make sort of you know informed decisions in terms of how to layout your page for example you know making the more important words or more important things that you want to tell your customers make that um basically you know front and center for your customer if needed Okay so I'm going to scroll back up over here and you've also got the language selector tool okay so let's quickly walk you through this so here you want to select your starting language which is for example right now is English so here we can click on that and in The Next Step you'll need to add your language so you can click here and we can look for the language that you do want to have a translator website for so let's just say for example this one over here so Japanese and you can click on ADD language okay so right now we are currently editing the Japanese version of our website so what you can do is let's say for example we click in and edit text and then over here we're going to paste in the Japanese right so let's just change the font size a little bit 72 like that konnichiwa Hogan Des here we have the Japanese and what you want to do is you want to translate each of the English words to Japanese okay so it is it is a bit of a manual process but that's going to basically allow you to have this language selector so once you're done make sure to click on Save to save those settings here we can change the language so if you want to edit English make sure you select that if you want to change it in Japanese make sure you select that okay so that is pretty much it in terms of using the website builder and once you have finished building your website you can click on go live and that is going to take your website live so you can share your url with your visitors so let's click over here and we can click on view site okay congratulations so we're pretty much finished with this tutorial there is one last thing that I do want to show you guys and that is how to create a free and professional email in hostinger so for example it's going to be something like hello at yourdomain.com or it could be like sales at yourdomain.com so it's very very simple to do so to create an email you'll need to log into your hostinger hpanel area and then over here on the top click on emails and then here we can click on manage and then we're going to create a free Titan email so we're going to scroll down here and click on select over here we can enter in the name of our email so this could be your personal name or it could be info it could be hello it could be sales in this case I'm just going to do hello and then for the password you want to set in a password and then scroll down here you can enter in a password recovery email so this can be your personal email and then here click on create a new account and then that has been successfully created so this is your email this is your password and access your email you can click on access webmail and what you can do is you can pretty much just bookmark this page onto your browser so then anytime you want to check your email you can log in and then here this is your inbox and if you want to send emails you can click on compose so what I want to also show you guys is how to connect your hostinger email to your Gmail account so that basically you can pretty much send receive and manage all your email from your Gmail inbox so this is going to be similar setup process if you were to set it up with iCloud or any other email provider that is your default so what we're going to do is head back over here to hostinger click on done and then what you want to do is click on emails again redirecting you back here click on manage and we just need to get some details to connect it click on the configure desktop app and then you should see details that look something like this so if you can't find it and you don't see it then you can contact the live chat support and tell them that you want to look for the incoming server and the outgoing server email details and they'll put you in the right direction just in case sometimes the sort of sort of buttons change and locations of those change so you can contact them now I'm going to show you guys how to set it up on Gmail now if you do want to set it up on other email applications then you can click on the need help and you can go through each of these different documentations to help set that up so let's head back over here and what we need to do is we need these details and we need to go to our Gmail account and from here click on the settings icon on the top right click on see all settings click on account and import and then we want to check email from other accounts so let's click on ADD mail account and then this should pop up over here and what you need to do is to basically just paste in the email okay so that's our domain our email is hello at ourdomain.com like that click on next and then import emails click on next and here all we need to do is we need to copy over that email address again so copy that paste it in for our username and the password is the password that we set in earlier when we created the email in Gmail so for the pop server we're going to head back over here and this is going to be the incoming server so copy that and take note of the port so it's 995 minimize that and just paste that in change it to 995 here we're going to always use a secure connection label incoming messages and I'm not going to leave a message on the server which is the original email because I think they do have a limitation on the storage but you can if you need to and we're going to click on add account okay so that has been added now what I want to do is I want to be able to send email as so let's click on next and then here we can change the name or we can keep it click on next and then over here we're going to add in the details so let's head back over here so this is going to be the outgoing so sending emails out copy that detail there and the port is going to be 465. so let's just copy that in paste it in and then we're going to paste in our email again so at paste that in put in the password the port was 465. and then that SSL should be automatically selected click on add account and then there's just one more step so basically we just need to verify that to enable us to send emails so let's head back over here and let's go to our inbox in our Hosting account now sometimes it may already be working already and you can check your email directly here but let's just go back over here and click here and then we're going to activate or authorize it so let's just click on that and confirm okay so that is pretty much done and if we head back to our Gmail account so as you can see it did eventually pull that email in so all the emails will be forwarded directly to your Gmail account and if we click on compose okay let's just do a quick refresh first actually so if we click on compose what you're going to notice is that for the from we can select it from this email or we can use our Gmail account like that okay so you can also set it as a default so let's just say for example go to settings see all settings accounts and import and we can make this as our default email when sending out any emails so you can click on make defaults and when replying to the email I generally set it as reply from the same email address that the message was sent to like that or you can set this as the default like that okay so that is pretty much it in terms of the email setup and I think this concludes my tutorial and hopefully you guys have enjoyed it if you have any questions you can drop it in the comments section below and yeah see you guys in the next video

Channel: Hogan Chua

Views: 79,017

Keywords: hostinger website builder, hostinger website builder tutorial, hostinger website builder review, hostinger website builder vs wordpress, hostinger website builder ecommerce, hostinger website builder ai, hostinger website builder blog, hostinger website builder 2023, hostinger website builder online store, hostinger, hostinger tutorial, how to make a website, how to create a website, how to make an online store on hostinger, best website builder

Id: jhprx-XbN9I

Length: 68min 25sec (4105 seconds)

Published: Tue Jun 20 2023