How To Make A Website 2022 (Full WordPress Tutorial for Beginners)

hey everyone welcome to the channel my name's mike and in this tutorial i'll show you step by step how to build a beautiful professional website with wordpress even if you have no experience and no prior understanding at all this is a full tutorial for beginners and i guarantee if you watch and understand this entire video then by the end of this video you'll have all the information you need to make your own website for just a couple dollars which means two things one if you are otherwise considering hiring somebody to make a website this could save you thousands and thousands of dollars or two if you are looking to become a consultant and make websites for other clients this could earn you thousands and thousands of dollars so whatever your reason might be for making a website whether you are a student making a little portfolio whether you're an artist whether you're an e-commerce trying to get into drop shipping or anything like that or if you have a regular brick-and-mortar business and you want to move it online there are tons and tons of ways to make a website and tons of reasons you would want to make a website but the way we're going to do it in this video is one of the most popular ways to do it on the entire internet we'll be using wordpress which as i said powers over one third of the internet out there these are big websites from sony music as you can see right here to techcrunch to even the official website of sweden wordpress powers a lot of big websites out there and you might wonder why do so many people choose wordpress and why would we do it in this video well one of the main things is that wordpress is open source which means it's free to use you can just use wordpress you don't want to pay anybody don't worry about anything like that and secondly because it's open source and because it's so big you have a ton of integrations out there from facebook pixels to google analytics to any big name out there most likely works very well with wordpress and on top of that because it's so big and is open source you also have a ton of theme options so you have thousands of different themes to choose from both free and paid ones you have lots of different plugins and apps and integrations and so it just really works well across any style of website across the entire internet so that's why i wanted to make this tutorial in wordpress for this video so that i figured most people out there no matter what you're doing wordpress should be a great way to do this now before we get into the very first step of this tutorial i want to point out that this is entirely free information here at santro we believe in free information and so we will not at any point in this video try to upsell any courses we do not and never will sell a course and so you can trust that everything we're putting in this video is everything we think you need to know and this is a complete guide to making a website so with that being said if you appreciate this video at any point please go down and do click the like button it really helps the channel out a lot now getting into the first step you just open up any browser you want everything we're doing is online so you don't have to worry about what kind of computer you have mac versus windows versus chromebook it'll work on all of those so just open up i use google chrome but any browser will do and what we want to do is go to centralmedia.com hostinger and so i mentioned that wordpress was free but there are two things that you're going to have to pay for that are outside of the actual website one of them is your host which is essentially where your website's saved you can imagine it like a word document you can't just x out of it you have to save it somewhere and so you save it on a host and hostinger we think is one of the most secure one of the fastest and one of the most affordable ones which is why we think they're a really great option for anybody new to making websites and they're just a very easy recommendation but the other thing you'll have to pay for which you don't actually have to pay for if you get hosting here they bundle it in but it would be a domain and you can buy domain anywhere else from squarespace or google domains or there's tons of different places out there but like i said doing it directly through hosting here because they bundle in with a lot of the packages they give it to you for free you don't have to worry about any of that so the first thing we want to do is actually go to start now as you can see right there and we have a couple plans now you can choose one of these three plans but what i would recommend doing is going to wordpress hosting because we're obviously working with a wordpress website and you're getting some extra packages here now among these you can look down here and they show you a lot of differences this might seem intimidating so i'll just give you my general recommendation you could read through these and look at how much storage you think you're going to need but i would generally say the second one is probably the best for the most people out there the first one is great and it is more affordable so i mean if you're really tight on a budget that's a definite that's definitely a great option but i would say if you think that you're going to use any more storage than 30 gigabytes which isn't especially likely unless you have a lot of videos but there are other things like you do get a free email which is nice uh you do get the unlimited databases you get jetpack in there you get a lot of other things added in and so for that reason i think that this is a better option for a lot of people that's what i'm going to go with in this video but don't worry whichever one you choose the next step is going to be exactly the same so i'm going to select this one right here and then it's going to ask you for how long do you want to choose your period right so you can choose one month and that's what i'm going to do in this video because this is just a tutorial right like i'm not actually using this website long term but i would say say for most people or what i do on most of my websites is i find the best balance to be around 24 months that way i don't have to worry about you know remembering a payment anytime soon i don't have to worry about you know if my website's not doing well a lot of blogs and things like that do tend to take 12 months to two years until they actually start picking up a lot of traffic and so paying for two years is a great way to commit yourself to really focusing on building your website of course if you know it's gonna be around for four years that's an even better deal you're saving a lot of money there but at least for me that's like a that's a really long commitment i usually go with 24 months but for this video i'm going with one month and then we're going to create our account you could do this by just connecting your facebook or your github or your google account or what i'm going to do is just type in my email okay and then once you do that you're going to click on start now and it's going to walk us through a couple different questions here and realistically none of these questions mattered that much so you can skip it if you want that's what i'm going to do but otherwise it might help to guide you for future reference and show you more relevant things okay and then it's going to ask you to create an account for wordpress and remember that you have two separate accounts here you have wordpress which is your content management system which is where all of your website's going to be all of your files are going to be everything related to your website is there but it's just being saved on hosting here so hosting here is a separate account so for that reason i would like to use a separate password here that's just generally what i recommend some people use the same password and that's completely fine but just keep in mind security is very important with your website so then we will click on continue and it's going to ask you which look you like now i'm going to say it's really important here that you actually skip this because later in the video i will show you where you can find a much larger selection of different templates and different themes that will look a lot nicer so we have some options right here we can buy a new domain or use an existing domain if you already have an existing domain we already know right so you would get one from like squarespace or or godaddy or any of the other sites out there like i said but because our plan does come with a free domain i'm going to buy a domain and the domain we're going to choose could just be anything maybe it's going to be santrell santrel surfing centralsurfing.com we could do something like that we'll say search and see if that is actually taken probably not it looks like it is available so i'm going to say i buy it right now and we can choose two years or you can add three years one year whatever you want to do and something i highly recommend is the the who is privacy protection personally i think especially for a business it's really really important that you go and add that who is privacy it's ten dollars per year i think it's more than worth it and so that's what i'm going to do right there now i'm actually only getting this for one year you're still saving 30 you're getting a really good deal on one year actually a better deal in one year than you would on two or three so i generally recommend doing that now i'm going to complete the payment right here and you might notice that i did have to pay for this the reason i had to pay for the domain and it wasn't actually free is because i chose the one month plan as opposed to the full year or the two year plan they don't want you paying 15 for one month and getting a free domain for a year so that's the reason if you chose anything other than the month by month payment which like i said i did recommend that then you would be getting a free domain i got punished here for not doing that but it makes sense because this is just a tutorial so let's go to the next step and then it's going to ask for some primary details so you can complete the domain registration and actually have that domain in your in your possession and then once you finish registration it's going to take a second to actually register the domain you'll probably have to go over to your email and actually go and click uh confirm that you actually will register with that email so again make sure you're using an email that you two actually have access to all right and then you'll just click the little purple button and it's going to initialize setup and we're back it finished this little thing probably took about one minute it wasn't anywhere near three and you have a couple options here you can go to the control panel this is on hostinger and this is where you can restore backups and enable ssl and things like that and so we will definitely be doing that but then after that i want to show you guys how to actually go into the wordpress dashboard there are two ways to access it and this is not the main way i would do that i'll show you the other way that i normally do it so we are going to manage site first of all this is hostinger and like i said we want to set up a couple things before we build the website the first one is that i do recommend having something like backups so that they're saved and that you don't have to worry about if anything goes wrong on your website you can just go in here and restore yesterday's backup or the one from the day before it's something that gives me a lot of peace of mind and honestly i have used it so many times so if we simply scroll down you'll see that we do have an option for backups if we click on backups it'll say right now that we don't have any backups it's going to be generated automatically and i'm going to click on add daily backups this is something that again you do have to pay for unfortunately a lot of things with hosting your you have to add a little like an extra dollar a month but this is something that i really think is definitely worth it i'm going to do one month of this i'm going to complete the payment in this way every day it's going to save my website offline uh so that if anything ever happens i can go in here and just restore yesterday's backup and my website is back up and running because otherwise you never know if you update a plugin and something went wrong with that plugin then your whole website could be down and you would otherwise have to build it from scratch again so this saves me a ton of trouble definitely worth a dollar every month now the second thing i want to do before we get into our wordpress dashboard is actually enable ssl and ssl is going to without getting too complicated it's essentially the way to make your website secure so that visitors know that they're on your actual website that it's secure it's real and if they're putting payment information in they'll know that it is encrypted and other people cannot see their payment information super important and it's going to show you this little lock icon on the top of your browser so the way to do this it's very easy actually if you just go down here to advanced on the left side and scroll down you'll see ssl we're going to click on that and the plan that we have should come with ssl but again i chose asset i chose the one month one so i wouldn't be surprised if it was not included here we're going to click install ssl it says it's installing and then it'll be done in just a second so honestly like i said it's incredibly easy to do you don't have to worry about anything after that and it really helps your website a lot or especially when viewers go there now the next thing we want to do like i said if we go back to the other tab and you can see manage wordpress is an option here or the better way to do this or the more common way i access it is if you go to your domain which is central surfing it's central surfing.com and then you just type forward slash wp dash admin and this will take you to the wordpress sign in for your website and this is the best way to log in like i said it just takes you right to wordpress and we'll type in our email all right and then here we go so once again you're getting a little bit of an intimidating interface here but i will demystify this i promise it's not hard to use i'll show you where everything is and this is going to be the rest of the tutorial this will be everything you need to know in the future how to manage your website you're doing everything in here hosting here was how we got it set up how we got the domain how we got going but wordpress right here is going to be where you do absolutely everything with your website so just a quick overview i'll dive into each of these throughout this video but just so you have a general idea of what things are and where they are you'll see across the top these are just basic like if you want to visit your site you can hover over the domain and click on visit site and of course right now we do have a website it's just the default theme there's nothing there it's just basic template but if we go back next to that we'll see notifications if somebody left comments things like that we can go to new and you can add a new post a new photo you can add a new page pages and posts i'll talk about how they're actually different you can add a new user so if you have employees who are going to be accessing this you can add them right there or of course we could add a new form because we have the forms plugin now that won't always be there i'll show you how to get different plugins plugins are incredibly important as well we can go to insights we can see all these different things these up here are actually part of our plugins and they might be a little functionality like wpforms is a plugin and when you get the plugin it gives you this little access feature right up top and then on the left side this is really what i do most of my most my work with so you can go to dashboard which is going to show you just by default some basic stuff some updates they might tell you like hey there's a new version of wordpress available um different things like that you'll see a lot of that right here below that if you within home you'll see updates and this one again is really really important that you come back here they'll have little notifications like this little red number that's going to show up next to updates probably about once a week i wouldn't be surprised depending on how many plugins you have it'll say there are updates and when you get in here you can go and update individual plugins or themes and make sure your website is always secure like that then below that we have jetpack that is again just a plugin don't worry about that one i'm actually going to get rid of that and you know what before we continue on i'm going to show you how to get rid of some of these plugins because it comes with a lot that you might not need right away so if we go down here to plugins and click on plugins it will show you everything that is already installed on here so going down you can see we have all in one seo all in one wordpress migration like we've got was probably too many right here and we're not going to use most of them so what i'm going to do is i'm just going to select all the ones that i don't think we need and i don't think we need this one this one i can keep jetpack for now but i don't think i need this one opt-in monster forms i'm not going to use any forms and so we can get rid of all of these just by going to bulk actions and first deactivate them click on apply and then once we have them all deactivated we can go to click on inactive and it shows us all of the inactive ones these are all the ones that we just deactivated we can select all plugins and then here we can go and delete them so we're going to click delete click on apply and we'll say yes we are okay with deleting them and then that's going to really clean up our dashboard quite a bit a lot of these things are going to disappear as you're seeing across the top already not there and then all we have is just if we go back to all really the only plugin we kept was jetpack because that does help to speed up your website and do things like that and so jetpack is included we'll dive into what jetpack actually is and what it does later in the video but continuing on with our dashboard if we go to post you'll see this is going to be where you have different blog posts different timely articles things that might not be a cornerstone thing they might not be like a home page or an about page but rather they'll be like an article that you wrote we have media this is going to be if you have photos that are used in different parts of your website or or files or music or anything like that it'll be saved right here pages is going to be essentially like i said if you have privacy policy a home page an about page all of that and we're actually going to get a template in just a second that will populate a lot of these and save a lot of work for you we can go to comments and this is where you can moderate a lot of comments if people comment on your posts you'll see them right here and keep in mind sometimes you do have some spam comments that you'll have to go and delete or filter out or unapprove and you can do all of that right here then below that we have appearance this is where we choose a theme and that's really the first step right now so before we get a template we have to go and choose the theme so if you click on appearance by default it shows you a couple themes that came with your website we can very easily get new ones so if we click on add new you'll see that we have a lot of different options and tons of these are free there are thousands of free ones and paid ones and you can really dig through a lot of different templates a lot of different themes and find exactly the best one for you but keep in mind really what most people use is astra that's a really really popular one and so that's what i'm going to use in this video we'll click on install it's going to install astra and remember there are two steps to this you have to install it and then you have to activate it all right and there we go it is now installed we don't actually have to click anywhere else we can just click on activate right here sometimes i forget where the blue buttons come up but it shows up right there and now that is the new one that we actually have that is our current theme and so just to show you guys if we go up to visit site and we click on that you'll see that again it looks very very different you might worry that it's not an improvement but i promise it definitely is and if we go back we can actually get an entire template right now this is really cool and it's really easy to do now if there's only one piece of advice you get out of this entire video it's this right here i highly recommend if you get the astra theme you go in here and you get a full template when i first started making websites years ago i didn't always realize that there were templates available and a lot of times i would make websites and you spend so much more time building page by page by page when you can just go and install a template and somebody else already made a lot of the website and then you can just go and change the photos change where things are a little bit and you have your full website ready to go and it saved you a ton of time and a ton of work so i highly recommend getting this now if you go to the astra if you just click on appearance you go to astra options you can actually go to install importer plugin so we're going to click on that it's a little plugin that's going to make it very very easy to essentially get a template and install it on your website this is going to set up pages it's going to set up posts it's going to set up fonts everything you really need to get started and have a website that looks a lot better than what it currently does and so like i said if you just open a new tab and go to your domain you're gonna see that right now it's there's nothing there it's gonna be a lot of work to build a website that looks really nice unless you go and install a plugin or a template so what pops up next is this page right here and it's going to ask us what our page builder is going to be these are three great options here but i always use elementor i have a full tutorial on how to use all the little things in elementor i'll show you a lot in this video but you know the good news is if you choose to use elementor which i highly recommend after this video you can see even more details about some more nitty gritty things that you can do with elementor and elementor pro in elementor the basic one as you might assume is actually also free to use so so far astra is free the template's free the builder's free a lot of the plugins are free like there's a lot of things with wordpress that you don't actually have to pay for so that'll bring you to this right here and there are a lot of great options here for what the website can actually look like and there are premium ones which you obviously have to pay some fee for or there are free ones as well for the full template and so what i want to see is actually just the free ones we can go up here and click on free and these are all the free ones out there but keep in mind you don't have to worry about what photos are there like this has plants but i can just replace those with surfboards right so anyway let's just say we want to go with maybe an outdoor one i really like this one so i'm going to put a little heart on that maybe i want to compare that later on and there's all you know a lot of really great options here even just with the free ones if you're doing like an online store or anything like that a paid one might look a little bit nicer a little bit more unique but again i'm just gonna use this free one i really like this one right here and you can actually see it shows you a lot i think there's actually a parallax effect as well so if we go to preview site yeah look at that as you scroll the photo stays right there goes like that i think this looks really nice that's exactly what i'm looking for for this surfing website so i'm just going to go and say uh yeah i really like this one so we can import the complete site or you can just import one page at a time which is another great thing if you find out later on you want another about page from some different template you can go and just install or import the about page but i'm actually going to do the entire site because i like what they have right here and so here they're going to ask us one last step a couple extra things right here so we're going to say yep ready to go we are a wordpress beginner we are building it for myself and we're going to say next and then once you click start importing it takes a few minutes until it actually imports everything because obviously it's importing six different web pages or five different web pages here and a lot of photos and fonts and media so it just takes a second until this actually happens all right and there we go it was successfully imported which is great news and we can go to visit the site but remember i just want to open right here this is what it looked like before now let's see what it looked like after go to visit site and this is central surfing this is my domain it now looks like this we now have things we've got an about tab we've got a services tab don't worry about this little gray bar up here this is only there because i'm signed in to my wordpress account anybody else visiting would not see that you'll see right here we've got a lot of great stuff like it looks like a full normal website just not related to my subject so all we have to do is go in here and change a lot of that stuff and you're ready to go you don't have to set up the tabs you don't have to set up new pages you don't have to do any of that because this saved us a lot of time so going back to the first tab our wordpress dashboard right here we can close out of that and now we're pretty much ready to go we're ready to start customizing this website so like i said from dashboard we now have a much cleaner layout so far we did that we installed a theme a plug-in for our builder and we installed a template four big things right there that are going to make this you know a much more streamlined process so one quick thing i want to point out before we actually go into building the website and really customizing that i want to go down and touch on a quick little couple settings that i recommend changing or at least double checking before you actually go and continue so the first thing is the name of your website showing up right there i don't want it to be that like maybe if you're like something that you want the dot com that makes sense but i'm going to say central surfing that's just what we call it and then our little tagline we can say a surfing blog maybe it's a surfing blog or maybe we sell lessons whatever it is i'm just gonna have a little tagline there and then you'll also notice right here quick little subtle thing it says http and it does not have an s there and because we paid for ssl or because we have ssl we didn't have to pay extra for that because we have it we can actually go and add an s right here and right here and we are going to go down and click save but keep in mind when you click save make sure you know what your password is so you can sign back into wordpress it's going to make you sign back in right now when you click save changes because technically you added that s so it's going to just make you do that again all right so there we go we're going to sign in again and once you're logged in now we have https which is great which means that if we go over here it is now a secure website which is great again we want to have that little lock it means a lot to people when they're visiting your website i check that all the time every website i go to if it says not secure on the top i don't trust the website because that's a standard best practice that everybody in the internet really should be doing so going down other than that really not a whole lot of settings that i think you need to change you can check the date format and the time format but really if you go down to writing this is the only other thing that i think matters if you go or sorry not writing if you go to permalinks this is going to be when you make new pages new blog posts how is it actually going to show up so right now a weird custom structure i don't think makes sense instead i think the post name is probably going to be the easiest way to do that so if i make a blog post and i title this surfing for beginners we don't want it to show some kind of weird thing we just want it to be central surfing.com surfing for beginners that way when you're navigating the interface it just feels so much more natural on the website i think it's a big plus i think a lot of people should be changing to that but otherwise you can dig through the settings we'll dive into that later on in the video these are the fundamentals that i think you need to change as early as possible now let's go up to post and pages like i said post is going to be essentially any blog post our theme that we imported our template that we imported did not come with any blog posts so we'll have to make some of our own later on in the video but pages remember we did have those that actually were imported so we had the ones that started right like this one started with uh i think it was privacy policy and sample page those just came by default with wordpress but the other five that we have right here were the ones that we imported with the template and you can tell because they say elementor next to them and these do not so i'm going to get rid of these i don't need the sample page i don't need the privacy policy right now we could use it if we wanted but it's not going to look as good so the ones that we do have these are these are all them right here and we can actually go and edit any of them let's start off with the home page the way you want to do that is hover over home as you can see right here and click on edit with elementor you could also click on regular edit and i'm just going to show you that really quick because there are a couple extra features in here if you just click on regular edit it'll show you let's close out of that it'll show you that you can't actually edit it without opening elementor because it was built with elementor but it does show you a couple things on the right side and these things will be things like if it's visible to the public or if it's a private one you can make it private or you can make it password protected and that's if you're making a new page that you're not quite ready to share yet but you know it's in the making you can make it a private or password protected one additionally you can change the permalink this is our home page so it doesn't actually have a permalink and you can change things like the featured image which means when somebody searches in google and they find this some some posts and some pages will have a featured image showing up there and of course you can choose if you allow comments or not this is a page a homepage doesn't really make sense to have comments but that's what i wanted to show you right there some quick little things quick little settings about privacy and and visibility we can click on edit edit with elementor here or like i said if we just go back you can click on edit with elementor right here so edit with elementor alright that brings us to a third interface which fortunately is not like the wordpress dashboard instead this is a lot more intuitive very easy and this is why we installed elementor because this is a simple drag and drop builder that allows us to customize our entire website make it look really nice and we don't have to do any kind of coding we don't have to know anything really like it's really easy and intuitive so if i want like a heading if i want text to be like right there i just click and drag it and we just added text right there you can change the color of it you can do all types of things like that very very easy to do all of that and so that's why i really like using elementor when i'm building a page now we'll talk about how to actually build new pages but because we installed this template we don't have to add a lot of new stuff really what's more important is editing the stuff that's already there so we can do is just double click on anything and you can start editing the text if it's you know it's like a text box like this or a heading so if we could say right here learn how to surf maybe that's like our tagline learn how to surf and then right here maybe this is going to be our title so central surfing right so that is going to be very straightforward this right here is a button and of course another thing you'll notice is on the left side whatever i click on we have a lot of settings that show up with that so on the right side obviously this is what our website looks like it's interactive you can click on things and edit them and on the left side we have some more in-depth settings so if i want this text for example to be a different color if i wanted to have a link hidden in there so when somebody clicks on it it opens something else if i want to do anything like that you can adjust all of that over on the left side so if we click on for example style we can change the color of that text and i can make it literally any color i want we can type in the html code down there or just click and drag until you see a color that you think looks really nice now i'm going to leave it as white i think that looks fine but you can also go over to advanced settings as well and change some of the things with the spacing between different items so for example you'll see right here we have padding and we also have margin when i was starting out with wordpress that was very confusing to me so i want to kind of explain right now what it is padding is essentially going to be on the outside how much of a buffer you have around that text box whereas margin is going to be how much on the inside if you want more margin on the inside of this box between the next thing you would add more of obviously with margin there and you won't really notice a difference they're pretty interchangeable except when you start having backgrounds on these text boxes or if you have backgrounds on things around them because this is all in one giant strip right here and i realized i haven't actually explained the the general macro concept here the way this is laid out is in different little strips so you can see this box right here is all one big strip and within that we've got a single row outlined outlined with this gray dot right here the gray and white dotted line and then within that row we've got a text box we've got a little divider another text box and then a button so everything's in these large strips that you can really arrange so if i wanted this entire strip to go i could click on the x button i don't like that so we could just undo that by hitting the little undo button if we go to history we can actually go and undo that so if we go back to here there we go we undid that little mistake right there but you get the idea how this is all one big strip that has a single background and then all these little elements in there don't need individual backgrounds and that's why we don't worry about margin and padding but going down you'll see this is another strip right here this is a little quote thing where we have three columns here you can see one on the left which just has a little icon there the middle one has the text and the right one is just used as a space for nothing really and when you have three columns you can see that these three columns are not actually even obviously this is a lot wider but you could adjust where they are by hovering on that little divider line and clicking and dragging to adjust the width to whatever makes sense for you similarly down here you can see this one has a single row or a single column right here but within that we've got a little sub two columns and you can actually go on the little grid thing right here and what they did is added in an inner section so intersection within one big section within this big section they have another little section that has two rows and so that's or two columns rather and so that's a great way to have like one solid background like we have this white background right here and we have like one thing that spans the whole width of the page and then two little columns underneath that usually an intersection is going to be how they do that i didn't mean to click and drag that but whatever going down we can see another section right here and it's really cool with this background something you might wonder and if you if you don't have this on the theme or the template you chose i'll show you exactly how you set this up so if we just click on the little six dots right there we can edit this entire section and as i said on the left side we have tons and tons of different things we've got layout style and advanced so the layout overall is going to be essentially how the image looks where it's positioned and things like that and what we have right here this is called parallax and i really do like how parallax looks so we want to make sure that we have a parallax enabled so what we want to do is actually go so if you go over to style you can go down and see that right now the attachment which is this photo in the background is set to fixed now because it's fixed in place you scroll and it doesn't move on the screen that's what that means that's a parallax effect now instead you can have it where it's scroll right now so as you scroll it goes with that or you can just go to default which i believe is going to be pretty much the same as scroll right there which is you know by default we have it set that it's always going to be scroll so i think fixed looks really cool as you go obviously throughout the entire page it moves up and down it is a little trickier if you have text on the right side you want to make sure that it doesn't blend in too much and so what they did here is it looks like they added a background overlay so you can see that the original image it's kind of hard to see right here but it looks like it's a little bit lighter on this little image right here versus what you're seeing here so it looks like they have a black background overlay so you can see if we just go to background overlay right now they do have this overlay so if we made it like really dark you can see it's obviously darker you can make it lighter and so this is going to show you essentially like if you have an image that you want that parallax effect but for some reason it doesn't contrast enough with the background you can have a quick little overlay on your background to make it either darker or lighter or any color you want really so you have that proper contrast and it looks really nice now i know i'm getting into like some really specific things here i'm just kind of like cherry picking different things that i think i would change about this website first before going and changing uh all the media but let's talk a little bit more about how you would go about changing this media anyway so on the top the first picture we have like we changed the text which is great but we don't have like there's an icy mountain that's almost the opposite of surfing so if we click on the six dots you can see right here again if we go to style again you'll see that background which has a lot of the same features here is fixed which means as you scroll it doesn't move but the rest of the page does and again it also has a background overlay making it a little darker but if we want to change the image we can just click on choose image and we would go and select a file to upload so we can go and upload a file so if we go to upload a file i'm just going to click on this one and say open and it will upload just the image i have just some basic stock image of surfing we will insert the media you'll see right there it looks actually pretty good by default we probably don't need nearly as much of a background overlay on this and we can maybe adjust this around it and reposition it a little bit as well but i'm actually going to go and change the background overlay first let's say that maybe instead we want it to be a little bit more blue a little more purple so let's let's go about that let's change the hue something like that and it doesn't need to be nearly that intense we could dial this back a little bit so it's like that so you still have a lot of contrast there it's still really nice you can see the text very easily but it's not nearly as dark and kind of gloomy as it was before and of course you can change this to literally any color you want if you want to be like obviously very depressing with that color there or you know i think you know blue makes a lot of sense right here kind of accents the color of the wave and we can even make that a little bit lighter yet and again you can still see the text very very easily there so that's how we'll go about changing the top the next thing you can see is we have this little quote here and you know what maybe we just don't like to quote at all we can go and delete it like i said by clicking that little x and let's add a different section in there instead so if we want to add a section we can click on the little six dot or nine dots on the top right of this little elementor panel and we can go and actually add a new so let's click on the plus we're gonna add a new section right here and we can drag the widgets that we want the little basic things if we want text if we want image if we want text editor videos you have all these different options for things you can add in there and so because i didn't want to quote maybe instead i want to have two columns right here so we can go and click on the little plus and choose how many columns we want i will say how about two columns sounds good to me and in these two columns i can add all these different elements so clicking on the nine dots these are the elements we have available and as you scroll down you'll see some of them are limited to getting elementor pro which i recommend doing if you go to centralmedia.com elementor you can go and try out elementor pro and it does have a lot of great things that i mean granted it's not money you have to spend if you're on a budget in the beginning but if you have a business and you can afford it it is going to make things a lot easier and look a lot better and have more functionality where you can add things like you know a little animated headlines or or a media carousel like there's a lot of things that i think are really beneficial to using elementor pro but again for a lot of websites like you don't need it in the very beginning so fundamentally it's not required so let's say instead we want to have like an image on the left side so click and drag an image over here to the left side and then maybe on the right side we want to have like a little title a little paragraph and then a button below that so let's go and add a title on the right side a little heading below that we can add the text editor just a quick little paragraph and then below that we can add a button so i don't mean to move too fast here what we want to do is essentially click on the nine dots find what we want click it drag it until you see that thick blue bar and drop it right there now i don't want two headings obviously so if you right click on this you can actually go down and delete any item you want so that's how you can add some basic stuff like this and again if we want to add this image right here you can just click on the image it shows up with the little editor on the left side and we can choose image and we can choose any image we want obviously i'm going to just go with i mean honestly just the same picture again just so you guys get an idea of how i would go about doing this and we can add our heading our text and our button now i talked a little bit about headings already if you click and if you just highlight that or if you could do it over here as well you can change it to whatever you want i highly recommend that you don't change the font or the font size too much across your website you really want to keep in mind that the more fonts you have the slower it's going to be to load your website but if you really wanted to change your font the way you do that is actually going into style clicking on type typography click on a little pencil and you can choose whatever font you want so we have a lot of different fonts here if we want it to be like this one right here obviously doesn't mesh very well with the rest of our website i would recommend choosing one font for the whole site but if you really wanted something particular to have a different font that is how you do it similarly you can change the color of the text right now it shows no color because it's going to be the default color but if i click on this i can actually change it to any color i want maybe red for example and my text is now going to be that color so let's go back to content and let's just say read our blog our blog on how to surf then here we can have a little paragraph so we click on this we can change what this paragraph says so we can say we write blogs blogs every week and then below that we have a button now of course buttons are a functional item on a website which means that unlike just the static text we see everywhere else we can actually have this link to a specific thing which is not to say that text cannot link it can and if you click on it you highlight a certain segment so if i just say the word experience i want it to link to something i could click on the little chain icon right here and it will add a link and i can add this link to like google.com or amazon.com you can literally whatever you want to link to it like it's just a regular link and it'll take you to that website so you want to make sure the link's not broken it's an actual right link but you can do that right there now buttons like i said are a little bit more intuitive they're a little bit easier to use and i think they're more inviting to click on so for here i mean obviously it says click here so it's quite literally inviting you to click on it but i'm going to say here we can say read blog and so when you click on text that changes what it's going to show in the button the link here right now it shows a little hash and the reason for this is because you can either have uh no hash and that's going to just be whatever link you want it could be like amazon.com for example but if you have a hash there it uses something called anchors and i'll show you what anchors are in just a second so let's just say we want this to go to google.com whatever http https colon slash and so that's what it's going to link to right now but let's just say we wanted to add something called an anchor which means that if you click on this it'll scroll down to a specific part of this page or a different page on your website so i'm actually going to show you central media's website right now we do have anchors so if you go and click on for example if you go to website builders this part actually kind of needs to be redesigned we've been working on this recently but these right here are buttons that link to anchors so if we go to best ecommerce it'll scroll down to the best ecommerce section so you can see if this is really common for anybody that makes like a recipe on a website or anything like that it'll say like jump to recipe it skips the whole blog and it goes right to the recipe at the bottom and so buttons like that are really useful to go to sport like very long pages it goes to a very specific segment and so that's something that is very powerful and i highly recommend using them so let's talk about how do you actually use them well if we go back to the nine dots sure enough one of these down here is called an anchor so if we go down here you'll see anchor right there menu anchor and so if we scroll down and say i just want to say maybe right above this section right here we want an anchor to come down to this what we would do is actually go and click on anchor menu anchor and drag it to uh this is a two column so it's kind of weird we can just go to right there something like that and it shows that it's shifted down but it won't actually be shifted down when you visit the real website we're going to have to create a name or an id for this anchor so we're just going to call this anchor 0 1 and i'm going to copy the name of that and then later on if we want this button right here or let's say yeah let's say this button right here we want it to go down to that right there so we're going to paste this so a little hash anchor 0 1 and when somebody clicks on this it'll scroll down to that anchor so i'm going to click update and another thing i know i forgot to say this guys but very very important as you're editing your website always click update as frequently as possible or go and save it as a draft so that you don't lose your work if suddenly your power goes out or your internet goes out or something happens and you lose a lot of your work always make sure you're saving but another thing we want to see on the bottom because we have update right here i might as well mention some of the other things we have so i showed you the history button so if you want to undo something you can go and just go back to any of the things that you did so we like changed the button we did things like that you can go back and click on go to this point in history and it undoes all of this stuff right here so that's a great feature right there we also have responsive mode which shows you essentially what it's like to actually use your website i'm going to turn that back off and we have navigator we've got settings and we have preview changes now preview is going to not require you to publish your website but rather show you the website as if it were published and so if i click on learn more you can see right there it goes down to our anchor so again a great feature if you want to scroll down to a specific part of your page and of course this button right here i think goes to amazon as you can see or it goes to google actually is what that one was linked to i think the other one is amazon this might have been amazon okay so going back we're making a lot of progress here you can see that we have a website that's starting to be a little bit more laid out we have a nice looking home page right here or a nice looking uh first photo as you go down we talk about our blog here we have some really ugly text obviously i wouldn't use it as read in real life but as we go down you can see we have some other templates we have some other things down here and we need to change all of this but i'm not going to bore you guys with changing every individual thing the whole point of this is to be a tutorial and show you as much as possible so you know i'm not going to go and change every single photo on here because it does get kind of repetitive but you'll notice that there are some really cool things that i do want to point out here for example these photos it might be hard to see but it looks like there is a shadow going around them so if you wanted a photo that had a shadow or didn't have a shadow we can click on the photo right here and we can actually go into the style and so style first of all they do have a border as you can see here and that's why it's slightly rounded so let's just say we want this board to all accent a little more by going to 15 or you know let's make it 150. that way you can really see the borders are all the way around and you know every now and then it's i find it useful to make a a photo not have the same borders everywhere and so anytime you see all the numbers changing simultaneously if that's frustrating you can always just click on the little chain link icon on the right and that will unlink the values and you know realistically like the link is very convenient when you want like most times you want them to all change together but every now and then you want it to be so let's link it and let's just say we want it all to be like 50 is the radius but you know what maybe i want this bottom right corner to just be zero so we can make a little boxy edge or sorry those bottom left sometimes you want a photo to look a little bit like this it makes it just a little more stylish a little bit different kind of fun depending on the mood of of your website so that's one thing again i got a little distracted i was going to show you guys how to remove that little shadow right there but you can see right below the radius is actually the shadow so we can say if we want the shadow right there we can change like where it's positioned if it's moved over to the left or the right more if it's up and down a little more so depending on where you want the shadow to be you can also add a blur to the shadow which is really nice if you want it to be more of a subtle shadow looks a little more realistic or if you want to be like a hard shadow like this i would generally add like at least a really slight blur on that if it's going to be farther away and of course you can choose where the spread is like how big it is which would kind of symbolize how far away it actually is so you want to make it look realistic and so i think this looks pretty good but if you don't want it you can always just click on the back to default and it gets rid of the shadow altogether now i do want the shadow so i'm sure you guys can guess how i'm going to do this if we go down to the history button we can go back to the box shadow click on little re you know bring me back to this point in history and that's exactly what it does so going down the next thing we have right here is a pretty basic box again very similar to what we saw before on all the other ones but let's talk about what else we could add in this little blank spot right here right now it's doing absolutely nothing it's just a little space you can see this guy here but let's say instead maybe you wanted something else maybe you wanted a map in there maybe you wanted a form maybe you want literally anything else on here so let's go and say that we want to add you know maybe not here let's add it down here let's add another thing let's add a a progress bar and so maybe this is going to be like how far they're getting so far what their skills are it could be literally anything a great example would be if you are making a portfolio you would show like your you know your skill level in different things obviously everybody makes it like 90 to 95 on everything but you know if you want to show realistically like you know what your progress is on a project or keep your team updated whatever it might be there are obviously tons of uses for a progress bar click and drag that in you can change what it's what the title of it is so this could be progress to fundraising goal we can make this a percentage or you can make it a dynamic tag as well so it can actually be linked to specific things and it'll actually move based on different things right so a lot of websites will have something that it'll actually track how many likes you have on facebook or how many uh change how many views you have on youtube like whatever it might be there are different apis you can use in different plugins they can allow you to do different things with things like this uh and so it could be a little bit more dynamic but for the purposes of this because we don't have elementor pro we actually will instead just be statically defining this so let's say progress to our fundraising goal we're at like 75 right now and of course we don't want it to say web designer we want this to say dollars oh we want to say fundraising fundraised funds raised that's what i meant to say funds raised we're at 75 of our goal so that's just a cool little thing right there and of course like i said i made a full tutorial talking about how to use each of these individual things but you can see a lot of them are pretty self-explanatory as long as you understand where a lot of the features are so like i said with this one click on the pencil you've got content which is mostly going to be how it looks initially you've got style which is going to be a lot of color the spacing things like the radius things like that and then of course you have advanced which is going to be some more advanced spacing around there if you wanted to not appear on mobile versus desktop which by the way i haven't actually shown you that yet if you want this to not show up on mobile so say for example this just gets weirdly squashed on a phone you can hide it by going to responsive and hide it on mobile and this is the way you'd have something that only shows up on desktop or only shows up on a tablet and so a great way to see this if we go to responsive mode right here we can actually go and choose what device we want so if we want to see this on like a phone you can see that this is hashed out right now because it's not actually going to be there when you visit this on an actual phone but it shows you that it does exist and you know it's something that is hidden on mobile now if we turn this off you'll see it is there on mobile realistically this does not look bad on mobile so i'm not going to hide it but you know maybe some text or some images like this right here doesn't really look that great on mobile so maybe this entire section i can click on that go to advanced and i might just hide this entire section on mobile because it cropped that guy out anyway it doesn't really look that good we can hide it on mobile but it is still going to be there on desktop all right so i just realized my screen recorder was not showing you anything on the bottom so i'm going to show you guys right now across the bottom we can update right here so it's going to save any of the work you've done you can click on the little up icon and it shows you the save draft or save template we can also go to preview changes that's what's going to be the little eye icon right there which shows you like i said going to be the full website there we also have the responsive mode which is going to enable this little thing across the top and allow you to switch between different devices so to speak then we have the history button which is going to be that little circle right there we've got the navigator which is going to essentially show you the hierarchy of what you have so you've got the sections like i said we have all these different sections and you can look at each one and hide them or show them and with each one they show you everything within there so in case you're ever wondering in this template how is it really laid out well you can look at this and say all right well so this section right here has an intersection it has a column it has an image an image box and a button in that column and then the other column is looking like this and so that's a good way to better understand what is going on there so i can close out of that i can close out of the responsive mode and the last thing is going to be settings for elementor or just general settings for the home home page right here and these are the things that i showed you before that you can find from the regular non-elementor edit page which is going to be the featured image the status of it and of course the title of this page now once we're done with this page like i you know obviously right now i'm not done but you get the general idea of how we'd go about adding things and and changing the way they look i showed you a lot of that we can click on the little hamburger icon on the top left and go back to exit to dashboard and so this is going to take you to right here where we left off and if we click on the word wordpress icon it takes you back to your actual dashboard right here now we have a general idea of of setting up one page other pages like i said you can edit them and really change them around you can change the title of them quick edit is a great way to change the title the date it was published the slug and the slug is going to be essentially how you access that so right now centralsurfing.com this slug which is contact would take you to the contact page and so if you want instead to be something like you want this to be let's just say contact us or reserve reserve you can change the slug to reserve and once you update this then going to central surfing.com reserve would take you to this page here now pages are obviously really important for a lot of websites it's going to mean a lot but one of the big benefits of using wordpress in the first place is that you're actually able to do a lot with blogging you can have a massive library of blog posts you can have all the different blogs organized in a very efficient way very accessible throughout your website and so setting a blog post is going to be for most people a great way to start ranking higher on google so if we click on post you can see that right now it has one quick little post right here but i'm going to close out of that but if we want to add a new post we can click on add new it's going to ask us to name the post or add a title and before you start doing anything right here what i would recommend is actually going up to edit with elementor because once again we can actually edit a lot of the blogs we have with the very similar tools to make our blog posts look very nice and consistent with the rest of our pages but even better than that we have some little starter templates right here with elementor so if we look at them if we go to starter templates so you can see we have three different options here we have the pages which is going to be a full page and keep in mind these are mostly tailored to being a page and not a post so i usually don't use these starter templates we can also go to patterns and these are a little bit more fundamental or wireframes even more fundamental yet but what i i mean like i said i'm not usually one to use that i make my own templates with elementor pro and i'll talk about that in a little bit you know a little bit later on this video usually what i would recommend doing is just going to elementor edit with elementor and this is going to give you a blank little canvas like this where you can make everything and if you wanted you can add some nice things in here that if you go to again the little templates you can add some different little blocks that that will still save you time by adding one block at a time like that rather than having to add all three columns with the photo and the title and the text you can just add individual blocks and you know something like this it might be easy to add that and nice to add that at the top of a blog so i'm going to import the block but you don't have to do that you could easily just make this entirely from scratch and without going through all of elementor again i want to show you some really important things that are specific to blog posts not everything's going to be on pages and posts and so if you go right here you can see going down a lot of it looks the same but there are some attributes that are going to make a lot more sense adding to a blog post so for example if we go down and expand the one titled site all the way down to the bottom site right there it's going to allow you things like author and post navigation so you can go like the next post for example a table of contents would make a lot of sense like there's a lot of things that would just be really nice to add to a blog post that don't make nearly as much sense adding to something like a regular about me page and so that's why looking down here i just wanted to point these out these are all locked right now because these are i think you need pro for them you need to get pro elementor pro in order to use them and so once again once you start building your website out once you start adding more blog posts and things like that like i think it's nice to get elementor pro they save you a lot of time with some really cool features but being able to start out for free with elementor i think is also just as nice really to get the ball rolling with things so i'm going to go back and exit to dashboard that's a general idea of how you'd make a post again i'm not going to dive into that too much because for the most part it's going to be very very similar tools to what we just showed you with how to actually make a regular page so other than that let's continue on with some of the other important things on the left side i gave you an overview of it before but now that you have an idea of what the website's all about how to edit the website these things are going to make a little more sense and be a little bit more usable to you so of course if we go to media this is where you'll find all of your photos your videos and things like that and so if you want to go and remove say all the stock footage that we don't need right now we can go in here and do that all from right here or if you want to go and edit a photo for some reason you just want it to be cropped a little different you want to replace something about it or add some alt text to that you can change all the metadata just from changing this right here additionally pages like i said we already know all about that comments we talked about that but let's talk a little bit more about other plugins that we might want on here so if you go down and click on plugins i'm going to dismiss the jetpack thing right now you can see that originally we had a lot of plugins we got rid of all of them except for jetpack and now we have a couple as well so we have wp forms that's one that came back because we installed that template the starter templates and elementor obviously we installed those in the video but there are some other plugins that i think are especially useful and i want to point these out in fact i actually made a full video on my top 10 plugins that i recommend for wordpress so i'll show you a couple right now but if you want to see that full video that will be linked down below but something that i highly recommend would be something like word fence word fence is one that can give you things like two-factor authentication to sign into your wordpress website it can also be a firewall and prevent other people from hacking into this it's just one of the great ways to start to really secure your actual website so a lot of people just think like yeah i got a website i'm ready to go they don't realize how many people out there if you have any meaningful traffic would be really interested in stealing your website either for holding it for ransom or just because they can then get the traffic that you're sending to that website and there's ways to get around it you can fight it and it's really annoying it's a lot easier to just get a really good firewall and again this is one that's free to use or you can pay some extra money and get some more advanced features on there that's a really common thing across all of wordpress the freemium model where it's great things are free but if you want to get really advanced with them you are going to have to pay for them so let's go and activate word fence that's a really big one another really big one if you plan on selling anything on your website if you want to have an online store or just a quick little retail thing a merge thing whatever it might be then you want to actually get the next one now let me just set up wordfence right here i'm going to add my email okay so the next one i want to show you is actually called woocommerce so w-o-o commerce as you can see right there woocommerce is a really really popular one probably the biggest one i would argue for doing any type of selling on or any type of e-commerce on wordpress so we can go and install this right now and again i have a full tutorial on how to use woocommerce that's way more than i want to show you in this video but i just want to show you that this is a big plugin that i highly recommend even if you think there's a chance that you might sell something further on down the road it might be nice to add it in and kind of have it integrated early on so that you get used to you know how it works and where things are now those are some plugins and that's essentially how you would get the plugins actually let's enable auto updates every now and then they add little recommendations something like your security i think would make sense to automatically update otherwise you have to manually check all the time so with that being said that's how you get new plugins you could also upload a plugin if you already have a plugin that you somehow downloaded an example of this would be like divi is another way it's kind of an alternative to elementor if you want to use divi you can download that and upload that as a theme so not everything has to come from the little wordpress app store so to speak now other than that if we go down to users uh let's let's actually wait a second here all right so we activated woocommerce but i want to talk a little bit more about some other things on the left side let's go down to users and this is a big one if you start to have a larger team you have different roles you can have on wordpress and these roles include things like an admin but you want to be careful who you give admin access to because they could do anything to your website essentially you want to make sure that whoever it is is actually responsible enough to be an administrator and you really trust them and don't have to worry about that but if you have some if you just hire somebody to write for you uh you can make them an author or an editor really the difference there is going to be if they can upload media like photos um additionally you can make somebody like a moderator and you have a lot of different roles right here you have subscribers you've got authors editors at admins like i said a shop manager now that we have woocommerce shop manager makes sense and so when you add different people you really want to keep in mind what role you're going to give them and like i said i'll put a link in the description below that can really outline what the different roles are i'm not just going to explain all of them right here but but a lot of them are pretty self-explanatory and then below that we have tools not a whole lot there i want to talk about and then we have settings which i did touch on that a little bit earlier in the video but i think it's really important right now to go through here and make sure that everything is exactly as we want because a lot of your optimization for search engines is going to come from making sure the settings are set up right in the very beginning it's very fundamental here so we've got things like of course the the language the new default user role things like that the date format is going to be very important we start the week on monday but of course that doesn't you could change whatever you want with that you can go down to reading and this is going to say like when you show blog pages that show like 10 posts at once or something like that we've got discussion which is going to have a lot of different settings that are going to be about people that add comments and this is a good way that you can kind of block some comments but of course a lot of the comment bots are are smarter and they and they change the way it is like the link is their name or something weird like that so so i don't really i don't really mess with that much that's why we usually have something that can block a lot of those that can filter that out the anti-spam stuff and of course we've got media settings here which again can really help to increase your load speed and things like that but there are better ways of doing all of this so while it is important to go through and check on all of these and make sure the privacy and all the settings are correct you can actually go into like i said that video about the top 10 wordpress plugins will show you two things that i just mentioned right there one of them is search engine optimization or seo and one of the best plugins i recommend for that i'll just tell you right now it is yoast seo and that's going to kind of walk you through a lot of the seo tools you have in uh or like it does a lot essentially for different posts and pages and it makes it all embedded very easily so you can go in there and see what's ranking well what's not ranking well what you can improve on and so yoast seo is a huge one again another free one that i highly highly recommend and then of course the other one that i just mentioned right there was uh related to the size of photos and this would actually be the smosh app but we do have jetpack on here i believe which can do a lot of what smush does as well and so going into jetpack because it came with this i want to talk about this a little bit we have some options for how to actually you know do a lot of stuff on here we've got security we've got anti-spam stuff like i said uh we've got backup like you can connect a lot of things with jetpack and it really makes it uh like kind of a little hub here for how you can manage a lot of your wordpress stuff so it's great and you can obviously activate this to like here's an example right here if we go and enable that it is going to kind of smush a lot of our our photos so that they have a much faster load speed and a great a great tool that i recommend is actually if you go to pagespeed.web.dev uh it's actually like google i think owns this and you can type in whatever the website is so right now we could say centralsurfing.com and because we didn't optimize everything yet you're going to analyze it and it's probably going to tell us that our load speed on mobile and desktop are relatively low and for reference you probably want something ideally over 90 and it's on a scale of 1 to 100 for how fast the load speed is but you really want to make sure that you're not somewhere in like the 50s or the 40s like you really want to make sure that that it's as fast as possible so right now 65 on mobile is not really that great that's because we have a lot of photos on there and a lot of unoptimized stuff desktop is a little bit faster you can see 96 make sense for desktop browsers they're a little bit easier to manage that kind of stuff and so that's great we're already set with that and like i said jetpack just that simple little switch really helps a lot if we turn that off i think you'll see that the number would drop pretty substantially so that's a lot of what i wanted to show you in this video like i said there's a lot of things that you kind of just click around and start getting used to them and you can start learning a lot more about how to build your website as you go but hopefully this gave you the fundamentals everything you need to know to get started and get that template and get your website up and running so that within the next hour or two you can have a website that looks surprisingly good even though you've never made a website before and so if you appreciated this video like i said it would really mean a lot if you could go down and click the like button and if you watch this farm you might as well subscribe as well if you're interested we make a lot of other videos just like this the top trend wordpress plugins uh different things like that how to use yoast how to use uh woocommerce like a lot of different videos that are very related to this kind of stuff so if you want to see those definitely go down and click that subscribe button as well so that's it good luck with your website i hope you found this helpful i'm mike o'brien from central media thanks for watching and we'll see you next time

Channel: Santrel Media

Views: 20,729

Keywords: nate o'brien, mike o'brien, santrel media

Id: VmKZAJC_I1A

Length: 61min 21sec (3681 seconds)

Published: Tue Nov 30 2021