Complete WordPress Tutorial for Beginners 2023

what's up party people my name is daryl wilson and today in this video i'll show you how to create a wordpress website step by step for complete beginners now many users who watch my channel are already very experienced with wordpress but there are a lot of new subscribers who watch my channel and want to learn how to use wordpress for the very first time so today in this video i'll walk you through the basics of wordpress and the popularity of wordpress is growing wordpress now controls up to 40 percent of the entire internet making it the most popular platform for building websites in the world it's completely drag and drop really easy to use and anyone can get started with it today i'll walk you through how to build your website you'll have access to various templates and pre-made starter websites to help build your new wordpress website i'll show you how to pick a pre-made template adjust the color change the text and turn this pre-made templates into your new website for your business or personal use and the best part everything is drag and drop so you don't need to have any experience or knowledge of coding to build your new website you're going to love your new website and i'll walk you through how to build your own step by step in this wordpress tutorial first let me give you guys a little history of wordpress wordpress first came out in 2003 as a blogging platform this was the first version of wordpress and it was based on another software platform called b2 cafe log which was actually abandoned by the original developer in 2005 wordpress came out with wordpress themes wordpress theme set the overall structure of your website and gave you more customization options just a few years later plugins were developed and added giving wordpress websites different functionalities this started the idea that wordpress could be more than just a typical blogging platform in 2010 automatic was founded by the co-founder of wordpress during this time many new developers joined the wordpress ecosystem and wordpress products were emerging on the market with these advancements wordpress can now be used also as an e-commerce platform and other types of websites shying away from the original blogging platform it once was during this time wordpress only had about a 10 market share for websites on the internet in 2015 wordpress version 4 came out this version of wordpress mainly focused on the theme customizer creating a really nice interface for users and stabilizing wordpress as a platform with authority during this time automatic acquired woocommerce which was the main ecommerce platform for wordpress at this time wordpress now had a 23 market share of all websites on the internet and fast forward to 2022 wordpress is now the most popular cms platform on the internet for making websites developers from all around the world make products dedicated to wordpress wordpress offers more than 55 000 free plugins in the wordpress repository and 31 000 wordpress themes and as of today wordpress powers 43 of all websites on the internet wordpress as of today is the most popular cms in the world to give you a better understanding wordpress controls 43 of the entire internets it's only followed by one of its competitors shopify which has a market share of four percent then followed by another competitor wix which has a market share of a mere 1.9 percent so if you're wondering why everyone's using wordpress and you want to know how to use it today i'll walk you guys through how to make a wordpress website step by step in this video i'll walk you through how to get web hosting and a domain i'll walk you through how to install wordpress and get your website online i'll then introduce you all to the wordpress dashboard and show you how it works i'll show you how to create pages and blog posts for your website i'll walk you through installing a wordpress theme and explain how they work after that i'll be showing you what a wordpress plugin is with plugins you can build anything on your website you can build anything from a basic website an ecommerce website a booking website a real estate website a multi-vendor e-commerce website like amazon or even a hotel booking website and the best part is you don't need any experience and i'll walk you through this whole tutorial step by step so let's first go to step one and get web hosting to create a website you do need to get your domain and web hosting this means a company will host your website 24 hours a day and make sure it's properly running this will also make sure your website's online and people can visit your websites now there is a link in the description of this video it'll take you to a page to purchase fast cloud web hosting and welcome to name hero.com now i'm recommending namehere.com for years and people love it uh this week alone i've had zero downtime with name hero so you guys will have a reliable website and also my websites load at under one second with name hero so we do test these servers to make sure that you guys do get the best web hosting possible now once you guys are here you'll click on get started now and then it'll bring you to four different pricing options so we have the starter cloud the plus cloud the turbo cloud and the business cloud now i personally recommend the plus cloud if you guys are just getting started out like you're just getting your feet wet for the very first time but for those of you who have been using wordpress for a while and you want to upgrade and get some more performance i would definitely go with the turbo cloud because with the turbo cloud you guys do get the new nvme storage which does just give you a little bit more performance with your website so you'll go ahead and pick a package that works best for you and your budgets and then once you guys figure your package out you're going to click on order now all right and here you're going to enter in your domain name so this is the name of your new website so uh portfoliowebsite.com or you know mynewswebsite.com or whatever whatever niche that you're building you'll go ahead and put it here so i'll just put it in tutorialdomain1.com and see if that's available all right cool it's available now i know it takes time to figure out the domain of your website so you know give it some time you know it does take some thought for your new websites once you guys figure it out you guys will click on continue alright cool so next we have the billing cycle and we have three years two years and one year now personally i'd recommend one year you guys do get a large discount and this does give you enough time to decide this is for you or not however if you guys are feeling very confident i would recommend going with the two or three year plan you guys do get the deal the longer you sign up for so it really depends on your budget but once you guys select a billing cycle we'll scroll down and i don't recommend any of these upsells personally you can do this with free plug-ins so yeah you guys don't need those and then we do get a free ssl with name hero so that's pretty cool once you guys select your billing cycle we will then click on continue all right next we have the domain configuration now i personally recommend the id protection guys this will protect your personal information from spammers and people trying to sell you seo packages and viagra and all sorts of nonsense whenever you guys get those weird emails in your inbox it's generally because they found your domain online so this will actually protect you so you don't get spam in your inbox so go ahead and click on id protection and then click on continue and look at that for a year of hosting you're paying less than a hundred dollars you're paying only 70 bucks you guys can also go the cheaper routes and get the cheaper plan if you're on a really tight budgets but i think this is a great deal for web hosting for the entire year for this specific performance so you guys are getting a reliable and a fast server for this price so it's definitely worth it so go ahead and scroll down just keeps growing now you're going to go ahead and fill out your billing information here so your first name your last name additional information you'll put in your password and also a support pin so this would be the pin that they would use to verify that it's you and then also we have a payment method so you can pay with paypal coinbase which is cryptocurrency and credit card here you'll go ahead and put in your payment details and if you guys do want to get their spam or their emails they actually sent some pretty good emails guys i'm not going to lie they have some cool promotional offers you'll go ahead and check that box and then you'll of course agree to their terms of service right i'm sure you guys are all going to read uh this here right you guys are all going to read this i don't think anyone ever reads any of this stuff but uh yeah you'll go ahead and uh check the terms of service and once you guys have checked out i will meet you guys in the customer portal all right and welcome to your new dashboard so this is your current dashboard as you guys can see i had many different packages many domains and i also have tickets with name hero and they really helped me out with all of my problems so this is just your interface on the left side you can see your hosting packages these are your current domains you can always register a new domain also billing so if you want to see your payments or you want to add funds or you want to adjust your payment method you can do that here and also the support so if you guys run into something weird i know with websites things just kind of get weird sometimes you guys can always open a ticket here and they will help you out with all of your problems and they are pretty fast i mean i think maybe under one hour they can help you guys with all your problems so once you guys are here let's go ahead and install wordpress onto our new domain you'll first click on my cloud now here we have hosting packages now you should probably only have one here so just go ahead and click on your hosting package and next we're going to see this log into cpanel go ahead and click on log into cpanel alright cool so now we're going to go ahead and install wordpress onto our domain so up here we'll type in wordpress here we go we have wordpress manager by softaculous we'll click on this all right and from here we're going to install wordpress you guys can see i have many installations of wordpress already but right here you'll click on install and now we're going to look for the domain that we purchased so right here you have the choose domain section so you'll probably see your domain that you purchased i'll just go ahead and select this one but you're going to select the domain that you purchased and for the protocol make sure this is https which is the ssl now for in directory make sure nothing is here all right i don't know why that's there by default but oops whoops but make sure nothing is there because that will install your domain onto like yourwebsite.com something and you don't want that there yeah just don't have that there make sure that's make sure that's empty now for the admin username go ahead and give yourself an admin username and a password and this is what we are going to use to log into the website so whenever you want to build your website you're going to use these login credentials so make sure you write these down i'll just put admin never put past guys make sure this is something unique i'll just put paddywhack and your admin email make sure that this is an email that you have access to because when you forget your password they will send this information to your email so i'll put in my my gmail account here my famous pc hoarder which i do get tons of spam and below that you can always select your language we can always adjust the language as well inside the wordpress dashboard and i'll show you how to do that in just a bit and we're going to keep scrolling down here to the bottom they have these other themes they want us to use but we're not going to use these and right here you'll click on install yeah they said three to four minutes that was not three to four minutes right now here we have install wordpress and this is the administrative url administrative url so just go ahead and click on this link and this will log you in to your website all right and this is your new wordpress dashboard this is where all the magic happens now if you want to see what your website looks like right now at the top left you'll click on uh visit site and this is your new current wordpress website so it's using a default wordpress theme not to worry we're going to make it look really good so let's go back to our dashboard here now before we go ahead and start designing the website i first want to adjust some of the general settings so over here we have the users let's go ahead and click on profile now the first thing was we can change the background color here i do like midnights i feel like this is a lot easier on the eye and it's easier to see stuff but there's also modern and there's also sunrise and there's coffee which is really ugly and there's also ocean which is just as ugly so we're going to go to midnight and now we're going to scroll down here and this is the email that you guys will um put in here that you have access to so if you guys do forget your password this is where your wordpress password will be sent to so make sure you have access to this specific email and then we'll scroll down and if you guys do want to change your password over here you can click on set new password and then you can set a new password to log into your wordpress websites and then once you're done with all that we'll then click on update profile all right cool now over here we're gonna go to settings and click on general now i'm just gonna introduce some of these general settings really quick so if you guys do want to adjust the site language in the back end of your wordpress website over here under site language you can change this to pretty much any language i think they have like every language in the world it's pretty crazy i don't even know i don't even know what a lot of these are you know and they also have different dialects and stuff like that so it's really cool so you can go ahead and select your language there you can adjust the date format and also the time format if you choose to do that and then once that's done you'll click on save changes all right now on the left side also under settings you're going to see this permalinks option go ahead and click on permalinks and for the common settings you're going to change this to post name now the reason why we do this is because when you go to a website it says like yourwebsite.com about us right or dash contact us so this is where uh post name is useful and it's also the correct method for seo purposes these other permalink settings are really ugly they're really confusing and it's just it's just unnecessary i mean this one shows the date like why would you want to show the date you know so all right let's go ahead and go down here and click on save changes all right and now let's go back and click on dashboard so now let me go ahead and show you guys how you can log in and log out of your wordpress website so you can pretty much work on your website from any location i'll go ahead and go over here and click on logouts i'll then get rid of all this permalink up here and press enter so this would be your domain right so this is your current domain you'll go to your domain and then you'll type in dash wp admin and then press enter you'll then go ahead and put in your username or the email that you guys use sign up with wordpress along with your password and once you enter all that information you'll then click on login and that's it that's how you guys can log in and log out of your wordpress website all right cool so you guys got your domain and hosting and we went through the general settings now in this next section i'll be walking you guys through how to uh import a demo website and then we'll go ahead and build a website using a drag and drop builder you guys ready let's get started all right and the next thing that we're going to do is that we are now going to install a wordpress theme so over here we have appearance and we're going to click on themes and up here we're going to click on add new now before we install a wordpress theme i quickly want to explain what a wordpress theme is and what it does first let's talk about what is a wordpress theme every website you make with wordpress requires a specific wordpress theme without getting too techy a wordpress theme is a general style and layout of your current website each wordpress theme has different options in the theme customizer the options can range from a header and a footer builder different blog post layouts controlling the width of your website like a blocks or a full width or specific ecommerce features like product layouts or different shop page layouts a wordpress theme generally controls the layout and style of your current wordpress website a wordpress theme does not build the website itself but it's more of an outside shell for the page builders and a starting point to build your wordpress website feel free to check out many of the wordpress themes to find a style that fits for you and your wordpress website you guys got that so to summarize a wordpress theme controls various parts of the website that the page builder normally does not and each of these themes they you know they have different features than one another one might offer a different header layout than another and another one might offer different blog posts templates versus another now for this specific theme we're just going to use the astra theme right here you guys can search for it by going to this box and typing in astra and pressing enter all right and once you guys uh see astra you'll then click on install this one right here octo what is that it looks looks cute you know but i have no idea i have to be honest guys i have i haven't tried any of these themes like there's so many of them but uh once you guys are done installing it we'll then click on activate all right cool so now that we've done that uh on the left side under appearance you're going to see this new astra options go ahead and click on astra options now what we're going to do is that we are now going to import a starter template so to have access to these starter templates we first need to install the importer plugin so right here click on install importer plugin all right so now that we installed the importer plugin we're greeted with this video i hate these videos that autoplay i just find them really irritating but uh we're going to click on build your website now now here we have page builders but before we select the page builder i quickly want to explain what the role and responsibility of a page builder is alright let's talk about page builders like we talked about earlier wordpress themes are the shell of your website allowing you to control the structure and page layout of your wordpress website a page builder designs the website and creates the actual website itself with a page builder you can add images texts colors rows and columns for every wordpress website you do need to have some sort of page builder in order to design the website there are several page builders to choose from and many of these page builders are completely free there is gutenberg gutenberg is the default builder with wordpress elementor which is the current leading free page builder for wordpress brizzy which is great for beginners and divi which is one of the most popular premium page builders for wordpress to be honest there is really no best page builder i do believe whatever works best for you and your wordpress website is the page builder that you should choose you need to spend your own time to go through each builder and see which one works best for you as they do have all different styles and benefits for this video we will be using elementor this is the most popular free page builder for wordpress with tons of integrations templates and resources to use so to summarize that is what a page builder is it's essentially needed to build your wordpress website and gives it the overall look and style of your website so that's page builder summed up you guys will need to have a page builder in order to build out your website and we're going to select the elementor page builder which is the most popular wordpress page builder as of this moment so let's click on elementor so i selected the page builder and on this page if it does this right here where it's blank just go ahead and refresh this and then the starter templates should display all right there we go cool so uh once you guys uh refresh the page you guys will then see that you have access to uh literally hundreds and hundreds of templates to choose from and a lot of these are free and there are also pro templates so the ones with the like uh just like with the standard template is free however if it does have this premium option at the top right you guys will need to upgrade to the pro version but there are still tons and tons of templates in the free version and you guys can pick off categories right so there's like personal there's like professionals uh there's personal sites and then you guys can also like select between a personal sites like if you're one of those motivational speakers or these guys who are just trying to make money and start those ponzi schemes and also we do have community so if you want to you know create some sort of community websites astra has everything however the one that we're going to install we're going to go up here at the box and we're going to type in travel t-r-a-v-e-l and we're going to see this one right here called travel and tourism now i'm going to click on travel and tourism now we're going to use this template to help us practice and learn how to use the page builder but it doesn't really matter what you're trying to accomplish and i just want to show you guys something here we have the hotel website right however if we make some changes it now turns into a corporate website like a business website and then also we made this template here and this is like a dog website or a animal website so it doesn't really matter what the actual template shows you can simply just swap the images change the text and you can turn any websites into any kind of website you want so i'm going to open this back up right here and the first thing that we're going to do is we're going to skip and continue we'll talk about logos a little bit later i'll show you guys a really cool website where you can get some really cool logos for your websites so right here i'm going to click on skip and continue and what's also cool is that you can actually pick a color scheme right now this will change a lot of the background overlays and it'll also change the buttons so all the buttons on the actual website will be adjusted to whatever color that you want but i'm not going to do that right now i'm just going to leave it as a default color and also here we have the change fonts so you guys can also change the fonts right here of whatever you want to change it to but i'm just going to leave mine blank but you guys can obviously see that you can you know change the font here and and see which one works best for you but you guys can use the page builder and get access to more fonts so don't worry about that i'm going to just refresh it back to the normal setting and then i'm going to click on continue here you guys can choose to subscribe to their email box but if you don't want to no problem just go over here and click on submit and build my website all right cool so now astro's going to go ahead and import the starter templates on our website so just give it like a minute it takes it's really fast all right congratulations we have now built our website at the top right here just click on view your websites all right cool so this is our current wordpress website and what we can do is just kind of scroll down here make sure everything imported correctly and it looks like everything did so yeah congratulations you guys now have a full five page website in a matter of what like 20 or 30 seconds so it's really fast and really amazing what you guys can do with wordpress now let's talk about some frequently asked questions from wordpress users the first one is can i switch between one press theme to another what will happen to my website well if you switch between one wordpress theme to another your website will stay intact because remember the website was built by the actual page builder which has a separate entity from the actual theme however when you switch between themes you might see that the plugin i'm sorry the website might be a little distorted and it might look a little weird so you'll have to go to the new theme customizer options and you'll have to adjust the website accordingly you don't lose any of the work that you've done so just remember that you can switch from any theme to another and not lose any of your work so now let's go ahead and design this page at the top right here you're going to see this edit with elementor go ahead and click on edit with elementor all right so i'm going to give you guys a 10 minute crash course on how to use this builder and explain how everything works i'm first going to close this little navigator so on the left side you can see that we have specific elements and you guys can drag and drop these elements anywhere onto the page and then we can always delete these elements anytime you want so what you guys can do is you guys can actually go to the website and you can drag and drop elements anywhere you want onto the websites and just change it however you want like change this to whatever right and we can keep scrolling down the website and to get back to those elements we'll just click on those little dots right there and then you can continue to drag and drop elements anywhere you want on this page however before we do that let's first talk about how to make a really nice looking home page so over here let's just say for example we want to turn this into some sort of corporate website right so we're going to change this so i'm double click on this to my new business business website now on the left side we can see contents right so the contents control the actual content of the actual elements the style tab will always adjust the color and the topography and also add some special effects like a text shadow which you can see we have the shadow now and other various features the advanced section will always control the actual position of the actual elements it'll also add in some really cool things like motion effects where you can animate specific elements in for example we have this zoom in oh that is ugly or zoom down or zoom in right so uh yeah they do have tons of different motion effects to choose from and they do have other options like here like masking and also how to add little borders around every elements but uh that is what these three options are for every element in a nutshell now let's say for example i want to adjust this font right because i don't really you know we i told you guys earlier we can change this font right let's go over here to style and go to topography here we can change the font right i kind of like uh poppins i think poppins is a really good font guys and poppins is a nice font but see the thing about poppins it only looks good when it's bold right so if i bold this now it looks more friendly you know i don't know how to describe that you know also over here we have other options like make everything uppercase uh we can also make this italicized or normal and also add in like an underline or just any decoration you want to this text all right now if you guys want to adjust the size of this we can increase the size of it like that right and just change it to pretty much anything that we want all right so now that we know how to adjust this we can do the same thing for this column so over here we can delete this now you guys can delete the text in this box however you can also delete the text on the actual page so uh this is some demo contents or you can write it over here just an example right here there we go just an example right so we can always adjust the text uh from the box over here or for this column here and then also we have the button now remember the button right here this will control the actual position right but we can also change from book your stay to book now right so if you guys want to make like a booking website or something else we can change the text and then also we'd have our link right so this is like you know darrylwilson.com or just put the link of wherever you want them to go to and over here under style this is again where we can control the actual color and also the topography for example here we have the text background as whites but we can change that to like red right so we have this red backgrounds and also we can change it on hover so here you can see that when i hover over it it turns white so under the hover option i can change that to something like black right so i'm saying you know if i hover over it i want it to turn black you know like that and it's also hover animation where if they hover over it it can shrink like that you see that but we might want to change this text color to hover you know because i think white makes more sense you can see it's so that's just an approach if you want to have some sort of animation there uh when people hover over it but let's go over here and click on normal now you guys might notice we have this white little border here and we can take this border off you know saying i don't really want a border you know i just think the border's ugly and as a result we have no border now and over here we have topography so this is again where you guys can change the size of the text that will obviously change the size of the button as well and then you can always adjust the font here just like we did previously now let's say for example you guys know you know you made the button very ugly right and it looks terrible over here at the bottom under the history i can actually go back right so over here let's just go back and find out you know where we actually made some of these uh changes and there you go and to go back to the um the builders elements we'll click on the squares so that's how you guys can always go back to any part of the building process if you choose so now that we've changed the actual text let's change this background you know we got the this background is not business right so over here we have these six dots now you guys can see the the outline here uh this little circle i'm sorry the square will control this entire section so over here we have style right and we have a few options we have classic gradients video and slideshow so i'm going to go ahead and delete this and now we have no background so if i first want to add like a color i can add in a color here to my background right and uh yeah that's cool or we can say you know what i want to add a gradient so i'm going to go ahead and um we're going to go ahead and clear this and then go to gradients and with the gradient what we can do is that we can apply two colors right so we have this red color and we also have this teal color so now it's a gradient and then we can also choose the angle of this gradient so if you want to give it this really nice gradient effect we can also do that as well and then also we have youtube videos where you can go ahead and answer a link to a video and then this will play the actual video so that makes sense now let's go back over here to classic and with classic what i want to do is i want to actually insert an image so i'm going to take this out and i'm going to clear this and then i'm going to click on choose image now i have demo images for all of you guys in the description below of this video that you guys can download for free and that will help you guys follow along in this tutorial all right so let's go over here to we have upload files and we're going to click on select files now now let's say for example that you guys have files that you want to upload you'll just simply take those images and you'll select them and then you'll click on open and now it's going to upload all these images to the website so if you guys do have images you want to upload well now's the time so let me go ahead and give this like one minute all right cool so those images have found the uploaded now i also included these two screenshots and i'm going to go ahead and just give you an example here so here you can see we have this dog website right and now it's a corporate website if you guys notice here we changed nothing about this website alls we did was we swapped the images and we completely changed the look and feel of the website so i did include these images for you but we're going to make this website right now because i think this looks pretty cool and it's pretty practical right so let's go back to our current website and the first thing that we're going to do is that we're going to upload this image right here it is the home one banner and then click on insert media all right cool now we can always adjust the position of this image right so if you guys do have images that you guys want to position uh we can change the position of it with all these different position styles there's also this option for attachment now what this does is that this actually creates this parallax effect so you can see here how the actual image stays with us as the user scrolls we're going to use this again a little bit later but that's a really cool feature and then also there's just the normal scroll feature and then there's just like the default right so that makes sense and here we have the size and i want to keep this to cover cover will force the image to cover the entire screen which i really do like so you can change this text to pretty much anything right so maybe for example we're like a loan business or something you know like get a new loan for your house you know it could really be anything you know so we can see that uh you know we can make this website anything with this picture because it's very broad right they're happy they're energetic they're exciting so uh yeah let's just say for example they're getting a loan for a house you know who knows i don't know this is whatever so let's go back to that section here so i'm going to right click and click on edit section whenever i do that it'll take me back to this previous section and one one other option i do want to introduce you guys to is the background overlay so if you do want to add some sort of background overlay here we can do that so for example if you want to add like a teal background overlay you can see that we can make this teal and then we can increase the size of that of that overlay so i do like the overlay effect i think it's pretty cool but i'm actually not going to use it so i'm just going to reduce the opacity all right so that's pretty much it guys we have now made a really nice home page here and as you guys can see you can turn this website into pretty much any website that we want now that we've created the home page let's go ahead and scroll down here and let's talk about these other sections so i'm going to open this back up now over here we have this image right i'm going to right click on this and just delete this image i don't really want it and we can do the same thing for this one right here i'm going to right click and also click on delete now let's say for example you guys do want to add an image to your website over here we have image and i'll just drag and drop this so you can see here how i drag this image icon below the text but i want it above it so all i have to do is click on this pencil and then drag and drop it and here we have this little blue line we're just going to drop the image right there and on the left side we're going to click on choose an image now before we actually use the image that i gave you guys i want to also offer you guys free images from pixabay so with the astro theme they actually have an api that allows you to pull up all these images from pixabay if you guys are at work you can click on save search because i do believe pixabay might have like some like modeling pictures that are very provocative so if you're at work yeah just make sure to turn that on but over here we have orientation so if you want like a vertical picture something that goes down more you can select vertical and then you'll see that we have these vertical uh pictures so i'll just give you guys an example i'm going to click on this flower rose and then i'll click on insert media and there you go now we have this image and it is a little big so we can always adjust the size here to something you know a little bit smaller you know or a little bit bigger you know something like that you guys can also go over here and go to custom so if you guys feel like you want to uh customize images into a specific size we can always do that as well so maybe like 500 by 500 and there you go now the image fits a little bit better right so that's if you guys want to use images from pixabay but i'm going to right click on this and i'm going to delete this now i'm going to re-add my image here choose the file and then i'll select the image i use for my demo website which was i believe it was uh this gentleman here or this group picture i don't know what you call it so this one here and then i'll do the same thing on the right side so i'll go over here to the elements and drag and drop this i'm going to delete this you know this that has to go you know you're fired and we're going to go ahead and change this one also to okay we got to switch this over here okay to this uh looks like this beautiful girl in this uh this guy working together all right so we got the uh where are they the beautiful girl and the guy here they are all right cool and then obviously you want to change this to like uh you know we are the leading digital marketing agency you know or something like that you can always drag in more elements if you want to add more on the page like you can add like a bar or something uh for example we have the progress bar which you can like show them like your skills and then you can go ahead and adjust this as needed but i'm gonna go ahead and just delete this here now let's say for example you guys do wanna add like another button or you want to add some other text but you don't wanna have to use these elements all over again i want to take this button here and i'm going to right click and i'm going to duplicate this so now that i've duplicated that button i'm going to take this button i'm going to hold it and i'm going to drag and drop it over here and then this can be something like you know visit our visit our contact page or we can add something else there so that's how we can duplicate elements as well now let's go ahead and scroll down here so next we have this section and this can be something like our services our staff and we can change these images into pretty much anything that we'd want so over here i'm going to put like our main services and for these images i'm just going to choose another image here we're going to pick a really nice one there we go and i'll insert that and the same thing for this one i'll insert this other coffee bag right and then also for this one we're going to insert this uh i don't know guys what is that a hand it's like a book and a hand and you know coffee coffee drink and this won't be like you know cool book cool book and then this one would be like our you know i is that i don't even know what that is yellow hand i'll put a question mark here you know so yeah that's how we can adjust this specific section and make it look really nice now let's keep scrolling down here now we also have this section here however guys this is a lot right and i don't think that i need this on my website so to delete an element we can go over here and delete this section now i just want to clarify this section this x right here will actually delete this box and this x will delete the entire box so let's do that i'm going to click on delete section and it's gone now let's say again that you guys did that on accidents at the bottom right we can go to history and then just re-add that again and you know it's just like new right but i'm gonna go ahead and delete that now let's say for example you guys want to add in your own section right you want to add in more to this page you don't want to use the elements over here we have the ad section and then we have a few options we have this plus the templates and the blocks we're going to use all three so not to worry we'll get to that first let's click on the plus and now we have columns right so we have one two three four yadda yadda yadda let's just select a three column row okay now i'm going to click on the little elements here and let's say for example i want to add in like my staff right or i want to add in you know a portfolio so let's scroll down over here and we're going to take a look at the general right now with the general we have the image box which means we can add like a picture of our staff put the name whatever and if you guys want to go have access to other elements you just click on the elements tab again and then just drag and drop any elements that you want now these ones right here are pro elements so if you guys do want to upgrade to elementor pro i will leave a link to elementor pro in the description below of this video however you don't need to upgrade and personally if you're brand new to wordpress i do not recommend upgrading because you probably won't use all the features that they offer anyways i'm just being real like i'm just being honest so what i want to do is i want to turn this into a portfolio section so i'm going to take these social icons here and i'm also going to drag them right there so the first thing i want to do is change this image box now guys you can turn this into anything right you can turn this into a staff a testimonial a whatever you want to do right so if we scroll down we're going to see these images that were automatically loaded for us from astra so i'm going to grab this guy here and click on insert media so you can turn this into like a testimonial or even a staff so for example this can be daryl wilson right and this can be the testimonial or you can do something like this was amazing and then this would be like the actual description and then the testimonial of the person so there's really no right or wrong way to use any element at all whatever element that you're going to use there's really no limit the sky is the limit with his builder so i'm going to change this to daryl wilson and then this would obviously be some description about the actual person now i don't want this box right i don't like this box i feel like it's too it's it doesn't look good so over here under the style section i can actually add border radius so now i'm going to add some border radius so now it's circle and if i want to add a border around that we can add a cute little border and you know give it a color and so on and so forth so that's how we can create this little testimonial section now i did a lot of work here you know and i don't want to have to do this all over again so i'm going to duplicate these elements so earlier we talked about how you can duplicate the actual you know the actual box itself however you can also duplicate rows so over here i'm going to go back and delete this and i'm just going to delete this whole box because i mean we did everything why would we just delete you know just duplicate one element that doesn't make much sense and over here i'm going to delete this and then also i will delete this so that's how we can add a section to our website right pretty cool pretty simple now also you might notice that we have a lot of or there's not enough space right here so maybe i want to add in more space and we're going to now talk about padding so over here we have these little dots and let's go to the advanced section now padding is space right so padding allows space between elements so i'm going to click this link values together and i want to add more space to the bottom right because these are just too close in my opinion so for the bottom here i'm just going to add in some space like 50 pixels and that's much better right and i think that's really cool now when you guys look at all these elements all of them have padding right everything has padding so everything is using some sort of space so now that we know how to make our own sections and stuff like that using the actual um the plus section now let's talk about the astra starter blocks and i love these blocks so over here what i'm going to do is i'm going to click on this and here we have access to all those templates however i don't recommend doing this because obviously these templates have their own color scheme and it just really wouldn't work with our current websites we can actually use the blocks and with blocks it gives us access to these blocks which we can just insert on our websites and they're blank color so we can adjust the color to whatever color scheme and style that you're trying to accomplish so over here we have all and have different categories of the blocks i'm going to select the call to action here and then i'll just select this one right here we'll go ahead and enter this one and then we're going to now import the block all right cool so now you can see that this block has been added and then of course we can make some small changes we would have to change the text and the background color but you can design this and change it to any style that you want so that's how you guys can add blocks using the astro starter blocks i do recommend it now since this is so ugly we're just gonna we're gonna get rid of that you know that's gone so uh here we go we have this block section and you guys can add blocks anywhere you guys want on the websites and then we'll scroll down and obviously these right here are testimonial so this is just a basic testimonial widget like you guys can see and if we scroll down to the bottom if we change the alignment to the left side you'll see it is the same exact elements right so that's what these are they're just testimonial widgets and then you guys can mess around with this and i think you guys will understand how to use just by tinkering around with it now let's go over here and delete this and we're going to scroll down now i want to add a different background image to this one because we are no longer a travel website so i'm going to right click and click on edit section and then over here under the style we're going to change this to another image we're going to pick this one here and then we'll insert media all right cool but there is one thing i do want to add i also want to add the uh the fixed so i like this effect that as the user scrolls down uh it gives us this notion that uh the image is following us i do like this so i'm gonna go ahead and leave uh this style right here on our bottom page all right and that is pretty much it for the entire home page so congratulations we made a really nice looking homepage i'll go ahead and just scroll up here now of course if you guys do want to save your progress at the bottom left you'll then click on updates now if you want to see what your website looks like out of the builder here we have this preview changes just click on preview changes and this gives us an example of what the website will now look like out of the builder and it looks great in fact it looks like a large corporate website now you know we got our main services maybe we're creating like some sort of portfolio project for clients and you want to showcase them and to be honest i think this is a great looking website and we made it in just by exchanging some images so congratulations all right cool so now let's go ahead and exit the builder over here we're going to click on this little hamburger icon and then just click on view page this will actually get us out of the builder and this is our current live websites of how it looks right now so congratulations we have now created a home page hey party people i wanted to give you guys a big update on a project me and my team are working on now this is my current website dearwilson.com and on this website we do have free elementor toolkits that you guys can download for free and we just got a lot of feedback from users they really like the kits so me and my team have decided to open up our own shop and this is the new daryl wilson right now this website is in development and uh we are currently working on this website but in a few weeks from now it'll be live so you guys will see the live um you know the live version of my website and we're going to be offering toolkits now these toolkits are amazing we spent a long time designing these kits and on our products page you can see that we have various toolkits that you guys can take a look at so we have the demos you have more details we also do have free kits so on this filter here we're going to put free kits and then we also have categories here so you guys can search based off category we also do have many woocommerce kits that's one thing that most people don't offer is woocommerce kits because it is a lot more work but we decided to create at least 25 of them but we're going to be launching this website with probably 150 toolkits and we're going to be releasing 10 every single month and just to give you guys an idea of how these look here are some examples now we've decided to actually really get creative here and really push the limits of web design so you guys can see these websites you know they look great and we have a few different designers so the websites won't look the same you know how you go to those websites sometimes and they all look the same we have designers you know from all different backgrounds so every toolkit is going to look very different and very unique that's what i was worried about i really wanted to create something different yet also that you know that looks great at the same time so here's just an example of some of the toolkits and as you guys can tell these tool kits they look great you know we did spend a long time you know making these kits and i don't want to go through every single one of these kits but i got to be honest you know we really did create some really beautiful kits and these are going to be available on my website that you guys can go ahead and purchase we don't have a pricing structure just yet we're still working on that but in about a month from now when we released it it'll all be set in stone so again these are some of the tool kits that we have designed and they're very unique you know like they're not those generic boring templates we got really creative here we added a lot of features we created just a lot of different designs and different styles that you know really aren't out there yet and yeah you know i think you guys are going to really like this so if you guys do need help with web design i know getting inspiration and creating your website can be very frustrating you know you're probably sitting at the you know on the computer just looking at your screen for a while i know that how that is but we're going to have all these available on my website so you guys can go ahead and check it out this is a really neat one right here you know we added this vertical bar right here and you can see that we have different products and you guys can replace this with anything you know this can be shoes this can be anything you know we just decided to put bicycles because you know we just you know it's just demo content you know and uh yeah there are various tool kits that you guys can go ahead and check out so this will be live on my website in about a few weeks from now if you guys go to my website right now you're gonna see the default websites but in about one month we're gonna have the new website launched which will look something like this right here and we will have a lot of available toolkits that you guys can use and download on the website so uh yeah i just wanted to make that announcement uh let me know what you guys think about these toolkits and um yeah if you guys have any feedback for me let me know in the comments below but with that said let's go ahead and go back to the video hey guys let me give you all some design tips for building websites now when you guys are building websites you guys might want to stick to a color scheme right so you want to pick maybe three or four colors and use those throughout your website the same goes for fonts you only want to carry like one or two fonts on your websites if you guys do use too many colors or too many fonts what happens is your identity and your brand sort of gets lost so you just want to make sure that when you are building websites you want a solid color scheme and also just stick with a few fonts don't get too crazy now let's go ahead and next go to the rooms page now there's a few things i want to change here number one is this permalinks right and also the rooms and accommodation and also this background so we have a little bit of work to do not to worry we're going to make it look really good now to change the actual name of the page and also the permalinks we're first going to click on edit page here all right so i'm going to close this notice and then over here we're going to change this to uh like about us right this will be like about us and over here on the right side we have permalink we're going to change this to about once we've done that we'll then click on update and then we'll go ahead and view the page so now you can see that the page title is now about us and the permalink is about remember earlier in the video how i told you guys to change the permalink to post name this is why because now it's a very clean permalink and i think all your visitors will recognize what page they're on now let's go ahead and quickly edit this page so over here we'll click on edit with elementor alright so we've got some work to do guys we got some work to do now i can always click on the little six dots here or i can just right click and click on edit section and then i'll go over here to style and i want to change this background you know we're a corporate website now so i'm going to i'm going to add this one in here we're going to add this one here right now one thing also is i think that we have too much padding right i believe we have too much space you know i don't think we need that much space so over here under the advanced section i want to reduce this padding on the top to like a hundred you know 100 and then this one also to 100 you know i think that's a little bit more slim and i think that looks a lot nicer and then also for these images uh you know we we got to change them but i think you guys can do that i did give you guys a lot of the images and the folders uh you guys can go ahead and swap these images and just in case you guys forgot i'll give you guys a quick boost you will click on the image and then you'll click on choose the file right choose the image and just remember you can always right click and delete this right and then you can add in any elements that you want even a little video here from youtube which you can link the video and then people can play it on your website so uh yeah but you know guys i'm lazy so we're gonna go back over here and we're gonna there we go that's good so now that i've done that let's click on update now let's go over here and we're going to go back to exit dashboard and then we're going to click on this little there's supposed to be a wordpress icon oh there it comes yeah so here all the pages that we currently have so if you guys do want to find out what pages you created or where they are here is all the pages now this page right here is the privacy policy page and the sample page and we have not added it to the menu so these are default pages that are created with wordpress not to worry we'll come back to that in just a little bit but first let's go back to the amenities section and here we'll click on view all right now we're going to change the amenities section to the services section because uh you know we're not we're not a hotel no more okay we're uh we're a services company or whatever right so first let's edit the page here and then we're just going to change the page name right so services and then also the permalink on the other side and then i'll click on update now let's click on edit with elementor all right and we're going to do the same thing but we're going to do one thing different here so i'm going to right click edit section style right and now we're going to add this again insert media and now we're going to adjust the actual padding again to 100 to 100 right and if we scroll down we can always adjust these images and make any changes we want right now let's say for example you know we're going to get rid of this i don't want this either that's too much too much too much images for me all right let's go ahead and scroll up let's say for example we adjusted the header right and you did a lot of work and you want to save this layout to use on another page we're going to do that so at the bottom right here we have this little save options and we're going to save this as a templates and this is just going to be our website format or a website template and then i'll click on save so what i'm basically saying here is i want to reuse this layout later on another part of my websites now when we create another page we're going to actually import this but for now let's just go ahead and close it and then i'll go ahead and click on update here alright and now if you view the page now i also want to change this uh title here to services right i mean that was the whole point of this right i mean come on services and then i'll click on update one last time now let's say for example i don't want to close everything out and go to the contact page we can actually use the finder so over here we have the hamburger menu and we're going to click on finder and if we just type in contact and then click on contact what's going to happen is that it's going to bring us to the contact page right away and it's going to already enable the builder so we don't have to keep closing everything and keep viewing the page because that can take uh you know it can be very tedious right so with the actual finder elements you guys can actually go to any part of the website you choose and it's just a much faster and convenient process now what we're going to do here is that we're actually going to i'll go ahead and add in the background you know just to just to be consistent you guys don't have to follow me here i'm just a perfectionist and i want this to look really good and clean and i want everything the same right so we're going to add 100 to 100 now i do want to talk about this contact form now i personally don't like wp forms i find that this contact form rarely actually goes to your email box i mean 99 of the time it goes to spam i have no idea where all these positive reviews come from this contact form because it never works for me and it's there's a lot of better options so we're going to go ahead and use a different contact form so i'm going to go ahead and update this and we are now going to use a different plugin for a contact form in fact i'll just give you guys an example here i'll go ahead and just give you a little quick little preview here i'll just type in my name daryl at able.com howdy howdy and hey and then i'll click on submit here so i'm in my gmail accounts and now you guys can see that in my spam folder we have this email and it says this is from someone dangerous now to be honest i always have this problem with this contact form and i don't want this to happen to you guys so i'm going to give you guys a different plugin to use that actually gives you a lot more success so let's go back to the website all right so once we're here we're now going to go to our dashboard and then we'll go down to plugins and click on add new for the search plugins we're going to type in forminator this is actually a really cool plugin it can actually take payments as well form in there it is forminator like terminator right it was just there i just saw it here i'm going to close this notice okay so this is the one that is we're going to use it has a lot of really good reviews and i just find that i have the best success rate with this plugin so let's go ahead and click on install now and now we're going to click on activate all right now the first thing that i want to do is i want to disable wp forms lights because this plug-in does not work for me let's go ahead and deactivate that also there's this hello dolly i mean it's this you see this up here this is all it does i mean they're just trolling you know the guy is a troll but i don't mind it you know it's like all right fine but i'm going to deactivate hello dolly as well i i just don't want it what is a wordpress plugin a wordbrush plugin is an add-on for your wordpress website think of a plug-in like applications for your smartphone with plugins you can extend the functionality of your existing wordpress website for example you can turn your website into a booking website an e-commerce website a hotel booking website or a car dealership website there is virtually no limit on how flexible you can make your wordpress website and this is why wordpress has become so popular over the years just a tip don't install too many plugins like more than 15 because this can have an impact on the speed of your website lowering the performance if you have too many plugins on your website you might find yourself getting errors and glitches on your site so to summarize a plugin can give your website additional features and extend the power and the functionality of your wordpress website and this is why they are essential to wordpress now you guys might notice that all the wordpress plugins are free in the wordpress repository however with every plugin out there there's usually a pro version so what developers do here is they offer the free version and see if you like it and if you want access to all the features they usually have a pro version that you can purchase on their websites now most developers offer yearly plans for their plugins but there are some who offer lifetime plans so that means you only have to purchase it once and you get lifetime access and updates to the plugin now let's say for example you guys bought a plug-in and then you stopped paying for it what happens well if you guys do decide to purchase a pro plug-in and stop paying for it usually what happens after your subscription's over you'll stop receiving support and updates for that plug-in you still have access to the plug-in but you just don't get support and updates for that product no more now there are also plugins out there that are only pro plugins so for example on themeforest and codecanyon you guys might come across wordpress plugins that are only pro and don't have a free version so that's another method that some developers follow as well all right cool so now that you guys are knowledgeable about plugins let's go ahead and go back to the video so now that we have formulator let's go over here and click on settings now on the left side you're going to see forminator right here let's just click on dashboard and under forms we're going to click on create so now we can create a new form right so over here we have contact us i'll click on continue and this will just be like the contact form right so a new contact form and click on create so this is the contact form builder right and we can change the appearance of this like the color we can change the behavior email notifications integrations uh settings and so on and so forth but what i first want to do here is just adjust the actual fields so here we have the first name the email address the phone number and the message but let's say for example you want to add something like you know their business address right here you can add specific elements right and what i do like here is that you guys can actually take money with this contact form so this contact form actually integrates with stripe and paypal and you can even get an e-signature if you guys upgrade to the pro but you guys don't need to do that let's just select address and click on insert fields here we can select what part of the address that we want i'm just going to say give me the city and the state all right give me the city and the states and that's it and then i'll click on apply and now i'll drag this up here maybe a little bit more there we go actually i kind of like this better like this split split look you know uh whatever you know it is what it is so now we'll go ahead and click on publish all right cool so now we have this short code so make sure to copy this shortcode and now we're going to insert this on our contact us page so i have that uh copied let's close this but before we do that i also want to tell this website what email that we are sending it from now over here under the formulator you're going to click on settings and if we scroll down you're going to see the sender email address just go ahead and put in the email right so this is like admin at you know yourwebsite.com you'll just go ahead and put in the actual email now if you guys do need help actually creating a professional email i do have a video and i'll put that in the description which shows you guys how to make a professional business email using gmail which is completely free but i'm just going to use my generic one i use this one just because people have a lot of problems spelling my name so i'm just like forget it i'll just i've gotten so many lost emails because my name is very hard to uh you know to dispel so uh now that i've done that i'll click on save settings and now let's go back to our website and we'll click on contact and now we'll click on edit with elementor alright now we're gonna scroll down here and since i deleted this contact form we're going to type in shortcode so over here shortcode i'll drop that in there and we're just going to paste the shortcode in there like that and then i'll click on apply and there it is so now we have this contact form just remember you guys can always design this contact form in the actual appearance section of the plugin options so now that i've done that i'm just going to test this contact form really quick so i'm going to click on updates and i will exit out of the builder and i'm going to enter in some information darryl daryl at able.com and then it's going to be like yeah you know like yeah and then i'll click on send message it's submitting all right cool now let's go ahead and check my email to see if it acts actually sends to my email inbox and there it is so there is my email you guys can see i just received it it did not go to spam it went directly into my inbox i'll go ahead and click on it and now you can see that we have that message and it was sent from the domain that i'm working on so darrelltutorial.com so that's how you guys can get messages from your website with success so now that we added a contact form just remember if we scroll down here we have this other widgets and this is the google maps widget so over here under search widgets we'll type in google maps and you guys can drag and drop this specific element so for example just you know i'll just delete this just to give you an example type in google maps and then i will drag this in there like that and then you'll just go ahead and put in your location so i'll put in like uh what's the casino's name here uh is it uh caesars there we go all right cool see i spelled it wrong caesar's palace right so i'll just go ahead and put that uh you know put that location and then you guys can adjust like the zoom and also the height of this so you can zoom in on it and show that it's closer and stuff like that and then once you're done you guys can click on updates and using this module this is how you guys can showcase your location on your contact page now let's talk about disabling plug-ins so what happens if you are using a plug-in and you do some work with that plug-in and then you disable that plug-in later what happens to that's work well if you guys do decide to use a plug-in and then disable it all that work that you've done with that plug-in is saved in the database so you can disable that plug-in and then later you can re-enable it and all the work will be saved in your database all right welcome back so now we're going to create some pages and we're also going to uh adjust our menu here at the top let's go over here to dashboard and the first thing that i want to do is i want to create a page right so we have our current pages and we have the home contact the about us and these services we have these two pages and we don't need these pages so i'm going to click on these two pages click on bulk actions move to trash and apply all right so now we just have these four pages now let's say for example you guys want to create a new page over here i'll click on add new and this will be like our team right so our team i'll go ahead and publish this and publish and then we'll click on edit with elementor all right so now we can start building the websites just like we did before so we can click on the column section and then we can add in columns and then from here we can drag and drop elements as usual however i want to actually use that template that we imported previously uh on the other page so over here i'm gonna click on this folder and then we're gonna click on my templates now just a quick little rundown you guys might have saw these blocks and everything these blocks right here these are from elementor however these blocks some of these are free and the ones that are put on pro you guys will need to purchase the pro version but again you don't need to purchase the pro as of right now if you're just getting started out you really don't need the pro version over here over uh pages they have just some other pages that you guys can use some stuff that they've designed personally i don't think these guys are any good designers i mean i'm just a designer myself so i'm a little competitive but i have seen some of their designs and they're a little questionable in my book but uh that is my opinion if you guys do want to see my layouts you guys can go to my website they are completely free it does not cost you guys anything and i'll talk more about that a little bit later but over here let's go to templates and this is the template that we actually uh saved earlier so right here i'll click on insert and then i'll click on apply all right so now you can see that we have our page that we created previously you see why we did that now we have everything done already and i just got to change this to something like our team right delete all of this and just put our team and then we can actually adjust this so instead of actually having amenities i can say you know what i want to delete all this and i'm going to put in a new section here and i'll use the astro blocks and what i'll do is i'll actually make this whole page using the blocks so the first thing i want to do is find like the team section and here i can just insert like this heading of this section right makes sense i don't know why there's like three you know just click on import block yeah i don't know maybe that's like a bug or glitch or something i have no idea but uh there we go now we imported this section and then you can build it as you wish and i'll just keep deleting this other parts of the website because we don't need it and then maybe you want to add something else so i'll go over here to blocks and maybe this will be like uh the about section and uh we'll add in a picture or we'll just add in something like this right here it's like you know just some just some filler text you know it's just text to fill in the page and give it some structure and then below that's we'll do the one last one i don't know what should we use uh i'll just throw in this one let's just let's just throw this one just a random one here and i'll just import this block as well and there you go and then we can design the page as normal so you can see how we can create a page very quickly very fast using the astro blocks so i would go ahead and use those to build out your websites and then just remember once you guys are done you will then click on updates and that will allow you to save the changes that you made on your website all right so now that we created our team we now need to add it to the menu up here so let's do that over here to our dashboard and then we'll go down to appearance and then we'll click on menus here all right and what we're going to do is that we are now going to select the primary menu so astra actually creates a menu for us automatically if you guys do want to create a new menu from scratch you can click on create a new menu and let's just say for example you want to make this like the new menu right the new menu and over here i'll make this the primary menu right and i'll click on create menu so over here we have pages right uh we have the home the about the contact our team and services now this is if you want to create a new menu which you guys can do that if you choose it doesn't really matter you can make thousand menus as many menus as you'd like so here we have the home the about the contact and also we have the our team so we're now adding the our team section or page to our menu and then we'll click on save menu alright cool so now let's go and take a look here we actually added the home the about our team services and contacts and if you go to visit sites you'll then see we have the home the about our team and this is the actual new page that we created and you can see that we just added that new page to our menu so that's how you guys can add pages and also add them to your menu now let's talk about mobile optimization so when you guys are building your website you guys might want it responsive on all mobile devices let me quickly walk you guys through on how to do this right here let's click on edit with elementor all right now at the bottom of the screen you're going to see this little mobile i'm sorry responsive mode you'll just click on that now here we have this tablet and we also have the mobile so let's first click on tablet so this is what your website looks like on a tablet's device here now this website is automatically responsive and it looks good but there are times where you might need to adjust specific text or elements for specific devices so i'm going to go ahead and edit this text right here so i'm going to click on the edit heading and we're going to go to style now we're going to click on the topography here and whenever you want to adjust the size of the elements on specific devices you're going to see this little icon right so here we have size we have tablet mobile and we also have desktop so for the tablet device only i now want to reduce the size of it all right so that's how you can adjust every specific part of your website using this mobile responsive builder now there's also another option here let's say for example you might have sections or something that you do not want on the actual mobile or the desktop version now since this is an introduction video guys i'm not going to go into the advanced methods of mobile optimization but there's a lot of things that you guys can do but one option here is let's say for example i want this this whole area gone you know i don't want it to show on tablet devices right i'll click on the entire section i'll go over to the advanced section and then for the responsive i want to hide this on the tablets and also hide this on the mobile now you can do this for elements as well you can do this for sections you can do this for columns or rows as well so let's say another example you don't want this button to show up i can click on this little edit button advanced and i can also hide this specific button as well just in case i don't want to show on tablet or mobile now we can also go through this and we can keep optimizing this so if you do want these titles a little bit smaller here i'll click on the edit image box and for the style section you can see now we have all these little icons here and these are uh specifically relating to only tablet right so over the uh content box right here i'm going to go to the title we're going to find the topography i'll click on topography and then also we have the size and we can adjust this for tablet so just for tablet we are adjusting the size only for the tablet device so if you guys find that you have text that's breaking or if it's just like for example if it's like this and it's just too much text you guys can always reduce the size of the text to make it optimized for the uh tablet devices now now that i've showed you guys how to do this with the tablet now let's talk about the actual mobile device so over here i'll click on mobile and we'll scroll up so personally i think we can do a little bit of work here right i want to center align this and also i think that it's just a little bit too large so what i'm going to do is i'm going to center this first so i'll click on the pencil icon and for the contents here we have alignment so for the mobile right for only the mobile i want this centered like that and i'll do the same thing over here i'll change the alignment over here as well under style mobile centered and then for the button as well here we go mobile and then centered and i want to reduce the size of this text so for the style here under tepography we're going to reduce the size of this for mobile all right that looks a lot nicer and if we scroll down you can see this area is grayed out because remember we actually hid this on tablet and mobile devices so that's how you guys can you know delete stuff for specific devices but just going down this website and looking at it it looks great in fact you guys can also run this through the google checker to see if your website is truly mobile responsive so let's do that i'm now going to update this page and i'm going to save it now i'll go ahead and put this link in the description it is a google mobile friendly test so this is the actual page it is search.google.com go ahead and paste this and i'll see if this is mobile friendly so i'll click on test url oh oh we got to do a little test here you know i'm not going to add the video you guys can watch these things are so frustrating it says click on the cars okay we got this one verify okay i guess that works all right so we got to make wait one minute all right cool so we actually passed the mobile friendly test so we got the green check mark from google and it let us know that our website is fully mobile responsive all right in this next section i'm going to show you guys how to use the theme customizer so i'll first be showing you guys how to set a home page to pretty much any page that you'd want so for example if you guys made this our team page right and you wanted this as your home page i'll be explaining how to do that i'll also be showing you guys how to adjust your header and also how to adjust the footer of your website because you guys might have noticed that the page builder is not making the actual header in the footer so i'll show you guys how to adjust that part of the website and then i'll show you guys how to get a logo and then how to add it to your website you guys ready let's get started first let's click on this customize button here this will turn on the theme customizer now every theme with wordpress has a theme customizer remember earlier in the video how i said every theme has different options like different styling options for the header and the footer this is where all the themes differ from one another first let's go ahead and go to the home page settings now let's say for example you guys made like a page and you want to assign that page as your home page you'll go over here and select a static page and whatever page you want to be your home page you would just put it there and now the about us page is our home page right this is useful so let's say you guys are just getting started with wordpress and you make a new page you would always want to assign that specific page or whatever page you want to be your home page in this case it's the home page right but i just still need to walk you guys through on how to do that and then once you do that you'll just click on publish all right the next thing that we're going to do is that we're going to adjust the header now with the astra theme they actually released a header builder this year so here we have different elements right we have these um we have these boxes and then we have these different elements if you guys want to drag and drop these elements you guys can do that for example we have the primary menu here and also if you click on this plus icon we can then go ahead and add in more elements so here we have a social which is actually it's too much here here let's put on the top right there right we got the social icon at the top or we can even drag those over there to the right side of the page if you guys want to have three columns right we'll just put in a secondary menu and this can be a secondary menu right but obviously we have three uh lines right here and it's interfering with the actual page builder so we probably want to just have like one you know once one row right so over here i'll go ahead and drag in these elements and then there we go we have this one column row which looks really nice i'll go ahead and put the site title logo over there and also if you want to style these elements you'll just click on the actual element here and then you have the options to change the text the link and open a new tab if you choose to do that and then over here you have the design options here you can adjust the text color the background color and you can fully design every single element in your menu now obviously i'm not going to do that because i can easily spend another 30 minutes designing everything in this menu but i think here that you guys get the point right it's very similar to the page builder you'll just have to go through these options here and adjust these as necessary now one other option i want to show you all here we have this little gear icon and if i click on this gear icon i can adjust the height of this actual row and i can also add in a background color or i can even change the position of this so if you guys do want to design the actual row this is where you're going to do it with these little gear icons right here but um yeah that is how you guys can modify the header in a nutshell so let's go ahead and go back over here and now that i showed you guys how to design the header and the menu now let's talk about how to design the bottom of the website so we're going to scroll down right here and the footer builder is the same thing so it's just like the actual header and what we can do is that we can click on a widget here and then we can add in blocks so uh there it goes all right so we have travel and tourism and if you want to add more stuff to this section we'll click on this plus add a block browse all and now you can add in any of these elements here so if you want to add in like a button to your block or columns or you want to add in more widgets you guys can do this anywhere that you guys want on your footer i'll just throw on some social icons here and then i'll add the block so we will add in like a uh skunk browse all here so for the social icons we'll add in like a facebook right and then we have to add in the link right so this will just be like the link of your actual facebook page and stuff like that i'll click on the plus all right cool and then uh we'll go ahead and add in another one plus uh what is a twitter i think elon musk bought twitter right it's interesting and then you'll have to add in the link here as well so i'll just go ahead and double click on this and then we'll also put in the address for your twitter and then we'll click on check so you'll just go through here and add any block that you want and you can do this for every section so for this section as well you'll click on add a block and then you'll do the same process all over again so this is how you can build your footer from scratch they did a pretty good job here in making this footer so if you just do want to adjust this text to your liking go ahead and go for it all right so now that we know the design process of how to build the website now i'll talk about where to get a logo all right so there's a few websites you guys can use there is placeit.net uh these guys can make a logo for you guys that you can legally use on your websites also fiverr.com you can just go to fiverr.com and put in logo design and these guys can make a logo for you for as little as five dollars right uh you guys will need to make an account but um you guys can use the service it is pretty cheap and they do make some really nice logos and yeah i actually got my logo from these guys a few years ago and it looks great there is also logomaker.com you guys can use this and they will help you get some ideas and inspiration uh for your logo so for example put in darwilson.com and just see them in the pet industry and then they'll go ahead and they'll generate some logos based off your interest and these guys can actually make tons of logos for you you can see here how i told them that i want the circular style with the logo below it so they generated tons of logos for me to choose now the reason why i recommend going to a paid service for a logo like fiverr or logomaker.com or for place it is because these logos you can legally use if you guys do use free logo maker websites you legally cannot use those logos and if someone owns the right to those logos you guys can get some serious trouble so stay away from logo makers or free logo makers and make sure you guys have the full rights for your logo here i'll go ahead and put in darrelwilson.com and click on next then i'll select some industry here i'll just say a bar all right let's select bar i don't know bar that's interesting let's check that one out so now places.net what they're going to do is that they're now going to generate tons of logos for me using the niche and also using the name that i displayed all right so here we go we got some logos they made for us and this is great so you guys can just go ahead and select the logo here and then you guys can get some ideas for a logo i really like placeit.net i think these guys give you just tons of free ideas and i mean they have like over like 10 pages of ideas so it's really great what this website offers it's a new service it is a paid service but for what you guys gets i think it's like 10 a month or something it's really really cheap so if you guys do need a logo go ahead and check out any of these websites now once you guys do have a logo we can actually upload it to our current website so let's go back over here to customize and then we'll add in our logo so over here we have the header builder obviously we'll just go ahead and go to the site title and logo and this is where we can select our logo all right now the good thing about astra is that you guys can actually adjust the size of this so this is a little bit too big right now i also want to get rid of this display tag i don't want that i just want my logo to show so i'm going to take out the site title and then we're going to reduce the logo with just to make it a little bit more friendlier and there we go we got around this is 251 all right that looks good all right so that's how you guys can add a logo to your website and make it look complete now there's one other important option and that is the site icon so at the top right here you can see that we have these site icons right you want to make sure that you also do add this to your website so for the site icon i also want to add this i'll click on select site icon and then i'll also select my logo and here on the right side we get this preview right so now we can see that there's this preview of our logo and then i'll click on crop image and then click on publish all right and great so now you can see that we have our logo there and if i close this theme customizer you guys can see that the logo has been applied and also we now have it on our browser that's pretty cool now let's say for example you guys want to create blog posts for your websites in this part of the video i'll be showing you how to create a blog post for your websites now before we create a blog post we need to first create a page for our blog post to display so up here i'll go to plus new and i'll click on page and then for add title i'll just put blog page or blog or you know whatever all right blog page blog yeah same thing i'll click on publish and publish now i'm going to quickly add this to the menu so go over here to wordpress appearance menus and then i have my primary menu selected i'll then click on the new page blog add to menu i'll then rearrange it and i'll save the menu alright cool now over here we have posts so this is where your blog post will display up here at the top we'll go ahead and click on add new and for the title we'll put like uh top 10 things girls love about about men right and then right here we'll just go ahead and put in some dummy content so you can go ahead and type in whatever you'd like all right so i'm gonna go ahead and put in some demo content here right now this default editor right here this is called gutenberg and with gutenberg you can actually build your blog post using either the elementor page builder or you can use the gutenberg builder now i'm not going to give you guys a full rundown of gutenberg because that's a whole nother page builder and that's going to take another you know hour or two to talk about but uh up here you'll click on this little plus right here and this is where you can add in blocks so for example let's say for example let's say for example you want to add in like an image i'll click on the image block and then right here i can go to media library or i can just upload a new image right so i'll go over here and just put something in like this one right here and then you can also reduce the size of this image as well by clicking on these arrows and then just shrinking it down and then for the caption i'll put like our grates time in grease or wherever you want to talk about right so yeah so this is the way you guys can create blog posts for your business and then on the right side we have this featured image this is actually one of the most important parts of the blog post this is the image that represents the article so i'll go ahead and click on set featured image and then i'll just select an image here set featured image and you can also create categories for your blog post so this can be something like you know your money or politics or dating i'll just put dating right here right dating and then i'll click on publish so now i'm going to go ahead and publish this blog post alright cool here i'll click on view post and this is our blog post so we have the featured image right here and we have the title we have the category right here who is written by and then just we have the content right here and also people can leave content like great article and there you go alright cool so that's how you guys can create blog posts for your website up here if you click on blog you might notice this page is empty so the next thing we need to do is assign the blog post or blog page to this specific page right here so let's go over here and click on customize we'll then go ahead and scroll down to home page settings and for the blog post page i'll go ahead and select blog right now with the astra theme customizer you can also use the theme customizer here to design uh this actual blog section here so right here i'll click on blog and the blog archive is actually referring uh to the actual page itself so right here i'll click on blog archive and this is where you can add in some design and you can also restrict specific features for example if you don't want to show like the title and the blog meta or if you want to hide the category and the author you can just click on this little eye icon right here and now that hit the actual author and you can always reorganize stuff if you want you can put the comments on top of the category and you can drag and drop these so this is how you guys can customize the blog now let's say for example you guys want to design the uh single post so i'll click on this actual post here and this is where you can actually design and customize the single post as well so you can go ahead and also restrict specific information on the blog post you can also change the content with and also change the font size of this so if you want this little bit larger you can say i want this just to be a little bit larger there like 40 pixels and i think that's good and then i'll click on publish up here and i'll close the theme customizer all right so that's how you guys can add a blog and blog post to your website now if you guys do want to learn how to create your own web design business from scratch i do have a video in the description below it's about six hours it's a pretty long video but that'll give you everything that you need to know to start a web design business from scratch all right now there's one last thing i want to talk to you guys about just before i let you guys go if you guys are building your website and you find out that it's just not really good and there's a lot of mistakes you made and you just want to reset let me quickly show you guys how to reset your current wordpress websites over here let's go to our dashboard and i have like tons of plugins and stuff over here and everything's like getting glitchy and a little weird which does happen over here under plugins i'll go to add new and then i'll type in resets and this is the plugin that we're going to use uh it's called wp reset just click on install now all right cool so now that we've done that we're going to scroll down on the left side here and under tools you're going to see wp resets now if you guys do this it will delete your entire website so just make sure that you're sure about this decision because you cannot get anything back it will delete your websites to original factory settings so over here i'm going to type in resets click on reset sites and then click on reset wordpress alright and now you guys can see on the left side like everything's cleared up i'm gonna go ahead and close this box and then we'll go back to our visit site here and now you guys can see that our website has been completely reset so you guys can do this just in case you want to also use another astra starter template now just as a parting gift if you guys do want to check out my other videos this video here we talk about like the best wordpress themes so i go in depth and in detail and i scour the internet and i try all these themes and i made my list of the top 10 wordpress themes they're all free and a lot of them have some really cool features so be sure to check out this video i will leave all these videos in the description below also we do have this video here where this goes through and talks about the best free wordpress plugins and actually go by category so we have seo image optimization translations push notifications uh you name it there's a lot of plugins that i talk about and also if you guys do want to learn how to start your own web design business you guys can go ahead and check out this video here it's about six hours long but there is so much value i actually uh co-star in this with another uh youtuber his name is uh what is his name i forgot his name is uh daniel scott yeah daniel scott so uh there's two youtubers here and we actually teach you how to start your own web design business from scratch so i highly recommend to check out this video all right so congratulations on your website guys i really do hope this video helped you guys out if you guys do have any questions for me feel free to let me know in the comments below and i'll do my best to get to all of your comments my name is daryl wilson and i'll see you guys in the next video all right party people thank you guys so much for watching this video i hopefully help you guys out you know i know when you're first getting started out with wordpress it can be very intimidating on where to go so again i really do hope this video helped you guys out if you guys have any questions for me let me know in the comments below i can't promise i'll get to every comment but i'll do my best and make sure to like this video and until then i will see all of you party people in the next video guys take care

Channel: Darrel Wilson

Views: 206,938

Keywords: wordpress tutorial for beginners, wordpress tutorial, wordpress for beginners, wordpress, how to make a wordpress website, build a wordpress website, make a wordpress website, wordpress tutorial for beginners 2022, wordpress tutorial for beginners step by step, create a wordpress website, darrel wilson

Id: 0Bc9UiWAF0w

Length: 90min 40sec (5440 seconds)

Published: Fri Jun 24 2022