Metics Media · คลังวิเคราะห์

The Only WordPress Tutorial You Will Ever Need (For Beginners)

📺 ดูคลิป · 👁️ 418,710 views · 📅 2024 · ⏱️ 93:45 · 🌐 Websites / WordPress / Hosting / Builders

📌 สรุป

คลิปนี้สอนสร้างเว็บไซต์ด้วย WordPress ตั้งแต่ศูนย์ โดยไม่ต้องเขียนโค้ดเลยแม้แต่บรรทัดเดียว ใช้ page builder ชื่อ Elementor บวกกับ template สำเร็จรูปฟรี ครอบคลุมตั้งแต่ซื้อ hosting/domain ไปจนถึงแก้ header/footer/contact form และ responsive บนมือถือ เหมาะสำหรับมือใหม่ที่อยากมีเว็บธุรกิจ portfolio หรือเว็บส่วนตัวในเวลาสั้น

🔑 ประเด็น / ขั้นตอนหลัก

🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง

💡 เอาไปใช้ / ข้อสังเกต


📄 Transcript เต็ม (English, 16,468 คำ)

this is the only WordPress tutorial you will ever need to create any website you want using Wordpress WordPress is the most popular way to build websites it's used by famous Brands such as mercedesbenz Katy Perry Usain Bold And even the White House and by the end of this video you'll be able to build any of these websites yourself using Wordpress maybe you want to build a website for your business a portfolio website a website for a wedding or a health coach website it doesn't matter you'll be able to build all of them and building them will be easy and enjoyable we're going to learn how to create a WordPress website in four simple steps that anyone can follow even if you have zero experience and we will use the most popular page builder called Elementor which is going to allow us to build our website visually using drag and drop and we will never have to write a single line of code I'll also show you how to get free access to hundreds of professionally designed website templates that are fully customizable we will only be using free tools to create our website so the only cost we will have is hosting and I will show you how to get the best hosting for as low as $250 per month now this is a step-by-step tutorial that is designed for you to follow along and learn as quickly as possible Benjamin Frank once said tell me and I forget teach me and I may remember involve me and I learn so if you truly want to learn make sure to be involved and participate in this tutorial I promise you that it will be worth your time and you will be amazed at how easy it is to create a stunning website on WordPress to make it even easier for you to follow along and keep track of your progress I've created a checklist with all the steps and each step all also links to that specific part of the video you can download this checklist in the description down below now this video took a very very long time to make so I'm really happy it's finally here if you're as excited as I am to get started hit that like button down below and let's go all right so like I've mentioned in the intro we're going to learn how to create our WordPress website in four simple steps so these four steps are going to be the main chapters of the video however they are more detailed steps down below in the video description along with the timestamps so if you're looking for a specific part you can just go there and then skip to whatever part you're looking for so the first step is going to be getting hosting and our domain and if you don't know what that means don't worry I'm going to explain it in a minute the second step is going to be installing WordPress because we want to build our website on WordPress and then in the third step we're going to install a theme and then also our our page builder which is going to allow us to build our website visually which makes everything 100 times easier and then in the fourth and final step we're going to learn how to customize every part of our website so let's begin with the first step which is getting hosting and our domain now what is a domain and what is hosting so the domain is simply the name of your website this could be your name.com your business name.com your business business name. whatever you want as long as it's available and then what is hosting so hosting is simply a server that runs 24/7 where all of your website files will be stored so this would be your images your text your design everything and the reason it needs to run 24/7 is because we want our visitors to be able to access our website whenever they want so 24/7 now there are tons of different hosting providers to choose from and they pretty much all do the same thing but some of them do them better than others now I've tried a lot of different hosting providers and the one that I had the best experience with is this one right here called hostinger I've been using hostinger for a very long time and I've also been recommending it for a very long time and I've never had any issues or complaints so I feel really comfortable in recommending it to you in this video as well now if you want to use another hosting provider or you already have one that's totally fine in this case you probably want to skip ahead to the part where we start in the WordPress dashboard because this beginning part will probably not be relevant to you however if you don't have a hosting provider yet I highly recommend to go with hostinger and I'm very confident in saying that you're going to be happy with this one now I am an affiliate for hostinger so I do get a commission when you sign up through my link but I could practically partner with any hosting provider out there there and I chose hostinger because they are the best ones and I was also able to negotiate an exclusive discount for you if you sign up through my link and use my discount code so if you want to take advantage of this discount make sure to go through hostinger.com slmed media1 or simply click on the first link Down Below in the description this will take you to my partner page where you can get that special deal so when you click on that link in the description you will get to my hosting partner page where we can claim our special deal for the hosting now depending on when you watch this video this page might look a bit different because sometimes hostinger is running promotions and they change up the design but as long as you can see my picture and the logo here then you are on the correct page so let's click on claim deal and then it will scroll down to the different hosting plans there is the premium plan the business plan and the cloud startup plan I recommend to either go with the Premium plan or the business plan the main difference between these two plans is that the average loading speed so the performance of your website is going to be higher with the business plan as you can see here there's up to five times higher performance and that's mainly because with the business plan you get the CDN feature which means that your website files are not just going to be stored on one server but it's going to be stored on multiple servers across the globe which means that the average distance to the viewer that visits your website is going to be lower which also increases the loading speed for the average visitor so this is especially useful if you're going to have visitors from all around the world if you're just going to have the visitors from a let's say from the United States then you can also just go with the Premium plan because the average speed will not be that much higher there's also some more features that you get with the business plan like WordPress staging tool object hash and stuff like that I'm not going to go too much in detail you can check out all the features for yourself so let's just choose a plan again if you have a lower budget you can just go with the Premium plan that's going to be fine but if you want to get the best performance just go with the business plan so I'm going to choose the business plan and click on add to card next we're going to have to choose our payment period which means how many months in advance we want to pay for our hosting so the more we pay up front the cheaper it's going to be in the long run so if you're comfortable with paying a bit more up front then the cheapest option is the 48 months option where we pay for four years of hosting in advance if you're not comfortable with paying a bit more upfront and you're okay with paying a bit more on average per month then you can also look at the other plan options which is the 24 or the 12 months option or even the one month option option just keep in mind that for the one month you're going to have to pay a $5 setup fee and there's no free domain included so personally I'd recommend to at least go with the 12 months option I'm going to choose the 48 months option and then move on through the next step where we're going to have to create our account so just here type in your email address and choose a password then let's scroll down to select payment where we can choose our payment method I'm just going to stick with credit card and then let's scroll down and make sure to click on have a coupon code and then here you want to enter the coupon code Medics media and click on apply and this should give you an additional 10% discount on your hosting once that's applied make sure to just type in your payment information and click submit secure payment once the payment is complete we should get to this this page right here where we want to save some time and go straight to the hosting or dashboard so to get to the dashboard let's just go to the hosting logo here at the top and just click on the logo and that will take us directly into the dashboard I'll have to interrupt the video for just 20 seconds because of an important announcement this year I will be making a lot of videos on how to create all kinds of different websites using Wordpress e-commerce websites blogs business websites personal websites and a lot more so make sure you hit that subscribe button down below so you won't miss those videos where I show you how to build complete websites from start to finish so again hit that subscribe button down below and then let's get back to the video and here the first thing we want to do is verify our email address that we have used to sign up for hostinger so make sure to go to your email inbox I already have it open in another tab here and then look look for an email saying verify your email address from hostinger just click on the email and then click on this button verify email and this will take us back to the hosting or dashboard and now the next step is to choose our domain name again the domain is simply the name of our website so here let's click on claim domain and then the first thing I would do is just to change the domain extension to a doom domain this is what people are most familiar with and what I would usually try to go for then here you can just type in the name of your website so this could be your name.com or your business name.com whatever makes sense for the website you want to build for example if I would want to create a website about travel I would type in something like Medics travels and then let's click on check availability and as we can see see this domain is still available so we can get it if we want to and we get it for free for the first year and then after one year we're going to have to pay $16 per year if we want to keep our domain so let's get this domain by clicking on claim domain now to complete the domain registration we're going to have to enter some contact details if you're creating a website for you personally then you can just keep this on personal and enter your personal contact details but if you're building a website for a company or for an organization you can take this option and then click next and then here just fill in the contact details and once that's done let's click on finish registration this takes us to the next page where it says your domain is now being secured so let's click on continue and then here we can ignore this offer because we already have hosting so let's click on skip I don't need a website and this takes us back into the hosting or dashboard where there's one more step to do to complete the domain registration which is confirming our email address once again for our domain so let's go back into our email inbox and then you should see this email right here saying important to verify your contact information for your domain so let's click on it and then scroll down and click on this link right here and once that's done we should see this page that our address has been verified we can now go back to the hosting or dashboard and now when we reload the page we should see that our email verification status is now verified so now we are done with the first step which was getting hosting and our domain now we're going to move on to the second step which is installing WordPress so let's go back to the hosting or dashboard and here let's first of all close all of the other tabs that we have still open we don't need them anymore so then let's click on the hosting or logo to go back to the dashboard and then we should see this under account actions we can see business web hosting setup so here we want to click on setup then click on start now here let's scroll all the way down and click on skip I don't want personalized experience here we want to create a new website so let's select create a new website and then here we can choose between WordPress and the hostinger website builder in this case we want to build a WordPress website so let's click on select here and then here we have to create a WordPress account so I recommend to just use the same email you've also used for signing up to hostinger and then choose choose a password and click on continue then here we get the option to pre-install some plugins to our website we don't want any plugins installed because later on we're going to choose all of the plugins that we need for our website so let's just scroll down and click on skip I will manage plugins later and then here the same thing we're going to choose our theme and template later so let's scroll down and click on skip I don't need a template and once again let's scroll down and click on skip I will write content later and here we have to choose the domain we want to use for our WordPress website and it has already pre-selected the one that we have registered before so let's just choose that and click on select and finally we can see an overview of our setup we can see our domain we can see the CMS the content management system is WordPress and our admin email is right here then we can also see the server location is currently set to the United Kingdom for me because I live in Europe but you can also change the server location if you click on this pen icon you can choose any of these locations right here so if you've chosen the Premium plan where you only get one server location for your website then you want to choose a server that is closest to the visitors of your website so if most V visitors will come from the United States then you want to choose a server location here in the United States if most come from Europe then you can choose one in Europe um but if you have chosen the business plan like I have then you're going to be taking advantage of all of these server locations so it doesn't really matter which one you choose so I'm just going to choose one in the United States and then click on change and then let's click on finish setup and once WordPress has successfully been installed we can go to our WordPress dashboard by clicking on admin panel all right now we are inside of the WordPress dashboard this is the place where we can start creating our website where we can control everything about our website so in the future whenever you want to change something you can always come back here into the WordPress dashboard and make the changes so it's very important that you understand how to actually get here so the easiest way to get to the WordPress dashboard is to Simply open up your browser I'm just going to open up a new tab here and then type in your domain so in my case this would be MX travels.com and then to specifically go to the WordPress admin dashboard you're going to type in for SL WP hyphen admin and then hit enter and as you can see this takes us directly to the WordPress dashboard sometimes if you're not logged in to your WordPress account then you're going to see the login screen and you can just log in with your WordPress account now let's take a look at what our website currently looks like so to get to our website we can either just go to our domain here at the top left and then click on visit site or we can just open up a new tab in our browser and then type in our domain so for me again this would be medx travels.com then hit enter and this takes us to our website as you can see there is some default content on our website and I'm going to show you how to change everything about your site in this tutorial but for now I want you to notice that here at the top we have this WordPress uh bar here this is because we are currently logged in to our WordPress account if you are not logged in you're not going to see this bar but but you're just going to see your website just as any other visitor but whenever we are logged in and you go to your website you can see this bar and from here you can also go to the WordPress press dashboard simply by clicking on this WordPress icon here at the top left and this will take you back to your WordPress dashboard now before we're going to move on to installing a theme and adding all the tools that we need to build our website we first want to delete some things that came pre-installed with WordPress because we want to have a clean start and we don't want to have anything on on WordPress that is just going to clut up our website and our dashboard so first let's just close up these tabs here at the top because we don't need them anymore just start here on your dashboard and then the first thing we want to do is go to posts here on the left side and here we can see there's a default post called hello world and we just want to tick this post and then click on bin to delete this post and then to permanently deleted we just want to go to bin and then click on empty bin Right Here and Now now we have zero posts next we're going to go to pages and here we can see there's a default page called privacy policy and we also going to just click on bin to delete this page then again go to bin and click on empty bin to permanently delete it next we're going to go to plugins so plugins are essentially just extensions to your website that give you additional features similarly like on your smartphone you can download different apps that do different things and here on WordPress for your website you can download different plugins that give you more options with your website but here we want to just delete a few of them that came pre-installed specifically we want to delete the hostinger plugins because we have used the hostinger as a hosting provider they have pre-installed these plugins but we actually don't need them so what we're going to do is just take all of them like this and then go to bulk actions and click on deactivate then click on apply and then we want to delete the first two plugins right here and we're going to actually keep the light speed cache plugin for now we're going to just keep this deactivated but once our WordPress website is finished we're going to activate it again because this is going to make our website faster so for now let's just delete these two so let's just select them and then go to bul actions delete apply and confirm and then finally let's click on dashboard and then here you can see you have all these windows that are just kind of confusing so what I like to do is just delete all of them or just disable them by going to screen options here at the top and then just uh untake all of these windows and this will just kind of clean up the entire dashboard and in the future you can just add different screen options here to your dashboard the ones that are important to you but for now we want want to keep things clean and this makes it a lot easier for us to build our website so now we're going to look at a few important settings so let's come down over here hover over settings and then click on General and then here at the top we can first change our site title and our tagline this is what you're going to see at the top of your browser when you visit your website so here let's just look at it by hovering over visit website opening a new tab and then here this takes us to our website and here at the top of the browser here we will see our website name followed by our tagline so let's just go back and change that so let's just type in madx travels and then here for the tagline let's just say your travel guide and then let's scroll all the way down click on Save changes and now let's go back to our website and reload the page and here we can see this is our website title and then next to it we have the website tagline so let's close this tab again and go back to the dashboard now we're going to move on and go to settings and then click on permal links so this is important if at some point you want to create a blog because here we can see the permalink structure this is the default structure that WordPress uses for your blog posts now this is not so important if you're just going to have a website without a Blog but if at some point you want to publish blog posts then this is important and by default the structure is your domain for SL index PHP then the year the month the day and the post name now we want to simplify this and make this look better by just clicking on post name and then I also like to just delete the for slash at the end and then we have a much cleaner structure saying your domain slost name and just to give you an example how this would look like let's just open up a new tab and then let's go to this blog post of the blog nerd wallet and here you can see the same structure so they have just the domain for SL the blog uh post title and that's the same thing we have now as well so let's just close this tab again and to save the changes we want to scroll down and click on Save changes so now we are finished with the Second Step which was installing and setting up WordPress and we're going to move on to the third step which is installing a theme and also the page builder this is going to make building our website a lot easier and it's going to allow us to build our website simply using drag and drop let's start by installing our theme so let's come over here to appearance and click on themes and here as we can see there's already a few themes that come pre-installed and the one that is currently activated is the 2024 theme we actually want to use a better one so let's click on add new theme at the top and this takes us into the theme Library where you can see there's over 6,000 themes to choose from and what we're going to do is we're going to choose one of the best and most popular themes there is which is this one right here called the Astra theme if you can see it right away here under the popular tab you can also type it in here just type in Astra and then it should just come up here as you can see this one we can click on install and then click on activate and now we have the Astra theme installed and also activated so now we can also delete the other themes because we don't need them let's just go to this theme Here click on delete and confirm and do the same thing with the other two themes that came pre-installed so now we only have one theme installed and we also want to make sure to enable auto updates for this theme so here click on enable auto updates then let's just close these windows here at the top just keep things as clean as possible so now because we have installed this theme we're able to build and design our website without any coding we can simply use a drag and drop Builder and build our website very very easily the next thing we're going to do is install a plugin that is going to make building our website even easier and faster because it's going to give us some pre-made templates which is a great starting point for our website so let's head over to plugins then let's click on ADD add new plug-in and here let's type in starter templates and it's just this one right here you can see there's over 1 million active installations and a very good review so let's click on install now and click activate then the plugin will be opened up automatically now if you don't see this screen when you activate the starter templates plugin you can just go from your dashboard to plugins install plugins and then here we can see the plugin we have installed and you can just click on see library and this will take you to this screen let's click on build with templates here we have to select our page builder this is what is going to allow us to build our website using drag and drop we're going to use Elementor because it's the best and most popular one so let's choose Elementor and now we can choose a template for our WordPress website now you might be a bit confused because we've already chosen a theme for our website and now we also have to choose a template so there's a bit of a difference here the theme just gives us the basic design of the entire website how it works and the code behind it and the template is just going to give us a few basic pages so we have a starting point so you can just look at these templates just as some placeholder content which is going to make it easier for you especially if if you're not a professional designer to create your website so here you can see many different types of templates for all kinds of different websites for example if you are a fitness trainer and you want to create a website for your Fitness coach business you can just type in let's say fitness trainer and then see if they have any templates for a fitness trainer for example this one now there are some pay templates here when you can see premium this means that these aren't free but this for example is a free template and to see how this website would look like you can just click on the template and then it will open up right here and you can just scroll uh the website you can look at everything you can also click on different links on the website and just see if you kind of like the overall General design now you can change everything you can change the font the text the images the colors and I'm going to show you how to change everything about about your website but you want to choose something that is a good starting point for the type of website you want to create so let's close this template again and what I'm going to do in this tutorial is I'm going to choose just one of the most popular templates which is this one right here the Loft nature templates it it's a very basic template that you can pretty much use for any website and if you want to have an easy time to follow along with this tutorial I'd recommend to also choose this one one um and then learn all the the tools that you need to create any website and then once you have those skills then you can choose another template and create the exact website you want but um you can also choose another template and just follow along this way because everything I'm going to show you is also going to work with any of the templates that you choose so I'm just going to choose this one right here love nature and this will take us into the preview mode again where we can just click on on different pages and see how they look like um but for now we just want to move on and we're not going to upload any logo here for now we're going to look at how to do this later in the actual editor but let's just click on Skip and continue here you could already change the default colors so you could just change it to this color or this color or maybe this one um I'm just going to leave it at the default color and then later on I'm going to show you how to to change all the colors anyway and then you also the same thing for the fonts you could change the fonts like this but I'm just going to stick to the default ones and click on continue then here let's just leave everything as it is and click on submit and build my website once that's done we're going to get to this screen where we're going to click on view your website and this just takes us to our website as we can see here at the top and this is what it looks like we have a homepage we also have an about page we have a Services page and we have a contact page and we can also see those pages in The WordPress dashboard so we can go to the dashboard by just clicking on the website name here at the top and then what I like to do is whenever I see these windows that I don't need in the dashboard I just cross them out or I go to screen options and just untick all of the options here so I keep everything clean then let's go to pages and now here we can see we have the about page the contact page the homepage and the services page which were added because we have installed the template and we can also go to plugins and here we can see that we have a new plugin that was also installed with the template which is the wp forms plugin this plugin allows us to have a contact form on our website which in our case is just on the contact page great so now we are already done with the third step of creating our WordPress website which is installing a theme and the Page Builder and also our template the next step is going to be to learn how to customize every aspect of our new WordPress website so let's get into it so to customize the pages of our website we need to go into the page builder which is called Elementor so there are two ways how we can get into our page builder the first one is to Simply go to pages and then here let's say we want to edit our homepage we can just simply hover over our homepage and then click on edit with Elementor and this takes us into Elementor our page builder for our homepage now I'm going to also show you another way how you can get into the page builder which is just by going to your website first so let's just open up a new tab and type in our website name for me this is madx travels.com hit enter and this will take us to our website now in this case for example let's say we want to make some changes on our about page so let's just navigate to our about page here using the menu and now to get into the page builder we can just click on edit with Elementor we can always see this bar here at the top because we are logged in into WordPress and when we click on edit with Elementor then the page builder for the about page will open up so let's close this tab again and go back to our homepage so the first thing that is very important to understand is the structure of your pages and we can nicely see the structure here on this Navigator window so every page is basically structured using containers and elements so here in the Navigator we can click on the first container and then the container will be selected and we can see the selection here by this magenta line around the container and when we click on the drop- down for this first container we can see there is another container within the first one and when we click again on the drop- down arrow we can see a few elements within this container so let's click on this heading and then we can see this is this text right here we all love and then the second text is the second heading and then we have some more text a from the text editor element and then we also have a button so within the container there are elements and when we go to the second container right here then we can see it's this second one here and within the container there's another one and then within this one there's another heading which is our services there is a divider and then there's another container which holds three more containers so this is the three columns right here we can click on the first one and then we we see this First Column the second one is this one and the third one is this one so whatever you create on your page you're going to have to just add containers and within the containers you're going to add elements so this Navigator is quite handy when it comes to seeing the structure of your page but when it comes to customizing your website it's actually kind of in the way so I like to close this Navigator whenever you want to take it back you can just go to the bottom left and click on Navigator and then it will open up the Navigator once again whenever you want to change the position of a container all you have to do is hover over the container you want to move for example this container here then click and hold on the six dots and then you can just scroll to wherever you want to move the container to for example right here then let go and the entire container is moved to this position whenever you make a mistake or you just want to undo something all you need to do is press command Z on your keyboard for Mac or contrl Z for Windows and this will undo the Last Action so as you can see here the container is now back in its original position whenever we want to delete any container all you have to do is again just hover over the container and then click on the X icon and this will delete the entire container when we want to add a new container all we have to do is click on the plus icon and then again on the plus and here we can choose the structure for our container so we can have different columns we can have different layouts in this case let's just go for a one column container and this will add the container here in between these two containers and now we can also add elements to this container so to go to the elements we just go to the nine dots here at the top left and then when we scroll down we can see different types of elements we can add for example we can add a heading simply by clicking holding and then dragging it into this container and now we have a heading in this container we can also Al go back to the elements and maybe drag in an image just below the heading and then maybe below the image we're also going to drag in a button so we can just drag in a button below the image right here and now to undo everything we just did we can either just again press command Z or control Z on Windows or we can also take advantage of the history feature so when we go to the bottom left and click on the history icon on then we can see all the different states of our website based on what we changed and we can always go back in time and load up a previous version of our website so for example we can just go all the way to the beginning by clicking here and this will reactivate the first state of how the website was before we made any changes so this is very handy because nothing that you ever do is really destroying your website you can always just go back and load up a previous version so you can always experiment try out different things and you can always come back and to save the changes and make everything go live on your actual website we want to go and click on update here on the bottom left now whenever you want to get a preview of what our website currently looks like there are two ways the first one is to just click on this Arrow right here which will fold down the menu and give us a pre preview of our website or we can open this up again and then here on the bottom you can see this eye icon when you click on it then the website will open up in a new tab and you can also just navigate through all the pages and see what it looks like let's close this tab again so now we understand how each of the pages are structured with containers and elements next let's take a look at how to edit each of the individual elements on our page so this would be our text elements our buttons our images and just everything we can see here on our page let's start with the text elements let's say we want to change this text that currently says nature all we have to do is just click on the text element and then here on the left side we can see the options we have with this element and there are three tabs there is the content tab there is the style Tab and then we have the advanced tab here in the content tab we can change the content so to change the text we just go into the title and then change it to whatever we wanted to say let's just type in WordPress or we can also just click on the text directly here in the preview highlight it and then again we can just change the text right here then we have some more options like we can put a link to the text so when people click on it it will go to a specific link we can change the size we can change the HTML tag and we can change the alignment so if you want to change the alignment to the left side we just click on left and it will change or we can put it back in the center next let's go to the style tab here we can change everything that has to do with the style of the text for example the text color is currently set to White and when we click on the color here we can just choose any color that we want and the text will change to this color and then we can also see this custom icon here and when we click on it we can see a list of different colors that are already set up for US based on the template that we have chosen so the template has already some default colors and we can just click on them and then the text will change to this default color in general I do recommend to stick to the default colors when it comes to to editing your website just because it's a lot more professional if you have a congruent color scheme across your website later I'm also going to show you how to change the default colors that you can see here for your website so you have full control next we have the typography options here when we click on the pen icon we have a bunch of different options so first of all we have the font family we can change that here as well so if you wanted to have verdana for example as the font we can change that as well then we have the size so we can just drag this to the left and then the size will decrease we can drag it to the right and it will increase then we have the weight so here we can just change how bold the text will be we can make it a bit Bolder or a bit less bold like this then here at the bottom we have the line height the letter spacing and the word spacing to see what these do let's go to a different text element so let's scroll down and go go to this quote right here again let's just select the text element go to the style Tab and then go to typography and then here let's scroll down to line height when we change the line height we can just see that the difference the space between each of the lines changes the letter spacing obviously is the spacing between each of the letters and then we have the word spacing as well which changes the space between each of the words so those are the main ways how you're going to style your text elements let's close the typography settings by clicking on the pen icon once again and then when we scroll up we can see that there's one more tab we haven't covered yet which is the advanced tab we're not going to cover it right now because this has mainly to do with spacing and Alignment between each of the elements and we're going to have a dedicated part about this topic later in the tutorial so so next let's take a look at how to customize buttons on our website when we scroll all the way to the top of this homepage we can see that we already have a button here and we could just click on it and then edit everything here but this would be a bit too easy and boring so what we're going to do is just click right click on the element and then click on delete and we're going to start with a completely new fresh button and what we're going to do is we're going to try to design it just like the button that we can see here on the Netflix homepage so first of all let's go back to Elementor and drag in a new button element we can click on the nine dots here at the top left which will open up all of the elements here and then let's look for the button element we have it right here so let's click hold and drag it just below this paragraph element here and then the first thing you want to do is align this button to this the center of the page so when we select it and then here we are in the content tab under alignment we can click on Center and this will Center the button in the canvas now let's go back to the Netflix website and take a look at this button the content says get started and then it has this icon so let's try to do this on our website as well let's go back and then here under content we're first going to change the text so we're going to say get started just like on the Netflix page and now we also want this icon here at the end and here under icon we can actually add something like this so we can either just upload our own file that we want to add as an icon or we can click on the icon Library here and then choose one that would be similar so I'm going to type in Arrow and it looks like there's not the exact same icon like they have on Netflix but let's just take this one so we're going to click on insert and then we can see the arrow is in front of the text we want it to be here at the end so under icon position we're going to change it from before to after and then when we look here on Netflix we can see there's a bit of a gap between the text and the icon so we can also do that by increasing the icon spacing here at the bottom and just putting it maybe like this now before we move on to the styling of this button let's also link it to somewhere whenever you add a button you want to make sure that the button actually goes somewhere so here under link we can either enter a URL where the button should go to or we can add a specific page on our website so let's say we want to send people to our contact page we can just type in contact and then we can see here the contact page page we just click on it and then it will insert the link of our contact page now let's move on to the style tab when we take another look at the Netflix button we can see that the text size is a bit larger and it's also a bit Bolder than what we currently have so let's go back here and then here under typography let's click on the pen icon and then first let's increase the size by just dragging the slider to the right and and I think this looks right then under weight we're going to change it from default to let's try semi bold yeah that looks a bit more like the Netflix button so let's close the typography settings and now we also need to change the colors so the text color is white so we can also do that here under text color we're going to change that to White and the button background is red so the background type should remain on classic and under color we're going to change it to a red like this and then when we go back we can see that when we hover over the button the color gets a bit darker and this would be the hover effect so we can also do that here when we go back and change from normal to hover and then we change the color again and choose a bit of a darker red maybe like this and now when we hover over the button we can see the color turning a bit darker we could also add something like an animation here under hover animation for example you can do a shrink animation and when you hover over it the button will shrink down a bit but let's just remove this again because Netflix doesn't have it either now we can also take a look at the edges of this button so we can see they are a bit rounded and we kind of already have that here but if you want to change that we could just go to border radius and then type in let's say 15 pixels and this would give us a bit of a more rounded edge here and to have it more like the Netflix button this would be more like probably three or four or even five maybe so let's just keep it like that then we can also see that the Netflix button is not as wide as ours and the the spacing between the text and the button is a bit smaller so we can also change that here under padding when we go all the way down to padding we can first unlink the values here and then now we can see we have a zero padding here around the text so for the top maybe let's do 15 pixels and then for the bottom the same and then for the right let's do 25 and then 25 five for the left side as well and there we go now we have a button that looks pretty similar to the one that we can see on the Netflix homepage and with the tools that you have just learned you can pretty much copy the design of any button that you can find on any website that you like next let's learn how to add and change the images on our website so when we scroll down we can find some images here we can find another image here and then there's one more here and we can change all of those images to whatever we want so let's say we want to change this image all we have to do is click on it to select the image element and then here under the content tab we can see the current image that is displayed right now and when we click on choose image we can either choose another image that is currently in our media library these are all the images that were imported from the template that we have chosen or we can upload our own file so when we click on upload files you can just drag in your own image and add this one to the website or we can also click on free images and then find any copyright free images that we can add for example when we type in nature then all of the images that are related to Nature will come up and we can just choose any of them now if you need some more websites where you can find copyright free images all you got to do is go to Google type in copyright free images hit enter and then you can find some free websites like unsplash pixabay pexels and so on all of these three websites are very good and you're going to find tons of copyright free images on those websites so let's go back to Elementor and let's for example upload our own image so let's click on upload files and then I've just downloaded an example image right here I'm just going to drag and drop it into the field and once it's uploaded I can just click on select and the image will be imported to my website then when we go to the style tab of this image element we can change the size of the image by increasing the slider here for the width of the image or we can do the same thing for the height then we have opacity so we can increase the opacity and decrease it if you want to have it a bit more see-through and then we also have the Border radius if you want to have round edges here we can just increase the Border radius and then this will increase the radius of the edges we can also add a shadow behind the image so when we go to box Shadow and click on the pen icon this will add a shadow and we can also change the different values here we can add or decrease uh the blue of the Shadow we can make it more horizontal more vertical basically however we like it and if we decide that we don't want any Shadow we can just click on this back to default icon and the shadow will be deleted so now you know how to change and edit all of the images on your website but you still might be asking yourself how to actually change this image here at the top of the page and this is actually not an image element this is the background of this container for each container we can set a background for example this one has just a white background then the next container has a lighter gray background then here another white background and then here for this container we have another image as a background so how do we change the backgrounds of our containers so let's say we want to change the background of this container all we have to do is Select it by clicking on the six dots and then we want to go to the style Tab and here we can see the image that is currently set as the background we can click on choose image and then let's click on upload files and here I'm just going to drag and drop in a picture that I've downloaded then click on select and now we have this new image as the background for this container if the image is not positioned perfectly what we can do is just come over here to position which is currently set to Center Center we can change this to let's say top Center and then it will show more of the top of the image we can also set it to bottom center and then it will show more of the bottom so you can play around with this to see what looks best I'm going to set it back to Center Center and then we also have some more options here so under attachment you can change it to fixed and this is an effect where when you scroll down the page the image will stay in the same place and the elements will just scroll up so if you like that effect then you can set this here I'm going to set it back to scroll and then you usually want to set the display size to cover so the image covers the entire container now if we go to background overlay we can see that we have a black background overlay over our background image and the opacity of this overlay is set to 0.2 what this does it just darkens up the background image so we have a higher contrast between the elements and the background so it's a bit easier to read everything here and to see the buttons If you want to make this image even darker what we can do is just increase the background overlay opacity like this and then the background will become darker what we could also do is we can change the color here to a white and this will brighten up the background so if you have like dark elements then this would also make more sense to increase the contrast and in the same way we can also change the opacity so to make it even brighter we can just increase the slider here or we can make it darker now I'm going to just put it back to black because I liked it better the way it was before now let's go back to the background Tab and look at some more options how we can edit the background so for example if we just want to add a simple color as the background what we need to do is first of all delete the background image by clicking on the trash icon here and then we already get a color and we can change that color by choosing it here we just click on the color and then we can basically choose any color that we like as the background we can also add a a gradient by changing the background type to a gradient and then we can set two colors so the first color is this one here let's set it to a light gray and then the second color we can set it here we can maybe set it to a dark gray and this will give us a nice gradient for the background another very cool thing you can do is add a video as the background so we can change the background type to video and then the easiest way is to Simply upload your video to YouTube or use one that already exists and then paste in the video link into this field I've just pasted in a example video that I found on YouTube and then we can also set the start time of the video so we can say let's start it at 15 seconds and let's end it at let's say 60 seconds and then the video will just play as a loop here in the background now when you're using a video you want to make sure that you also set a background fallback image in case the video doesn't play for some reason so here we can just click on choose image and let's just use this one again and click select and now if at some point the video gets deleted or it just doesn't play then this image will be displayed and then we also have the same options like we have for the image with the background overlay we have a black overlay right now and we can increase or decrease the opacity to kind of increase the contrast between the background and the elements so now we've learned how to change and edit all of the elements on our page and next we need to learn how to control the spacing between each of the elements and to do this we're going to go to a different page on our website so let's save the changes we've made by clicking on update and then let's open open up a new tab type in our URL to go to our website and here let's navigate to the about page and to edit this page we need to open up our page builder Elementor so let's click on edit with Elementor and then let's close the other tab so there are a few ways how you can control the spacing between elements the most frequently used one is margin and padding so let's learn how that works on the about page let's scroll down to this quote and then let's look at the spacing of this container so let's select it and now let's go to the advanced tab here under layout we can see our margin and our padding values by increasing these values we can add space in pixels to the top the right the bottom and the left of our elements but what is the difference between margin and padding I've opened up an image here which illustrates what the difference is so here we have the content in the middle we have the Border here in blue and then we can see that the padding is adding space inside of the border and margin as adding space outside of the border so let's see how that works currently we have 50 pixels as padding at the top of this container and then 50 pixels at the bottom now when we increase the space at the top we can see that it slowly increases the space at the top here on this container at the inside of the border now let's see how this would look like if you would add it as margin which is outside of the Border let's just put this to zero and then let's go to margin and first unlink the values so we can control them individually and then let's start adding pixels to the top as margin and here we can see that the space outside of the border is increasing let's go back to the original values typing in zero for margin and 50 for padding so for any element on our page we can control the spacing using margin and padding let's say we want to add some more space to the bottom of this quote all we have to do is select the element and then go to Advanced and then we can either add some margin to the bottom or we can add some padding now in this case because we don't really see the Border it doesn't really matter if we add margin or padding so we can just increase the padding values from 20 to let's say 50 to give this text some more space at the bottom now let's say we want to decrease the space on the left and the right of this text all you have to do is go to the padding values and for the left side we're going to decrease it from 80 pixels to let's say 30 pixels and on the right side the same thing from 80 pixels to 30 pixels another very simple way how we can control spacing between elements is to Simply use a spacer element so let's say we want to add some space between this icon and this text all we have to do is go to our elements then scroll down and then click drag and drop this spacer between these two elements and then here we have this slider where we can add or remove pixels as space between these two elements there's one more way how we can control spacing let's scroll all the way up to the top of the about page and then let's select this container here we can see that the spacing inside of this container is controlled by this minimum height slider so here we can Define how much space we want to give inside of this container we can increase the values or we can decrease it and Define how many pixels the height of this container should be so up until now in this tutorial we've mainly focused on how to edit elements and how to control this spacing in between those elements what we haven't covered so far is how to control the layout within a container to see some different layouts let's open up a new tab then enter our URL and hit enter this will take us to our website and here let's take a look at some different types of layouts here the top container is just a one column container where we have some elements in the center then when we scroll down to our services we can see a different layout so here we have three different columns then when we scroll down we have another one column container with some content in the center then here we have a two column layout with some text here on the left side and an image on the right side then when we scroll further down we have another just one column simple layout with some content in the center now to learn how we can control a layout within a container what we're going to do is we're going to try to replicate this type of layout where we have three different columns so to do this we're going to go back to the other Tab and here we're going to create a new container so to create a new container we're going to click on the plus icon here and then again on the plus icon and here Elementor gives us some default layouts that we could start with but we actually want to start from scratch so I'm just going to choose this one and now to structure the content with in this container into three columns we need three more containers so to get these we're going to go to our elements and then under layout we're just going to drag in another container and now we have container within container now to decrease the size of this container let's just drag it from the border to let's say 28% we need two more of this container so we can just copy and paste it by right clicking then clicking copy and then again right click within the larger container and then paste then do the same thing again paste and now we can see that these containers are below each other and not next to each other to make them next to each other and create three columns we need to change the direction of this main container so let's select it and then under layout direction we want to change it from vertical to horizontal and now we can see that these three containers are next to each other next we want to put these containers to the center of the page so let's come over to layout and then under justify cont content we want to click on Center so now that we have the layout that we were looking for we can start adding elements to our columns so let's come over here to elements and start with dragging in an image then also let's add heading and also add a text editor below the heading now let's also add some content so let's select the image element and then click choose image then I'm just going to choose this one right here and click select then let's change the heading text to let's say product one and we'll just leave this text the way it is and now to save some time when styling your elements what you can do is simply look for an element that already has the style you're looking for for example let's say we want to heading to be in this style what we can do is just right click on this element then click copy then go up to our new element right click and then click on paste style and we can do the same thing with this text so let's scroll down let's copy the style of this one and go back here and click paste style and now we want to have the same thing for the other two columns as well but we don't actually need to do the same thing again we can just copy this column so let's first right click on this column and click on delete and then do the same thing again for the third column and now we're going to right click on this column click on copy and then right click into this container and click paste and then once again paste so this gives us the nice three column layout we were looking for and now we can go ahead and replace the content so we can choose another image for the second column and then for the third column we can also choose another image and obviously we can also change the text down here and to finish up our new design I would also add some space to the top and bottom of this container and we already know how to do that so we can just click on this container then go to the Advan tab then I'm going to add some padding and I'm going to unlink the values first and then I'm going to just add 50 pixels to the top of the container and also 50 pixels to to the bottom so we have some spacing here at the bottom and also here at the top so building your own layout from scratch obviously take some more time compared to Simply using a template because we have to build everything from scratch and we have to manage alignment spacing and everything so now I want to show you how you can also just import pre-made layouts from the templates that we have available so to import a layout template we're going to Simply scroll up and then click on the plus icon once once again and now because we have installed the starter templates plugin we see this s icon let's click on it and then switch from pages to blocks and here we can find all kinds of different layouts we can start with so let's for example choose this one and then click on import block and now we have this new container with all of this placeholder content that we can change simply by clicking on each of the elements and we can also position this container wherever we want on our page so we can just click on the six dots hold and drag it to whatever position we want to place it so let's maybe put it right here and one more thing you can do which can save you a lot of time is importing entire Pages or parts of pages from other templates that we have available so let's come back here to the plus icon and then click on the S and then here in the pages tab we have access access to all of the website templates that we have already seen in the beginning of this tutorial when we have decided what template to start our website with we have chosen the LA nature template but now we can actually import any part of the other templates that we have available here so for example let's go to this website template here here we have three different pages available so let's say we just want to import a specific part of the about page we can just click on the page and then let's click on import template and then when we scroll down we can see that the entire template was imported to our page now maybe we only want a specific part of this page so we can delete everything that we don't need for example this part here we just click on the X and then maybe we want to get rid of this as well and this as well and maybe we just imported the page for this specific design so we're going to keep that and then delete everything else and we can even create our own templates so let's say we want to use this design on multiple occasions on our website we can simply create a template out of it and then just import it wherever we want on our website so we can just rightclick and then click on save as a template then give the template a name and click save then let's click on the X so now if we want to use this design on the homepage as well we can just go to our website and then click on edit with Elementor to open up the page builder then let's say we want to put it right here we can just click on the plus icon then click on the folder and then go to my templates and here we can see the template that we have saved we can just click on insert apply and now we can see this design right here on the homepages as well next let's take a look at how to change the default colors and fonts on our website so these would be the default colors for all the headings the text the buttons and so on for this let's stay here on the homepage for now and close the other Tab and then we have to change these default settings on the WordPress level so let's open up our website by just typing it in the search bar or we can also go to the preview icon here on the bottom left and this will open up our website and then let's click on customize here in the top bar then let's click on global and here we can change all the default settings let's start with typography and here we can find some presets that we can simply try out by clicking on it and then we can see the change immediately on our website so maybe we want to try the monserat and Source sense Pro and see how that looks and we can also just adjust the font to whatever we like so when we scroll down we can just change the body font by clicking this pen icon and then we can look for any font that we like so let's say we want to go for uh Roboto I'm just going to type that in and then click on it and this will change the font we can also change the default weight and so on and we can do the same thing for the heading font so let's say we just want to use let's say moner that type it in click on it and we already have it because it was here in this preset but this way you can just choose any font and it will just change across your entire website if you wanted to you could even change the font for each individual heading so from age 1 to age six but I wouldn't recommend it because you don't want to have too many fonts on your website because it makes it look unprofessional and it also increases the loading speed which is not good either now let's also take a look at colors so let's scroll back up and go back one step and then click on colors and here we can also find some different presets for our colors where currently we are on the style one preset but we can also just click on style two and then see the changes live here on the right side or we can just go back to style one which was the original one and we can also just change each individual color for our accent color our link color our heading color and so on so for example if you would just want to change the headings to a black all we have to do is go to heading and then click on the color and then just change the color to Black and then we can see the change right here happening on the page we can do the same thing for the body text so here we can just change it to maybe maybe a dark gray like this and this way we can just create our own color palette and down here we can also change the default colors for for the site background and the content background and of course we can also change the default style settings for our buttons so when we go back one step and then go to buttons then here we also get some presets and we can change everything that has to do with the style of the buttons such as the text color background color border color the font the padding the Border width and the Border radius then to save any changes we Mage to our default settings we want to make sure to click on publish and then let's close this tab and now here we're back inside of Elementor and to see the changes we've made to our default settings we first want to save the changes by clicking on update here at the bottom and once that's done we can just reload the page and then we should be able to see the changes so we've just change the title color to Black which we can see here now we also want to make sure that our website is fully optimized for smaller screen sizes such as tablets and especially mobile phones nowadays most people are looking at websites on their mobile phone and we need to make sure that everything is displayed correctly so to see how our website looks like on a mobile phone we want to come over here and click on responsive mode and then we can see this bar here at the top where we can see we are currently on the desktop view and we can switch to the tablet View and look at how our website would look like on a tablet and we just want to go through each of the pages and see if there's any changes we need to make any size adjustments any space adjustments but because we're using a template that was already optimized for Mobile screen sizes there's not a lot we need to do let's also look at how our website would look like on a mobile phone by clicking on mobile portrait and here we can immediately see that the text works WordPress is too large for the screen size so this is something that we need to change so to decrease the text size we just need to click on the text element then go to style and open up the typography settings and then here next to the size we can see that we have a mobile icon this means that we can change the size of this text element without having it affect the other screen sizes so let's decrease the size of this text so it fits the screen and now we have 62 pixels on the mobile version and when we go back to the tablet View and open up the typography settings we can see that the size here is still 98 and when we go back to the desktop view go to typography we can see that it is 106 pixels now let's go back to the mobile view and see if there's some more things that we can change for example this button is definitely too large so let's select it go to style settings then typography and here we can also see the mobile icon so we know that we can change it independently from the other screen sizes so let's just decrease the size of this text just a bit so we have a bit of a smaller button what we can also do is hide specific parts of the page or elements for certain screen sizes so let's say we don't want to show this container on the smaller screen size what we can do is just select it here go to to the advanc tab then scroll down and open up the responsive settings and here we could simply hide this part from the desktop the tablet and the mobile version so let's hide it for mobile by activating this option and here we can see now that it is grayed out which means that it won't be displayed when somebody visits our website on a mobile phone now let's save our changes by clicking on update and then go back to the desktop view and close the responsive mode next we're going to learn how to edit the contact form on our contact page so let's first go to our website then let's go to the contact page and click on edit with Elementor and here on our contact page we can find this contact form so whenever somebody wants to get in contact with us they can just fill out this form click on send message and then we will receive an email with their email name and message and we can start a conversation with them but how do we edit this form so when we click on this form element and then we can see that we don't have any options here on the left side it just says WP forms id99 and this is because this form was inserted using a plugin called WP forms so to make changes to this form we're going to have to go to the wp form settings in the WordPress dashboard so let's open up a new tab and go to our WordPress dashboard then let's go to WP forms and here let's first close all these notifications and then we can see our contact form right here with the same short code WP forms id9 to make changes we can just open up the form and here we can see a preview of our form so currently we are asking for the name the email address and a message now let's say we want to ask for some more information in this form what we could do is simply drag in for example a multiple choice field to our form and then to make changes to this field we just click on it and this will open up the field options and then here we can make changes so let's say we're going to ask what type of service are you interested in and then we can give some choices so let's say this would be website design then the second choice let's say would be email marketing and then let's say maybe you also offer paid advertising then if you want to make this field required we can just scroll down and flip this switch down here and if you want to get rid of any of these fields here you can just hover over it and then click on the trash icon but I'm going to leave it as it is and click on save so now let's test out our form and see if it works so let's open up a new tab and go to our website then let's go to the contact page scroll down and then just fill in this field so I'm just going to type in my name my email and then pick one of these options and just type in a random message then click Send message and then here we can see a confirmation message saying thanks for contacting us we will be in touch with you shortly we can also edit this message by going back to the wp P forms plugin then go to settings and confirmations and here we can edit the confirmation message but now to see if the contact form worked let's open up our email inbox and then here we can see that we have a new email saying new entry contact form so let's open this up and here we can see all the information we've entered so the name the email address the question and then also the message and now if you want to reply to this person we can just click on reply and it will automatically take the email we've entered as the recipient so by default these contact form entries will be sent to your WordPress admin email but if you want to have an other email it will be sent to you can also change that in the wp form settings so let's go back to them and then under settings we can go to Notifications and then here under send to email address you can just change it to any email address you like now let's click save and then close all these tabs next let's learn how to add a completely new page to our website to do this we're going to go back to our WordPress dashboard then go to pages and click on add new page I'm going to name this page projects and then click publish and again publish now the new website is created created it and to make changes to it we can click on edit with Elementor and this will open up the page builder for this new and empty page now to add content to this new page we have a few different options we could either just click on the S and then we can find Different Page templates that we can just import and we've already looked at how to do that or we could also just import specific blocks that we can see here for specific parts of this page but to kind of keep the same style across your entire website what I would do here is just copy specific parts from other existing pages on your website to this new one so what we could do is just open up a new tab then go to our website and then let's say we want to go to the about page and then also open up the services page in a new tab and then let's open up the page builder for both of these pages and now for this new page what I would do is just copy this entire top container so we kind of keep the same style so what we can do is just right click on the container click on copy and then go back to the new page and then just right click and paste and from here we can change the content so let's click on this text element and then change the text to projects then I also want to change the background image so let's select the container then go to style and then change the image I'm going to use a copyright free image that I found online so I'm going to go to upload files and then just drag and drop in my image file and click on select and we can do the exact same thing for other parts of this new page so maybe we're going to go to the about page and let's say we want to copy this layout here again we just right click C copy then go back to the new page and then down here right click paste and we have just imported this layout as well now let's save the changes and preview this new page and here we can see the new content on the page but there is one problem which is that the header is not transparent so to change that we're going to go and click on edit page then go to the Astra settings here scroll down down and click on advanced settings and then under transparent header we're going to click on enabled then close the window and click on update and now let's preview this page again by clicking on view page and now we can see that we also have this transparent header at the top but one more thing that we notice is that this new page projects is not in the navigation bar here at the top so how do we add this new page to the navigation bar to do this we're going to have to go back to the WordPress dashboard so we can just click on our website name right here and this will take us back to the dashboard here let's go to appearance and click on menus then to add the New page we're going to just select it right here projects and click on add to menu and now the new page projects is part of the main menu and we can also change the position so maybe we want to put it between about and services so we can just drag it up here then click on Save menu and now to see if that worked let's open up a new tab and go to our website and here we can see that the new page is now part of the navigation menu and we could also add this new page as a submenu of an already existing menu item so when we go back to the dashboard and go to the main menu what we can do is just put this page below another page maybe the services page like this and now it's a sub item so now when we click on Save menu and go back to our page and reload it we can see that now the project page is a submenu of the services item and if you want to remove any of these links from the main menu we can also just do that by going back to the menu settings and then let's say we want to remove this home link what we can do is just click on the drop- down and then click on remove and now we can click on Save menu and then go back to our website and reload the page and now we can see the home link is removed so now we know how to edit this main menu but let's also learn how to edit the rest of the header so how to change the logo how to edit this action button how to change around the layout and how to change the design and color so to change our logo we're going to go customize then open up the header Builder and click on site title and logo and then here we can click on change logo and then to upload a new one we're going to click on upload files and I'm just going to drag and drop in my logo click on select and here we have the option to crop our logo but because the one I've uploaded is already cropped I'm going to click on on skip cropping and now we can see the new logo here at the top now maybe I want to make this logo a bit smaller so I can scroll down here and under the logo width I'm just going to reduce the pixels here to let's say 50 now another place where we want to display our logo is right here at the top of the browser this is what's called the side icon so to change the side icon we want to just scroll down here and then click on side icon select side icon and then here I can also just upload a square version of my logo click select and Skip cropping and now we can see our side icon here at the top of the browser now let's see how we can edit this action button up here so let's go back one step and then open up the header Builder once again and this will show us all of the the elements we currently have in our header down here so to edit the button we just click on it and then we can make changes here on the right currently it just displays this number and when people click on this button then it will automatically call this number another thing we can do is just change the text to contact and then we can send people directly to the contact page by typing in for/ contact to change the style of this button we can just go to design and then here we can change all the colors so for the text color we can make it any color that we want so for example let's make it a black and then here we also have the hover color so we can make it maybe a gray and then we can also change the background color so maybe let's make this white and increase the opacity and then for the hover color we're also just going to use a white now to also change change the color of our main menu we can just go back one step then under header types let's click on transparent header then go to design and then down here under menu color we can change the color of the text to any color that we like I'm just going to leave it at White for now but maybe we can change the hover color to a yellow so whenever we have an active Page open the link shows as yellow and when we hover over the other links here they change to Yellow as well now if you want to change the layout of our header we can also do that in the header Builder so for example if you want to have the logo in the center of the header what we can do is just drag the logo to the center down here and then maybe drag the menu to the left side and now we have the logo in the center and the menu on the left and then an action button here on the right I like it better the way it was before so I'm just going to put back the menu here to the right side and then the logo all the way to the left side then to save our changes we can click on publish so now we know how to customize our header and next we also want to learn how to customize our footer which when we scroll down is all the way here at the bottom now to edit our footer we're going to go back one step and then go back another step and then here we're going to click on footer Builder and this works exactly like the header Builder so we can just drag around the content to change the position and of course we can also make changes to the footer content so let's start with this text right here we can just click on the copyright element and then we would delete this text and then we can type in our copyright notice putting brackets around copyright will always show this copyright icon and putting brackets around current uncore year will always show the current year and and then at the end we can just add our business name and maybe we also want to change this logo so we can just click on this element then click on the logo and the pen icon and here we can click on replace then upload files and then simply upload the logo we want to add and replace but now the logo is still a bit too large so to make it smaller we're going to click on it here and then click on the pen icon again and then under size we're going to change it from medium to custom size and I'm going to make it 50 * 50 pixels and click on update and for our footer menu we also have some different options to change the layout the alignment and then we can also disable the entire footer menu for different screen sizes to see how the entire footer looks like on different devices we can change those down here so we can switch to the tablet View and then scroll all the way down to see how the footer looks like on tablet or we could also switch to the mobile view and see the mobile version now to save our changes let's click on publish and close the customizer and now the last thing we want to do is go back to our dashboard then go to plugins and activate the light speed cache plugin because this will make our website faster and then we also want to click on enable auto updates for all of our plugins so we don't need to manually update the plug-in every time if you found this video valuable please give it a like And subscribe to the channel for more videos like this also check out my WordPress tutorial playlist in the description below where you'll find step-by-step guides on how to create different types of websites from scratch using Wordpress thanks for watching

← GoDaddy Website Builder Tutorial (Step-b BEST Website Builder 2026 (Don't Choose →