Getting started with the Hostpapa website builder
Tutorial Hosting
Welcome to my first tutorial we are going to learn how to create a website with the website builder right now as you can see this is my dashboard from hostpapa I have the website builder starter I’m going to launch it and the first time you launch that you’re gonna
Get a a gallery of templates that you can choose from if you don’t see that then you need to contact hostpapa and ask them to reset your website builder and of course that’s going to erase everything and that’s when I give you the gallery that you are looking at right you
And this logo here beside mine we need to change that so that’s the first thing I wanna do so we have a little panel here and today we’ll just we’ll just check a few options and we’ll start with style designer and I’m going to add my
Look so here you look for the dollar You doesn’t look very well because the background is black and I didn’t refine the edges so I’m going to make it a bit smaller as you can see it says with right here and you can use this slider to change the size so I’m going to leave
It like this maybe and next thing I’m going to do is notice that you can change it put it on top put it to the right and you can put it at the bottom maybe I’m going to leave it on top okay next thing I’m going to do I’m going to
Change this background color and how do you change this background color you need to know where you are so you can easily just click on it and the menu is going to change so this is the header background I’m going to change it to something slightly lighter
Like disappearing just for you to see how it changes I’m going to accelerate it but okay I’m gonna leave it like that then next thing I’m going to do I’m going to save this it’s with the base version of website builder you can have three pages so let’s go ahead and add
Another page and the name of this page is going to be about me okay the headache it’s going to be the same copy I’m sorry with SATA and there we go we have the above me page which has nothing on it contacts has a predefined contacts
Already we can change that later on but me is pretty much same thing as the home page so let’s go back to the home page okay so what we’re gonna do right now we will try to change this picture that we see in the background so how do we do
That this is not really drag-and-drop so you cannot really open you open up a folder and try and drop your picture here but what you need to pay attention to is every time you hover your mouse over one of the elements here for example you can see this menu added a
Margin same thing happens with the text and with the buttons so here we have the edit button so we’re going to edit and here you can insert either a video or an image so right now we are going to insert an image and we’re to upload it
And I have some stock photos here I just chose random pictures that I liked for this because I’m not really building a beautiful website right now it’s just for you to see are the things that we can do with this so let’s save it and let’s see how it looks good so we
Have our background image here but still we can play around a little bit more with it so say for example I don’t want this picture to be so close to my menu here so our guru margin and the margin you can work with REM or business I
Would suggest working with REM and just for you to if you don’t want to get in too much details about what this is and how it works you can just play around with the values for example I’m going to enter the number three and see what happens okay so now it’s
Not so close to this but we have a white space here what happened let’s try to analyze what’s going on let’s go to you can do this in two ways you can go to the style and designer mode like I did or you can click in this little pan
Right here we’re going to save the settings let’s try to see what this area is oh this is the page background so we need to equal the color same as same as this background see this is the header background and I’m going to copy the
Color here and I’ll go back to this end space choose the color I’m going to edit the background color I’m going to paste the code that I copied there we go that’s it now we have more space here let’s continue working with this picture I’m going to save the settings we’ll
Continue working with this picture so that we can see what other settings we have right now as you can see the picture is studying from the bottom I make the picture start from the upper left so let’s click on this and you see that the moon moved to this corner let’s
Save it and let’s see what happens well if the picture is feeling properly here so we don’t really see much more difference but if it was a bigger picture then we would really see the difference oh actually wasn’t consciousness sorry okay so what else can we do if it is a small picture
Picture I can I give you an example because this is not a small picture you could change the repeat option here from to repeat to the size or vertically or in a grid of course this is not going to be the case because we don’t have any
Empty space so we’ll just leave it as it is and next thing one you don’t notice is that we can play around with the phones inside it so here you can change the colors size and the font family we’re not going to do that as of right
Now it’s going to see that we do have these options but we will work on it in another tutorial so let’s go back we haven’t done any changes so we’re not going to say but something that is really important for you to know I’m going to forget to browse here and if I
If you take a look at this picture there’s a little icon that looks like a little pen that says edit with aviary if I click on it I’m going to get an error okay so see what happens for the moment and this has been deprecated so if you
Want to edit your picture you can do it from outside your website builder and this is an option that you can use pixlr.com so as of the moment you can not edit the picture from the website builder maybe in the future but not for the moment so we’re going to cancel this
Okay and the last thing that we’re going to see in this tutorial is how you can play around with the text so here what you need to notice is that this is a heading 2 you can see that right here okay if we scroll down and if we select
This text you can see that this is also a heading 2 and this one is ahead in five okay so let’s go ahead and change the style for all the headings – and then heading spine so I’m going to go to my designer and I’m going to click you
This is the second header it’s actually called second header and not heading to and this is the color in the background and this is the font so how about if we change the phone to this you see how it changed actually this form in an hour villain one time Okay so it’s this is the font that I was looking for so let’s choose this one you see it’s changing only for the header two or second header as it’s called in the in the designer mode and I can change the text decoration let’s – I’ll underline see it doesn’t look good
But it’s just for you to see how this works if I scroll down and look for the other headings you see that it also has the underline and if instead of the second header I choose for example the fifth header I can also change font and it’s
Going to be applied to all the fifth header if you are a new another one a new one it’s over it’s also going to apply to the new ones that you have so this is the tutorial for today we are going to continue customizing all of
These settings and we will even create a new website from scratch without using any template just for you to see all the all the different options that we have so subscribe so that you can get the notifications for the next video some point to upload this is the first one
And hope you have a good day
This is a basic guide to creating and customizing your website with Website Builder
#started #Hostpapa #website #builder
https://i.ytimg.com/vi/8SIuHDC28Sw/hqdefault.jpg
