How To Make a Website With WordPress (Beginners Tutorial)

hi i'm beau with freecodecamp.org by the end of this course you will know how to make all of these different websites and how to customize them we'll be doing this all in wordpress and i'm going to teach you every step you need to know this course is perfect for beginners first i'll show you how to do the initial setup this includes getting a domain name hosting and installing wordpress a domain name is what people type into a web browser to get to your website some examples are youtube.com freecodecamp.org or wordpress.org hosting is where the files or data for your website are stored when someone goes to your website the files that make up your website have to be accessed from another computer somewhere else in the world the company that has the computer with your website files on it is called a hosting provider so what is wordpress wordpress is a content management system it helps you manage your content basically it helps you create a website even if you know nothing about coding you don't need to know html css or javascript you can do everything graphically with wordpress wordpress is by far the most popular way to make a website it is used by forty percent of all websites and best of all wordpress is free to use after we get the wordpress software installed i'll show you how to set up the installation and customize it for your purposes maybe you want to make the website into a blog or an e-commerce site or a website for a local business i'll show you how you can easily customize it for whatever your use case is then i'll show you how to update the design i'll show you how you can make your website have the exact look that you want it to have i'll show you how to get your own images into the page and use the colors that you want right now i'm going to show you how to get your domain and your hosting this is the part that you will have to pay some money for but it is pretty cheap the name usually costs between 10 and 20 dollars per year and hosting often costs around five dollars per month but i'll show you how you can save some money on this we'll actually get the domain and hosting at the same place hostinger provided free codecamp a grant to make this course possible and we'll use hostinger to get the domain and hosting they're one of the cheapest hosting providers and they have good service i've actually used them in the past for my personal websites before we got this grant and they make it super simple to set up a wordpress website just so you know everything i teach in this course will work with other hosting providers as well so you don't have to go with hostinger but some things about hostinger is that they offer a free domain ssl and 99 uptime guarantee so we'll go to hostinger.com we have a link in the description that's going to give you a better deal than what you would normally get so click go for it we'll go down here and we have we have the single shared hosting and the premium shared hosting now if you're just go if you're just starting out you're a beginner you may just want to go with the single shared hosting the cheapest one the main thing to look at is really really the main thing is that this one comes with a free domain and this one does not come with a free domain but it's just an 8.99 value so if you get this version you can just get the domain separately for 8.99 or possibly a little more depending on what your your uh whether it's me a dot com or a.net or what the the end of the domain is different types of domains cost different amounts but they're generally around 8.99 so you may just want to go with this one that's 99 cents a month and then just pay for the domain separately instead of doing this one that's 219 a month but you can see that this is just the promotional rate anyways it's going to be 4.99 a month when you renew or 2.99 per month when you renew so you just you really want to kind of look at what the real rate is and not just a promotional rate so if we select this one right here and then you're gonna actually have to choose whether you want to go with the one month pay by month or pay by 12 months 24 months or 48 months you can see that the 99 the 99 price is only for 48 months personally i think the 12 months is the most reasonable especially when you're just starting out you don't want to commit to 48 months unless you're sure you're gonna want to use this for actually that long so i'll just go to the 12 month plan and then you can just choose how you want to pay for it and then enter all your information now i already have an account so i'm not going to enter all my information right here i'm just going to log into my account where i already have everything set up so once you get signed up and you've paid and you're logged in you'll be taken to this dashboard and if you got the plan that includes a free domain you can claim your free domain or you can just get your domain during the setup process including purchasing one if your plan does not come with a free domain this is what we are going to do so i'll click setup under premium shared hosting okay welcome to hosinger quincy my name is actually beau but quincy larson is also with free codecamp and this account is actually in his name so i'll click start now okay here we get to choose what type of category you're in either you're claiming a free domain because you have the right type of hosting or account to get that you're going to buy a domain because maybe you sign up for the account that doesn't include a free domain but you still need one or you're going to use an existing domain first i'll show you how to claim a domain the process is similar if you're going to buy a domain afterwards i will show you how to use an existing domain so i'm going to try robotoysreview.com okay that's available you may have to try a few times to get a domain name that's available because a lot of domain names already taken but let me hit continue here and then i am going to skip i will start from scratch and i can choose my website location let's do north america because that's where i am at finish setup okay my website is ready now i'm going to go to the control panel i'm going to manage manage the site and if you somehow get out of it and you're at this main site you can always go to hosting and then you can go to manage for your manage your website here before i show you how to manage your domain and setup wordpress let me show you how you can use a domain purchased elsewhere it's easiest to get your domain your hosting from the same company however it's not required you can get your domain from one company and host your website with a different company so let me show you how you would host a website on hostinger if you got your domain from a different company now you can just skip this section if you're just going the easy route you're just getting everything from hostinger but if for some reason you do get a domain from somewhere else i'll show you how you can set it up so host so you're hosting it at hostinger so in this example i got a domain called robotfamilyreviews.com from google domains no matter where you get your domain there's going to be somewhere in the dashboard where you can update the name servers it could be under something called dns it could just be under something called name servers so we're gonna have to update that in order to make sure that we're hosting this name with hostinger so i'm going to go to use custom name servers and it could look a little different depending on what company you bought the name server what company bought the domain name from but it's going to be pretty similar to this so i'm going to put ns1.dnsparking.com this name server this website here is specific to hostinger so this is something owned by hostinger and this it's how you connect your domain to hostinger so i'm actually going to copy this i'll click save and i'm going to oh i have to add another one so i'm going to press plus and then i'm going to do ns2 so these are the website ns1.dns-parking.comns2.dnsparking.com so these if i save this now it says it could take effect within the next 48 hours so it could take a but it may be this day and maybe in the next hour or two so it's going to take a little while for it to be connected correctly but now we've done everything from our domain to get this connected to hostinger a little later i'll show you one extra thing you have to do on hosting her to make sure it's connected to this domain okay now we're completely logged into our hosting account it's associated with our website and now we have to install wordpress and just in case you want to use a different domain name let me show you how you would do that now you probably won't want to do that you'll probably want to just use the domain name that you got with hostinger but if you do get another domain name and you want to make sure it works with the files that you're hosting on hostinger i'll show you what you can do you can scroll down here and we'll go to add website and i'm just going to add another website that that i purchased elsewhere so you can actually have a website that's from elsewhere that from a different company go to the hostinger hosting so i'm gonna do robot familyreviews.com and make sure it's spelled right and then we'll do a password [Music] and then add the website so that's one cool thing about hostingers if depending on what plan you have if you have the right plan you can host multiple websites on one account so you only have to pay for hosting one time and then you can host a bunch of websites on there so then this drop down menu would point to which up what's website you're going to update so i'm going to robot family reviews and so since i set the dns settings to hostinger i'm at robotfamilyreviews.com and this is just the default page that hosting or show is before you set that up so let's go back and set up the page so it doesn't matter if you got your domain name right through hostinger or if you got somewhere else and then pointed it at hostinger we are going to set up wordpress right now so in order to set up wordpress i'm going to scroll down here and then i'm going to go to auto installer this is going to let me auto install wordpress on the website okay you're probably not going to see anything right here because you probably don't have wordpress already installed but if you've already installed wordpress on any of your domains will show up here but this is how you installed wordpress for the first time on one of your domains probably just one domain so we have we can click that we want to install we want to select that we want to install wordpress there are also a few other things that we can install like if you were going to have an ecommerce site you may want woocommerce as well but we're just going to install wordpress okay and you'll probably just want to keep the default for all of this but since this account was actually registered to quincy and my name is bo i'm going to update this to bo but again you'll probably just keep the default and everything else we can keep the default i'll put in a password here [Music] and then the website title it's going to be called robot family reviews okay and i'll just click install okay it's finished installing so i'm going to go to my website again and i'm going to refresh and here it is robot family reviews we have our wordpress installed go here you can see the url up here robot family reviews and it says hello world welcome to wordpress i'm going to zoom in a little bit so you can see that better this is just the default page that wordpress creates so we're going to do a lot of customizing to this but we can see that we have it successfully installed okay so let me show you how we're gonna get into our wordpress dashboard to start editing it you we don't even have to go back to the hostinger website right from this website we're gonna go into the url bar and i'm going to put slash wp admin so on most wordpress websites the url slash wp-admin is where you go to administer and be the administrator for the website or to configure the website so let me press enter here and now we have to log in we'll log in with the information we use when we created when we installed wordpress so for my username i'll put bo and the password will be the password i selected before click login we are in our wordpress dashboard so here is where we can start customizing our website we finished setting up the website and hosting we got the domain name we got wordpress on installed on the hosting provider we logged into the dashboard now we're going to start setting up and customizing the wordpress options so what we're going to go do first is go to the plugins here and see what installed plug-ins we have so you can see there are quite a few things already installed and the truth is we're just going to start from scratch a lot of these uh default plugins aren't really that necessary because they may not really specifically apply to what we're going to try to do so i'm going to select all the plugins here i am going to delete all of them and i'm sure i wanted to delete them and some i may have to oh some of them i'm going to deactivate first so i'm going to deactivate and apply and now i will delete all of them don't worry because all these can be reinstalled if you need them we're just going to start from scratch and show everything that we want to install all the plug-ins they're going to work for the page that we're creating here so let's go back to the dashboard and so here's our main dashboard so this dashboard is the back end of the website it's where you control all the options it's where you go to edit your website and you can see whenever you want to see your website let me just show the different tabs up here if i click robot family reviews it's going to go right to the main website where i can click back also if i click here and click visit site it's going to go to the site so first i want to show you before we get into all the customizing i want to show you how you would make sure you have the most updated version of what of wordpress so if you click updates here right on the dashboard we can see that there are nothing there's nothing to update if there's anything to update it would say something like update or there'll be a button around here but we have the latest version so we don't have to do anything as far as updating but something you can keep an eye on over time you you probably want to get the latest version just in case there's any security updates that could be important to keeping your website secure okay now let's look at how we can add a user or change the password of the user so if i go to users here we have currently one user and it's bo and if i was gonna to change the password i'll just click here go to edit and then there's all these things i can change here including setting a new password but i like my password so we're not going to do that this is also where you can add a new user if i click add new you can have multiple users that can log in to the administrator portion of your wordpress page and each user could have different roles so maybe one person can only add new blog posts where another person can actually redesign the whole website depending on what what what abilities you want to give to each user okay next we're going to set up what the urls of our pages and posts will look like so i'll go to settings here and then i'm going to go to where it says permalinks okay so the default is that it's going to have your root url and it's going to be slash index.psp and then we don't want to have all this extra thing so what i'm going to do is just change it to post name so the url is just going to be a url of something on our website it's just going to be our root url and then just sample dash post or this would be just the post name so we i don't i mean if you want you can include the dates in here if you want to include the day and name or the month and name or number but we're just going to have the name of the post after the the root url but it's really up to you how you want to do that so i'll just go to save changes and we're done with that next we'll update the theme the theme is the overall look and feel of a website certain themes will make it easier to update different parts of the website so let me go to appearance and themes so by default there's just these three themes and we're on this one right now but there's hundreds or thousands of wordpress themes you can install and we're gonna do that right now we're gonna install just one of the one new one so i'm gonna click on add new theme and like i said each theme is going to make it easier to update different parts of the website so there's tons of different options here but what we're going to do is install one that's very popular and also allows a lot of customization this is called ocean wp so i'm going to search for oceanwp if i click on here details and preview we can see that this has five stars it has 4559 ratings and this one has is one of the more popular wordpress themes and one of the reasons why is because it's so customizable it also can work with woocommerce just in case you want an e-commerce store but to install this theme i'm just going to go to install up here and this is going to give us a lot of options no matter what type of website we're trying to create it's one of the more popular free wordpress themes it's especially good for beginners it includes high quality pre-made designs and it's very easy to customize okay it's installed and now i'm going to click activate okay and you can see right here new theme activated visit site so let's visit site and this is what let me refresh here okay so this is now what our website looks like with our new theme it still doesn't it still doesn't look very nice because we're still going going to be doing a lot more updating to customizing exactly how we want but this theme is going to make customizing even easier and you can see now you can see this bar at the top this bar is going to appear anytime you're logged in to wordpress and you're on your website and it's going to make it easier to customize individual pages if i just click customize here i could start start editing this page directly we're not going to do that right now but we will do that a little later i'm going to go back to the dashboard so i'm going to click right here and now we're gonna add some plugins that we need so i'm gonna go to plugins so a theme determines the look and feel of your website plugins add new features and functionalities for instance with a plugin you can add a contact form to your website also you could block spam comments implement a shopping cart there's just tons of different things that plugins can help you add to your website depending on what theme there may be some recommended plugins and one of them is ocean extra for this one so let's just begin installing this plug-in and then i'll click install okay now after we get ocean extra installed there's just one more plug-in we're going to install go to add new and this next one is called elementor and you can see this has 5 million active installations it's one of the most popular wordpress plugins and it makes it very easy to design professional looking web pages without coding it gives a drag and drop page builder you can see pixel perfect design mobile responsive editing it makes it just a lot easier especially for beginners to design a website so i'm going to install this one okay let's go to the list of all of our plugins again i'm going to select them all and then i'm going to activate apply so we're going to activate both plugins that we installed so here's this welcome screen we're going to just skip this we don't need to go through this getting started right now and let's go back to the plugins again just to make sure it worked the elementor is activated but we need to make sure ocean extra is also activated you know i think this plugin got installed wrong so that could happen if that happens no it's not a problem we'll just delete this and then we're going to reinstall it so let me just refresh this page and begin installing this program again this plug-in i mean i think the problem is i went off the page while i was installing it before so that could happen to you too not a problem you just delete it and then reinstall it okay it's all installed it could take a little while you just have to kind of wait till it finishes so i'll go to return to dashboard and with oceanwt it has a setup wizard so let's do run the setup wizard and it's going to show you the different things that you can do so to get started so the first thing to do is select the demo template so this is something that's pretty great about oceanwp is that it has all these demos included with it and a lot of them are free now the way they make money is that some of them you do have to pay for but these ones that are included here these are ones are all free that we can see right here so we can choose which demo looks most similar to what we want if you're gonna do an e-commerce you can do store we have personal simple you can even do a preview so i could do a live preview of this and then see and if i like this preview i can import it you can see there's different uh blog tips so we're gonna go to with something more simple here i'm just gonna go back here okay and i kind of like the this lawyer one now you can create you can choose any one you want and all the things i'm about to teach you are going to apply no matter which of these demo templates that you choose and i'm not making a page about a lawyer but i just like some of these things that are in the lawyer page i kind of like how it's set up and like i said we're going to be able to change every single one of the we're going to be able to customize this so you don't have to be making a website about whatever the like the name of this demo is we can choose lawyer even though we're not making a website about a lawyer so i'll just select this one and i'll go to the bottom and install demo and depending on which demo you install there's going to be specific plugins that are necessary just for that demo so let's click install now install now now when it says get this add-on that means we are going to actually have to pay extra for it but the good thing is it's optional we don't need to get this add-on it's just an optional thing that you can get and so we're just not even going to get those add-ons and we're going to see how we can still customize and make the website exactly how we want even without getting those add-ons so i will now click import and here is where we we can customize it right from the screen if we wanted we can upload a new logo we can set the title the tagline and the thing is we can actually change all this stuff later so i'm going to skip this step because i want to show you how we can change all this stuff right from within wordpress so i'm going to skip this step and you know we don't need any of this stuff so i'll just click view the website okay so now i'm going to click visit website and so here is our updated website you can see it's all about being a lawyer now but we can change all of that and we are going to do that so i'm going to close this okay we're back at the dashboard let me dismiss this um we can also if we want to we can activate this but i don't want to so i'm going to skip it and going to this theme panel button here if somehow you messed up when you were installing your demo or it didn't install right or you went off the screen you could go and click on this theme panel and this is where you would install the demo you could run the setup wizard which we already ran we could run that again but we're not going to run that again we already ran it okay we got our theme and our demo installed let's just see what it looks like i can go up here click visit site and so this is our lawyer theme like obviously like i said we're not lawyers but the next step i'm going to show you is how to use this as the base of our website and just go through and start customizing things and how to customize the text how to customize the image how to customize layouts to go along with what our site is actually supposed to be about so i'm going to go back over to the dashboard we decided we're not going to activate the social sharing buttons so let me show you how to remove this message it just got installed with everything else so i can click here and go just to i can just deactivate it's a temporary dfx deactivation because who knows maybe we'll want it in the future okay i'm going to go back over here and that gives gets that out of the way now we're going to install just one more plug-in before we start customizing everything so i'm going to go back to the plug-ins screen again i guess it could have stayed on there and the plugin is going to help us back up our wordpress site it's good to have everything backed up just in case you make a mistake or something goes wrong you want to have a backup of your website so you can use it later and also let's just get rid of this too because this is a paid extension which we don't really need so i'll just get rid of that it's basically just an ad that shows up so i'm going to go to add new and this time we're going to install a plug-in that will help us back up our wordpress installation and this one is going to be called all and so we get all in one wp migration and this is going to allow us to back up our site and you can see it's very popular three three million installations and we're just getting that installed okay that's installed i'm going to activate that okay now let me show you how that this would work you click on all in one wp migration and we can export there's two ways to do the backup one we can export our entire site to store on our computer so if we just do export to file okay now just click download you can close that and then you can always just import it if you want to another way is to go to the backups tab here so the cool thing about this extension is it will also automatically save backups right to your wordpress server so you don't actually even need to download anything it's good to export the site every once in a while so you have a back uh like a master backup but you can also create a backup right onto the wordpress server and it'll just be saved right onto your server and then whenever you want you can either download it or you can restore right from here so that's another way to do backups and now we're going to start customizing the website so we could go right through these links here to customize another way you could customize is going to the theme panel and then at the very bottom there's all these things about uploading your logo adding the favicon choosing your primary color choosing your typography so you could update it through that way but i'm going to show you a different way to update it the way the reason why this other update way to update is good because it works across all themes even if you don't even install a custom theme you can still update your website this way so i'm going to go to the dashboard actually i'm going to go right to the site here and click visit site and once you're on the site you can go to any page in your site and you can just click customize so now we're customizing anything and we can click on any of these sections here to customize different things so first we're going to customize the general look of everything so i'm going to go to site identity and we already know the title is robot family reviews which you could change if you wanted but for the tagline and this could show up in search bars or i mean in search engines so it's good to have something that really relates to your your website here so i'm going to say reviews of robot toys and then i'll go back now i'm going to make a lot of changes and then i'm going to click publish to publish all of them at once so or i can actually just publish it right now and then you can kind of we'll see how it goes the changes as we go so now i'm going to change the logo we got the logo here i'll just click this logo and you can also go a different way to do it you can click header and then we can click logo to update the logo and i'm going to remove this logo we are going to create well you can see removing the logo automatically just puts text here instead of logo so i'm going to create an all new logo to use on this website so there's a cool website you can use to create a logo for free okay i'm at logomaker.com and we're going to create our logo so i'm going to do a search and remember this is all about robots so you can search for anything but i'm going to search for the word robot [Music] and try to see which thing i want to use for my logo uh a lot of these look kind of cool i kind of like the simplicity of this one so i'm going to use this as my logo and then i'm going to put some text here too and it's just going to be called robot reviews and so i will make this a little bigger i can move this around and i had zoomed in a little bit but i will zoom out okay so i'll click this text and this is where you can change the font so let's see which one looks the most like a robot well i kind of like this one i guess it's not like a robot but we're gonna change the colors of everything too i can select both of these and now i can make this color go to any type of color i want i'm going to do this blue color kind of like this and i'm going to make this text a little bigger so it's closer to the size of of this image and then i'll make the image a little smaller okay robot reviews so now i'm going going to click the save button i don't need the high resolution i'm just going to say no thanks download the low resolution and the great thing about this website is it's one of the few websites where you don't have to create an account in order to create a free logo so we got that now i just want one with just this robot thing so i'm going to click the text i'm going to delete the text now i'm going to save that and i'll download the low resolution file okay let's go back to our wordpress site and now i'm going to select the logo okay i'm just going to drag this over from off screen so then i'm going to call it robot reviews logo and i'll put that as the alt text also and then click select and then i'm gonna make sure the whole thing is selected up here and crop image or you can just do skip cropping okay now if i hit publish it should show up on here and then i'm also going to have to refresh the page okay if you add the logo and it doesn't show up correctly it could be because if you're on a retina display it still has the other default logo stored as the retina logo so you may have to go in here you may have to select an image and if you just choose an image and it could get really small but then if you just remove then it will default to the normal logo whether you have the retina display or not so that's something i ran into since i do have a retina display that i'm recording this on you may just have to select any logo and then remove it and then it will just default back to the normal logo okay so we have the logo updated so now let's see how we can update the general colors used on our website you can see how it uses this gold color there's a line right here there's a gold color there's a line right here so let's see how we can update what colors are used on the website i go back here okay i'm gonna go to general options i'm going to general styling and now we can select what our primary and hover colors are and the border color we can update all these different colors so i want to figure out what color this robot reviews logo is so let me go back over to my logo website and i can actually just copy this hex color right here i can see this number right here with letters this is the the color so i'm going to just copy that and i'll go back over to wordpress and now i'm gonna put that as the primary color so i can go around and select any color like this or i can just paste in a hex code and then we're done with that and then for my hover my hover primary color i'm just going to choose something that's a little darker maybe a little purplish here and now i'm going to click publish and then i'll refresh and you can see a few things change colors so we have these down here that change colors this little line but we have to change we have to update the color in a few more places i'll show you that later but now let's add the favicon so we update the logo we updated some colors and we'll be doing more colors later and now let's update the favicon which is what appears in a tab or in the u in the bar in your browser like in the tab right next to the site name that little picture so we're going to go to site identity and then select a site icon so i'm just going to upload a file here and then i'm going to upload this so i'll put favicon and then i'll just select that and it shows a preview of what it's going to look like looks pretty good okay i'll crop the image now there's a bunch more things we can customize you can see there's all these things we can customize and we're gonna come back to a few of these later if you want you can play around yourself and just try changing things you can always go back if you make try something one way you can always go back to the other way you can kind of experiment with what your website you with what you want your website to look like but i'm going to show you another way to be editing the website and that's what we're going to use to edit some of these colors and some other things so we're going to do something to edit the actual content of the website so this is mainly editing what things look like like the logo some colors fonts font size but we're going to edit actually the text and then other things on the website so let me click publish to make sure everything's published here hit x here okay now we're going to go through and find out how to edit each section of this website we are going to find out how to change the words change more colors change the layout add images add links and it's all possibly simpler than you would expect so you'll notice that we no longer have the top bar in here it's because i actually restarted my browser and it got logged out so whenever you don't see the top bar that means you're logged out of wordpress and you need to get logged back in before you can start editing so let's do that again so if you remember you just go to the main url and do wp slash admin and then you go to that page you can log in with the information you you set up when you first installed wordpress [Music] okay now i can go back to the site by going to visit site and then anytime you see this top bar you on each page you can either click edit page or edit with elementor now edit page is the default way of editing it's called gutenberg and it's pretty good but there's elementor just makes it more user friendly there's a lot it's more graphical you can drag things around and it kind of gives you a little more it makes a little some things a little easier to do so we're going to go to edit with elementor okay so here's elementor we have our page on this side but we have this new menu over here which are elements we can add to the page so we can actually bring in elements just like i can click an element like image and i can bring it right here and it will put an image here now it's currently blank or a placeholder image but i'll show you how to actually make into your own image in a second here but you can also click on any of these spots and edit the sections now see i have to actually scroll back and forth that's just because i'm kind of zoomed in here so you can see the elements on the page a little better on your computer it may actually just show up everything at once you may not have to scroll back and forth here so here you can actually just edit the text so i can say read amazing robot reviews okay over here we can change settings like i can center the text i can write a line i can go to style i can change the text color if i wanted see i can make it any color i'm just going to keep it as white but i can even change the blend mode so maybe if i do lighten see how this look what this looks so if i go to overlay you can kind of see it now you can see through it just slightly i can turn on a text shadow if i want so i could so i could make this darker so you can do all sorts of things now this text is not going to let me change the size here because there's some text where where it's like key pieces of content the styling is actually in a different spot but if i go down here i should be able to change the size so if i go over here now this is just basically default text um placeholder text i'm going to keep the placeholder text i'm not going to go through and add updated text for every section but if you're creating your own website obviously every piece of placeholder text you're going to want to update to the content that you actually want but you can change things like if i select that i can make that bold and you can see it changes the bold over here see i can scroll down here and there's more settings i can change so i could change the columns so now there's 10 columns of text but we'll just go to default because we really just want a single column there and so you can just go through and and change all these things so we also have the style here so let's see if we can change the style so we can change the text color the typography if i choose typography i can actually change the size of the text so here i can basically make it as large or small as i want but i'm just going to delete if you just delete the number together it'll just go to to kind of the default size i already was but if you want a different size that's where you would change in here so there's just a bunch of different settings you can change to get the style exactly right for for what you're looking for and there's even some advanced settings so if you change the margin that's going to change the how much space is is above the text or below the text so if i change this if i make it so that values aren't linked together and make this go up you can see how there's it's getting more space on the right of the text i can bring that back to zero and if i do bottom i can put like 70 here you can see it's putting more space on the bottom of the text but i'm just going to keep this at zero and there's all these things different things you can change like you can even add motion effects so this would actually add an animation to the text so if i do fade in you can see it gives an example of it fading in or you can make it moving going from the left right there so there's a lot of different cool things you can do to make it just unique and specific to what you're trying to do for your website and so let's say i want to change this here so contact our attorneys so if i click here you can see this is where it's linking to anytime you see this pound sign or this hashtag here that just means it's a placeholder link there it's not actually linking to anything but really we want it so there's two things we can make this link to we could either link this to an email address but we're going to link it to our contact page so our contact page i can actually go here right click and go to copy link address and if i paste this in here we can see it's robotfamilyreviews.comcontact so now when someone clicks here we'll go to the contact page but let's also change what the text looks like so instead of contact our attorneys i'm going to make it contact our reviewers [Music] okay so now when someone clicks that will go to the contact page and now let's see how we can change these different elements you can change some colors on the page by changing the overall styles on the page like i showed you earlier but some elements are colored individually so i can click on here and then go to style and then here i'm going to get the hex value that we are using on the other parts of the page that blue make it here so i'm just going to paste that that hex value in from that we were using before and you can see it's changing to this blue here and you can do that for any element so like i can click on this this icon here and i can go to style and now i'm going to show you an even easier way to do it so yes we can select the color individually but this time we're going to use the global colors so let me show you how we're going to set the global colors i'm going to manage global colors so so we have the colors through elementor and then we have the colors on wordpress so we already set the colors on wordpress now i'm going to set the global colors on elementor and i'm just going to paste in the hex value again so now we have this blue and for now we'll just leave these the same so let's go back here if i go here i'm going to save save the global colors if i click on here then i can set it as the primary color here so i can do it for all these things i don't know why this icon wasn't showing up i knew was there so i just click there and i can set this there again click on this icon which for some reason wasn't showing up and then i can go through each icon here and change it to the color the blue color we're going to use and then so here's another element here this little line right there click there and this time we have to go to this border section because it's actually just a border on one side and i can change that to the primary color okay so let me show you how to add a picture i added this placeholder picture and what you're going to want to do unless you have a lot of your own photography for different products we can go and get some royalty free photos that we can use right on our website there are some few a few extensions some a few wordpress extensions that you can install that will make this simpler to do right from wordpress but you can also just go to the royalty free websites yourself so one popular one is pexels.com so i'm just going to search i'm at pexels.com i'm going to search for a robot okay so look at all these robot pictures all these are royalty free that anybody can use so let's see which one i want to use i kind of like how about this one okay i'm gonna download this but instead of just downloading the original it's a little bigger than what we need so i'm going to go to the the medium size if it's too big it'll just take too long to load so i'm going to click free download and now i'll go back over to elementor we'll go to choose image upload files and then i can just drag it right into here okay all text and just you know alt text is what displays when people are using screen readers so some people may be accessing your website that can't see the image but they can use a screen reader to have it read out what the image is of so it's always important to include alt text so i'll put robot staring at camera or maybe at you okay so insert media and now we have a robot here so now let's see how we can update see we have this background image right here that we have this lady staring here so to update the background image we're going to have to update this whole section so i'm going to click right here and now that click here i have the editing for this box so you can see this blue line now surrounding this whole section and now we can change things about this so what i'm going to go i'm going to go to style now we have this image now i want to change this and use a different image so here's another cool website for finding free royalty free images which is unsplash.com so let me try searching for robots here okay so this now we have a whole new set of images we can deal with now i kind of like this one this is cool for a background image so i'm going to click here go to download i'm going to do download medium okay now i'm going to do choose image i'm going to upload a file and then i'm just going to bring in this image again and since it's just a background image we don't need alt text so insert that media so now we have a new image in the background so that's pretty cool i'm kind of looking at this i notice that there's a lot of space above the text there's a lot of space below the text that's too much space that's easy to switch so i'm still i'm already on the editing for this section because i click this six dot thing here and i'll go to layout so i'm on the layout tab and minimum height so if i make this height go down now there's going to be less space above and below i'm changing what the height of this section is so that kind of that looks a little better to me so we can get to the next section and let's change from this text so instead of practice areas we'll do our focus and then we're going to change these different sections instead of family law i'm going to we'll do stem [Music] programming toys and fun and then we can try to find not fun law then we can try to find an icon that goes along with each one and it makes it easy to change the icon so if i just click on this icon here and i go to content i can go to icon library okay for stem i will use a school icon for programming let's see if we can change this to maybe a computer laptop with a little code icon and then for toys content for toys i'm just going to scroll down and see oh paper airplane i like that for a toy and then for fun we'll just do a grin here okay now you may want to get rid of sections so like this section that doesn't really apply to us so we can actually just press x and get rid of this teams no this is something maybe we want so we could change this to review team and then you could go through and change i'm not going to update all these names but you would can you could update the pictures you can up choose the image to get pictures of different teammates and then we may want to change this text so go to style and then for color primary color and then we just go through each one and change the style to make sure it's all the color that we want basically you just want to go through these menus till you find the thing that find the setting that will change what you want to change and the great thing is pretty much everything can be changed now you can see i don't know why these weren't showing up but these are social media icons so let's say you want to get this the social media links for every person on your team so you go in here and you would just click right on here and then you would put the twitter like https colon slash less twitter.com carns and then you would do that and put the link for each each social media link for each person on your team you can also add new social media links so maybe do add item and you go to the icon library maybe you want to add a github link so we get that icon insert and now we have another link and then you would put the link right here you just type in the link okay so let's keep going down here this one we're just going to delete that section because we don't need that section here is another thing that we could change so like we could change this we could easily change the colors so styles we can do primary color and then now when you hover it still doesn't it doesn't stay blue so you're gonna have to choose colors two times so in the normal mode and the hover mode so that's why you have to look for these settings to make sure you change the color in every place the color needs to be changed so we can go through and do these on these other ones too and again you can go through and update this text you can update this text you can change the text you can update this link again it's so this one you may want to use your contact link again so we can update this to slash contact and then we can update the background image so just like before to upgrade the background image we're going to click here and then we can go to style and then we could choose the image we can update the image to a different image let me show you how you would have your own section like let's say this section is no not not like what we want i can get rid of that section we can get rid of this section but what if i want to add a whole new section in between here so what you want to do if you want to add a section is just click this plus button and now it's going to have an empty thing right here so i'm going to bring over an inner section so this intersection now has two tabs here or two columns i mean so we can add something different each of these columns so if it hit plus here let's say we want to add a video on this side and let's say we want to add an image on this side so let me show you how you would update what it what the video is so let me scroll over here so i have to you have to click this little edit button on the top of the corner at the video and so i can update this video so i'm going to or we can update this link i'm just going to paste in and now we have a different video we have the video we want to be featured here and then you can also do something like start time in time you can change the different source if you want the the video to be from some different location you can change autoplay there's all these different settings you can change here you probably want to turn on uh privacy mode so youtube won't store information about visitors on your website unless they play the video so that's just a nice thing to do for your visitors and then then with images we can change the image just like before so we're going to change the image we click on the image we can go to content and then we can choose the image so we can choose an image that's already on there this time i'm just going to make it simple i'm just going to add an image that we already have so how about this one okay and then we can even change the background of this whole section so if i click here now let's say i instead of white in the background i want a different color so i can go to style and then background overlay or not background overlay i want to go to background and then you can change the different so classic gradient video or slideshow so you can actually have a video playing in the background and you can get that video directly from youtube i'm going to do a gradient this time so the first color we're going to take a blue and then the second color we're going to have like a lighter blue here i guess it's like a black to turquoise and now you can see there's the gradient in the background and i'm going to actually change the you can change the the angle i'm just going to do a 90 degree angle and it doesn't really look that good but i'm just trying to show off the different things you can do so let's delete this whole section here and let's say you want your your map you want to have a map of where you're located at so let me show you how you would change where it shows where it shows in the map so i'm going to go to this section and actually you may have to hit this edit button right up here and right now the location is new york well let's try michigan that's the state i live in and we'll zoom out a little bit you could also put a city or you could even put a very specific address if you wanted to but for now we'll just say michigan and let's just keep going down here so this is like an empty section of the page but this only shows up when you're editing when you're on your page it's not going to show here so let's just look at what our page looks like so far so i'm going to click update and then preview changes okay so this is what our page looks like so far it looks a little different and you can go through and see oh there's a few things i uh i didn't change the color of so let's go do that now that's it's you're good to preview every few seconds so you can er every few minutes to see if there's anything you still need to do so i want to change that color so let me just go to edit with elementor i'm going to change this section um sometimes there'll be colors in various places so you kind of have to click around so you find out the exact spot but for this one it was border and you can change the color here scroll down there's one go to border at this point you probably know exactly how to change this this stuff here style and to change the color of the text on these buttons is going to require some custom css it's not too difficult but i'm going to save this to show you for later so we're basically done updating this main page oh lawyer firm how about robot firm and we'll preview changes okay now let me show you how you would update a few different types of sections first i'm going to show you how to delete add and delete sections to this menu here and then how to make some changes to the news or blog section so this news is also similar to a blog so a lot of websites are going to have a new section or a blog section that's kind of a different type of section than the other sections so first let's go through and find out how to add and remove sections so right so first of all let's say you wanted to edit this section if you want to edit just like before you do edit with elementor and then you would use all the same types of editing that we saw before you can edit here you can add a new section you can delete a section or edit the whole section just like this before but really what we want to do is completely remove this section so let me show you how you would do that if there's a whole page in your website that you don't even want how would you remove that so first of all you would see which sections you want to remove well we don't want any of these three sections so i'm going to remove all the three of these sections and then i'm going to show you how to add an all new section so these are the type of things that you may want to do when you're developing your own website you want to know how to remove a page and how to add completely new pages so let me show you that to remove this you're not going to do it from the edit with elementor or the edit page we're going to have to go back to our dashboard just so you know there's two types of basically pages we have normal pages and then we have posts so posts are like our blog posts and you can see these are all some sample posts that they put in there and then we also have pages which is our different pages like we have the blog page we which is i think the news page contacts fact home practice areas so we are going to do a few things first of all we want to we're just going to remove some of these sections we don't need the attorneys page we don't we're going to keep the contacts page we don't need the fact page practice areas and we're just going to delete those three pages so i'm going to bulk actions and move to trash and then apply and click no thanks here okay now let's see what our page looks like now that those have been removed i'm going to visit site and you can see now they're not even showing up in here so let's see how we can now add a new page also i'll show you how you would remove a section from this menu even though you don't want to delete that that page from your website so i'll show you that first and then i'll show you how to add new ones so let's say we want to remove the news section from this menu here i'm going to go back well let me close some of these extra tabs here i'm going to go back to our dashboard and let's change the menu so let me go to appearance and then menus so these are how we're going to change the menus so i want to change the main menu and not the footer menu so i'll select that and so we're going to want to delete well it still has the element the page that we deleted so if you delete the page you also want to delete it off the menu so i'm going to do is click here remove click here remove click here remove and the same way that's how you would remove the news page so i could click here and remove now that didn't remove that page from our website it's just removed it from the menu so if i click save menu and then if i go to the site we don't have the news but if i go to the url and do slash news well i guess that's not what it was called how i think was called blog okay so we can still see it so here is the blog it's still on here even though we removed it from the menu so let's see how to add it back to the menu go back to the dashboard we're gonna go right back to where we were appearance and menus and then i'm going to add an item here so let's do view all i'm gonna select the blog and i'm going to add to the menu now this is going to be different now because it says blog before it said news so let's see how we can call it news instead of calling it blog we're going to call it news so this is going to change what it says right in the menu item but actually we don't want it to be called news or blog we want it to be called reviews because these are going to be our robot reviews so i'm going to save the menu like that and if we go back to the page i'll actually open up into a new tab this time and then we can see home reviews contact us so that's how you add or remove sections from this menu so now i want to show you how you would add an all new page okay so to create a new page we can just click add new and then we have the add new button here too so we're on the page section we're gonna click add new and we're gonna just give this a title for this example we're gonna do programming lessons so people who are really into robots can learn how to program robots how we're going to edit this after we get the title here we're going to go to this template instead of the default template we're going to do uh elementor full width you can kind of experiment with different things but the elementor full width will allow us to have a page without anything without any sidebars or anything and that's we're gonna do for this example so i'm going to click edit with elementor okay now we're editing the page and you can see that it still has our normal header and our normal fitter footer but we just need to add what's going to be in here and you can see it's going to have some breadcrumbs here with the home and the programming lessons and now we can just add sections here so if i click plus then we can just choose how many columns we're going to have and then you can add elements into each one of those columns like you could put pictures in one column text in another buttons in another video in another maybe a map or or maybe two columns of text it's really up to you what you want to add to each column i'm just going to go with the two column layout again here and so you can see uh we can also change the size of the columns so right now we have a small column on this side and then a larger column on the other side and it's always going to have this drag widget here just in case you want to add something to the bottom of the page but when we we actually preview the page when we see what it actually looks like it's not going to have this thing down here so let's add something to the column so i'm going to do is put an image on this side and some text on this side and on this side i'm going to show you how you can have columns inside of a column so here we're going to add an image i'm going to go back to unsplash and put robots and i'm going to grab this one the rock and roll monkey robot so i'm going to download and instead of downloading the largest one i'm going to go to the medium one and then we'll go back over here i'm gonna choose image upload files i'm just going to drag this over and then for the alt text i will put monkey robot kind of i guess not really a monkey it's looks some kind somewhat similar to a monkey but it was called rock and roll monkey so what i'm going to do is now put some text here so first i'm going to put this text editor here and we're going to say if you want programming lessons if you want robot programming lessons [Music] you come to the right spot [Music] here is what we offer and now i'm going to add another section down here so i'm going to go to insert section okay so now we have two columns inside this column so on this i'm going to add a heading and the heading is going to be scratch programming and then over here we'll have a heading which will be python programming and then we can just add more text in here so let's keep going back here to until we can insert a the text editor we're going to enter insert a text editor on both sides here and so here's where we would talk about the scratch program here's when we talk about the python programming and another thing you can cool thing you can do is if i click here i can go to duplicate and now actually i have three columns i just duplicated this column so we can do another type of programming maybe we can do javascript programming and then i can go back over here we're going to add a button the button is going to be right at the bottom here and i'm going to change this instead of click here it's going to say contact us for details so it's basically a call to action and then for that link i'm going to go right to the contact page which we are going to be developing pretty soon here okay now let me publish this i'm going to have a look okay so programming lessons and you can see we have two sections here and then it goes right to our footer down here so using this method you can add as many pages you want to your web page now we also want to make sure it's up here so let's add our programming lessons to our navigation so i'll go to our dashboard and then appearance menus and then we're on our main menu so we're going to add programming lessons add to menu now we can drag this up it's going to be called home programming license reviews contact us and you can also have sub menus by this becomes a sub menu if i pull over but we went all on the root level so i'll save the menu and then let's visit the site okay so here's the home page and obviously we still have to would have to kind of update some of this text i'm not going to go through and update all the text but you can't get the idea of how to update all this text here and if we go to programming lessons so here's that and all looks good now the next two things we're going to do we're going to update this reviews page or the blog page we're going to update the contact page and then after that yeah this isn't working at all after that we're going to update the footer let's go to the reviews page here so first of all some people that make a website they want to only be a blog they may want this blog page with their different posts like this to appear as their home page when someone first goes to their website so let me show you how to do that we'll go to the dashboard okay so how to make the blog as your main page we're going to go to settings and then reading and then we would set the home page as your latest post so let me just show you what that would look like if we set that as your uac post i'll go here go to the page again okay now if we go to our url up here we're at the root url there's no slash or anything after it and you can see it's the blog posts but let's turn that back so we'll go again we'll go to settings reading and then we'll do static page now now we're going to set this again so our main page our homepage is going to be home and our post page is going to be blog and here's how you can actually change a little bit what your blog your your blog page is going to look like so you can check choose how many blogs are going to show up on each page you can show freeze posts in the feed is it going to be the full text or summary uh if you want to discourage search engines from indexing the site usually you're going to want this off because most people want it to appear in search engines but if for some reason you don't you can click that so let's save changes and now let's see how we can update our blog page so the blog page is a special type of page that the way you change the layout it's a little different than the other pages so we're going to go to appearance and then customize then we'll go to blog and then the blog entries so we're going to change what the blog entries page looks like and there actually is a different way to do that if we didn't have this up and let's say we are on our site if we go to reviews and then we can just click customize here and then it should open that up that screen up where we were just at okay and then we'll still have to go to blog blog entries and this is where we can change what this is going to look like so right now we have it with the right sidebar you can't really see it now i'm actually going to change the zoom level on chrome here okay so now you can see the sidebar here and this is where we're going to actually edit you can edit those different sections so right now we're not using elementor at all we're using the default wordpress editor to edit this blog page you can't edit this section with elementor so here is where we can make any edits we want so one thing we can do is go to left sidebar and it just switches the sidebar to the other side but let's keep right right sidebar and then it says this is mobile sidebar order that means if you're on a mobile device there's these buttons down here so you can switch to different types of view this is like a tablet view this is like a mobile view here so if we change this so now it's going to show the sidebar first and then it's going to show the content or we want to show the content first and then the sidebar because on a mobile device you're not going to be able to show both the content and the sidebar at the same time so it's going to put one after the other so that's what this is all about and this would change the size of these headings but it doesn't work for this particular theme that we're using let's go back to desktop view but you can also change the style so large image okay we can also do grid or we can do thumbnail so it's up to you what you want your main page to look like i actually kind of like this i like thumbnail and then you can change where's the image is it going to be right or left you can change the vertical position so you can see there's a lot of different settings you can change on here pagination style so we have the pages down here so we could change it to infinite scroll so just keep uh loading more and more blog posts until you get to the end of content which is i guess we're at the end of content now so let's go back to standard we can also delete anything over here that we don't want so for instance i don't want this calendar i'll just click here and then i can go to remove and then we're not gonna hook up with instagram so i can remove that but if you wanted to you could just go into the settings in there we'll keep the recent comments recent post and actually we have this twice here i don't know if we need all this so let's just make sure we only have everything one time so right now you have somehow got the recent post recent comments recent post reason comments that's a little too many so i can just remove that we can remove this and then if we edit this recent post you can still change things like instead of doing uh three posts let's show the five most recent posts and there's a bunch of other settings you can change to make this look exactly like you want but this looks pretty good so the next thing i want to show you is how someone can how you can load create new blog posts so let's publish this so to make new blog posts there's two ways if you're in this screen right here you can just click new and then suddenly you're creating a new blog post just like that and if you're already over here you can click add new here and i'm going to minimize this because we don't want to be looking at these settings all the time you can go into those settings to customize exactly again what everything looks like but we don't need to be looking at those settings so uh we're going to be reviewing different robots so if let's say we're going to review the cosmo robot this is a great robot and just like before now we we could edit with elementor but personally i think for blog post it's good to i would just recommend using the default editor just to make everything look consistent you want all the blog posts to look very consistent between the different blog posts and using the built-in editor instead of elementor is one way to make things uh look consistent and the built-in editor is great for just doing text or just doing blog posts where elementor is good for like moving around different things on the page so we're gonna use just this built-in editor but just like and with elementor you can still add a bunch of stuff like i can click this plus button here i can add a form i can add an image heading a gallery so i'm going to add a gallery so in a gallery i can actually pick a lot of different images so let's say just we could upload more images but i'm just going to select these to show as an example and i'll do insert gallery so you could potentially like have a bunch of images of cosmo robot and then you would show this in a gallery you can also insert a single image there's a bunch of different things you can insert and you can do browse all so you can actually these are all the different things you can put a quote you can put a table you can put a verse like poetry with special format a quote so there's a bunch of different types of things that you can enter insert right into your post so let's say i'm done i'm going to click publish and publish okay now i'll view the post okay here's my blog post so it says cosmo robot review this is the great robot and then you can see this gallery here and then people can leave a comment here now if i go to um now if i go to reviews it shows up as the first review but i noticed a few things one there's no image like these other ones and it's uncategorized usually you'll have a group that this is under so let's go back to the post i'll go in here and then i can just go to edit post okay i'm going to go to categories and then i'm going to add a new category this category is going to be called review reviews and then add new category and now it's going to be under reviews instead of uncategorized so the default is uncategorized but we may want to be called reviews so now and you basically can add as many categories as you want and you can put each blog post into whatever categories you want you can also use tags but we're going to use the feature featured image okay i'll go to set featured image and make sure you're on upload files and then i'll drag this in here and this actually is a picture of cosmo up a cosmo front because it's the front of them set featured image okay i will update this and then i'm gonna go down here view post okay cosmo robot review and it's under reviews this is a great post and then people can leave replies here and then if i go to reviews we can see that it appears at the top of this list here okay let's go into this review let's say you want to change the format or like what your blog post displays like we can go to customize here i go to blog and then single post and you can adjust things like for instance i can decide whether the feature image is before after the title maybe i want to move the title above the feature image okay so now it says cosmo robot review and then we have an image i kind of liked it how how it was and you can even like let's say you don't want this meta you don't want this information right here i can just take this off okay now we don't need to see like when it was posted and who created it or you may not want to show tags i don't have any tags but at the bottom would show tags if there were tags but one thing we you may want to do is decide which meta information shows up like for instance maybe you don't want to show the categories down here i'm going to take off categories so now we don't need to know it was reviews and maybe you probably maybe you don't want to show how many comments there are okay you just want to show the author and then the date or maybe you don't even want to show the author maybe everything is going to be created by the same person so you don't need to show who the author was for each post remember the author that's how we i showed you how to create different accounts so the author is whatever account made that post okay let's call this good there's a lot more settings you can do if you want but i'm just going to publish this okay now while we're looking at this if you were going to use this as your real page you wouldn't want all these sample articles there's all these sample blog posts and there's all these sample comments just so you can see what it's going to look like you're not going to want those sample articles and comments and blog posts when you actually go live with your website so let's see how to remove those i'll go to the dashboard and i'll go to posts and then i'm just going to select all the posts except i'm going to unselect the one they just created and now bulk actions and move to trash so these are all just the demo posts and then we can do the same thing with the comments let's go to comments and actually the comments just got automatically deleted because they were already associated with those blog posts that we just deleted so we don't even have to delete the comments anymore and now let's go to our site just let's see what it looks like right now if i click on reviews or just one there's no recent comments and there's zero comments on this one so you can go and see what that looks like good and people could leave a comment maybe i'll leave a comment right now this is a great post now you may not want people to be able to leave a post or leave leave a comment so let me show you how you would turn off comments completely on your posts i'm gonna go to customize here then we'll go to blog single post we go down here and then i can just hide comments so now nobody's going to be able to comment nobody's going to be able to see account see comments or leave a comment so now we just don't even have to worry about comments if you're going to do that you're probably going to want to remove this section here recent comments so let's just remove that so we don't show the recent comments let's publish okay and let's just do a preview again so here's reviews it's not going to show recent comments let's see if we can search for something so i searched for a robot and it came up with all the pages have robot not just the blog post but also the other pages so that's pretty nice okay so now we are going to figure out how to update this contact us page i'm just gonna go to edit with elementor and so just like before to update the map i'm gonna click this here i'm gonna type in michigan and then i'm going to zoom out a little bit here looks nice and you can put in an exact address if you want you could also just delete this whole section if you just right click on here i could go to delete down here but we're not going to do that so now what you're going to want to do is just change the colors here so go to style and then primary and then obviously you would change your the address to be your address so we could change this style to primary and then these hours we can change this to primary or you may not want these at all you may want a contact form on this page so we're going to add a contact form right now where people can fill that out and then send an email to you so let me put a plus here and this is wp form just going to drag this in okay it says you can use wp forms to build a contact form surveys payment forms and more with just a few clicks let's create a form you can create it for completely from scratch or start with the template i'm just going to use simple contact form okay name first name last name email commenter message let's say you also want to drop down and the drop down let's say it's going to be subject and then you have a few different choices maybe it can be robot review programming lessons site suggestion or other okay we can decide if it's going to be required or not we'll make this not required that looks pretty good so we have the name field the email the subject and the comment or message and then there's a submit form okay if we go to settings and then we go to confirmations we can put what's going to happen once someone submits the message so thanks for contacting us robots [Music] are amazing then we'll do oops not add new confirmation we're just going to use this one confirmation and then we'll save this i will go out of this we got this form so now the form is right on the page so what's going to happen when you click submit well it's going to send an email to whatever email you have set up in your settings in your wordpress settings so let me show you how you would confirm that let's see how you would confirm your wordpress settings so let me update click update button down here now preview changes we'll just see what the form looks like really quick first so here's the form you can select the subject let's go to our dashboard then what settings general okay so we have the email address bo freecodecamp.org so this email address should get a an email if someone fills out the form let's test that i'm going to go to contact us and i'm going to put name quincy larson quincy at free code camp dot org i'll do site suggestion update your footer and i'll click submit okay thanks for contacting us robots are amazing okay let me go into my email and see if i can find that email and here's the email now it did get marked as potential spam but since i basically had it sent to myself i know it's not a spam so you can say look safe and you can see name email subject and then the command message update your footer oh that's a good idea quincy thanks i should update the footer okay so that worked we can now our contact form works okay let's go back to our page so now that we have the contact form let's go back to edit with elementor first i don't want to deal with people calling me or actually coming to my house or anything so this contact page i just want to have the contact form so i'm going to delete this section so now i'll just have the map and then the contact form and that's pretty good so let's take quincy's suggestion and update the footer now but we're going to also update this little header too i'm going to show you how to update this line up here and then the footer down here okay so let's first preview okay and now to update this header here and then we'll update the footer we're going to go to customize okay so this thing right here is called the top bar and this part right here is called the header and so we can update the top bar or the header let's so let's go to top bar go to general and we could just disable it completely that's maybe one thing we want to do disable the top bar i kind of think that looks good like that we don't really need to show a phone number or these social icons but let's say you do want to show them so let's go to enable top bar and then we can see well do we want to hide it on mobile or hide on tablet or just show on all devices we can change the colors we can change different colors different paddings but let's go back here for the content and right now the content is call us at this phone number but maybe you want some sort of call to action like check out our new programming lessons and then let's say we want to change these social icons at the end you could just disable them completely or we can able them and just enable just have certain ones so you can see there's all these options and if you put a hash mark that's just an empty link if you if you don't have anything it won't show up on here so let's we're not going to have skype we won't have linkedin we won't have instagram let's say we only want twitter and youtube so now it's just twitter and youtube and we can actually just put our twitter page we can put our youtube page right here whatever we type in here like if i say https colon slash slash youtube.com freecodecamp and let's say publish and we'll put that so now if you click here the youtube button so now it opens up the free codecamp youtube channel let's close that okay so now we know how to update this and then i already kind of showed you how to update this header i just showed you where you would click but let me just show you a few of the options you can do for that so click header we can change the height we can change the background color maybe you want it darker but we'll just go back to default wait default and then there's just a bunch of other things you can change here and just making the you can change update your logo the menu the mobile menu because when it's a mobile device is going to look different so i already kind of showed you that but yeah you can click mobile i'll show you what it's going to look like when you're when it's a mobile device and you can click the menu and that's what the menu is going to look like as a mobile device okay let's go back to this okay so we know about editing the top bar the menu now let's go down to the footer here there's a lot of stuff in that footer a lot of stuff we're not actually going to need so there's two sections there's this section which are called the footer widgets and then there's this copier this bottom bar called footer bottom so let's update the footer bottom first it's just going to say copyright and you may not want to say oceanwp theme by nick maybe you just want to take that off maybe we just want copyright 2001. and then these links down here are going to be the footer menu which i'll show you later but we got this footer bottom updated and you may want to update the footer widgets so here we can update the color and everything and some general things but another what thing you can do is just click on this like you may not have a newsletter so this is set up if you do have a newsletter you can actually set up to work with mailchimp now it takes a little bit of a bit more setup and for now it's it's kind of outside what we want to do so i'm going to remove that we already have our social at the top we don't need them at the bottom so let's just remove the social it works the same way as the stuff at the top and now i don't think we need this practice areas too so we just want to have the contact us we just want about us and the contact info so i'm going to remove this again and now we just have these two columns but it kind of looks weird that they're squished so let's make these so they fill up the whole thing so let's go back to the footer actually wait footer footer widgets and i'm gonna do two columns there should only be two columns here okay we have two columns we're not seeing both columns so what we can do actually is go to the widgets section here okay let's go to footer widgets and let's do we have three columns here we just want two columns you so we're gonna go to two columns here and looks like we lost one so to get that back we're gonna go to widgets footer two we'll see footer one is how we would update the about us let me show you that and then we'll add the second one back so this is how you would update the about us you can say we write the best robot reviews and you can update this check out our reviews see this p just means paragraph the beginning of the paragraph to enter the paragraph the beginning of the paragraph to enter the paragraph and now you can see a means anchor tag or it's just a link so first footer so this is a link and then this is the second link the link goes nothing we don't have an about us page so we're going to take this whole section off and then we're just going to have the contact us page and again we're going to go to the same page we keep going to so that would be robotfamilyreviews.com contact so now this button will go to the contact page okay i'll click done and then we'll add the second footer section and i can do add widget now i can there's all these different things you can add as the widget an image gallery a page calendar audio twitter but we're going to add a contact info for the widget and you can see that it has all this information here but it's not showing up if you just change something in here like i could say contact us today then it's going to show up sometimes you just have to change the text to make it show up and then you can update the street the phone so we can actually modify some of this stuff like we don't need so many phone numbers we're just so let's say we only want the mobile phone number so we can just basically if you just delete everything here it will go away and so we don't want facts i don't know if there's too many people that use fax anymore and then we can keep the email address which is going to be bo at free codecamp.org and then we just duplicate that and website well where are people already on the website so we don't need to share that there okay and you could change the address too and then we have these this button here now for skype we don't want that and that's what we want so i'm gonna click publish up here okay and i can close this and we got our website so now i'm just going to show you how you change this menu down here so to do that we have to go into our dashboard then we'll go to appearance and then we'll go to menus and then we go to footer menu select now you so you can change which links you have here so let's say what if i want my programming lessons in here i can add that to the menu here and then if i can actually just delete some of these other things so remove remove remove and if you didn't want to remove it you can just change it you would have to update the url and then what the label is but i'll just save the menu and let's see what it looks like with just that one item so i'm gonna go to the site and you can see it just says programming lessons that looks kind of weird so let's just remove the menu altogether and then i'll show you how to update this this should show like an up arrow if because it navigates to the top of the page but right now it's just a box here but let's remove that menu first so i'm just going to go to the dashboard close these extra tabs and then i'll go to appearance menus and i'm just going to delete the menu and then save that let me go back to the site okay now we don't have the menu and then let's update the copyright notice copyright 2001. i think i typed that in earlier incorrectly so i can go to customize a footer bottom and then that should be copyright 2000 21. now let's change with this button we this i said we get back to this where we change that button so it's blue there so i've already showed you a few places where you can update colors and if you see something on your page in your theme and you cannot figure out how you can change the color of that item it could be in the custom css js tab so if you go here this is a little tricky to update because you are going to need to know a little bit about css but you don't have to know a lot you may be able to figure this out and if you don't want to even bother with it you can always just delete this button and we don't even need a button in the about us page but if you really want to try to figure out how you can change this you can look for some comments so anything like this is a comment and we can see this says button in the footer so we know this is probably something that's going to change any buttons that are in the footer and then remember we know that the anything that looks like this these are colors these are the hex colors that we saw before and you can see oh color and then it has this so what i'm going to do is just paste in that blue color from before we have this hack so i'm just going to paste in that color and then it changes to the right color so we can click publish and that worked so i'm going to go back and the last thing i need to do is update this thing right here this should be an arrow okay so to update this we're going to go to general options then scroll to top and then we're just going to select what we want to look like and so i'm just going to create this two arrows but you can also ch there's a lot of other settings you can change on that and then you can also turn it off if you don't like it you can just turn off the button and actually you think i think i'm just going to go with turning it off completely then i'll go with publish and then this let's test out the site okay obviously there's more things we can update but i think you really know everything for all the things you have to do to update the site okay we've reached the end you should now know how to create your own wordpress website and customize it to meet your needs

Channel: freeCodeCamp.org

Views: 723,669

Keywords:

Id: O79pJ7qXwoE

Length: 105min 24sec (6324 seconds)

Published: Tue Apr 13 2021