Hostinger Wordpress Tutorial 2026 - Step by Step

hi there my name is Simon and in this video I will show you how to set up a WordPress website using hostinger in the first part of this video we will set up your hosting or account and we'll make sure to choose the right plan for your WordPress website then we will choose your domain name which could be your name.com or your company name.com whatever you want and once we have that we will install WordPress and we will learn how to use WordPress to build and customize your website step by step we will only be using free tools to build and run our website so the only cost we will have is hosting and don't worry if you have zero experience when it comes to building websites I will take you through the entire process step by step so by the end of watching this video you'll have all the tools and all the knowledge to build a beautiful and fully functional WordPress website let's get started all right so the first step is going to be setting up your hostinger account and to make sure you get the best deal with hostinger I recommend to click on the first link Down Below in the video description this is my personal referral link which will enable you to get an additional 10% off of the already discounted sale price of hostinger by using my promo code so once you click on that link you should get to this page right here and once you're here just click on claim deal and this will take us to the different hosting plans now the plans that I would recommend is either the Premium plan or the business plan now the difference between these two plans is mainly the CDN feature which you get with the business plan which will uh mean that all of the data of your website will be stored on multiple servers across the globe which will increase the average lad time of your website and therefore you're going to have a higher performance so if you want to get the best performance I recommend to get the business plan but if you have a bit of a lower budget the Premium plan is also a great choice so for this video I'm just going to go ahead and choose the business plan and click on add to card then here on the next step we're going to have to choose our payment period which means how many months in advance we're going to pay for our hosting now the more you're going to pay up front the cheaper it's going to be on average so the cheapest option is the 48 months option by choosing this you're going to pay for 4 years of hosting and you're going to pay $3.99 per month on average and after those 4 years it's going to renew at $8.99 per month which is also lower compared to the other options here so for this one you're going to pay for 24 months in advance 449 per month and then it's going to renew at $9.99 per month so if you have the budget and you know that you're going to be using your website for multiple years I recommend to go with the 48 months option but if you have a bit of a lower budget or you don't know how long you're going to be be using your WordPress website then you can also choose one of these other options here just keep in mind that for the one month option you don't get the free domain for the first year and you also have a $5 setup fee so I don't recommend to go with the one month option uh I would go with the 12 month option if you have a bit of a lower budget now I'm going to be using this hostinger account just for this video so I'll just choose the 12 months option and then move on to the next step which is creating your account here just type in your email address and choose a password and then we can move on to the last step which is choosing your payment method but before you do that let's scroll down a bit further and click on have a coupon code here you can enter my coupon code which is madx media and once you click on apply then you can see that you get an additional 10% off of your hosting price so once that's done you can just choose your payment method right here enter your information if you want you can also do that later and just leave these things empty but then just enter your payment information down here and click on submit secure payment great so now our hostinger account is created and after that we get to this onboarding sequence of hostinger now we can all do that ourselves in the dashboard so let's save some time and go straight to our hostinger dashboard by clicking on the hosting or icon here at the top and then click on leave and this takes us into the hosting or dashboard now here there's a few things we want to do to complete our setup so the first thing is to verify our email address the one we have used to sign up for hostinger so just head over to your email inbox and then you should see an email from hostinger called verify your email address just click on this email and then click on verify email and this takes us back into our hosting or dashboard so we can just close the other two tabs up here because we don't need them anymore and the next step is to set up our domain name so the domain name is just the name of your website like for Apple it's called apple.com for Facebook it's facebook.com and we also want to have our own domain name for our website and because we have chosen a hosting plan of 12 months or more we can get a free domain for the first year by clicking on claim domain right here and then here we can look for the domain that we want to get now for example if you're going to create a personal website it could just be your name.com or if creating a website for your company it could be your company name.com in general I recommend to keep it as short and as simple as possible maybe something that's easy to remember now sometimes it's going to be hard to find the domain that you actually want and then you're going to have to be a bit creative something you could also do is change the domain extension here at the end usually I recommend to go with a doom domain that's what people are familiar with so this is something that I would prefer but sometimes maybe when your personal name is already taken you can also choose AET domain but like I said I recommend to go with a do com if you can now my personal website would probably be called medic media.com but I already have that domain so I'm just going to add a one and look if that domain is available able now you can see this one is do is available so we can actually purchase it here or we can get it for free for the first year and in general I recommend not to use any numbers in your domain if that's not part of your brand name but this is just for this video I'm not going to be using this domain any further after this video so I'm just going to be choosing this one right here and click on claim domain and then to finish up the registration process for your new domain you're going to have to enter some contact details of you if you're creating a website for yourself or of your company if you're creating the website for your company so just enter all of your details and move on to the next step once that's done we should get to this step right here so let's click on continue and then we can see an offer for hosting but we already have hosting so we can just ignore this and click on skip I don't need a website so now we're back in the hosting or dashboard and here under domains we can see the domain that we have just registered now to complete the registration process we want to click on our domain and then here we can see that there's a pending verification this means that we also need to verify our email address for the domain as well so go to your email inbox and here you should be able to find an email that says please confirm your contact details for your domain so let's click on it and then here we just click on this link then here we want to confirm all the information by ticking all of these boxes and click on submit once that's done we can close both of these tabs and go back to our dashboard and here let's reload the page and now we can see that the email verification status says verified so now we have successfully registered our domain and we can move on to the next step which is installing WordPress so to do that we're going to click on hosting in the top menu and then you should see your hosting plan right here here we want to click on setup and then here we can save some time and just skip all these questions so let's click on skip at the bottom and here we can choose how we want to build our website so we can use WordPress with AI or we can use the hosting or website builder which is their own product of hostinger and I've already created a video on how to use this website builder so if you're interested in this one I'll leave a link to this video down below in the description but as this video is all about using Wordpress we're going to stick to Wordpress with AI and click on select WordPress at the bottom right and now we have to create our WordPress account this is going to be the account that you'll use to log into the back end of your WordPress website so you can just use the same email that you've used for your hostinger account choose a password and click on next and now hostinger already wants to install a theme to our new WordPress website but for now we just want to install WordPress and we're going to take care of installing a theme later on once we have installed WordPress so for now we're going to skip this by clicking on skip here at the bottom and then the same thing here with the plugins we don't want to have anything pre-installed so we're going to choose no I want to select plugins manually and click on next and here let's just deselect all of these plugins that hostinger wants to install to our WordPress website and click on Skip and here the same thing we don't want any pre-generated content so let's click on Skip and here we can select the domain that we want to use for our WordPress website which again is just a website name and here we can see this is the domain that we have registered before so let's click on it and click on next and here we can choose the server location of where our website files will be stored now in general it's best to keep the server as close to your website visitors as as possible because this will reduce the loading speed of your website so personally I live in Switzerland so the best place for me would probably be friends but I've chosen the business hosting plan which has multiple servers anyway for my website so it probably doesn't make that big of a difference but if you've chosen the Premium plan then I recommend to just choose the Ser location where you live or closest to where you live or where your website visitors will be so if your website visitors are mostly in Europe then choose a server location in Europe if it's in the United States then choose one in the United States so I'm going to choose friends and click on next and now WordPress is being installed so now WordPress has been installed and we are back in the hosting or dashboard for our new website and before we move on and go to the actual WordPress dashboard for our website I want to quickly check if the SSL certificate is installed on our website so let's go to the left side menu and click on security and then let's go to SSL and here we can see that the SSL certificate is installed on our website this is basically the lock icon next to your website URL making all the connections secure so it's very important that this is installed on our website so let's head back over to the dashboard here and then to actually go to Wordpress let's click on admin panel at the top right and this takes us into the WordPress dashboard for our website now this is the back end of your website so you're going to come here a lot while building your website and also in the future whenever you want to change something you're going to come here into the WordPress dashboard so while building and making changes to your website you'll be using your WordPress dashboard a lot so it's very important that you have a very quick and easy way to actually get to your WordPress dashboard we've already looked at one way which is just through your hostinger account right here so when you log into hostinger you can just go to your websites and then here for your website we can just click on admin panel and this will take us to the WordPress dashboard but there's actually a quicker way which is just to open up your browser then type in your website URL for me this is mxm media 1.com and then at the end of the to for slash type in WP hyphen admin and then hit enter and this will take you directly to your WordPress dashboard something that I recommend is to just create a bookmark for your website or for your WordPress dashboard but just dragging this uh website's URL to your favorites bar here and then you can just click on it and this will take it directly to your WordPress dashboard all right so now let's take a quick look at what our website currently looks like the easiest way to go to your website once you're in your dashboard is to come over here to your website name and then click on visit site and this is what our website currently looks like there is just some default content on it that basically comes with every new WordPress website but in this video you're going to learn how to change every part of your website and you'll be able to create something that looks much better than this at the top of our website we can see this WordPress bar here with a few options and this is only available once we're logged into our WordPress admin account we can log out right here and then this bar will disappear and we will just be another visitor of our website but whenever we see this bar when we go to our website we know that we are logged in and that we can make changes to our website we can also just go back to our dashboard by hovering over our website name and then clicking on dashboard all right so before we're going to get started building our website we first want to go through some things in the WordPress dashboard and just delete some things that we don't need because when you create a new WordPress website it usually comes with a lot of pre-installed things like plugins some default pages and posts and we don't really need them and they also kind of slow down our website so we first want to delete them and then start from complete scratch I like to start here in the dashboard area where I like to disable all of these windows which again just makes things look less confusing so let's click on screen options here at the top right and then just uncheck all of these windows and make them disappear like this then let's go to posts and here we can see a default hello world post on our website that we don't need so we can just click on bin to delete this post and then to permanently delete it we have to go to our bin and then we can just click on empty bin so now this post is permanently deleted next we're going to go to pages and here we have a default page a privacy policy page we do the same thing here just click on bin and then go to our bin and click on empty bin to permanently delete this page then let's go to plugins so plugins are essentially just extensions to your website that allow you to have more features just like for your smartphone you can download different apps for your website you can install different plugins so you want to avoid having too many plugins on your website because it kind of decreases your website speed and it makes things overall a lot more complex so later on we're going to install a few plugins that we need to build our website but for now we're just going to delete the ones that we don't need and I'm going to delete these two hostinger plugins these were just installed because because we are using hostinger to host our WordPress website but we don't actually need them I'm going to keep the lightspeed cache plugin because this makes our website faster so we H first have to deactivate the plugins that we want to delete so let's just take both of them here then go to bulk actions and click on deactivate and apply and then you can see the background changed from Blue to White which means that now these two plugins are deactivated and now to permanently delete them we have to select them again then go to bulk actions click on delete and apply confirm and now both of these plugins are deleted and then while we are building our website I recommend to deactivate the light speed cach plugin just because when caching is enabled it takes longer for us to see the changes that we are making and this is kind of annoying so we can just deactivate it and then activate it again once we are done so let's just click on deactivate and now we're also going to go through a few settings that I like to change whenever I create a new WordPress website so let's go to settings and then here we can change the site title And the tagline this is what we'll see at the top of the browser on our website so when we go to our website right here we can see here at the top there will be our side title and next with the tagline and we can change that here So currently it's just our domain but I'm just going to type in madx media for the site title and then the tagline I don't know I'll just say this is a WordPress website and then when we scroll all the way down we can click on Save changes and then when we go back to our website and reload the page we can see that the side title And the tagline has changed so let's close this tab again and then let's also go to the discussion section of the settings here what I like to do is disable this option allow people to submit comments on your posts because if this is enabled then people will be able to just leave comments when you create a new post and usually that ends up in a lot of spam comments which is kind of annoying so I just like to turn it off then let's scroll all the way down and click on Save changes and next we're also going to go to our per links and here we want to change the permal link structure from this default structure right here which looks really bad to the post name structure so whenever you create a new post on your website you're going to have your domain SL the post name so we can just select it here and then what I also like to do is just delete this last forward slash here because I think it looks a bit better without it so once that's done we can just scroll down again and click on Save changes and that's all for the basic settings so let's head back to our dashboard so now let's start setting up our website the first thing we're going to do is install a WordPress theme the theme is going to allow us to build our website using drag and drop so we don't have to do any coding so let's head over to appearance on the left side and then here we can see there are already some themes that came pre-installed these are just default WordPress themes and want to add a different one so let's click on ADD theme at the top and the theme that we're going to use is one of the best and most popular ones which is this one right here the Astra theme and you should be able to see it right here but if you can you can just type it in right here Astra and then it should come up right here then let's click on install and once it's installed let's click on activate now let's close this window right here and this one also so and now we can see we have four themes and we have already activated the new one which is the Astra theme so now we can actually delete the ones that we don't need so let's just click on this go to delete confirm and then do the same thing for the other two themes as well next we're going to be installing a plugin that will make building our website a lot easier it will give us tons of professionally designed templates that we can use and it will also install a page builder called element Mentor which is the most popular page builder on WordPress so let's head over to plugins then let's click on add new plugin and here let's type in starter templates and it should come up right here it's this one so let's click on install and activate and this will automatically open up the interface for this plugin but if it doesn't open up for you you can also just go here from your dashboard so I'm going to exit this and go to my dashboard then I'm going to go to plugins and here we can see the started templates plugin we have just installed and we can just click on C library and this will take us to this interface so once here let's click on build with templates now here we can choose what kind of page builder we want to use the page builder is going to allow us to create our website using drag and drop which makes things a lot easier I recommend to use Elementor because it's the best and most popular one so we're going to choose Elementor and here we can now choose a template for our new website you might be a bit confused because we've already chosen a theme and now we also have to choose a template but there is a bit of a difference so the theme basically gives our website the overall design and code behind the website and these templates here they just give our website a starting point by adding a few pages to our website so especially for for people who are not professional website designers this is very helpful so you can find a lot of free themes in this library but you can also find some premium themes if it says premium here then this theme actually costs something so the best way to find a good template for your website is to just browse these categories right here or you can also come over to the search bar and type in a keyword that is related to your kind of website so for example if you want to create a restaurant website we can just type in restaurant and then look at the templates that come up so here we can see a few premium templates but when we scroll down we can also find a few templates that are free for example this one right here now if you want to further check out how this website would look like we can just click on the template and this will open up a preview of this website so we can just scroll down and see how it is structured we can also click on the links on the website and see how it will look like now you can still change everything here you can change the pictures you can change the text and everything about your website but it makes sense to choose a template where you kind of already like the structure because this means that you'll have less work to do uh to actually customize it to your own website so in this video I'm going to choose a different template so I'm going to go back by hitting the X right here and then I'm going to delete the filter and what I'm going to choose is this one right here the planet Earth template it's a very simple layout that you can use for any type of basic website and at the same time it's a very good one to learn how the page builder works so this is the one that I'm going to choose for this video so let's click on it and here we could already upload our logo but we're going to do that later so I'm just going to scroll down and click on Skip and continue then here we can play around with some different color settings So currently we are on the default colors but we can also click on these different pellets to kind of see how it would look like with different colors now for now I'm going to stick to the default colors later on we're going to see how you can change all the colors to whatever you want but for now we're just going to leave it like this then the same thing with the fonts right here you can try out different fonts but for now let's stick to the default one and click on continue here let's let's just leave everything as it is and click on submit and build my website and now your website is being built and once that's done we can click on view your website so this is what our website looks like now we have changed everything from the default design that we had in the beginning when we installed WordPress to this template that we have chosen here so this is the homepage we can also go to the about page which looks like this and we also have a Services page and a contact page now we can also see these pages in the dashboard so when we come over here to our website name and then open up the dashboard in a new tab then we can go to our pages and here we can see the same pages so we have our homepage we have our about page our conduct page and the services page we can also go to plugins and here we can see that there are two new plugins that were automatically installed when we've set up our website which is our page builder which is Elementor and then we also have this WP form slide plugin which allows us to have a contact form on our contact page so now we have installed everything that we need and we are ready to customize our website and we're going to do that in the Elementor page builder so how do we get into the page builder now there's two ways the first one is to just come over here and go to our website and then here when you're logged into your WordPress account you can see that bar here at the top and now that we have installed Elementor we can see this button that says edit with Elementor so we can just click on it and this will take us to the page builder for our homepage where we can start to make changes another way to go to the page builder is to go through your dashboard so let's go to to pages and then here let's say we want to make some changes to the about page we can just hover over it right here and then you can see it says edit with Elementor we can just click here and that will take us into the page builder for the about page but we want to just work on one page at the same time so we're going to close this tab of the about page and just go back to our homepage now the first thing that is very important to understand is how our pag on our website are structured and we can nicely see that here in the Navigator if you can see that Navigator you can come down here on the bottom left and click on the Navigator icon to make it appear so every page on our website is build using containers and inside of those containers we have elements so here in the Navigator we can click on that first container and the magenta line here will show us where that container is so so here that first container is basically just the entire top section with this landscape background when we click on this second container which is inside of this first one then we can see this gray line which shows us that this part right here is the second container and within that container we have Elements which is the actual content on your website so here we have a spacer which is this top part of the container then we have this heading saying Earth we have another heading which is below this saying endless potential and then we have a button right here at the bottom and the rest of this page is built in the exact same way so when we scroll down we come here to the second container and then when we open it up we can see three more containers which just are these three columns right here we can open them up and then we can see there's an image which is this one we have a heading which is this web design and then we have the text editor which is for this text right here so this is how our pages are structured and I like to use this Navigator whenever I get confused about the hierarchy of all of my containers and my elements but whenever I'm changing something on the side I don't really use it so for now we're just going to close the navigator right here and whenever we want to take it back we can just come down here and click on the Navigator icon to make it appear again whenever you want to move a container on your page you can just hover over the container you want to move and then you want to click and hold on these six dots and then move the container to wherever you want to place it maybe we just put it right here and now the position has changed whenever we need to undo something and go back one step all we have to do is press command Z on our keyboard for Mac or control Z for Windows and as we can see now the container is back in its original position whenever we want to add a new section to our page we have to first start with a new container so to add a new container we can just hover over an existing container and then click on the plus icon here at the top then again click on the plus icon and then we can choose between flexbox and grid I'm going to go more in depth about what the difference is here but for now let's just choose flexbox and then we have some different structures we can start with maybe we want to just do something with two columns so let's choose this structure right here and then we can also decrease or increase the width of these uh columns here and once this layout is looking good we can start adding elements so here on the nine dots we can find all the elements we can add for example we can click hold and drag in our heading then we can go back to our ele ments and maybe also drag in some text below our heading and then maybe we also want to add a button below the text right here and whenever we want to delete one of these elements that we've just added we can simply right click and then click on delete when we want to delete the entire container we have just added we can just hover over it and then click on the X which will delete the entire container something that's also very useful to know is that all of your changes are always saved here on your page builder so let's say we want to go back to a previous version of our website what we can do is come down over here and click on this history icon here we can see all the changes that we have made and we can always go back to a previous version so maybe we want to go back two steps we can just click on this button added step here and this will take us back to steps where we had this new contain container right here but I actually don't need this container so I'm going to delete it again by clicking on the X here at the top and to save any changes we've made and make it go live on our actual website we can come down here and click on update whenever we want to see a preview of our website we can simply just close down this Elemental sidebar by clicking on this arrow and this will give us a full width view or what I like to do is just open it up in a new tab so we can take back that sidebar by clicking on the Arrow once again and then we can come down here and click on this eye icon that says preview changes and this will just open up our website here in a new tab so let's close this tab again and go back to our page builder so now you understand exactly how your pages are structured with containers and elements so now we have to learn how to actually edit and customize all of the elements on on our page so this would be the text on the page the buttons the background images these images right here and just everything we can see on our website so let's start with this element right here we have a heading element saying Earth if you want to make changes to this element all we have to do is click on it here in the preview and then on the left side all of the options for this element will open up and with Elementor we always have three tabs we have the content tab we have the style Tab and we have the advanced tab in the content tab like the name says we can change the content so if you want to change what it says here we can just change it here under title so let's say we just type in WordPress and then it will automatically change right here alternatively we can also just click on the element right here and then highlight it and then just change it directly here in the preview here under link we can also add a link so that when people click on this heading it will go to the link you put in here and then we can also change the HTML tag then we can also go to the second tab which is the style tab here at the top we can change the alignment So currently this heading is aligned in the center but we can also line it here to the left or to the right of the page but obviously it looks best in the center so I'm going to put it back to the center then under text color we can mess around with the color of this text so here by clicking into the color we can basically change it to any color that we like or when we click on this globe icon here we can see all the default colors that are already set up based on the theme that we have chosen so in general I recommend to use these colors right here just to stay congruent within your color theme so I'm going to put it back into this green color and then we also have typography so when we click on this pen icon here we can change everything about the typography so we can change the font family maybe want to use verdana or we want to change the size of this text right here we can also change the weight so here we can make it bold or we can make it a bit less bold we can also change the line height the letter spacing and the word spacing but to kind of illustr illustrate that let's go to a different part of the page let's just scroll down and go to this text element right here so again to edit this we just click on it and then we just go to the style tab go to typography and then we're going to scroll down to these options line height so here we can just play around with the line height and we can see when we increase it the difference or the spacing between each of the lines will increase or decrease then we also have letter spacing which just is the space space between the letters and we have word spacing which is the space between each of the words and once we're done with our changes we can just close the typography settings Again by clicking on the pen icon once again and then we also have the advanced tab right here but we're not going to go too much in depth here right now because this has mainly to do with spacing and alignment and we're going to cover this at a later part in this video but for now this is how you can change everything about your text elements on your page so next let's learn how to edit and style the buttons on your website buttons are the places on your website where you want people to click on to get to the next page so for example here we have a button saying explore but for now we're just going to delete this one and create a new button from scratch so let's right click on this and click on delete and now to add a new button element we're going to go to the nine dots right here and then from here we're going to drag in the button element below this text right here so now what we're going to try to do is to style this button to look exactly like this button right here which is on the official wordpress.org website so let's go back to our page builder and click on our button and this will open up the options for this button again here on the left side and we can see the same tabs as with the other elements we have have the content tab the style Tab and the advaned tab so let's start again with the content tab first of all for the type we're just going to leave it at default and then for the text we want to change it to get WordPress because that's what our other button says here that we tried to emulate and then we always want to add a link to our buttons so that when people click on it it will actually go somewhere so here under link let's say we wanted to go to the contact page so we can just type in contact and then we can see the contact page right here so we click on it and this will take the URL of our contact page to this field then we can also add icons to our button but we don't have any icons here so we're also not going to add it to our button so now let's switch to the style Tab and here let's start with the alignment so we want to have the button in the center so I'm going to click on center right here then let's look at the type typography so here it kind of looks like this is some kind of aerial font so we're going to add that as well so let's go back here then under typography let's click on the pen icon and then we're going to change the family to aial and I think that looks a bit more like the button that we have on the other website then for the size we can change that right here I think this looks good then I think the text is a bit Bolder here so I'm going to change the weight as well to let's say semi bold then we also want to change the spacing between the letters so here the spacing is a bit too big so we're going to go to letter spacing and decrease it to something like this and that's it for the typography so let's click on the pen icon again to close the settings here so now let's look at the colors for this button and we can see that the text is already white which is good but we do want to change the background color of this button to a blue to make it look like this button here so let's go to color and then here click on this icon and then let's go to the blue colors right here and just try to find the color that looks like the one on the other page I think this kind of looks like this color and then when we go back here we can also see that when we hover over this button then the color changes and gets a bit darker and that's called the hover effect when you hover over the button and that's something we can also add so let's go back here and then click out of the Color Picker or actually let's go back in it and then just copy our color code right here this is uh defining the exact color we have here so let's just right click and copy this and then let's change from normal to hover then go to the color settings again then we're going to first paste in the color we already have into this field down here just right click and paste and then we just want to make it a bit darker so we're just going to drag this into the darker area here and now we can see that when we hover over the button the color changes and gets a bit darker as well so now we're done with the colors and we can move on to the overall shape of the button and when we go back here we can see that this button has a bit of a different shape than what we currently have so we want to go back here and then play around with the padding so let's scroll all the way down here in the style Tab and then go to padding I'm first going to unlink these values here so I can set individual values for each of the sides and first we're going to do the left and the right side so let's do the right side let's say let's try 20 pixels or let's try 25 and then I'm going to do the same thing for the left side and then maybe let's try and add 20 to the top or maybe 15 and then the same thing for the bottom 15 let's go back and see yeah I think a bit more maybe 17 would look more like this other button 17 here as well and I think that looks pretty good now we also want to look at the edges so here we can see it has a bit rounded edges here we can see it and we can also add that so let's go back and then here under border radius we can just add the values here and by adding this we can see see that the radius here increases so we can make that uh really intense so we can have kind of this pill looking button but we want to have it to look like exactly like the other button so I think three pixels looks pretty good and that's basically how you can create any type of button on your page so now let's take a look at how to edit the images on our website and first we need to make a distinction between the background images and then just image elements for example here in the top section we have a background image so here we can see the landscape and then in front of the landscape we have these elements this means that this is a background image which just fills out the entire section of this container when we scroll down here we can see that we have some image elements and the background is just a white color so here there's no background image then here when we scroll down to the next container we have a white background and then an image element here in the right column then here we have another background image because here it fills out the container area and we have some text in front of or inside of the container so first we're going to look at how to actually edit the image Elements which we have here so we have three images here and then we have another image element right here now to change the images uh here we can just click on it and then we can see the same uh layout again we have content style and advanced here under choose image we can just click on choose image and then here we have three options we can upload our own image but just dragging and dropping it in here then we also have the media library these are all the images that are already uploaded on your website so here we can just see the images that are used to make this template that we are using and then we also have free images these are just taken from copyright free um image sites and you can just browse here so we can just maybe type in nature and then we should be able to see different images about nature that we can just use for free on our website now if you need some more copyright free images what you can do is just go to Google type in copyright free images and then you can look at the first website so we have pixabay we have unsplash we have pexels free pick we can check out all of these websites I like these first three right here pixel unsplash and pels and then you can just simply download these images for free and use them on your website so for this example I'm going to upload an image that I have prepared before so I'm going to click on upload files and then I'm just going to drag and drop the image into the canvas and once it's uploaded I'm going to click on select and just like this we have this new image inserted into this right column once the image is inserted we can also make some changes by going over to the style Tab and here we can decrease the size for example by playing around with the width of the image with this slider here we can also use the height to change the size then we can also play around with the opacity so we can decrease the opacity or increase it all the way up and then we have also the Border radius which is just the radius at the edges of the image so if you want to have round edges we can just increase the values right here to maybe let's say 20 pixels and this gives us these round edges right here and we can also add a box Shadow by clicking on the pen icon next to box Shadow and this will add this nice shadow around our image we can also increase or decrease the blur change the the direction of the Shadow to make it look exactly how we want it to look and if you want to just delete the shadow again we can just click on this back to default icon and this will get rid of the Shadow so now we know how we can edit all of the image elements on our website next let's take a look at how we can edit the container backgrounds again here for the first container we have an image as a background then for the second container we just have a white background then again a white background and then here we have another image now let's make some changes to the background of this top container first we have to select our container container by clicking on the six dots right here and then we want to go directly to the style settings and here we can see that the background type is currently set to Classic this means that we can either add a simple color as the background or we can add an image which is currently the case for this container now to change that image all you have to do is click on choose image right here and then we we can either choose an image from our media library or we can upload our own image so that's what I'm going to do so I'm going to go to upload files and then I'm just going to drag and drop in an image that I want to use once it's uploaded I'm going to click on select and now the image has changed to the new one and when we scroll down we can see that the position for this image is currently set to Center Center which means that when the image doesn't fit the container perfectly it will just Center the image into the container but if the top part of the image is more important we can also show more of the top by changing this to top Center and then it will just show always the top of the image or we can set it to bottom center if you want to show the bottom of the image more but I usually let leave it at Center Center then we have an attachment effect right here so currently it's set to scroll which means that the image will just scroll down with the page but we can also set it to fix fixed and then the image will stay fixed in place and as you can see here this will kind of give this effect where all the elements scroll up and the image will kind of stay the same in the background but for now I'm going to set it back to scroll then usually you want to leave the display size to cover to make sure the image covers the entire screen and here under background overlay we also get some useful options for example let's say we want to increase or decrease the brightness of the this background here what we can do is just add an overlay color and then play around with the opacity so to make this a bit darker what we can do is just click on the color option here and then just add a black color as a overlay over this image and then here we can just play around with the opacity and make it all the way dark or we can make it a bit brighter by decreasing the opacity of this black color overlay if you want to make the background a bit brighter instead we can just change the color here to a white and this will increase the brightness of the background so this is how we can edit and play around with the background image but we can also just set it to a simple color so when we come back up here in the style Tab and go to background to add a simple color we have to just delete the image that is currently set here so to delete the image we just click on the trash icon and this gives us the default color and we can change that right here we can click on the color and then change it to any type of color that we like for our new background color or we can also go to our default Colors by clicking on this globe icon and then just choose any of the default colors now we could also choose a gradient as a background by changing the background type to gradient and then here we can choose the first color maybe we're just going to choose a white and then for the second color we can choose that here we can maybe just choose a gray and now we have this nice gradient as the background and another very cool thing we can do here is add a video as a background for this we have to change the background type to video and then the easiest way is to just upload your video to YouTube and paste in the video link to this field right here I've just taken an example video that I found and by just pasting in this URL the video will start playing here as a background now maybe you want to have the video start at a specific time then you can just enter the start time right here maybe I'm just going to have it start at 5 seconds and then we'll end the video at 120 seconds and then it will just play as a loop between 5 Second and 12 12 second Tim stamp now whenever you add a video as a background you definitely want to add a fallback image that's because sometimes the video doesn't play for some reason and then you want to have it display a specific image so that there is actually content in the background so to add a fallback image we just click on the plus icon here and then we can just add an image so maybe we'll just add the cloud image that we've used before and click on select and now if for some reason the video doesn't play maybe it gets deleted we just have this image as a background and then down here for background overlay we have the same options as before so we can add an overlay color maybe we want to add a white color and then we can change the opacity to kind of brighten this video up or we can also um just decrease the opacity right here and then the last type of background would be a slideshow so to do that let's go back to the background type here and then let's switch the background type to slideshow and then here we can select our images by clicking on the plus icon here I'm just going to select some of the images I already have in the media library let's just take these four and click on create new Gallery here we can also mess around with the order of the slideshow and then click on insert gallery and now we have these images that will be displayed as a background and then it will just change the images every few seconds and here we can set all the values for duration transition transition duration and so on but for now I'm going to set the background back to its original one which was just an image so I'm going to go back to the classic background type and then I'm going to choose my image here I believe it was this one let's click on select and then I can see there's a wide overlay so let's just delete that by going down to background overlay and then I'll just decrease the opacity to zero and there we go we are back with the original background so now we've learned how to control all of the elements on our page the text the buttons the images the backgrounds and the next thing we need to know is how to control the spacing between each of our elements and to look at that we're actually going to go to a different page on our website so first let's save our changes by clicking on update then let's open up a new tab and go to our website right then here we're going to switch Pages by clicking on the about page and then we're going to go into the page builder for the about Page by clicking on edit with Elementor and now we can just close the other tab so there are a few ways how we can control the spacing between our elements the most frequently used one is margin and padding so let's see how that works let's scroll down on our about page and go to this quote right here now let's select this container and then to control the spacing let's go to the advanced Tab and here we can see under layout we have margin and we have padding by changing these values it allows us to add space to the top right bottom and left of our container but what is the difference between margin and padding to understand the difference I have this illustration right here now here in the center we have our content element in our case this is our container and then in green we have the border around our element now when we add padding it will add space between the content element and the border of our element so inside of the border and if we add margin it will add space outside of the border so here for our container we can see that we have 90 pixels as padding for the top which is this area right here and then we have 100 pixels here for the Bottom now when we add more pixels to the top we can see that the area on the top of the text will increase so we have more padding right here inside of the border now let's put this back to 90 and let's see what happens when we add margin instead now let's first unlink these values so we can control them individually and then let's start adding margin to the top of our container and here we can see that that the spacing will be added outside of our border now let's put this back to zero and then let's say we want to decrease the space between this text element and this button right here so to do this we could either just decrease the space below this text or we could decrease it above this button it looks here like the space has been added to the top of the button right here so I'm going to select the button element and then to control the spacing we're going to go to the advanc tab again and here we can see that there are 25 pixels added to the top of this button now to put this button a bit closer to this text all you have to do is decrease the margin value here so I can just decrease it maybe by let's say 10 pixels and this will put the button closer to this text something to keep in mind is that often times you don't really notice the difference between adding margin or adding padding because you don't really see the border on the actual website for example for this button right here we could also just add padding by unlinking these values and then adding padding to the top right here and as you can see the effect is the same as if you were just to add more margin and that's because we don't see the border on the actual website now for the entire container we do actually notice the difference because the background image here is only inside of of the border so if we add margin then the margin will be added outside so the white background gets larger here but if we add the um padding then we can see that the background image actually gets larger because we add spacing inside of the Border where the image is displayed now another very simple way how we can control the spacing between elements is to Simply add a spacer element so we go to the elements by clicking on the nine dots here and then we look for the spacer which is right here we can just click hold and drag into the area where we want to add space for example between the heading and the text element and then this element would automatically add some space currently it's 50 pixels as you can see here and to increase the space we can just drag the slider to the right or we can drag it to the left to decrease the space in this spacer element then we have one more way how we can control spacing let's scroll all the way up to the top of the page and then select this top container then here we can see that the space between the top and the bottom of this container is actually defined by this minimum height slider so here it set to 600 pixels and we can decrease or increase the minimum height which will also control the spacing between the top and the bottom of this container so now we know how to control our containers our elements and the spacing between those containers and elements what we haven't looked at so far is how to control the layout within a container so to look at some different layouts let's open up a new tab and then just go to our website and here for the first container we can see that we have just a simple one column container with some elements in the center then when we scroll down we can see that we have a three column layout so we have three columns with three images three headlines and then three text elements then when we scroll further down we have a two column layout and then another one column layout now to learn how to set up a layout within a container what we're going to do is try to manually replicate this layout right here where we have three different columns so let's go back to the other tab where we have our page builder open for the about page and here we want to start with a simple container so let's scroll down and click on the plus icon then again on the plus icon and here we can start with either a flex box or a grid now the grid is something that I've recently introduced which has certain advantages when it comes to building grid layouts but we're not going to go too much into this because it's a bit more advanced and we're going to keep things simple and just start with a simple Flex box and then we can see a few structures we can start with these are basically just templates for your layout but we're going to start from complete scratch so we're going to choose this one right here and this gives us our first container next we want to create our three columns inside of this container and to do that we have to add add three more containers so let's click on the nine dots here and then just drag and drop in a new container now to have space for three containers we need to decrease the width of this new container so to do that we first going to go and select it and then here in the layout tab we first want to change the content width from boxed to full width so we're able to decrease the width of the entire container then we want to make sure that the width is set to percentage and then we're just going to decrease the percentage to 33.33 which is going to allow us to have three of these containers next to each other which is then going to fill out the entire width of the page once we have the first one we can simply duplicate it by right clicking and then duplicate and then once more and now we notice that our containers are actually aligned in a vertical manner so they are below each other but we actually need to have them next to each other to get our three columns so to do that we have to first select our main container again the first one we've created and then we want to change the direction here from vertical to horizontal and this will give us our three column layout now to make sure that our layout is always centered we also want to go to layout and then to justify content and click on Center so now that we have our three columns we are ready to start adding content so let's click on the nine dots again and then let's drag in an image and let's also add a heading and then let's also add a text editor element then let's go ahead and choose an image here so select the image element then go to choose image and then I'm going to choose this one here and click on select then we can also change the text here so we just just going to select it and change this to web design and then we're just going to leave this text as it is and now I'm going to show you something very cool which is how you can simply copy and paste the style of different elements on your page so let's say we want to change the style of this heading to the style we have right here all we have to do is right click on this heading element and click copy and then go back to our heading and then right click and paste Style and then it will be in the exact same style as this heading right here and then once we're done with the First Column we can save some time by simply copy and pasting it so let's first delete the other two columns by right clicking and then clicking delete and then right click on this one and click duplicate and then again duplicate and then we can just go ahead and change the content of the other columns so let's say here we want to change it to this image and then maybe we also want to change the heading to content and then one more thing we could do is add some space to the top and bottom of this new container and we already know how to do that so let's just select the container here go to Advanced and then we're going to add some padding so inside of this border and let's just unlink these values and then add 50 pixels to the top of the container and also 50 pixels to the bottom of the container so now you know how to create your own layout from scratch this usually takes a lot of time in the beginning when you don't really have a lot of experience creating your own website so if you want to save some time and make things a bit easier for you one thing you can do is work with templates so let's see how we can import a template to our page let's scroll up and click on the plus icon here once again and now we're not going to start from scratch by clicking here we're actually going to click on this s icon which is visible because we have installed the starter templates plugin and then here we're going to switch from pages to blocks and then here we have all kinds of different layouts that we can simply import with some placeholder content so we can simply browse these templates right here and then once we find something that looks like what we want to create we can simply click on it and then click on import block and this will automatically import this design to our page we can also change to position by just clicking holding and dragging it to wherever we want it to be placed maybe here and then it will be put right here and we can even import entire Pages or parts of pages from other website templates that we have available so here when we come back to the plus icon and then click on the S again here under Pages we can find all kinds of different website templates that we can use for our website so this is actually the template that we are using right now as a starting point for our website but maybe you also want to use part of another template so maybe this one right here so we can click on it and then here we can see all of the pages that are in this website template maybe want to use part of this about page here so let's click on it and then let's click on import template and now when we scroll down we can see that the entire page so all of the containers in this page were imported to our page so maybe we just want to use a specific part of this page maybe we don't want to use this part so we can just click on the X to delete it maybe we also want to get rid of this one as well this one as well and maybe we just want to keep this part right here so we'll leave it and then we just delete everything else now we can also create our own templates that we can then simply reuse on different parts of our website so let's say we want to create a template out of this part here all we have to do is rightclick and then click on save as template then we have to name the template so let's just say design one and then click save and now we can close this window and let's go to another page of our website let's open up a new tab go to our website and then open up the page builder for our homepage and then let's say we want to add this template right here so we can just click on the plus icon then click on the folder and here we can go to my templates and here we can see our template so we can just click on insert and apply and now we can see that part here on our homepage also next let's take a look at how to change the default fonts and colors on our website now we already know how to change the fonts and colors for all of the elements individually on our website we can simply click on it then go to style then go to text color or typography and change all the settings here but because we are using a template there are some default settings in the background and now I'm going to show you how to actually change those default settings and we actually have to do that outside of the Elementor page builder we have to do it on the WordPress level so what we're going to do is first of all we're going to close the other tab here because we don't need it anymore and then we're going to go to our website so we can simply click on the preview button here at the bottom this I icon and this will open up our website and then we want to go to the customizer so let's click on customize right here and from here we want to open up our global settings which is where we can change all of the default settings for typography colors containers buttons and so on let's go to typography first and here we have some presets we can try out so for example we can click on this one right here and it will automatically change all of the text here on our website or maybe we can try out this one and see how that looks but we can also just change that individually to whatever font we like we can just scroll down to base font then the body font is basically the regular text elements here so we can just click on the pen icon and maybe we change that to an aerial click that here and this will automatically change it on the entire website and then the same thing for headings maybe you want to choose Roboto for our headings so we can just type that in select it and it will automatically change on the entire website now let's also take a look at the default colors so let's scroll back up and go back one step and then go to colors and here we can also see that we have some presets so some different color pallets currently we are on style one but we can also try out style two or style three and see how that looks but I'm just going to go back to style one for now and we can also change all of the colors individually right here so let's say we want to change all of the headings we can just go to The Heading color and maybe we want to have red headings for some reason we could just change that here and maybe we also want to change the text right here we can we can maybe make that a bit darker to a dark gray like this and this way we can basically create our own color palette for our website let me just quickly redo the heading color because that red looks terrible and when we scroll a bit further down we also have our side background color so here it's currently set to white but we could also change it to any other color and we can see the default background color will also change so now let's scroll back up and go back one step and then let's also go to buttons here you have the default settings for the text color for the buttons the background color the Border color the font the padding the Border width and the Border radius so you can also change the default buttons for your website here now to make all the changes public for your website you can just click on publish right here and then the changes will apply and once that's done we can close this tab and go back to Elementor to see the changes we've made here as well we have to reload the page but whenever you want to reload make sure you update the settings first by clicking on update here at the bottom and then you can just reload the page and then all of the changes you have made to the default settings will now also be visible right here now when you're creating your website you want to make sure that it also looks good on smaller screen s such as a tablet or a mobile phone because nowadays most people are actually browsing the web using their mobile phone and we want to make sure that our website looks good on the mobile phone device as well so to see what our website looks like on a different device we have to open up the responsive mode of Elementor so to go to the responsive mode we're going to go down to the left side and click on the responsive mode once that's done this bar here at the top will open up where we can change between different screen sizes currently we are on the desktop view but we can also switch to the tablet portrait view right here and we can see how our website looks like on a tablate because we are using a template that is already optimized we can see that it already looks pretty good so there's not much we need to do here but let's go to the mobile ported view as well and here we can see that we have a bit of a problem which is that the WordPress text is a bit too large so it doesn't really fit the screen so we need to change that here in the mobile view to do that we can just click on the text element or the heading element and then go to style and then click on the pen icon next to typography and here we can decrease the size now one thing you can notice is that here where it says size there's a mobile phone icon next to it this means that you can individually change this size of the text without having it affect the other screen sizes so here I can simply decrease the size of this heading to let's say 40 pixels and now when we go back to the tablet View and open up the typography settings we can see here that it's still 60 pixels and when we go back to the desktop view and open up the typography settings we can see it's 83 pixels and this works for all the values where we have this icon next to it so let's go back to the mobile view and then let's say we want to make some more space here between this text and this button so we can just click on the button element then go to the advanced Tab and then here for margin and padding we can also see this phone icon so we know that we can change the spacing independently from the other screen sizes so maybe we just want to add some padding to the top here we can just unlink these values then add let's say 10 pixels and this will add this uh this space here and now when we go back to the tablet view it will be without any padding here at the top another thing we can do is hide specific elements on different screen sizes so let's say we want to just have this element on the desktop view and the tablet view but we don't want to have it shown on the mobile phone view what we can do is Select this element and then go to the Advan tab then scroll down and open up the responsive settings here under visibility we can change the visibility on different screen sizes so for example if you want to hide it on the mobile view we can just switch this to hide and then when we go to the mobile view we can see that this element is grayed out which means that people will not be able to see it on their mobile phone so now let's go back to the desktop view and close the responsive mode now we're going to take a look at how to edit the contact form on our contact page so first we have to navigate to the contact page so let's just go to the URL box type in our website address hit enter and this will take us to our website from here let's click on the contact link and this will take us to our contact page and here when we scroll down we can find this contact form where people can get in contact you by entering their details and then clicking on this send now button so let's see how we can edit this form let's click on edit with Elementor to open up the page builder for our contact page then let's scroll down and go to our form then let's select it and then here on the left side we can see that we can just choose the kind of form that we want to add here to this page but there's not a lot of options that allow us to change these form fields and that's because the form was actually inserted using a plugin called WP forms so we can't make any changes directly here on Elementor so to make changes to this form we have to go and open up the settings for the wp forms plugin so let's take a look at the WordPress dashboard by going to a new tab and then typing in the URL followed by WP hyen admin and this will take us to our WordPress dashboard and then here we can see that under plugins we have the wp form slide plugin which allows us to add a contact form to our contact page and when we have installed this plugin we can also see the wp forms settings right here in the left sidebar when we click on it we can see our contact form right here now to make changes we can simply click on the contact form and start making changes now recently they have also introduced a link directly on Elementor so we can actually go back to our page builder Elementor where we can see our form and then we can see when we select the form element that there's a link saying edit the selected form when we click on this link then the plug-in settings will automatically open up and we can make changes right here so here we can see that the contact form currently asks for the name the phone number the email and then a message maybe we also want to ask for something else so we can check out these fields right here on the left maybe we also want to ask a question with a multiple choice answer we can simply drag and drop in this field to our form and then to edit this field we can just click on it and then we can change the question here so maybe we ask what are you interested in and then the first choice maybe would be web design the second one could be social media management and then the third one could be paid ads then to make this field required we can scroll down and then flip the switch here where it says required and to get rid of any of the fields we can just hover over it and then click on the trash icon and then delete the field from the form so now let's save our changes and then let's check if the form actually works so let's open up a new tab and go to our website then let's navigate to the contact page scroll down and then type in our info for the contact page choose something here and add a random message and click on send now now we can see a confirmation message saying thanks for contacting us we will be in touch with you shortly you can also edit this message by going back to the form settings right here then opening up the settings and here under confirmations you can change the message to whatever you want right here now to check if the form actually worked we want to go to our email inbox and then we should see an email saying new contact form entry so we can just open this up and then we can find all the details that were entered like the name the email address what they were interested in so the multiple choice question and then the message now we can answer directly to the email they have given us right here by just hitting reply and then the email will just be put into the recipient box and we can just start contacting them now by default these form entries will be sent to your WordPress admin email but you can also have them send to a different email by going to the form settings again then under settings going to notifications and then here you can just enter any email that you want the form entries to be sent to great so now let's just close all of these tabs and then here let's close the form settings window and now we're back on the contact page let's click on update to save our changes so now we're going to take a look at how to add a completely new page to our website so to add a new page we want to start in the WordPress dashboard so let's go to the URL box and type in our website URL followed by WP hyen admin hit enter and this will take us to our WordPress dashboard from here let's go to pages and then click on add new page then close this window and let's give our page a name I'm going to just name it projects and then let's publish it by clicking on publish and again publish and now to make changes to our new page we can just click on edit with Elementor and this will take us to the page builder of our new page now to add content to our new page we have a few options we can either just start from scratch hit the plus icon and then start building out our content or we could also just use templates by using the starter templates plugin by clicking here and then here we have all of these templates for websites that we could use or we could also use these blogs and we've already learned how to do that but what you could also do is just use parts of the other pages that you already have on your website so when we go to our website and then maybe we go to the services page and then we probably want to just copy and paste this entire top section because this is kind of the same throughout the entire website so what we can do is just click on the edit with Elementor icon to go into the page builder then right click into this container and then just click copy then go back here to the new page and then just right click again and click on paste to paste this entire top container and then here we can just change the text to say projects and then maybe we also want to import a part of our about page so we can just go to our website again then go to the about page go to edit with Elementor and then maybe we just want to import this layout as well we just right click copy then go back to our new page and right click paste now let's save our changes by clicking on update and then let's preview our new page and here we notice that we have a bit of a problem which is that the header is not transparent like it is on the other pages so to change that we're going to click on edit page here in the top bar then we're going to go to the Astra settings by clicking on this icon and then we're going to scroll down and click on advanced settings and then for transparent header we're going to click on enabled and then close the window and click on update now we can preview our page again and we can see that the header is now also transparent but one thing that we can notice is that this new page project is not yet in the navigation menu here at the top so let's see how we can add that new page to our menu we have to go back to our WordPress dashboard so let's just click click on the WordPress icon right here then let's go to appearance and click on menus and here we can simply add our new page by selecting it right here and clicking add to menu then it will show up here in our main menu and we can also change the position so maybe we want the projects page between the services and the contact page so we can just drag and drop it in here and then we can click on Save menu and to see if that worked we can just open up a new tab and go to our website and now we can see that the projects page is now part of our navigation menu we could also just add this as a submenu under another link maybe under the services link and to do that we can just go back to the menu settings then scroll down here and we can just drag and drop that projects link below another existing link so maybe just below the services as a sub item now again we can just save the changes and go to our website and reload the page and now we can see that the project page is a submenu of the services link and to remove any of these links up here we can also do that in the settings so here in the menu settings we can just go to the link we want to remove for example I don't need this home link so I can just click on the drop down arrow and click on remove and then save the changes and now when I go back to the website and reload the page we can see that the home link is removed so now we know how we can edit our navigation menu here in the header but let's also learn how we can change the rest of the header so how we can edit this logo here how we can change the layout and also how we can change the colors of our navigation menu so to do that we're going to click on customize to open up the customizer and then here we're going to click on the header Builder and then here to change our logo we can just click on side title and logo and then on change logo then we can upload our logo that we want to add and click on select then here we can skip the logo if you want but I like the frame that it already has so I'm going to click on skip cropping and then it should actually change right here but because I have a special redut display with a higher pixel density it will actually take this logo right here the retina logo so we can upload a regular logo and the retina logo and this one right here is usually in a bigger file size with more pixels so then on the displays with a higher pixel density the logo will still be displayed sharply so we can just click on remove here and then by default it will just take this regular logo or you can also upload this logo again with more pixels so now it's a bit too large so I can also just decrease the width of the logo to maybe let's say we just do 35 pixels and then we also want to upload our side icon or sometimes also called favicon and this will be displayed at the top of the browser right here so we can just scroll down and then click on side icon select side icon and then you want to upload a square version of your logo click select skip cropping and now we can see the square version of our logo right here at the top of the browser now let's go back one step and then open up the header Builder once again and here is where we can make changes to the layout of our header so maybe we want to have the menu on the left side and the logo on the right side we can simply drag and drop these elements to wherever we want them to be we could also put the logo here to the center if think that looks better but for now I'm just going to put it back to its original layout and to change the color of our navigation menu we can just come to transparent header and then go to design and then here under menu color we can change the colors So currently the text color is black but I can also change it to a red or to a green basically whatever color I like I'm just going to put it back to black and then we also have this hover color right here which is currently a dark green maybe we want to use a bit of a lighter green like this and then the color changes to this color when we hover over this um this link and when we click on it and the page is active it will also have this color and to save our changes we just click on publish so now we've learned how we can edit our header but let's also learn how we can edit the footer of our website which is all the way here at at the bottom so let's go back one step and then one more step and then let's open up our footer Builder and here just like in the header Builder we can just drag around these elements to different places of the footer to rearrange the layout if you want to and we can also change the content so to change this text here we can just click on this copyright element and then here we can change the text so I would just add something like like copyright in Brackets which will show this copyright icon and then you can add current year in Brackets which will always show the current year so you don't have to manually update it every year and then at the end you can just enter your name or business name I'm just going to add medic media then for the logo as well we can just click on the HTML 1 element and then to change the logo we just click on it here click on the pen icon then click on replace and choose our logo replace and now we can see it's a bit too large so let's click on the pen icon again and then for size we're going to change it from medium to custom size and then change it to 50 * 50 pixels and click on update and to make changes to our footer menu we can just select the menu here and then we can change the layout from inline to step stack or we can change the alignment or we can hide our footer on specific screen sizes right here now to see how our footer looks on different devices we can just click on them down here and see what it looks like on a tablet or we can click on the mobile phone and see what it looks like on a mobile phone so again to save our changes let's click on publish and close the customizer and once we're done building our website we want to go back to to the WordPress dashboard by clicking on this icon here then we want to go to plugins and now we can activate our lights speed cache plugin which will make our website faster so now you know how to create your own website using hosting or and WordPress so if you found this video helpful please give it a thumbs up and subscribe to the channel if you want to see more tutorials like this I look forward to seeing you in the next video thanks for watching