How To Make a WordPress Blog - Step by Step

hi my name is tyler moore and in this video i'm going to show you how to make this blog step-by-step with no step skip this blog is absolutely amazing we did a ton of research researching this blog we research blogs that make from one dollar a month all the way up to 14 million dollars a month and we wanted to see all the things that it had in common so we put all of these things in here and did all of this research and it was pretty boring but we learned what really makes a blog amazing and one of those things was having the latest articles on the home page because as soon as someone comes to your website they want to see all of the different articles and they want to see what's new most of them also had an about page so we put an about page on it they obviously had a separate blog page also and they had a contact page so that you can get into contact with them they also had a search feature so that people can search through your blogs and i'm just really loving this blog design and its simplicity it's very very cool down here we have this about us section of course you can change this however you want you could change all the colors all the text everything and then we have this extra section on this home page to contact so that they can contact you and we have this beautiful footer down here footers like your feet it's at the bottom so that when they get to the bottom they can just go to any of these links they can see your logo and the copyright right here so we can scroll up and we can also see this header this header just has this logo in here and this is just like apple where they have just their logo in here or nike where they have just the logo in here or starbucks where they have just this logo up here and these people seem very happy to get their sugar and their coffee and i'm very happy to show you this tutorial on how to make a blog step by step with no steps skipped so let's do it again we're going to be doing everything as scientifically as possible so that you have the best chance of success all right so let's begin all right so what are we gonna learn we're gonna learn how to put in this logo of course you could put in any logo you want you could even put in your name up here we're gonna learn how to put in this menu we're going to learn how to put in this big image with this guy swooping in if you want if you don't cool too we're going to learn how to put in all of these different articles right here they'll obviously be your articles eventually and we're going to put in this little about section this contact section with all these images and these colors and everything like that and then we're also gonna learn how to put in this footer and if anything's new any words are new it's all good we're gonna be doing it step by step with no steps skipped you got this all right so let's check out our blog page this is where all of your blog posts are going so these are your latest posts this huge image here and it's transparent background with the menu i think it's super cool and we can scroll down and we can see all the different blog posts i'm going to show you how to round these corners you don't have to obviously show you how to put in this title everything like this i think it looks super clean and super nice then we can go to the next page here and people can see more of your blog post and we can go to the next page and so on so that is your blog page your actual blog posts are when you click on it so when your user clicks on the blog post they get here this huge hero image you can of course rearrange and change this and then your blog post and then people can comment but like that was the most amazing blog i've ever seen in my life and you can start talking to them and have a conversation and everything like that all right then we're gonna go up and let's go to the about page let me show you that this is the about page design again of course you can change this however you want you can mix and match so many different designs so it's just a super simple about page we took a lot of that research and we just wanted to make it really friendly nice to meet you and have a cool picture of you or whatever obviously your blog might be about something different then we just have upcoming projects this could be maybe your most popular blog post and you can put them all right here something like that with the inspirational image i think that's pretty cool alright so let's go up let's go to the contact page this is where people can contact you again this huge hero image right here and we scroll down and they can get in touch with you so we made it really easy where they can fill out their name their email a message and send the message and it goes right into your email inbox they can also contact you here if they want you don't need to put in your address or your email or your phone number but you can and then you're linked to your social media pages then we have a map this could be like where you are in the world or you can just completely delete it everything is going to be made visually so it's going to be super easy and awesome all right if we go to our website we could just click here to go to back to our homepage and if we scrunch it down as if we're on a phone it is completely mobile friendly so it's going to work on your mobile phone your tablets everything and it's going to look perfect it actually looks even better than this on your mobile phone so it looks super awesome and the mobile menu works and everything works so it's gonna work on your tablets your desktop even work on a tv it'll work on everything all right so we put tons and tons of tons of time and effort into this and i hope that you really like it so let's begin and see what we're gonna learn the first thing that we're gonna do is we're gonna get your website name your website name is like yourwebsite.com yourwebsite.org facebook's website name is facebook.com my website name is tyler.com you need somewhere for someone to type in something in order to go to your website so we need a website name the second thing that we're going to do is we're going to get hosting now what is hosting hosting is a computer that's on 24 7 that has super fast internet that holds all of your website information so it holds like your text it holds your images it holds everything if you only had a website name and someone typed in yourwebsite.com but you didn't have hosting that website would come up blank because there's no place for all of your text and images to live those text and images they need to be stored somewhere and with hosting they're stored on a computer with super fast internet that holds all of that information so you definitely need a website name and you definitely need hosting somewhere to store all of that information the next thing that we're going to do is we're going to install wordpress wordpress is what's called a content management system which is just a fancy way of saying it helps you manage all of your website content so instead of having to do coding and all this confusing stuff it's all visual and it does it all for you wordpress is by far the most popular way in the entire world to make a website and it's definitely definitely definitely the most popular way to make a blog nothing even comes close nearly all of our blogs that we researched were on wordpress wordpress is also super great because you can do so many things with wordpress there are a whole bunch of apps called plugins that are absolutely free that allow you to customize your website in any way you want that's one of the great things about wordpress and you can make almost any design visually so it's super awesome after we get wordpress installed we're going to create your blog website that includes things like designing the home page designing the blog page creating your logo and making the contact page so only step one and step two cost money everything else is absolutely free wordpress is open source so it's absolutely free and creating your blog is absolutely free because you're doing it all so instead of paying a developer two thousand dollars to do it for you that part's going to be absolutely free so how much does it cost to get your website name it usually costs about fourteen dollars a year and how much does it cost to get hosting that usually costs about ten dollars per month installing wordpress is free and creating your website yourself is obviously free so this is the regular cost but i'm going to show you how to get a discount so the total is gonna be about 30 dollars give or take a dollar or two i think that's a super great deal to have your blog be spread out through the entire world where anyone can access it all right so let's start with step one and two luckily we can do them at the same place so let's get your website name and then let's get you hosting so all you have to do is open up your browser and we can go to hostgator.com that's h o s t g a t o r dot c o m and press enter i get a commission for recommending hostgator but i've been using hostgator myself for 16 years and i recommended them before i got anything for it and i really like them for their 24 7 365 live chat and phone support and they are the least expensive while providing the best value now obviously i haven't tried every hosting company there are thousands and thousands of hosting companies out there but i really like hostgator so we have all these options hosting pro hosting essentials domains and support what we want to do is hover over hosting then we have three options shared hosting website builder and wordpress hosting you would think that you would use wordpress hosting but it's actually just way too much stuff we don't need all of that stuff and it just costs more money and you can always upgrade later so what we want to do is we want to do shared hosting so just click on shared hosting and we can see if we scroll down these three different plans and we can see the price right here 2.75 cents a month but i have a little trick if you go up here and you go to hostgator.com forward slash and then type unlock u-n-l-o-c-k and press enter you're gonna see that the highest discount is now unlocked so now when we go down we're gonna see the same three plans but now it's two dollars and fifty seven cents a month so we have these three different plans here the hatchling plan the baby plan and the business plan the business plan is just way too much and you can always upgrade later so we really just don't even need to think about it it really is between the hatchling plan and the baby plan the difference between the hatchling plan and the baby plan is the baby plan offers unlimited websites so like yourwebsite.com another website dot net yourmomswebsite.org you can have unlimited websites a clientswebsite.com where the hatchling plan you can only have a single website like yourwebsite.com so if you know you want two websites immediately go with the baby plan but if right now you only have one website go with the hatching plan if you decide that you're gonna have a website later you can always upgrade so that's what we're gonna do we're just gonna go with the hatching plan and click buy now all right now it asks us are we registering a new domain or do we already own this domain you would choose i already own this domain if you got your domain from somewhere like godaddy.com already and you've already purchased it so you type it in right here like i already own it dot com whatever it is you click register a new domain if you're registering a brand new website name so that's what we're doing so i'm going to put in mine right here all right once we do that we have the option of choosing the extension the extension is like the dot com so the dot com is most popular but sometimes your main website name is not available so sometimes people go with the dot net or the dot org or the dot online or the dot space or sometimes it's just kind of cool if you have like a new and techy website to go with like a dot space or a different type of extension the extension again is just the ending to your website name if you're a non-profit you might want to go with the.org but we're just going to stay with the.com and now it's going to ask us do we want all of these extra domain names for 15 a year or thirty dollars a year in my opinion i don't think you need this it's not like someone's gonna go and steal and copy your exact website idea and make a new domain name it's just not needed of course they wanna make more money but i don't think it's needed next if we scroll down we're gonna see domain privacy protection when you register a new website it puts things like your email and phone number so people can look up your website and see who to contact the downside of that is that sometimes you'll get some spam email or phone calls and it's a little bit annoying so for 15 a year they will hide this information and you won't get any spam calls i'm not that annoyed by spam calls or maybe i should say i'm just a little bit cheap so i'm going to uncheck this and know that i may get a few spam calls but i'm going to save 15 a year next if we scroll down it says choose a hosting plan we already chose the hatching plan that's great and now we need to choose how we're billed and this is where a little strategy comes into play because we want to pay the least amount up front but save the most amount in the long run so with the one month plan our big discount will only be applied for that first month so we'll pay the least amount up front but we'll actually be paying the most amount in the long run with the three year plan we'll be saving the most amount in the long run but will be paying the most amount up front so what's the balance of paying the least amount up front and saving the most amount in the long run and i think that's the 12 month plan because you can see it's 2.58 cents for each month and the three-year plan only saves a penny on that which is 2.57 for each month so i think the one year plan has the best of both worlds where you're saving the most amount in the long run but paying the least amount up front so we're just going to choose that one and then it's going to ask us to create an account so put in your email confirm your email put in a password and then put in a security pin next we're gonna scroll down and it's gonna say enter in your billing info so like your first name last name phone number address country city state i'm in california and zip then we're going to go up and it's going to say what type of payment do you want to do do you want to do credit card or paypal i'm just going to keep it as credit card but you could choose paypal enter in all your credit card info don't worry this is not real your expiration date and everything like that then we're going to scroll down and it's going to ask us what additional services do we want to add so do we want ssl this is security for your website and our website already comes with security so this is advanced security and i don't think that we need it especially for forty dollars a year we can do everything with the regular security then site lock essentials i don't think that we need this especially for 35 a year that's crazy we can actually download something on wordpress that will secure our website and it's absolutely free then do we want email from gmail i do like gmail and if i was gonna get email i would get it from them but your website already comes with free email so this may be something that you would want to do but you can always do it in the future and your website already comes with its own free basic email so i don't think we need it then it's going to say do we want to back up our hard work again we can download something on wordpress which is absolutely free in order to back up our hard work and we're going to save 24 per year then do we want to improve your search rankings and that sounds really nice but i don't think it's actually going to work and again we can download free plugins that help us do this so all of the additional services is a no next we're going to enter in our coupon code so if it's not here it probably is but if it's not just type in unlock that's the biggest discount that you can get and click validate and this is my coupon code so thank you so much for using it it helps me continue to make these videos absolutely free next we're going to scroll down and we can review our order 24 7 365 phone live chat and email support instant account activation money back guarantee our website name for a year and the hatchling plan for 12 months so it all comes out to thirty one dollars sometimes this fluctuates from thirty dollars to thirty five dollars i think anything in there is a great price to have your website online all right then we can scroll down and just click i read to hostgator's terms of service and click checkout now alright so congratulations you've done the hardest part which is just deciding that you actually want a website and doing something about it next we want to install wordpress you can find wordpress installation over here on the marketplace or you can find it here basically anything that says install wordpress we want to click on it alright so wordpress used to be super hard to install but as you can see it's super easy so now we just click install now and we choose our domain name so i have a whole bunch of domain names but i'm gonna choose the correct one for me and i'm gonna make sure that this is blank don't add anything in here because if you do then your website will be installed on yourwebsite.com forward slash something instead of wordpress being installed on your main website leave this as it is don't change it whatever it is it doesn't need to be mine exactly it could be a higher version so just leave this blank and leave this as it is then we're gonna choose our site name i'm just gonna put create a blog and then we wanna do a site description this is what your website is about so this might be my blog about traveling around the world or my thoughts on the economy or latest news about 3d printers i'm just going to put learn how to create a blog all right and we can leave these two blank right here and then it's asking for our admin account i just like to put my name and i'm going to hide this password and do a password that i can remember then it's asking for admin email and you should just put in your email in here all right then it wants you to choose a language i'm going to choose english but again you can choose whatever you want i'm going to leave all of these blank and i'm not going to select a theme because i'll show you how to select the best theme in just a second then before i click install you don't have to do this but i like to put in my email just so it sends me more details about my installation if you didn't put that in there don't worry then click install and now it's going to install wordpress so it's going to do all of that hard work for you and you'll have wordpress installed on your website all right so that took a couple of minutes but i sped that up so it says congratulations it has successfully installed but has it really let's take a look at our website by just clicking on our website name all right we can see that the website does not actually work and why is that that's because it takes anywhere from 10 minutes to an hour for your website to spread across the entire internet sometimes but it's rare it can take up to 24 hours most of the time it happens within 20 minutes so we're going to come back in 20 minutes and check our website once again so i'm just going to exit this out and actually can exit this out too and i'll be right back i'm going to go take a walk or something all right so i'm back from my walk let's take a look at the website and see if it works now and it does so we have our website so congratulations you actually have your own website some people charge 500 just to get here which is absolutely insane as you can see that was super easy all right but we don't want it to just be this website it's pretty ugly and pretty bad so let's actually log into our website and let's begin changing things in order to get to the back end of your website in order to change things you have to go to yourwebsite.com forward slash wp dash admin a d m i n so forward slash wp dash admin and press enter this will get us to the back end of our website all right and once we're here it's going to ask us for our username and password that we created in our previous step so we can just enter that in right here and press log in all right now that we're logged in we can exit out of this tab and congratulations we're on the back end of the website also known as the dashboard so we can see in our dashboard that it kind of looks like a mess we have all of these different things here and it just looks sort of unorganized and that's because the hosting companies they get paid to install basically programs or apps on your website that you don't really want it's like when you get a new phone and you have all of these apps that are basically just junk and you delete them immediately or when you get a new computer and you have all these programs that you don't want on your computer so you just delete them whoever manufactured that computer gets paid to include those programs or apps onto your device and that makes the cost much lower for the laptop or for your phone but you really don't want all those things on it basically that's the same thing that's happening here we have these different programs on it and some of them are useful but some of them aren't but we just want to start with a clean and fresh installation of wordpress so what all of these are is they're called plugins so that's what the apps or the programs are called for wordpress they're called plugins for example wordpress by default doesn't have a contact form that you can just fill out and press send and it'll send it to you or by default wordpress doesn't have a backup plugin where you can backup your entire website so you can download and install a free plugin that does all these cool things and that's why plugins are super great but these are extra plugins that we don't really need so to delete all these plugins and start from scratch let's just go to plugins and we can scroll down and we can select all of them and go up here and go to delete and press apply and that will delete all of the plugins it actually didn't delete all the plugins because we actually have to deactivate them first so go up here press deactivate select all of them and apply that will deactivate all the plugins and then go up here again and go to delete and apply and that will delete all of the plugins all right so now all of the plugins all the extra programs and apps that the hosting companies installed on our website are gone so we can go back to the main dashboard by clicking on here and we can see that this is much cleaner and much better now we're starting off blank and clean and now we can really begin creating your website so in order to get back to the front end of your website all you have to do is click on your name up here and we can see the front end of your website you know that you're logged in by this black bar right up here this only shows when you're logged in and it doesn't show when a user visits your website all right if we click on the hello world this is just a sample blog post we can click on it and we can see learn how to create a website or yourwebsite.com forward slash a date and then hello world in my opinion that's not as professional as just hello dash world so that's the first thing that we're going to change we're going to change it so that it says hello dash world instead of the date then hello dash world alright so let's go into our dashboard by just clicking on your name up here or your business name or your blog name and then going to settings and permalinks once we do that all we have to do is change it to post name and press save changes once we do that we can check our work by going to the front end and clicking on hello world and now we just see forward slash hello dash world it's much more clean and our blog post will show up much better all right once we do that we can go back into the dashboard by clicking on our name again and the next thing that we're going to do is we're going to install a theme so let's again go to the front end by clicking on it and we can see that this is the theme this is the design of your website so a theme is the design of your website it's what your website looks like we're going to install a theme that you can literally create any design that you want so this one's not that flexible we're going to be installing a theme or a design that is super flexible where you can create any design that you want so again go to the back end of your website this is very good practice back and forth back and forth and then go to appearance and go to themes then we're going to click on add new and we're actually installing this one right here but we're going to search for it so we're going to search for astra a-s-t-r-a just in case it's not at the top and this is one of the most popular themes in the entire world i think it actually is the most popular theme so we can go to details and preview and we can see it has 5 000 ratings and it's 5 stars and i think it's been downloaded a million times or more and this is a preview but this is not what it's going to look like we're going to make it look so much better than this as you saw in the tour so we're going to click on install and it's going to install our theme and then we're going to click on activate and it's going to activate it on our website all right so now we can go to the front end once again by clicking on our name and we can see that the design has changed so it's not that great but it's going to allow us the most flexibility and it's also going to allow us to use pre-installed templates and just import them right into our website all right so let's do that let's go to the back end of our website and let's add a new plugin so go to plugins and add new this plugin is going to allow us to install already made designs right into our website and i think it's super important to start with a pre-made design and then customizing it from there rather than starting from blank so go to search and search for starter templates s-t-a-r-t-e-r templates t-e-m-p-l-a-t-e-s all right and it's been installed a million times and it has five-star reviews with two thousand one hundred four five star ratings so let's just click install now and let's click activate all right now it's all activated so what we can do is we can hover over appearance and we have this new menu item here which is starter templates so that's what this plugin did it added this new menu and it added all this extra functionality of allowing us to put in pre-made designs so now it says select a page builder so do we want gutenberg elementor beaver builder breezy this seems all confusing but there is one that beats out the rest and that's elementor so this one is far more popular and the easiest so we're just gonna choose elementor all right and now we have all of these to choose from and you can choose any of them some of them are premium so they cost money so you can go up here and go to free and now all of these are free so you can literally click on any of these and it would be installed on your website so that is super cool look how many there are that are absolutely free super awesome but there is one that i think is one of the best if not the best and that's outdoor adventure so we're going to click on that one and it's going to install all of these pages home about services projects contact this doesn't actually have a blog but we're going to add a blog to it and that's a beautiful thing about wordpress is that we can add so many things to it so i'm going to import the complete site and it's going to import right here so it's going to ask us some questions and you can just answer them and i'm going to skip this and it's going to import now this might take a couple of minutes so i'm just going to fast forward this and wait for it to import all right now it says it's imported successfully so now we can view our site so just click on view site and now this is our new website obviously it's not your content but your website is already looking so much better and all of the pages should work and everything should be just great so we have this about page we have this services page we have this projects page and you can keep or delete anything that works for you that's pretty cool we have this thing where it slides over also we're gonna delete a lot of this stuff but it's looking pretty cool so we also have this contact page where people can contact you and send you a message now so that's pretty awesome we also have this take action button which doesn't do anything right now but you can make it do whatever you wanted it's super simple all right so that is our website so far i'm going to exit out of this and i'm going to exit out of here and i'm going to go back to plugins because it did install some plugins and i just want to show you so that you understand that when we imported the website it installed two other plugins so the starter templates plugin we installed that ourselves but it installed elementor which is the visual website drag and drop designer so that you don't have to struggle with creating your website with code or anything so that's really cool and then it installed wp forms light which is that contact form on that contact page so that's what enables that contact form so that's pretty awesome that it installed these things for us and i just wanted to show you that so you can understand how it works another thing that it did for us is that it installed a whole bunch of pages for us so it created some pages so it created that about page let me show you what it looks like so it created this about service projects contact pages and this home page so we can see about contact home projects and services it created all these pages this sample page and this privacy policy page i believe were there before so we can actually put them in the trash so we can just click on this and click on this and we can put them in the trash so just to keep it clean we're gonna move this to the trash and apply then what we can do is go to the trash and we can delete permanently this is not because you have to it's just because i'm crazy and i want to keep it real clean all right we can see all of our pages again by clicking on all so that is our pages and our pages are like again home about contact project services so like here home about contact project services that's different than our posts our posts is like hello world that hello world so this is our blog post so basically if we go to cnn.com we can see the cnn home page but on the home page there's a whole bunch of different blog posts there's a whole bunch of news articles basically so that's the difference between pages and posts pages are like your about page or your contact page posts are like your different blog posts we have a sample blog post right here called hello world but we don't really need it so we can also click on this and move to trash and apply and then go to the trash and delete permanently all right now we're starting all fresh and all clean alright so we're all done with that next we're gonna be adding in content but there's a huge mistake that you could be making and that is adding in your own content it's a mistake because if you start adding in your own content you won't set up the entire website and you'll get distracted and you'll never actually finish your website i've seen it over and over and over again so resist the temptation to start adding in your own content and just add in this demo content so that the structure of your website looks really good and then after you add that in then you can change it and add in your own content so don't add in your own content right now just follow along and then add your content in later so let's close this for right now and let's add new for new post but don't click it yet we're gonna hold command if you're on a mac or control if you're on a pc to click it and it'll open up a new window or you can right click and say open link in new tab or just hold command if you're on a mac or control if you're on a pc and click and it'll open up in a new tab and that's because we're going to be opening multiple new post pages because we're going to be adding multiple posts to your website it'll make more sense in a second all right so now that we have the first one let's go ahead and open it up and in the description below there is dummy content all of the images and all the text and everything like that once you download it to your computer just download it to your desktop and it'll look something like this again it's in the description below and just click on it to unzip it and then it has all of those files in it right here alright so we want to do blog post content and we can see the blog titles and the blog body text so let's go ahead and click on the titles here we have it so let's go ahead and just copy this you can press command c on a mac or ctrl c on a pc or you can right click and press copy then we can open up that again and we can paste that title in right there all right so that's the title and now for the body text we have it right here so we have all of this text these are the instructions right here but i'll show you how to do it so you don't have to read them and what we can do is we can just copy and then open up that again and go here and just paste all right so it's not formatted this is just like microsoft so all we have to do is click on it and it'll give us all these formatting options like bold and numbers and bullet points and everything like that we're going to click on this right here and we're going to change it to a heading a heading is basically like a title and we don't want to be h2 because that's too big so we want it to be h3 so h1 is the largest and h6 is the smallest so h3 will be good for us and we'll go through each of these and we'll click on this and we'll go to heading and we'll change it to h3 so just do that over and over again every time you see a number right here all right so we're all done with that we just made them all heading threes and we also have our title up here and now that we've done that we can go back here and we can add eight more so go ahead and press ctrl and click or command and click if you're on a mac eight more times one two three four five six seven eight all right now we're going to be adding eight other blog posts what i want you to do is just go over here and copy all of this you can do that by clicking up here and pressing copy and then we're just going to paste all of that same text into every blog post i know every blog post is the same now but this is just content that is filler content so that your website is looking really good and then you can edit it later alright so we have nine blog posts in total um only the first one has a title so let's add a title for all the other ones so let's go back to our titles and let's begin copying and pasting all of them so i'm just gonna move this off screen for a second and i'm going to paste them all in here so this is title number two and i'm copying the third one and now we can speed it up because i think you get the point all right so our nine blog posts are in there but we want to add an image to each of the blog posts just so that it looks really good so i'm going to exit out of here right there and i'm going to click on the settings right here and i'm going to scroll down and i'm going to go to featured image and i'm going to set featured image so we're gonna upload the files and select files and we're gonna go on our desktop and find that folder and go to blog images and just click on blog one for the first one let it upload and set featured image then we're gonna do that for all the other blogs so go here go to set featured image set featured image upload files select files and go to blog two and then three four five six seven eight nine and so on and then set featured image and i'm gonna speed that up all right now all of my featured images are uploaded now i'm actually just going to publish all of these blog posts so just click here publish and click publish again and do that for all nine of them all right now all nine of our blog posts are published we can go to the first one and we can check what it looks like by clicking on view post so just click on view post and we're gonna make this look better eventually like making this background white instead of gray but it's looking pretty good and our first blog post is on our website and people can comment on it and everything else like that so that's really cool and it has this really nice featured image so of course we're going to make this look better but it's pretty cool right now and we can actually close all of these different tabs and i want to give you one more tip and that tip is where to find good images from that are copyright free so that you can use them on your blog one of the best places is pexels.com p-e-x-e-l-s dot c-o-m and press enter so these are all copyright free images and this is where i got most of my images from so we can click on it and we can download it so we can you know free download we can download it like that so that's pretty cool another place to get images that are copyright free is pixabay.com p-i-x-a-b-a-y dot c-o-m and press enter so here is pixabay and we can do the same thing and click on it and download it here you don't want to download the 6000 by 4000 you'd want to download something like the 1920x1280 because if you download too big of a file then it's going to make your website really slow to load so download the second highest quality is probably pretty good the last place to get images is unsplash.com uns p l a s h dot c o m and press enter and here is unsplash very cool images also so same thing just download them and you can use them copyright free all right now that we have all of our blog posts on our website or at least the demo post on our website we can exit out of here and let's go to our home page by clicking on our website name and we can see this menu home about services projects in contact we need a page here called blog and also we want to delete some of these pages obviously you can keep them if you need them but we're going to delete services and projects we're going to add blog right over here and let's capitalize all of this text just because i think it'll look better all right so that's our game plan so let's do it let's delete both of these let's add a blog let's capitalize everything in order to do that let's go into the back end then let's go to pages because we're going to be deleting some pages and let's check projects and services and then go up here and move to trash and apply and then in order for it to be deleted from the menu we have to delete permanently so go to your trash and select all of them and delete permanently and apply so that will delete all of them all right next we want to go to all and we see we have three pages about contact and home we want to add a new page we want to add a new blog page because there needs to be a page in order to hold all of those blog posts so i'm just going to name this blog and i'm going to click on publish and publish again that's all you have to do for the blog page so just click on this right up here and now if we go back to our home page we can see that some things have changed like the home about and contact are now here and not those other pages but we don't have the blog in our menu and that's because we need to add that page to our menu so we can go to the back end and we can go to appearance and menus and we can see it under pages here this blog so we check it off and we add to menu alright now i'm just gonna capitalize all of these menu items so and this is for no reason except for it looks better so home about contact and blog once i have renamed them i'm actually going to reorder them because i want it to be home blog about in contact just because i think blog is one of the main things that people will go to the website for so it should be second online to home all right once we do that and again we just click hold and drag this around make sure it's not indented because then i'll be a submenu it'll be a menu under home so make sure it's just like that then press save menu and we can go to our website and we can see that now it's changed home blog about and contact this blog page is not designed yet so if we go to it it's not going to show anything and we can go back to our home page by clicking on this so let's begin the design now the first thing that we're going to design is this home page so we're going to redesign this home page and again it's super important not to start making your own design right now but just learn how to design you don't want to do two things at once you don't want to put in your design and learn at the same time that will just make it really confusing and i'll make you not finish the video so just follow along first and then make your design later once you learn how to do it so we're going to be designing this home page not this up here we're going to be designing this later and we're not going to be designing this footer right here so just this inner page here and we can do that by pressing edit with elementor or going to the back end here going to pages and then seeing home or whatever page you want to edit with elementor and clicking on edit with elementor all right once we do that we can edit anything that we see in here so when we hover over it we can see that it highlights it and anything that we click on here is going to be editable over here so if we click on this here we can edit it over here if we click on this button here we can edit it over here so that's basically how it works we can see a quick edit here so if we go here and we can just delete this word we see it updated over here we can also delete entire sections by going up here and pressing on the x button let's say we did that on accident we can press ctrl z or command z if you're on a mac and that will undo sometimes it doesn't really work that well the undo so we can go here to our history and let's say we deleted this here we can go to our history right here and we can see all of the things that we did so we can just move back or forward into time just like that so that's pretty cool so don't really worry if you're going to mess up on something you always have your history here and when you press update you'll have your revisions here alright so first let's see what we want to make so this is the design that we want to achieve we're not focusing on this up here yet but want to put in this make a blog we want to put in this guy over the a and we want to put in this background image so let's go ahead and do that let's start with this big background image so to do that we want to hover over this and select the entire section right here so just click on this six dots right here that's how you edit this entire section and now we have three different options layout style and design we wanna click on the style or what it looks like so we're gonna click on style and then we see this image right here and we're gonna change it we're gonna click choose image and we're going to choose a different image then we're going to upload files and we're going to select files and we're going to go to the images that you downloaded from the description below and we'll go to homepage images and we'll do home header one all right then we'll open it it'll upload and then we'll insert media we want to change the position of this image a little bit and we want to lighten it a little bit so under position we want to go to center center and it was just a little bit but it focuses on the center it was barely noticeable but when you zoom in or go on responsive mode with like a mobile phone it'll be in the center so that's much better and when we scroll right now you see how the picture doesn't move we don't want that we want it to move so we want to change the attachment to scroll and now this will move we can see that there's a background overlay basically it's making the picture really dark when it really isn't dark so if we scroll down here and go to background overlay we can make it so it's zero so there's no background overlay and it is completely see-through next we want to change the spacing of this image so how much space is up here above this and how much space is down here so in order to do that we go to advanced and we'll do 230 at the top you see how it's changing the space and for the bottom we don't want it to be so much we just want it to be 80. all right so now it's much less big the next thing that we're going to do because if we see over here that it doesn't have any of those text and it doesn't have a button although we could keep the button but we're going to delete it for this one so we want to delete this so all you have to do is hover over it right clicking and pressing delete so go up here again and we would right click and delete but sometimes these things are really hard to select like it's it's hard to select these things sometimes and right click and delete them so they've made a little navigator here so if we click on this button down here on the left we see this navigator and this navigator makes it really easy to select different things so this is an entire section we just selected this entire section and this is a column here so we can just select this column and now we can select this divider right here so now just this divider is selected we can also pin this navigator to the side by just holding and dragging it and it'll be pinned to the side so now we can just right click and delete and now it's much easier to select in that way then we're going to go to our button and we're going to click it and we can press the delete key on our keyboard and sometimes that works it didn't in this case so we have to right click and delete it all right so we're going to exit out of the navigator for now and we're going to click on this and we can actually just like triple click it and put on caps lock and type make a blog all right we're going to set the size of this to xxl and then we're going to go to advanced and padding and the padding is basically the spacing around it so we're gonna remove this padding from the top and from the bottom next we're gonna change the font so we're gonna go to style and then we're gonna click on typography and then for the family we're just going to start typing in b e b a s for biebus nuo and we're going to change the size to 155. and then for the weight which is how bold something is we're going to change it to 100 and for the line height which is how tall the lines are we're going to go with 100 for letter spacing we're going to go for 3.7 so it's a little more spread out all right that is looking pretty good so we can close that up and the next thing that we're going to do is we're going to get this guy on top right here so let's see how to get that guy and the way that we add something new is we click on this elements widget up here and we can add anything to our site so we can drag any of these in heading images text video anything we're adding another section inside of this section so we want to drag in this intersection now we have two extra columns where we could add different things inside of there and we only need one column so we're just going to right click on this and delete it so now there's just one column and now we want to drag an image in here so click on this and we can drag in an image click hold and drag right inside of that column and now we have this big image in here we want to change this image by clicking on it then uploading a file and selecting a file and let's select the home header man i've removed the background on this guy so that it's transparent behind him so we can open that up and we can insert him right in there and now we see that he is on the rock but maybe we can position him better but first we want to set the size to full size so we don't lose any quality and we can see on this how the guy is over the text which is really cool so to do that all we have to do is click on this guy right here and then go to advanced and then make sure these values are not linked together because we want to do different spacing for each of these so for the top you can just add in negative 100 if we added a positive it would push this guy further down there'd be more space if we added negative he'll go back up and maybe we want to move him over a little bit like here how he's moved over a little bit so let's do on the left let's add 210 so there we go now he's sort of floating over the a and that's looking pretty good it's gonna look a little bit different without this sidebar but it looks really great we can also have them swoop in if we want by going to motion effects and under entrance animation we can say fade in right and now he sort of flies in there and that's super cool all right now we can click on update to save all of our work and we can click this little preview and we can see what it looks like so so far super super cool i'm loving that that's awesome all right keep on following along to really get it it takes a little time to get used to but once you understand the basics it'll go much faster so if we scroll down we're going to remove this quote section because we're not going to be using it we want it to look like this under here where it's just white so we can just take out all of that by just clicking on x then we can click on upcoming events and we can change this to latest articles just by typing and we can set the alignment to left under style and typography we can make the font smaller maybe we'll make it 32 just so it's not so big and then we can go here and select it if you can select it if you can't just go again to that navigator and we see we're here select it right click and delete if we look at our blog we can see that it has all these latest articles right here but by default our website right now doesn't have that ability to post all of our latest articles like this and it posts it automatically once you make new articles so by default we can't really do that right now so how do we get that functionality and that's by installing a plug-in which is again basically like an app that will allow us to do more things so we're gonna update this right here and then we're going to preview it and again we want to change this so it shows our latest blogs so we want to go back into the dashboard and we want to download a plug-in that will allow us to change this so if we go to plugins and we click add new we want to search for unlimited elements alignments unlimited elements just like that and we see unlimited elements 100 000 active installations 5 out of 5 stars we want to install that now that's going to give us the ability to see our latest articles on our home page then we click on activate then we can skip this right here and once we go to unlimited elements widgets you should already be there but just in case you get out of there that's how you access this let's select the post widgets category and we're going to select the post blocks and install it the post list and install it and the post pagination and install it so let's see what all of these do we can now exit out of this and we're on our home page and now if we search for the widget post blocks we're not going to see anything because we need to refresh this so if we refresh this right here after you saved it of course now if we search for post blocks we can see that we have this new post blocks right here and then what we simply can do is we can drag it under this latest articles and now just like this page it has all of our posts so we needed to download that plugin in order to give us that ability so let's change some of these settings starting under content let's change the grid gap to 50 and we can see that adds more space in between here for the intro characters let's change it to 180 that gives us a little bit more text here i don't really want to show the date so under layout i'm going to select no for show date just to make it a little bit cleaner and then under post query which is just fancy speak for how many posts you want to show so right now we're showing nine of them we can go down here instead of ten we'll say six just so it's really clean and really simple so now it's only gonna show six so that's looking really good there's a ton of other options like if you only want to show blogs from certain categories if you make categories then you can also do that but we're not going to do that right now alright that's all we need to do for that if we go over here on the style tab we're going to change some of these options for border box width we're going to make it one just so it has less border for border box color maybe i'll make it a little bit brighter so we could do something like that or you can type in a certain color code these are all color codes right here we can see this code changing and i have a specific color code so i'm going to change it to e7 e3 e3 and that will change it to that exact code if we scroll down under content which is misspelled we can click on it and we can make 20 padding all the way through let me just show you what that would do if we had it 2 it would be having no space basically and if we do 20 it'll have a lot of space if we do 200 then i'll have almost no space so we can just do 20. and under image we can change the image height to be a little bit less maybe 270 pixels tall and under title we can change the title color let's give it a specific color let's type in three zero three one three three all right so we made it a little bit lighter and for the title hover color we're gonna change that we're going to change it to fb2056 alright so that's when we hover over it we can see this cool reddish pinkish fuchsia color next we're going to change the typography which is just a fancy word for font so we're going to click on this and we're going to do montserrat m o n t montserrat so that changed it to a cooler text in my opinion we'll make it 24 as the size which makes it a little bit bigger and for the weight which is the boldness we'll do 700. all right that's looking really good so we can click off of that and under text let's change some of this we can change the text color a little bit darker to 76 76 76 and let's make it a little bit smaller by putting 14 pixels right here under size and finally under button right here this will change this button here we're going to change the button radius which is the corners of the button to 10 you see how it's now rounded when before it was square and for background color we're gonna change it that reddish pinkish fuchsia color fb2056 and then for the hover which is hovering over it we're just going to make it a little bit darker cc one four four two all right so now when we hover over it it's like a little bit darker all right and for the font size we're gonna make it a little bit smaller so let's go here and let's just do 14 a little bit smaller all right that's cool let's see how it looks if it looks about the same and i think it does pretty cool all right the next thing that we're going to do is we're going to add a little bit of space up here and down here so let's see how to do that because right now it's a little bit too big so let's select the entire column like this and let's go to advanced and where it says padding padding is like on the inside right here margin is spacing but it's on the outside so this would like push this away there'd be space here where this would be inside here this image explains it a little bit better so here's your content so that would be like everything in here so that's your content everything there and then your padding is a space between that and the border so the padding is like all this right here and then the margin is on the outside so then you have your border if we had a border it would be here and then margins on the outside so that's the difference between margin and padding sometimes they act in the same way let's just change this to 70 on the top here on the right side let's go 90 so added space here on the bottom let's go 50 and then on the left side let's also do 90. all right to me that looks pretty good it's going to look a little bit different when this sidebar is removed so we can look it and that looks really good and let's move on to this next section down here all right so let's look at this and see what it is so we just have this right here so let's actually delete this here and let's repurpose this to make it look like this we can exit out of this all right so let's put learn more about us in ours so let's just click on here we can type it in here or here so let's just do learn more about us learn more about us and we can change this text right here i'm just going to change it all right and we can change this here we can change the button text to let's meet and let's link it to our about us page so when we click this we want to go to the about us page the way we do that is we just start typing about here and it should come up so we see the about us page and i'll link to our about us page and for icon spacing let's set it to 10. let's do a little bit more so the spacing is here if we don't want an icon we can just choose none here and it would go away all right let's change the padding a little bit so let's click on style and scroll down here and under padding let's make the button much bigger so we'll unlink the values so that they can be different and let's do 20 on the top and we can press tab to go to the next one and 70 on the right tab 20 on the bottom tab and 70. now that makes it much bigger and a little bit cooler also we can go to hover and let's change it so that when we hover over it it changes colors so let's go to background color right here and let's type in cc1442 all right so now when we hover over it it's gonna become a little bit darker which indicates to the user that it's a button all right now let's press update and let's check our results all right let's preview our results and see what we have now so we have this latest articles looking good love it and learn more about us so that's just like this all right and now the last section we have is we love to hear from you and that's it for the home page so let's go ahead and do that so let's scroll down let's change the text to something like we'd love to hear from you let's go up to this button and this is a really cool thing we can actually right click and press duplicate and click hold and drag it down to this section just so it's consistent and let's delete this one so we will delete it alright so that looks better and we can just change the text to get in touch so get in touch and then instead of linking it here we want to link it to our contact page so just start typing in contact and it has a little bit too much padding up here so let's go to advanced and change the top padding to zero the padding is again the spacing so that looks better and now we can go over here and let's simplify this by just deleting these small images so let's go here and press delete and go here and press delete all right that's looking better all right let's go to the first image and under style let's give it a maximum height of 500. it looks a little stretched out right now but we'll fix that and then object fit let's do cover because then it won't stretch it out and then just repeat for the second image click on it style height 500 and then we will make it cover so it doesn't stretch out and now let's see what our other one looks like and let's change the images to this man and this girl so let's see if we have that so we'll click on it go to content click and now we can upload files and select files and we're gonna do the man first press open insert media and then we'll click on it and do the same thing content upload file select files and we'll select the girl insert media perfect so this was definitely the hardest page let's update it and you definitely learn the most on this page and again you should just be following this along without putting in your own content or you're going to get distracted so we can look at it now and our home page is looking exactly how we want it to look and we learned a ton of things all right so let's close this for now and even though our website looks fine and actually perfect on the desktop if we go over here to responsive mode we need to make sure that it works really well on our mobile devices because half of your people are going to be coming from different mobile devices like tablets or most likely their phones so we can go up here and see what it looks like on their phone so this is what it would look like on someone's phone and it looks pretty good but some things aren't exactly right i mean so far it looks pretty good though but we need to change a couple of things like this doesn't look perfect and a few more things so that's the mobile and this is the tablet so this is what it would look like on the tablet like an ipad or any other tablet so it looks pretty good too but there are a couple things that we can tweak just to make it look perfect if we look on the tablet or on the mobile we can see that it makes the menu like this because a menu all written out wouldn't fit so with all these words written out it wouldn't fit so this is just perfect and that does all of that for us so that's really cool and it tries to make it responsive for us mostly but i think we can make it a little bit better so we start with the desktop version and the desktop version sort of cascades down to the tablet version and the tablet version settings sort of cascade down again to the mobile version so we're going to be working in that way we did the desktop first then we're going to do the tablet then we're going to do mobile all right so let's select the entire section and let's go to advanced some things we can change and some things we cannot change we know if we can change something just for the tablet or just for mobile if it has this little icon right here so we know if we're in tablet mode by this icon right here so we can just go ahead and change this maybe we'll change this to 135 to give it a little bit more space and maybe we'll change the bottom to 60 and that looks a bit better all right maybe this is a little bit too big right here so we can go ahead and click on it and we can go to style and we can go to typography and we can see that we're on the tablet version and we can change this to 100 just to make it a little bit smaller right that looks better and next we're going to select this guy right here but you see how hard it is to select him so we're actually going to go to our navigator open that up and go to intersection and then under column select this image now we have this image selected it was really hard to select it that's why we needed the navigator if we go over to style we can change the width to 18 and the max width to 18 and we have that guy a little bit smaller which i think looks a little bit better then to move them a little bit let's go to advanced let's unlink these values right here and for margin let's give them a top of negative 80 whoops and a left of 90 pixels there we go all right and we're all done with that so let's scroll down to the next section we can click on this next section by just going to the second section this is the first one right here this is the second one here so just click on this and then let's go to advanced and let's change the spacing a little bit right here so for top let's do 70 for right let's do 10 so we have a little space here for bottom which is over here let's add 70 so it gives us nice space and then four left that's add 10 so it adds a little space here then let's select our post blocks element right here and then under content let's adjust the grid gap to 20 so it's not quite as big so it looks much better on tablet all right this section is done let's scroll down to our next section and this looks pretty good we don't need anything for this this is fine so let's scroll down even further and next we want this to stack on top of each other instead of sort of being smushed i don't think there's enough space so we'll click on this whole column and let's change this width to 100 instead of 40 so we'll just say 100 and now it's stacked up on top of each other and it needs a little space on the bottom here so we're going to go to advanced and for padding bottom i just want to add 30 pixels of space then we can select our heading element and align it to the center and the divider center text align it to the center which can be done by clicking on style and center then the button we also can align to the center by going to content and alignment center then we can go here and we want these to be side by side but all the way across so we go to the first column let's give it 50 and let's give this 20 padding 20 pixels of padding and then we can click on this one give it 50 and 20 pixels of padding around it alright so now that is looking much better and very cool alright so we're all done with the tablet and now we're gonna look at the phone so let's go ahead and update that save those changes and let's go to the phone most people will be coming from your phone anywhere from 50 to 90 percent of your traffic is gonna come from people's phones all right so we're gonna click on this entire section and we're gonna go to advanced and we're gonna change this padding up here so we're gonna change the top padding to 90 to give it a little less space and the bottom one to 45. then we're going to select this heading up here and we're going to go to style then typography and we're going to change this to 50. make sure it has the mobile right here all right now we want to select this image again hard to click on it so we want to go down here under the first section to this image and let's go to content sorry style and do with 25 and max with 25. next let's go to advanced and let's unlink these values again so that they're not the same and for top let's do negative 7. and for left let's do 60 so it pushes him over a little bit all right we're all done with that let's select the second section this one right here and let's go to advanced and for padding make sure it's on mobile let's do 40 to give it a little less space 10 to give it some space on the right 60 to give it space on the bottom and 10 to get some space on the left here all right let's scroll down and let's go to the bottom section right here and what we want to do here is we want to change this padding here a little bit so let's go to advanced and let's change the bottom padding to 60. that just gives it a little bit less space all right everything else looks good after that so let's update that and that is it for our mobile friendly website so now we can preview it let's exit out of here let's preview it here it looks great on our desktop it looks great on our tablet and it looks great on our mobile device very very very cool there is one thing that i noticed on the desktop let's go here that this is a little bit squished and that's because the content width isn't full width so let's click on this entire section go to layout make sure the content is full width and that will make sure that it goes all the way across all right but that is it so let's update that and we are all done with our home page and it's looking really really great so let's see what that looks like on our actual website by just removing all of this up here and going to ourwebsite.com and we can see our homepage now and it's looking super super good now the header or this top part isn't done yet and as we can see in the example it looks a little bit different with this logo up here with the search up here and it works a little bit different with the mobile so there's a transparent here and this menu how it's circled and it drops down we can see that it's a little bit different here this is square it's not transparent and this one just looks a lot better in my opinion so let's learn how to make this logo or any logo that you want and let's learn how to make this navigation menu for the desktop the mobile and the tablet alright so let's exit out of here the first thing that we're going to do is create that logo so we can just open up a new tab and let's go to logomaker.com that's l-o-g-o-m-a-k-r without the e dot c-o-m and press enter i'm gonna create a new design and exit out of here and the first thing that i'm gonna do is i'm gonna search for a graphic like paper bird and press enter and we see that there are like three million graphics here you can search for anything that you want this is the one that i want and we can just click hold and drag and make it bigger or smaller we can drag this around we can change the colors here we can make it like a traditional logo by just dragging it small and adding text and then putting something like you know explore or something like that and make it smaller and then bigger and you know that could be our logo that would be something like a traditional logo right but we just want that icon in there just like apple does if we see this they just have their icon in there and so that's what we're going to do also all right so what we can do is we can click on it and we can just click hold and drag and we can drag it all the way up to 512. so the width is 512 so that's what we want we can see it right in the bottom right the width 512 and then let it go this is the perfect size for the fave icon that we're going to make so this little icon up here i know that we're working on the header but just to save time we're also going to make the fave icon at the same time all right so we have our color we're going to do fb 2056 for this color and then we're just going to save it so save it and we're gonna download the low resolution file all right that will save it we're just gonna drag that to our desktop save it to your desktop and then we're gonna save a different version we need two versions because we can see right here this is one version of it this is like the black version of it we see down here this is the other version of it and we see up here this is the fave icon the little icon up top to identify your website really quickly all right and if we go to the blog page we can also see if we scroll down and we click on blog we can see this version here because i think that looks a lot cooler than the darker version all right so we can exit out of here and this is the pinkish reddish version so let's make another version let's make it all black but let's make it a little bit see-through so let's go about 70 see-through and let's save this version also so we'll download the low resolution file and i'll just download right there all right and i'm going to drag that to my desktop also and we can exit out of here so just save it to your desktop however you can and exit out of this we have these two logos right here i'm just going to rename them you don't need to do this i'm just going to say black and reddish all right once we do that we can exit out of here that's all for logo maker thank you very much alright and now to edit this top header up here it's different than editing this page right here what we can do is click on customize up here and we need to edit both of them so what we can do is click on header builder and then let's click on blog all right and we can see that this menu looks really bad on this page because you can't really see it so down here we can build the header so there are three different sections here and if we added one to this it would actually be above this site title and logo so you can put things above here and you can put things below here right now all of our elements are in the middle right here and we can click on button here and we could link it to like the contact page by going forward slash contact and it would go to the contact page and we can also change what it says here say like contact us we're not going to be using the button right now so we're going to exit out of that just remove it and it'll delete from there all right next we want to change this color so that we can see it we're going to click on the primary menu and then we're going to go to design and we're going to scroll down and we're going to see the text slash link color and we're going to click on it and we're going to change the first one to black so now it's black and now we can see it very cool all right next we're gonna click on our site title and logo and here we can see our two different logos the regular logo and the retina logo we don't need to worry about the retina logo because our logo is high quality anyways a retina logo is just a logo used for retina devices like the macbook pro but it's going to look perfect on there anyways because our logo is such high quality so let's remove this one and let's change this logo let's upload files select files let's go to our desktop and let's use the red one and press open alright we're gonna select this and we're going to skip cropping because we already cropped in logo maker and we're going to change the size of this so for logo size i don't want it that big so i'm going to change this to 50 and to me that looks really good next we're gonna add a little border underneath it just so that it separates it out so let's click this entire cog wheel right here and let's go to design and let's select the bottom border size to be one and the color we can drag all the way to black next let's add a search to our website up here so go over here and press the plus button and we'll just click search and that will add it up here let's click on the search let's set the icon size to 32 because it's a little bit too small that looks much better and let's go to design and let's make this search icon also black alright and now our non-transparent header is done that's super awesome so let's click on publish just to save that and let's go to our home page by clicking on the bird or home here all right and let's click on back and under header types let's click on transparent header alright so let's remove again the retina logo and let's change this logo up here we're going to change this to the black version so just upload files select files click on black dot png and press open all right then we'll choose image and that will look way too big so let's change that let's put in 50 right here and to me that looks really cool it's like flying in the sun and to me this looks a little too dark you think you would click on search but you don't you actually go up here because it's the transparent header and click design and then scroll down until you see search color and we can click on it and we're going to make it an off-white so we're going to make it e e e e e all right so that will change it only for this transparent menu all right and finally we're going to get this bird up here because it's not our site icon yet so let's go back let's click on site title and logo and let's scroll down and again here you can change your site title so if you don't like what you put like create a blog that's what shows up here create a blog learn how to create a blog that's right here that'll show up in the search engines if you don't like it you can edit it right here but let's put in our site icon just click on it and let's select our site icon and let's select this pinkish reddish bird skip cropping and now we can see it up here and that looks awesome alright so now we can click on publish and now our desktop versions of our transparent header and regular header work perfectly but what about our tablet in mobile we need our header to look great on that too so let's go ahead and do that let's click on back and let's go to header builder and now we can click on this tablet to preview what it looks like on tablet and we can see that it's not transparent and we want it to be transparent so let's click on transparent header and we can set it to desktop and mobile and now we can scroll down and obviously this is way too big so let's make this 60 or maybe 50. yeah that looks good and then we can go up here to design and under background overlay we can drag this all the way to the left to make it transparent all right now maybe we want this to be rounded so let's click on the toggle button and let's actually make it a little bit thicker i think that looks better then let's go to design and let's give it a border radius of 100 just so it's round i think that's pretty cool all right next let's add a search so let's click on this and add a search and let's click on the search and change the icon let's make that 24 just to make it a little bit bigger maybe we could even do 30. all right that's it for tablet that's looking really good let's switch to our mobile menu so let's publish this just so that we save all of our changes and let's click on mobile all right so this is what it looks like mobile looks really crazy let's go back one and let's go to header types transparent header and let's change our logo with let's do 40 this time can't really see it that great right now and let's go to design and go to background overlay and let's make that clear again there we go all right so let's look at the menu right here so let's click on the menu and i think we want the initial color to be black and the hover color to be that reddish pink so let's change that here let's say initial color black this color will be that pink and now that looks much better all right let's click on this search icon to make it a little bit bigger let's exit out of here and let's make this about 24 all right maybe a little bit bigger actually maybe let's make it 30 and that looks pretty good we can also switch this around if we want maybe this can go on this side and i think i like that better all right or maybe we don't even want to search on this so we can just exit off this if we wanted to we can also move this closer if we want by clicking on design and unlinking these values and for right we can put in negative 5 if we want just to make it a little bit closer all right and one last thing if we go back and click site title and logo and we scroll down we want to make sure that the logo is 40 for mobile and we can click on this and make sure it's 54 desktop and click on this and we can put in 50 for tablet all right so that'll make sure that your logos are the right size all right and now we can publish it and we can go back to our website by just deleting all of that and now we have a perfect header that works on all devices and it looks super good and it works on the transparent header and non-transparent header and it looks super great all right so that was by far the hardest part of this entire tutorial everything else is going to be a breeze all right the next thing that we're going to do is the footer footer is like your feet at the bottom we're going to change this to be much better i want to put the menu over here so that when people get to the bottom of your website they can click on a menu i want to put the logo right here because i think that'd be cool and then maybe your copyright right here all right so to change that we go to customize again and then we go to footer builder all right and we have it right here and again you can stack things on top or below by using these columns here all of this right here is this right here first let's change this copyright so just click on it and let's just explain what this does this copyright is this copyright the c is a c this current year in puts the current year right here and the site title in puts the site title right here what we could do is we can delete this and we can type in make a blog and that'll update right here maybe we want this to link to the home page so just highlight it and then click on this link and enter in your home page here could start typing in home and it'll link to our home page and then we can highlight it all and under alignment we can align right all right that looks a little bit messed up now but it'll make more sense in a second we can also click on design let's unlink these values and on the right side let's add 20 pixels of space to the right and it's not updating right now but that'll add 20 pixels of space over here and then we can also change the text color right here and we can change that to white just so it pops a little bit more all right now our first element is done next let's remove this right here because we don't need it let's just exit out of here there we go and now we can see the space so that's good let's click on this cog wheel and let's do three columns instead of one let's click hold and drag this one to the right side all right and now let's add in a menu over here so let's just click plus and let's add in a footer menu right here when we click on it it's gonna ask us to configure our menu from here and our primary menu is for the top and for the footer menu we're also going to do that menu and it'll show up right there so that's awesome so we're going to go back and we're going to change these colors actually so again go to footer builder let's click on this menu here and then let's go to design and let's change these colors so this one's normal this one is hover when you hover over it and this one is active whatever page that you're on so normal we're gonna do white and then hover we're gonna do that pink color and active we're also gonna do that same pink color all right so we're currently on the home page so that is the active menu so it's pink and when we hover over it it's also pink all right in the middle here we're going to add an image the way that you add an image is you add html so we'll add html we'll click on it we'll remove all of this text we will add media i want to choose that pink bird and insert into post all right and it's way too big so let's edit it here and we're going to align it to the center and we're going to change the size to a custom size and we'll just put in 50 in the first option and keep the second option the same so that it scales proportionately all right we also want to link to a custom url and we can just put in our website here www dot all right then we can hit update and now that looks much better and pretty cool all right but it's not aligned perfectly so let's click on this here and go to design and under padding let's change the top to 35 first we have to unlink the values the top to 35 this can be blank the bottom to 30 and this can be blank now it's looking perfect on the desktop but what about the mobile versions i'm just going to click on publish to save all of my changes now let's click on the tablet mode and scroll down and let's go up here and go to general and let's change this layout to vertically so that it all stacks on top of each other and then we can go to design and we can change the inner column spacing to 36 just so it has a little bit more space and then click this footer menu element and click inline and then go to design and let's unlink menu spacing and let's add 10 on top delete that and 10 on bottom and delete this and now what we can do is we can go to the copyright over here and align it to the center all right that looks pretty good all right next let's see what it looks like in mobile mode so let's click on mobile and it looks pretty good except for this right here the copyright it doesn't have enough spacing at the bottom so what we can do is we can click on design and we can unlink these we can give a zero top margin and a 10 bottom margin and that will make it look much better and perfect all right so we're all done with our footer it looks great on the desktop version it looks great on the tablet version and it looks great on the mobile version congratulations we can now publish it and we can see our finished home page all the rest of the pages are going to go much faster and much easier so let's just check it out and we can see that our header is done the guy swoops in and our footer is looking amazing all right and the next thing that we're going to do is we're going to do our blog page so our blog page looks like this right now so there's nothing you know on it and what we're going to do is we're going to copy this home page header here and put it on the blog as the first thing that we do so press control click if you're on a pc or command click if you're on a mac or right click and open link in new tab just so that we have both of them opened i'm going to click refresh to get this admin bar up here for some reason it didn't show up all right right now i'm not seeing edit with elementor so we want to go into our dashboard and we want to go to pages and we want to go to blog and we don't see edit with elementor because we haven't enabled it yet so once we click on blog then we can click edit with elementor and we have the elementor editor that we can use all right once we do that i want to actually open this up with elementor also so i want to edit this with elementor and then i want to open up the navigator and i want to take this section and right click it and i want to copy it and then i want to go here right click and paste it now it's going to have that section in there perfectly all right but we don't see it being transparent so what we can do is we can press update and we can go back here and we can just remove everything up until slash wp-admin and that will get us into our back end and then we go to pages and we want to update this blog page so it has a transparent header so we come back down here to blog and we click on it and then what we're going to do is we're going to go over to this astra settings right here and click on that and then we scroll down and where it says transparent header we want to enable it so when enable transparent header and press update and now we can view our page now we can go back and make sure this is updated then click refresh and now we can see it has a transparent header so that's super cool all right we don't see the navigation right now but we would if we went to our page so let's just do that let's just go to our page and go to blog and now we can see it it looks exactly the same it doesn't have all those extra sections and it looks really cool let's edit it further alright so let's click on this heading right here and change it to latest posts for our latest blog posts all right then let's open up our navigator then let's click this intersection right here and let's delete it that will delete the guy but now our spacing is all off so let's click up here and go to advanced and instead of 230 and 80 let's do 286 and 286 so it's nice and big all right we can exit out of there for now and let's change this background image by clicking on this then going to style and then clicking on choose image and then we'll upload files and we'll select files and this is the folder that you downloaded so let's go to blog page and blog page header and we can open this one up then we can click insert media and that looks pretty good it's a little bit bright and it's a little bit hard to read let's add a background overlay and black is fine and we can do opacity so we're gonna do point one so we don't want it too dark point one is just great so it makes it a little bit darker and the text pops out a little bit more and that's pretty awesome we can update that and we can view our blog page if we just refresh and now that's looking awesome and that is different from our home page so we have our home page and now we have our blog page that's going to contain all of our latest posts all right now we're going to add a couple of more sections below here so let's go to blog page and let's click on this and let's add one and let's click on it and let's add another one so we're adding two right here all right now what we want to do is we want to click on this little widgets area and type post and we're going to see this post list element right here so we'll just click hold and drag this is the plugin that we downloaded called unlimited add-ons and it's gonna add all of our blog posts so that's super cool for the second element we're gonna add post pagination so click on this and just type in post and we'll see it right here same thing from unlimited elements and just click hold and drag and we should see it right here this is going to add basically navigation so that you can go to different pages of different posts for example if you click two it would go to the second search results of those blog posts all right but let's make this look much better so let's just click on this let's click on the pencil icon up here and under content and general for list gap let's make it 50. that'll add some space and the intro number of characters i want it to be a little bit more so people can read a little bit more so i'm going to put 200 and that'll add more words here and then under layout i'm going to show date right here all right and we can just choose after intro all right but i'm going to remove the author right here and i'm also going to remove the date icon i don't think it's needed all right that's looking pretty clean under posts query i'm gonna scroll down and put the max post at four just to show you the different pages of posts that we can do you can obviously do more than four posts on a page but i'm just gonna do four and if we scroll down under post pagination and ajax we'll go for use pagination widget because that's what we have down here and then we'll say enable ajax that's going to load up the pages dynamically so it doesn't have to refresh the page all right let's move to style so let's go to style and let's give each item a solid border but only for the bottom so just put one here unlink the values so we'll do 0 zero one and zero and for padding let's unlink these values also and just give it a bottom padding of 50. and then under content we're going to change the content background to white so that it blends in and for content padding we're going to do 25 so that there's a little bit more space for image we're going to set the width to 400 and the height to 250 for image radius that's going to give us a little bit of rounded corners we're going to set that to 30. to me that looks super awesome now under title we're going to click on the title typography and we're going to do montserrat the size is going to be 33 pixels so it's going to be bigger and the weight it's going to be more bold so it's going to be 700 and what we can do is we can make it all uppercase if we want so that is all uppercase and that looks pretty cool and we can change the line height to something like 48. all right so let's take a look at that and that's looking pretty good let's continue it looks a little bit squished right here but it doesn't look like that on a regular screen all right there's not enough space in between here so just select the entire section go to advanced and unlink these values do a top margin of 80 all right and that will add us some space right here all right that is looking pretty good let's move on to the pagination and go ahead and click on it this little pencil icon and let's go to advanced and change the spacing a little bit let's unlink these values let's do a top margin of 50 and a bottom of 75 to give it some space at the bottom that just adds some space here and here all right then click on content and under previous and next i think it's kind of cool if we enable them so now we can see previous next and it makes it easy for your users to go forward pages or back pages so they can easily see all of your blog posts and there we have it we can click on update and we can view our blog page so let's go ahead and view it let's refresh this and it is looking really really really great we can go to the next page and we can see that it loads automatically and that's really cool that's what the ajax did it made it load like that so it loads without reloading see that so i think that's super super cool the next thing that we're going to do is we're going to make this responsive so it doesn't look exactly right it looks pretty good but not perfect so we're gonna make it look perfect for your tablet and for your phone all right so what we can do is go to elementor to edit and then click on the responsive mode and let's click on tablet and let's go to the first section and go to advanced and for the padding let's add a little bit of padding to the top let's do 160. and let's add some to the bottom so 150. all right that's looking pretty good and then let's select our second section and let's open up the navigator to make sure we're selecting the correct section so here it is and we're going to unlink the margin values and give it a top margin of 50. all right then we're gonna select our post list which is this right here and then under style and image we're gonna give it an image height of 400 so that it looks a little bit better and then under title and typography we're going to set it a little bit smaller to 24 and for text typography we're going to set it to 13. alright so that is looking pretty good we're gonna click update and we can see what that looks like by exiting out of here and just going like this and that is looking really really great all right let's open that back up and now we're going to switch to the mobile mode so like your phone and we're going to change some of these settings too all right let's open up that navigator again let's select the first section which is this right here we're going to set the padding to 95 at the top and 85 at the bottom that looks about right for the heading element right here if we go to advanced we're gonna make sure that everything is zero and for the second section which is here we're going to go to advanced unlink the values and give it a top margin of 50 to add some space then we're going to select post list and then under style we're going to do item padding and we're going to give the bottom 15 and we're going to unlink the values and give the rest 0 0 0 15 0. all right and then under image under image width instead of 400 pixels we're going to do percent and we're going to do 100 percent so the image will go 100 across except for this little space here all right that's looking much better and we could give an image height of 250 and we could set the image radius to 15 so it doesn't round that much and then under title for typography we can set this to 22 and for line height make sure you're on pixel px and we can set that to 35. all right and we can check it out and it's looking pretty good all right we can select this right here post pagination and under style under page numbers we can set the dimensions to 25 and that will make it all fit and then we could go to advanced and we can make sure all of these are zero zero zero zero zero just so it gives us the most amount of room all right if we click on update now we can view our site and it should work for your desktop it should work for your mobile it should work for everything so let's check it out and it looks super super great all right next once we make sure that we have updated this we can close out of here and the next thing that we're going to do is work on our about page so i'm just going to right click and open in new tab and that's because i'm going to copy this header to this about page header right here so we could just change this right here but i think to keep it consistent and get all the mobile friendliness and all the work that we did let's just copy it over so we can edit with elementor right here and then go to our about and edit with elementor and we could just click on this section here and press copy then we can go over here we can paste it in here somehow we'll go here and we'll right click and press paste now that's there now we can click hold and drag and drag it on up all right so that is looking pretty cool and we can delete this right here all right and now we can exit out of here for now and type about us and then we can change this photo in the background so just click on it go to style go to choose image then upload files and select files and we'll go up a level then we'll go to the about page about page header and we'll press open then we'll insert media and that will change that that's looking really cool all right so we're gonna update that to save all of our changes and let's go and preview and see what that looks like so let's go to our main website and let's go to about and let's see what it looks like so we have this about and i want to show you how to make a gradient overlay so it goes from one color to another but it's see-through so let's see how to do that and this could be really helpful if for example we can't see this navigation very well we do a gradient overlay and you make it darker over here and lighter over here and then you can see the menu better so let's go ahead and check that out all right so under style if we scroll down and go to background overlay we can click right here on the gradient overlay and then we want the color to be from white to black now we can't see it that well so we can make it like this and we can see it a lot better obviously that doesn't look good but that just helps us see it better so we can change the location so if we do that we can see how it's changing right here so we can change the first one to 20 and we can change the second one to zero if we want and it's very sharp now we can change the opacity to something like point three and now we can change the angle so maybe we want it over here or maybe we want even over here all right maybe i want it a little bit darker in this corner so let's mess with the angle like this and the other location like this so it'll be a nice gradient all right and that will darken up the menu up here and maybe we won't make it so dark so we can just go like that another cool thing that we can do is we can just have it dark in this corner and not light over here by going to this first color and making it see-through so to me that looks a lot better all right so now it's just dark in this corner where our menu is and it's barely noticeable but if we change the angle we can notice it so i'm just going to change the angle to go all the way at the top right here and change the location a little bit just to go up and i think that looks pretty cool now it'll be darker here but actually our logo is dark so let me change that once again to like that so then our logo is dark here the menu is light over here i think that'll work pretty good all right and we can update that and now we can go back to our about and we can refresh this page and we can see the darker overlay right here and to me that looks a lot better that makes it pop a little bit more if you wanted to get rid of that overlay it's pretty simple all you have to do is click on it and it will disappear and press update and now we can see what it would look like without an overlay all right again if you wanted to do that in reverse then you can just go to the history and re-add it we can click on the whole section go to background overlay and maybe make it a little bit less and press update and now we can see that again so feel free to experiment you can always go back and forth so that looks pretty good all right next let's scroll down and on this one and let's change our mission let's just change that to nice to meet you and let's align that to the center let's also select the divider and let's align that to the center also and let's give the divider a width of 25 all right so it's a little bit bigger all right the next thing that we're going to do is we're going to switch these right here so we're just going to drag this column to this side and switch it over just like that super easy we could also make this column a little bit bigger by just selecting it and making it bigger by dragging it maybe we want this to be sixty percent we can see it right there it'll look a bit better on a larger screen like that but that's looking pretty good all right maybe we don't like this shadow behind here so we can just go ahead and click on edit and then go to style and then scroll down and where it says box shadow we can just revert to default and that'll get rid of that for border radius we can make it more curved and we can do 20 pixels and it'll become more rounded all right next we can select this column and we can vertical align it to the top and that'll barely do anything but that'll make it so this text is at the top always instead of being aligned in the center which would be scooted down a little bit then we can go to advanced and remove some padding and we can set that to zero because there's all the space over here and we don't really need it so let's set that to zero that's looking better alright so we can preview what that would look like and that looks pretty nice all right and maybe we want to add a little bit more text here so let's just duplicate this and add a little bit more text and see what that looks like and that lines up nicely all right let's scroll down and we're gonna remove this section here so just exit out of there and now we're gonna duplicate this section here so we'll just click on this and duplicate and now we have it like that so that's looking pretty cool and now we'll just drag and drop this over here just so it looks cool like image on left then image on right and now we'll make this column less so we'll make this 40 and the other 160. and make sure we click on this actually and then go to advanced and make sure the padding is zero so it goes all the way across there we go and now we need a little space right here so we can click on this column and then go to advanced and select the right padding 450 just to give it a little bit more space and we can also add 50 pixels of space to the left padding just to give it some padding over here all right that's looking pretty good and for the heading let's change it to upcoming projects all right let's change this image right here let's go to content and click on it let's find a cool image i think it's called hiking and there we are that's a cool one it should already be in your media library and we can click insert media all right under style let's change its height to 500 pixels and let's set it to cover so it doesn't stretch that's looking awesome all right let's add a little bit more text let's just copy this and duplicate it just so it's a little bit longer and let's actually delete this last word here and that's looking pretty good now let's open this back up and let's change the spacing right here maybe it's a little bit too much so let's click on this and go to advanced and change the top to 40 and the bottom to 120 that way it'll all be spaced really nice and that is looking pretty good i really like that alright so that's looking excellent the next thing that we're going to do is we're going to make it mobile friendly so let's go ahead and go into the responsive mode let's click on tablet as we did before and let's see how it looks so let's go to the column of this right here and let's give it a width of 100 and we see we have space over here so let's go to advanced and let's change this to zero let's change them all to zero actually and under margin let's unlink them let's give it a top of zero and everything else let's give 50. all right that's looking pretty good let's select our second column here and let's go to layout let's give it a width of 100 and then go to advanced and give it a padding of 50 right and 50 left all right awesome let's continue going down and this is looking pretty good let's click our entire section and for padding top let's do 20 and bottom let's do 55. let's give both columns a width of 100 and then for the first one go to advanced let's get rid of these let's go zero and zero and under margin let's do zero on top right 50 unlink the values let's just do zero on top right bottom and left 50. all right now we can scroll down and let's click this column right here go to advanced and do the same thing so unlink the values we'll do 50 50 and 50 and that should look super super good all right we're done with the tablet view and that's looking awesome i think we can also click on this and then go to responsive and reverse the tablet and reverse the mobile so that it's picture text picture and text all right so now we're done with the tablet now let's do mobile so i'm gonna update that and i'm gonna click on mobile and now we're gonna change it to work perfectly on your mobile device all right so this is looking pretty good but under this section we can go ahead and click on it go to advanced and we can set the top padding so it's a little bit less to 40. and let's select this column and go to advanced let's unlink these margins and make sure that they're all zero and then for padding let's do 20 and then let's add a little space here for 30 and 20. and then let's select our divider element and go to advanced unlink the values and set the bottom margin to 20. that'll add a little bit more space all right let's scroll down let's select this right here and then go to advanced again and we can do top padding of 20 so it's not as far away and let's do a bottom padding of 60. let's see what that looks like all right that looks pretty good all right let's select this column right here and unlink these values and let's copy what these values were which i totally forgot so 20 30 and 20. so let's do that 20 30 and 20 20 30 and 20. all right so that's looking pretty good and then for this it should be the same as this one up here so let's see what that one was that one was twenty zero and twenty so zero twenty zero twenty let's try that for this one zero twenty zero twenty and this is zero there we go that is looking much better and there you have it i think that looks really really cool i really like that all right so we're all done with that it works on the tablet it works on the mobile and of course it works on the desktop super super cool let's update that we are all done with our about page all right the next page that we're going to design is the contact page so make sure this is updated and we can go just to our website by deleting all of that and then going to contact right here and then editing with elementor we are once again going to replace this with this top image up here so we can just edit with elementor and we're going to copy this and paste it here all right so let's open up that navigator again just click on this right click and press copy and go back here and scroll down and right click and press paste click hold and drag all the way up sometimes you gotta wiggle it a little bit and we can exit out of here all right let's change this to let's get in touch and let's change some of this contact info it's pretty easy you just click on it and you change it so and we can click on this and we can change it to my email and we can click on this and change it to my phone number all right and then of course we can click on any of these social media icons and we can put in your social media accounts right here so you just put in the link right here like facebook.com forward slash whatever your profile is and you can find that on facebook or twitter or google you can also add instagram or youtube or whatever you want by adding it here and then just clicking here and you can add anything that you want they have tons and tons all right you can also go to style and change any of these colors but i kind of like these colors so i'm just going to keep it as is another thing that i want to add is a google map so i'm going to add a new section so here this section and then i'm going to click on widget and i'm going to add a google map so click hold and drag and that google map will show up now i can just enter in whatever i want let's see malibu california and that will show up right there i can zoom in a little bit if i want and i can also change the map height maybe i want it to be 400 a little bit bigger and that looks pretty cool to me maybe this is a little bit too vibrant for me so we can go to style and we can go to css filter and just bring the saturation down a little bit like to 60. you could bring it down all the way and make it black and white which is kind of cool but i'm just going to bring it down a little bit because it's a little bit too bright for the website so maybe put it at 60 and that looks kind of cool all right i want to try to get rid of the spacing around it because i want it to go all the way across so right now we can see that it doesn't go all the way across and that's because of a few different reasons the first reason being that we can click on this and for content width we can do full width now it'll go more across but we still have a little bit of space here and here and here and so it doesn't look perfect so let's see how to get rid of those it could be in two different places it could be up here and we could go to advanced and we make sure everything has zero in it and if that doesn't do the trick then we click on the column and we go to advanced and we make sure everything has zeros in it and that seems to have done the trick so now we can see it's flush with this and there's no space and that looks pretty cool it's an interactive map too so that's pretty awesome we can zoom in and it's just a regular google map so i really like that alright so that is looking pretty good i like that maybe there's a little bit too much space around here where is it maybe this section here and so we can go to advanced and i'm not seeing any space in there so it's probably within this right here so it's either in here advanced there it is so there's a little bit too much space here for me so i'm going to make that a little bit less i'm just going to do 80. and to me that looks pretty good all right so this page is pretty much done now i want to see what it looks like on the responsive mode so i'm just gonna click on update and first i'm gonna check it out to see if it's all good so i'm gonna erase all of this and i'm gonna go to contact and i'm gonna make sure it looks good it still says about us so i forgot to change that and i forgot to change the background image so let's do those two things let's put in contact us and let's change this image by clicking on it and going to style and choosing image we already have this in our media library if we search section then that is it and we can insert media it's already in there all right so that is looking really great now we can update that and now we can view it here it'll actually say contact us very good all right now let's do the responsiveness for this let's go here to the responsive mode and click on tablet that looks pretty good that looks pretty good too and everything in here is looking pretty good maybe a little bit less padding i believe or maybe this section there it is maybe the bottom should have 50 instead of 80 and that will give us a little bit less padding here and i think that looks a little bit better maybe this map is a little bit too big so if we go to height we can do 300 and that looks a little bit better all right so let's update that and now let's go to our mobile mode so let's click on this again and go to mobile and see how it looks contact us let's get in touch all of that looks pretty good perfect maybe let's add a little bit of different height to this so let's go to advanced and for padding bottom let's add a little bit to it let's add 20. all right so that's looking pretty good and for this map let's go and make it 320 for the mobile all right and this is looking awesome so let's update that and let's see how it looks we can refresh this and we can resize it that is looking really good and the mobile is looking very good all right everything is looking perfect however there is one thing that we didn't talk about and that's this form right here how do we edit this form if we click on edit with elementor and we exit out of here and we scroll down and we click on it and we click edit just like we normally would it just has this thing called a shortcode now a short code is just a code to have this form entered in but how do we edit this actual form if we wanted to so the way we do that is we go into the back end of our website so let's go into the back end of our website we can exit out of here and then we go to wp forms this is one of the plugins that was automatically installed when we installed our template alright so this is the code right here that code that was in there and this code corresponds with this form so we're gonna edit this form and we can edit it all right here so if we wanted multiple choice we would just click hold and drag and put it in there if we want to delete something we can delete this multiple choice and i accidentally clicked on it again so we can delete this one also so you can put all of these different fields on here you can even put a number slider by clicking on it saying how was our service or something and people can select it and slide up and down and then once you save it you can actually go to your website and we can see that it's changed right here so that looks pretty cool but maybe we don't want that so let's go back and let's delete that and you can play around with all the things inside here it's pretty cool we can also go to settings and we can change what it says when it's sending the message and we can also change the notifications so the notification this is to the admin email so this is the email that you use to install wordpress on but just to make sure you can put in your email address so that all the message send to you we can change what the subject line is maybe it says new website message and the from field who is it from it's from the your name field so it's their name so your name let me save this so that that goes away so your name so it's their name that would be who it's from and that makes sense and then it's from your website so that's admin email so that makes sense also and then who do you reply to you reply to their email address so this is the tag that corresponds with their email so this is just the code that puts in their email so that would be when you're replying to the email it will reply to whatever they type in here and then in the email message that you're gonna get in your email inbox it's gonna have all the fields so it's gonna have their name their email and their message and that's everything's gonna be sent to your email all right so all that makes sense we can also click on confirmations and then it says thanks for contacting us we will be in touch with you shortly alright so we can save that that's how you control the form and you can see when we do it and we send the message it'll say thanks for contacting us we will be in touch with you shortly all right then we can open up our gmail and we can see that we have this email right here so it emailed us hey hey tyler i must have put that and then it says hello there i accidentally put my name at hate at tyler so that's why it's saying that right there your name hey tyler it should say tyler but accidentally put hey at tyler here alright so that is how you do it and that's super super cool and now we can exit out of that so now we know how to control this and you basically know how to control everything on your website except for one thing and that is when you click on blog and you click on this latest post we haven't been able to control this page yet and what i want to do is i want to get rid of this background and change a couple of more things so how do we do that all right so to change it we click on customize and then we go to global and then we go to colors and then we go to content background right here and we have to scroll down a little bit and we want to make this white see now it just blends in perfectly next we can go back and back again and then go to blog and go to single post and we're gonna make some changes here for example maybe we want this image on top here and not on bottom so we can click hold and drag and drag the image on top i think that looks pretty cool and then what we can do is we can say we want publish date to be here and let's hide everything else because i don't think that it matters and we're going to keep it super clean all right that is looking pretty good that's how i want it let's click on publish to publish those changes next we want to edit the archive pages which is the search pages so let me do that again i did it fast we'll go back and go to blog slash all right so let's search for travel here and this is what comes up so these different blog posts and this is the page that we're going to edit the search results page all right so again we're gonna hide everything except for publish date we'll hide these and we'll bring publish date to the top and we'll see what that looks like all right now that's changed that's good all right so this looks pretty good let's click on publish and let's exit out of there and now we can see if we go here and search for something like travel we can see that it looks really good and it's already responsive and that looks great the astra theme has taken care of that for us and if we click on our blog and click on a latest post we can also see that it is also responsive astra took care of that for us the astra theme took care of that for us all right now we can go back to the home page and we are all done with our website we did it we did it all step by step with no steps skipped our website is looking super amazing let's just take one last tour of it it's looking great all of this works perfectly it works on your desktop your tablet your phone it was really fun showing you guys how to do this i appreciate you and i think you should be super proud of yourself there's one more thing to do if you want and that is to log out so that you can view the website as your viewer would view it you don't have to do this obviously right now you might want to go back and put in your own content now that everything is all set up but just in case you want to log out you can so you can hover over on the top right and you can click log out and then we can go back to our home page and we can view it just like the user without that black bar on the top so congratulations again please remember to comment rate and subscribe i'm tyler moore thank you so much

Channel: Tyler Moore

Views: 738,197

Keywords: create a blog, make a blog, create a wordpress blog, make a wordpress blog, wordpress blog, build a blog, blog tutorial, how to start a blog, how to make a blog, how to start a blog for beginners, how to create a blog, how to make a blog on wordpress

Id: BhltwjuiEk4

Length: 134min 31sec (8071 seconds)

Published: Mon Nov 15 2021