Do you want to create your WordPress website or blog with the 2020 WordPress theme? 2020 was just released and it was created by Anders Noren an awesome developer along with the WordPress team and it was modeled after the Chaplin theme This WordPress 2020 theme has so many features and designs that offer us bloggers a lot more to do But if you just installed it Then you might be confused because it's pretty minimalist and it's hard to figure out the default themes You might actually end up having a website that just looks like this and it's not worth that much at all But if you want to change things and actually make your site with 20/20 Then we have a video for you now because we're gonna actually build this complete website with the blog With the WordPress 2020 theme so instead of just telling you about it and what it offers you we're actually gonna build these features Like a cool logo, this nice flyout menu, which is unique to 2020 We're gonna make a huge hero screen image with some text on top of it. And of course, it's HD You're gonna learn how to make buttons this nice little customized featured text and video area Set up social media in multiple different formats and of course do all the basic business features like a map and you're going to get the basic pages like and about Contact us and a blog the blog is especially cool because it centers your content So instead of having a really wide post they've decided to Center the content in the middle, which really focuses your readers eyeball Right down the center of the page and can be great for marketing or online affiliate marketing you Can also do wide layouts in the post, which is totally new to this theme Alright, so if you want to get started, I hope you'll join in we have plenty of themed videos for Astra ocean WP Laurel Mr Taylor virtue all the way back to the 2016 WordPress theme but this one is the one that excites me that most because it's a theme made by a fellow who I've actually built some themes along with before and I'm really excited to see what we can make so if you're ready to get started I'm ready to let's go ahead and learn all the features of the WordPress 2020 theme and how to build them First off because the WordPress 2020 theme is a press org theme we're gonna need to set up a domain name and hosting Before we can actually use this theme So if you need to do that like a lot of people still do then I've covered all the steps for you and we're gonna set it up right here in a few minutes domain hosting and install WordPress if you already have your domain and hosting Use the Quick Links beneath the video to hop over it to where we actually start building with the theme But this part should be really easy and fun for everyone So the first step to register your domain name and hosting and then install WordPress is just to pick a domain name So your domain name is like your unique com or org or dotnet? There are a ton of different options available even still today So for example, Facebook's domain name is facebook.com and Twitter's domain name is twitter.com us I prefer no more than two words because that's been really trendy over the past decade or so like Home Depot or Netflix or TripAdvisor you get the picture, but if you can't get your domain name of choice, then you could always just register your name com That's great for branding and if you become a big million-dollar business someday, you should control where your name coms goes So someone doesn't post something else on it So, of course, you're wondering the cost of everything and you should be happy to know that we're gonna get a domain name for free The next step once you pick your domain name is just to set up some hosting So hosting is just like virtual storage space for your blog or website It's kind of like back in like kindergarten when you had a cubby or you stored all your stuff alongside all your classmates Hosting is just like a little cubby where you store Your website files like your images your posts your videos and if you don't have a hosting account Then when people visit your domain name, they just see a blank white screen So every WordPress website needs hosting and you don't need to know any techie stuff at all Another word for it is self hosting aka self hosted WordPress. So that's what we're going to get today Hosting costs used to run us about ten dollars per month which can actually break the bank, especially if you're starting out Thankfully we've found a place where we can get hosting down to under five dollars a month So an awesome discount which basically equals a cup of coffee per month So if you get a skip one trip Starbucks every month, which I know can be tough Then you can have your own amazing website just like huge brands like Forbes Time magazine Katy Perry Beyonce and more who all use wordpress.org the way we get our hosting discount and our domain name for free is by using Bluehost Bluehost is the number one recommended software by WordPress to set up WordPress And it's also really fast and affordable and user friendly and they have great support. So really you can't go wrong I've been a Blue Hose customer for a while now and I have to say I wish I'd gotten started with them even sooner they are awesome and I think you'll find a good home there. So after we get our domain name and hosting we just need to grab WordPress Thankfully we can install WordPress for free at Bluehost without any coding knowledge required You basically just use their famous one-click install and then you have WordPress up and running and you're gonna wonder Why you waited so long and you don't have to like connect anything or no any like weird? Database JavaScript coding HTML Python C++. You don't need to know any of that. It's super easy and Of course, that part is free So to put everything in perspective if you went and hired a developer in your town They would charge you somewhere between like five hundred and two thousand dollars just to set up your WordPress website if you don't believe me go ahead and ask them I guarantee you'll be surprised and if you took a Wordpress course or a bootcamp somewhere that would also run you thousands of dollars So instead you're gonna save all that money You only have to pay a little bit for your hosting here and in itself It's all priceless because you'll learn how to do it all yourself. Alright, so if you're ready, I'm ready Let's go ahead and get these things out of the way and then we can actually learn the WordPress 2020 theme Just open up your browser's here. I'm using Google Chrome, which I recommend but whether you're using Internet Explorer Firefox some other browser Microsoft PC or Mac, whatever you're using it'll work just fine and you can follow all along So without further ado grab yourself a cup of coffee tea Whatever it is you like to drink and let's get started to visit Bluehost and get our discount I'm just gonna open up a new Google and we can just type in Ragna Ryan Dot-com that's my domain name, of course my name com Forward slash Bluehost and hit enter and that'll make sure we get that price down to under five dollars a month Like I talked about so there it is. Great job And we're all set now And so you don't get lost and so I can explain this all to you one-on-one and you can install WordPress easily Why don't I jump in the tutorial now with you? I'm just gonna throw on my leather jacket here And here we are at Bluehost the best web hosting as you might have heard for WordPress So if you click get started, you're gonna see the basic plan on the Left Which is the one that most people use to install WordPress? This has gotten us a lot of great reviews and it's generally just the most common way to install WordPress But because blue house is so advanced. They've created a basic WordPress plan If you hover on WordPress and click WordPress hosting you'll find the same basic plan For the same price, but with more upgraded WordPress features like two hundred dollars in marketing credit So obviously we want to get this one for you Alright, so we're gonna go up and we're gonna see it also comes with automatic WordPress install updates all sorts of cool WordPress features Obviously, I want your blog to be as powerful as it can be from the get-go Alright so you could read a little more if you want That's the same price of 395 a month And then once you're ready just click choose plan scroll down and we're gonna keep things on a budget and select the basic plan Of course, you get the plus plan. If you know you want to host more than one website at the moment Next we're gonna create a domain name. Alright, so if you search for a domain name You're gonna have the option to put in any words you want and then choose an extension, which is like a.com or.net What-have-you and I want you to know that the dot-com is the most recognizable and Also the most profitable if you sell your website some days so always try to get the dot-com Although there isn't any negative like SEO if you choose like a org or Co then hit next Of course you don't mean that might not be available right away So you might need to do a little more hunting like replace guide with setup or go with your name com That's always a good one We can celebrate now that we've gotten ourselves a good domain name and next it's time to create our account So we're gonna pop in account information, which is just like our name and our business name, which is optional You're gonna put in stuff like the country street address city And of course all that information is 100% secure and then in package information We're gonna make sure we choose the best option for us today The price goes down if you register more months upfront you'll just have to pay a little bit more upfront But you'll get it at less cost per month Hosting price is just the number of months. We registered four times the price domains free and you get free SSL for security Next you'll see the package extras Alright, so obviously we want to check off on all of those because we're gonna stay on a budget I can show you how to do most of these tasks for free with a plugin or You can add them on later in the future guys. It's not a big deal Alright, so finally we have the payment information and we're gonna pay for our Bluehost web hosting just like you would at any other major online retailer All right, pretty cool so Bluehost has like over two million customers right now Really great brand founded by Matt Eaton and today they're gonna get one more customer Because we're gonna join in Alright, so here I'm making my secure payment just gonna pop in my credit card so I get some points and click that box down below and Once you've read through it's time to hit submit and this will take care of our domain name and hosting and in the next step We're just gonna install WordPress. So goes really quick. You should know that it's really easy and fun and Yeah, now you get to enjoy the same Bluehost setup that everyone you might have talked to you who's already done So once you're ready, we're just gonna hit submit together boom And it'll say your purchase was success Great. So have these updated graphics in the new Bluehost WordPress install, and we just need to hit create account to get going Next we're it's time to create your password So we just have our domain name in there and choose any password that meets all their criteria. Try to make it strong Then check that box and then create your account All Right here making a good amount of progress Keep going with this here now click go to log in and it's going to ask us a quick little test Which is do you remember the password you just made? so make sure you're on hosting login and remember that password type it in and Now we're gonna click login All right doing great guys stick with us here we're almost to your WordPress blog Congrats I'm making it so far it's a big commitment here you've taken and Really you're setting yourself apart from so many other bloggers that decide to create a free blog Alright, so now let's create a website with some details. So the first thing is just the name of your site, which is literally just whatever your site title is so, you know, it could be anything like, you know, Rick school toys or Jamie's cool, whatever you want to call it. I'm out of ideas, but I just like calling it your domain name, you know Whatever's in your domain name just put those words in the site title And then for your tagline, that would be like a slogan for your website. So, you know, maybe your favorite quote would work great there All right, and when you do this WordPress is gonna take that information and put it on your blog So you'll see it once we log into WordPress All right, now it says do you want a blog well I thought we were making blog already Well, this will just make sure that you have blog posts in a certain location So, of course we want that and we're going to choose home page so that we have a list of blog posts on our home page and Then it says do you want an online store? Of course? Why not? I could definitely see us selling something like an e-book or some downloadable products or maybe a coaching guide later on All right, so there we have it and we're gonna scroll down and we're gonna hit continue So the WooCommerce store is just by WooCommerce, which is a plugin Next it's time to tell us a bit more about you Luis is basically just trying to understand what sort of site you want to make This will help them recommend you themes give you better WordPress support through their blue sky therefore a lot of up created support features So the more you tell them the better and they will read this and learn about your site so they can help you better Later on So of course, I'm just gonna check all of them. So we get all the options on the next screen Then it says are you comfortable with creating websites well If you're with me then yes, but you know after the video you might not be comfortable So we're just gonna hit the very least one so that you get the most options for WordPress support on the next screen And you get a phone number there if you want to call them for help but Obviously you're here with me and the YouTube comments are great. So now it's time to pick a theme that expires you Inspires you're not expires These are all great themes I can tell you about all of them as you can see there's like five hundred and fifty nine of them So there's really not time to explain all of them But if you want asking about any individual team, I'll tell you what It's good for why it's good and maybe why it wouldn't be for you I've used almost all these themes we see right here But we're gonna skip this step because I want us to try out the default 2020 theme. It's really cool And you should know how to use it Alright, so before I can finish talking WordPress was installed. This is our - what we're gonna hit get started Then we're gonna say no. Thanks for the domain privacy protection because we're on a budget And before we know it we're gonna be on the dashboard screen All right. I'm just gonna click away from here by clicking. Um, you know, I'm sure turn it off There we go now we're gonna hit my sites in the upper left and in order to login we're gonna click on manage site So this is like kind of a quick little health check on your site. Like how many themes you have? How many plugins? Basically, you're sort of arsenal of tools You could say we're gonna hit that button right there And then there's us and we need to create a password and to do that. We need to hit login So here's our little guy in a rocketship, and now we're logged in Things the blue is go really fast guys So if you need to stop the video and ask a question, then please do so I'm just gonna close these little notifications here So that our dashboard is as simple as possible Dismiss that one and Yeah, welcome to WordPress you made it So here we are now and what I want to show you how to do is to go to users and change your password So click on users and then click on yourself Hit edit right there or just click on your name and then scroll down and under new password click generate password nailed it Now we're just gonna make sure we hide it and then click on any password you want Make it strong of course and come down and update it. So now you don't have to use any other password You know your username, you know your password you can log in whatever you want We're gonna click on the dashboard button in the upper left, which is also called our site title That takes us from the back end to the front end. So it goes from the dashboard To this site, which is basically how the world sees it. So this is what your WordPress a it looks like This is the theme it's wearing obviously looks okay, but not that great And if you click on that button again in the upper left it goes back to our dashboard So it just kind of flips around like a pancake Alright, so that's pretty cool if you notice in the upper URL bar there's some weird temporary domain name some time like box 76 Blue goes just does that because they're not sure like where your domain came from? So if you're using a domain name from GoDaddy, they're just gonna give you that so you can actually look at your site But we want to click on the blue host button and then we want to come down to hosting and now we're gonna go to manage and this is gonna help us get rid of that weird like box temp domain thing because it should just say your domain name com and You can also see how the dashboards connected to the blue house and so on and so forth Alright, so click on home and we can see right there in that little drop-down. We want to just say your domain name.com Like I mentioned before so click my sites Now we're gonna click on manage site you guessed it now, we're gonna click on settings and Under site URL. You're just gonna delete what's in there. If it's not your domain name, just delete it and enter in HTTP colon slash slash You don't need to do a WWE. Just enter in the words of your domain name followed by the dot-com org net Whatever and then click on Save updates So let's make sure that when we visit your site It's actually going to be your domain name and not something else that we get to look at to login now You can visit your domain name forward slash Wp-admin that's just how everyone really does it these days. It's just the standard for some reason Then popping your username and your password that you chose when we were in that users area Click remember me and bookmark it so you don't forget this page and now we're gonna click on login And here we go. Alright So the first thing we're gonna do is change our theme we have a little bit of time left in the video a couple minutes These are the themes your site is wearing So it's like all the default WordPress ones if you want to activate them You can just click on the activate button But if you click on the blue plus you can see all the themes WordPress comes with Through the internet through the WordPress library you click popular. These themes are powering like thousands of websites Astra is one of our favorites I'll give you a video at the end on how to make a WordPress website with a strip But for now just go back to themes and we're gonna select the default twenty twenty team Really cool really fast and really modern so click on a theme and click activate it to actually use it on your site This will change how everything looks Alright and now we can click on our site title and upper left and see that everything looks different and in the few seconds we Have left. I want to show you how to add a new blog post and Even upload an image so go to new post in the upper navigation Alright and this is the post editor And we're gonna click on the little cursor at the top to add a title So welcome to the blog is always a good first post to have Explain what you want to write about and what people can stand to get So I don't have time to write all that and we're gonna do that later. Also, I'll just right now. This is my first post You know I'm so glad you could stop by and read it something there's to warm people up and welcome them to the blog Now we can click on the image button and this is how you upload an image to your new website Let's go to a new tab and type in pixabay.com where I get all my free images and search for Futuristic. Why not? Once you do a search for that, you'll see all the images that are futuristic You can click on one to open it and then you can click on further Categories which are on the upper left of the image If you don't see something you like if you do maybe you have a futurism blog, which is really cool. And You can just make it with all these images Alright, make sure you give credit to the author. But as far as I know these are Pretty darn good images that are free to use Alright, so we're gonna click on free download before we do that though, we're gonna click on these categories like interior and You can see that you know, you know way down the rabbit hole and pick all sorts of cool images So I like this one. It's kind of like my dream office free download. I'm not a robot and download and Then you'll get a download to the image So just name it whatever you want cool office is good in WordPress click upload and Then it's gonna search your computer. Click on the image click open Again, I'm sorry we're going so fast Stop that video and ask a question if you want so your image will show up right in WordPress You've uploaded it now to your Bluehost hosting and it's definitely on your blog and we're just gonna click and write a little bit more Alright so let's get a few more sentences in there. I'm sort of thinking what I want to write Maybe something about what my office looks like Of course, you can upload as many images you want to WordPress you can add videos quotes links all sorts of stuff Let me know how to do all that if you have a question In this case, I'm just gonna say I'll leave a picture in my cool new office Publish in the upper right to make things go live and click publish again Now we can actually just click on View Post once it's done publishing And voila you published a new blog post for the world and especially congrats if that was your first blog post ever I know the feeling you're not alone and now you're a blogger just like me alright So I'm gonna go away so we can focus on the WordPress 2020 theme and learning everything that it can offer us The first thing I want to setup is just the homepage So this is a pretty standard technique on most WordPress blogs where you make the home page a home page So when you click on your site title You'll see like not just your blog posts and put an actual full page where you can put up content like your mission statement Maybe a like box and like a full-screen image So let's go to the dashboard and let's get that done. So to set up your home page you need to first go to page and Add a home page, it sounds redundant, but we need to add an actual home page. So let's click add new we're just gonna call this one home and Publish it publish and now we're gonna go back to pages again and Add new and we're gonna make a blog page and that way our blog posts have a page where they can stack on publish and publish Alright awesome. Now, we just need to go to settings just hover on settings click on reading and Let's assign these pages to their correct locations. So your home page displays right now It's just your latest blog post, but we want to make it a static page and we're gonna make the home page Home and post page blog that's just how people do it Once you like actually get into like developing with WordPress and Save Changes Alright, so now when we go to our site, we won't see too much We'll just see a home page right there Alright guys, so our home page has nothing on it. That's really scary so let's go ahead and start playing with the 2020 theme and build out a home page as Alex Noren says who made the theme here. We are on the Kinze 2 blog I read that he said that this theme is all about flexibility That means that you can use it for an organization or a business You can combine columns groups and media to create dynamic layouts like full width alignments So that would be something we can do on our home page and you can also if you want use it to make a traditional Blog with this centered content so we have full width content. That's dynamic and Centered content that's blog and what better way to show off both of those kinds of content then on a magazine website So if I were upset were the next mashable.com Then it could look like this huge like full screen setup on the home page with all these different types of columns For different sorts of media and then you could also have the blog which is just like one individual article and that's how this looks So that's what we're gonna go for Of course, you won't have like as much content as Mashable, but we're going to try to give you that kind of variety So you have a home page, which is like a landing page and then article pages so with all that preload done Let's just click edit page and get going And by the way, because we set up those pages like the home page and the blog page now We have an edit page button on the home page alright The first thing we're gonna want to do on our home page is click on page attributes and open up the different types of pages Those are different templates so we can have like a default template We can also have these elementary options because we installed the elementary plug-in at some point If you don't have the elementary page builder plug-in You won't see these two and then you also get the cover and the full width included with the theme let's go ahead and try the cover template and Update the page and see if anything happens Now view page and we can see right away We get this full screen image and then beneath it we get the content and we get the arrow to take us there, too Let's click edit page again. And let's see what we get if we click on the full width template So change it from cover to full width template and update and view page Alright, so that's pretty much the same as the default template for now, but let's make this full width template come to life Let's click edit page again. Now, let's get ourselves some blocks Obviously the 2020 theme comes with Guttenberg, which is the block editor in WordPress that replaced the classic editor So we're gonna learn how to use these blocks to make our home page come to life so the first thing we're gonna do is just change home to Welcome to our magazine And we'll see how that looks later and now we can just click on plus and make a block We're gonna go with an image and if you need a cool image before you have images for your blog you can always go to pixabay.com And grab a free image so I'm just gonna do a search for something like The mountains and then you know, you can click on a mountain and open it up You can also click on a category link like Alpine And you'll see more Alpine's Or like a mountain hut for example, you're gonna find so many cool images on pixabay like these goats from Tyron. Hi myrtle But I usually like one with just a little bit of human action in there Just to show off what people are really doing. So why don't we try? This image right here of the boats. I think that's super inspiring So once you find an image to use you can just click on free download choose the size 19:20 is bringing up for us and download your not a robot and download You can also donate to the author if you'd like or to follow these instructions right here to give credit Now we're just gonna name it so Here our image and save it now, let's go back to our page and we're gonna click upload and select hero image and open Cool. Now we're gonna build out a few more content blocks and then just update it and see what we made so to create another Content block hit the plus now. Let's try to hit common blocks and see what's common. So there's a quote Audio cover file what happens if we hit formatting? Okay. That way we can do like a classic code We could also click on Widgets and put a widget in there. Let's just try to go with the paragraph though for now So let's click plus and we can see the most-used You can also click common and check out like what's really common among people building with 20/20 But I'm just gonna go with a paragraph so we can have some text. Okay, so now we can write out some demo text Okay, so there's our text Now what if we want to have two columns like have some text with some other stuff next to it? well, let's hit plus in the middle and then click on another thing like a list and then get a bulleted list there so we can say tech music fashion Culture your lifestyle, so that's what we cover next We can hover on the six dots right here and get the Super Mario and and drag it above or beneath one of our existing Sections or blocks as they're called but what if we want to put them side-by-side let's click on this dot Which is our like content structure that doesn't do anything well in that case we need to click plus again, and now we're gonna go to Layout elements and we're gonna make a column So we can choose how many columns we want like for example I think three is recommended in this theme and now we can add individual blocks next to each other or you can probably just click and drag one of these blocks into One of those columns like that. So that's super cool using this strategy. We can have our bullet points We can also Plus and make like another image image of course You can go back to pixabay if we didn't get the image you wanted before and it's like really hard for me to guess which One that might be but maybe it's this one here because everyone likes going on a good camping trip with the fam click free download and download Download that bad boy and save it I would have some camping trips with my family if we actually went camping and now we're gonna click upload You can also just double click an image. You don't need to click open and it'll upload to your WordPress. Super cool I mean, you can click plus one more time if you want and add another cool most used feature like a quote So that's super easy. Just write in a quote from one of your favorite authors If you don't have a quote, you know I searched for outdoors quotes for example Two people are saying so right away you get this cool image from Pinterest Obviously Pinterest has like thousands of quotes and that one's really nice. So I Have it there Nature is your name, that's pretty cool. So I think nature really is the best therapist and then when you have that in there It'll automatically quote it I believe So we're going to put that by anonymous and the fonts a little different Alright now let's add one more content block below just to see how it works and that's going to be a video So, of course, I love videos I live on YouTube They're not in the most-used, but you can also search for a text box like video and of course there's video Alright, so instead of uploading it which is kind of a bad idea because then WordPress has to like store your video I like inserting from a URL So that way you can just go to YouTube and like look up one of your old blogs like for example I have this video on Don't worry. I don't watch the Kardashians you gross. I think this is Krista's channel We can just search for like how to make a vlog wordpress.org and Hopefully you find me if you don't then something's broken and then click on a link Was the like skinnier handsome version of me We're gonna copy the link and come back to our page and just paste in the URL and it should understand that That's a YouTube video. All right with that done. I think you got that right click on the arrow just to make sure it does With that done we were gonna update and now we're gonna check out our page which as we saw before is a full-width page You can also click on document to go back to these page settings Alright, awesome. Let's click few page. I'll see what's up our pages looking Okay Now I just don't like how the image up here isn't centered So we can click edit page and that's actually one of the settings they give us So if you hover on your image and click on it, you can see there's like an edit image option to change the image But there's also this cool change alignment option which gives you the full width image possibility super cool You can also click on this button to change block type or style and make it a circle mask if you want to go that out But we'll keep it default. Okay, so now with our image set to Full width let's update it and see how it looks Awesome. There we go. So our home page is looking pretty good But as we can see if there's a lot of white space around The title of the page in between the image and that's gonna cause people to leave the page because they don't see the information They want right away above the fold. So what if we put our page title on top of the image? Centered right here. How do we do that? well I can show you how and it's actually a good transition because we can use the plug-in called elementary that you might have heard about before to do so we can just click Edit page and We can see when we installed Bluehost. We got elementary. So here we are in plugins on the left and There's Elementor So now when we're in our pages we can just go back We're gonna have this button that says edit with elementary and we can click on that and Then click Edit with elementary and right away. It'll transform all of our content made in 2020 theme Into an elementary window right here. And of course elementary works great with the 2020 WordPress theme It is Elementor friendly WordPress theme So right away we can see we have our title and we can't do a ton with that But we can actually change up the image below In this elementary window or we can just click plus right here to create a new section and then recreate the title and the image So let's do it Once you click on that plus you're gonna have this new dotted area and we can just drag in any of these Elements on the left like a text editor just click and hold and drag it and drop it in Alright, so now we can just write whatever text you want and you could say anything about the image Or maybe you'll make a section that's like an advertisement with the banner head, but I'm just gonna recreate the title for the sake of this example Alright now I'm gonna click on the kitchen sink right here Which is gonna open up more tools and we can see later on if we want we have all these other Microsoft words sort of editor tools like color Center so on and so forth for now Why don't we just highlight and Center that text great and that's all we need to do with the text for now let's set up our background image so we can go to the section settings right here by clicking on the 6 dots and now we can click on style and For background, we're gonna click on the paintbrush for classic, which is gonna bring up the image option so now just click on the grey space and click media library and We can choose our background image right there and insert media Perfect Let's play with the background image settings a little bit so that it covers the space. We want the image to cover So under your position we can leave that default Attachment we're gonna leave default Repeat default and then size is what we're gonna change to cover. It should move the image a little bit Next we can go to advanced and just throw a little bit of padding around the image itself Which should push the text inwards great. So whatever you want to do there 300 200 you can play around with this pixel value and that'll show more or less of the image Alright guys, it's great progress so far. Let's update it So we don't lose their changes and at any time in elementary You can click on the hamburger icon in the upper left and then click on View page. I like right click on View page So we keep the editor and the preview window open All right, so there's our text can't really see it So we're gonna have to change the font and the color a little bit, but we got good progress so far So to make the image stretch full width, we're gonna go back here to elementary you can click anywhere on top of what you're editing to get the tools back and I usually like just clicking on the section settings the six dots again. All right. Now, let's click layout and we're gonna stretch the section Perfect and make that content not boxed but full width Let's work on our text a little more and we can just click on top of that gray text to get the text settings back On the Left see our edit text editor. All right, so we're gonna now go to style for the text and For alignment Center it you can see it centered there. Although it's pretty great. And now we're gonna go to text color white That helps click on the color to get out of this window and Then go back to content and here's where a little bit of magic takes place and we're gonna make this title look like this title All you need to do is just highlight the text and click on the paragraph drop-down and then choose heading Maybe heading two That's not quite big enough though. So how about heading 1 which WordPress knows is a page title and voila. So now it looks identical Great job We can make this section even better though by adding a little overlay so that the background image which is nice and HD Just sort of blends a little bit more into the background So let's click on this section settings because that's where the background image is. It's on the whole section not on the text section all right, click on that and then click on advanced and then click on style and Come down to background overlay. So we're just gonna go with normal Classic background type click color and then just add a little bit of black There you go. So now we have a nice overlay. And of course you could do any color that suits you Awesome, and if it's a little bit too dark You can always grab the selector on the right and just pull that down to make it a little bit lighter perfect while we're at it we might as well change the title to something a little more descriptive like maybe welcome to our Nature magazine or gist nature magazine for short and Update now we can just go to our home page in the other tab and refresh it and maybe Elementor wasn't quite done updating but do it again and now we have a Perfect hero image and we've successfully put the text on top of the image in WordPress If you want to create a parallax image, that's also pretty easy because Elementor comes with that feature. Just go back to your elementary editor Click on the six dots for the whole section settings Make sure you're in the style tab right here and then come down to the image settings and for attachment we're gonna choose Fixed so that way the image is fixed and the text will move on top of the image. So they move at different paces So, of course there are other types of parallax images You can create where the images move at different speeds or with shapes around them or something, but this is perfect right now All right. So the elementary plugin was a perfect segue into learning about other plugins in WordPress Let's go ahead and add a few more so our blog is even more Supercharged and has more functionality Let's go to the dashboard and we're gonna hover on plugins and just click on plugins All right, beautiful. So we have these five plugins right now your plug-in list might be different if you got a different web host or if you just Installed some other ones when you're getting set up or maybe your friend told you about a plug-in But right now we have a keys met which protects from spam We have Bluehost which integrates with our Blue Hose control panel contact form seven, which is one of the best contact form plugins Probably the easiest one Elementor page builder and WooCommerce for an online store So let's add two more plugins to the site right now and to add a plug-in you can just scroll up and click add new And it'll recommend some of the best plugins, but we want to do a search for a plug-in called Guttenberg Blocks which will make your Guttenberg editor even more powerful there it is now just click install now and Then click the activate button and this is the gutenberg atom that has the most installation. So, you know, it's good All right, so you should see a few more settings now in your page or post editor when you're using the gutenberg blocks let's go back to plugins and you can just hover on it and click add new and Now we're going to search for a plugin called insert Headers and footers This one's not quite as exciting But it lets you put in code from Facebook or Google or something like that so that you can show Facebook or Google plugins on your site, so install now and activate alright, and of course if you want to deactivate or delete a plug-in you can do so all these plugins are free plugins and unless your site Really depends on a plug-in like for how it looks you can go ahead and deactivate and delete them with no harm and you can always just get them back through the plugins add new area where we just were so don't worry too much about deactivating plugins for example we could deactivate WooCommerce down here because we're not using an online store yet and our sites not going to break or anything and Then to save space you can click delete and ok annual zap it alright, let's go back to our home page now and let's make use of the insert headers and footers plug-in and We're gonna do a little Facebook page like box on the home page so let's do a search for the Facebook page plug-in as it's called and this will help people like your Facebook page and become fans from your website because everyone wants more of Those thumbs ups on your page Alright just click on the first link So this is something we pretty much always do in our videos and it's just sort of like a staple Trademark we do and it's really fun so we can just make a Facebook page if you don't have one like mine is dear blogger Facebook.com slash to your blogger and by the way, this is four pages and I don't know if groups will work here we have a really cool group to where you can ask anything about WordPress and This is just four pages, so I'll link you all that below the video But right now we're gonna put your page on the website So go ahead and drop in your Facebook page URL the whole link right there You can customize some things like timeline with height, but the default is pretty good right here We don't really need to change the settings too much Although like maybe you want to hide the cover photo, you know Just so they can see the like button more clearly would be one example of what you could do Once you like how your Facebook plug-in looks just click on get code Alright, and so there's two steps here, which usually trips people up, but we'll do both of them together So the first thing is going to be to click on the step 2 code you can just click your mouse anywhere and it'll highlight and Then right-click and copy that now head back to WordPress and we're going to click on our site title to go to the dashboard We can hover on settings and then we can click insert headers and footers So a lot of times when you install a plug-in you'll get a new settings for it. And here we are So all you need to do is just paste that code from Facebook in the top box for scripts in header What this means is basically just additional codes that want to communicate with WordPress It's good to put them in the scripts in header box so it doesn't show up on your site, but it's there in the background and Save it Next we can go back to the Facebook page area Click on the step 3 code and copy it and we can head back to WordPress in elementary. So now that we're in elementary It's really easy just to make a new little text area where we can put our Facebook like box So somewhere at the bottom of the page just click on that pink plus We're gonna make this just a full width area Now click on the boxes here to get the elements back and we're gonna drag in a text editor again And this part is actually really cool guys So in WordPress every editor like this one or a blog post, for example It comes with the visual tab and a text tab now the visual tab is just the words like you'd see in Microsoft Word and the text tab is All the different little pieces of HTML and CSS that WordPress will generate so that things look good So if you're in the visual tab and you highlight something and you bold it now in the text tab You're gonna see a little strong tag like this and that helps you learn how to actually put bold into the code because that's what the strong tag does holds it if we go to visual and we like put italics on something and Go to text then we'll see the M tag for italics So really good way to learn some basic HTML and CSS and a lot of the times when I'm creating a website I'll only do my work in the text tab in our case Let's just highlight all this and delete it and now right-click and paste that code from Facebook So that's how it works because we're in the text tab we can paste any code. We want like that and update it Alright, so now we're going to go to our home page. We've done those two steps And we're going to come down and we can see we have this beautiful and It took a couple refreshes, but now we see that our Facebook page plug-in shows up and looks good So sometimes in WordPress, you just got to give it a minute. Alright, really cool You now have a Facebook like box people can actually like your page Right in line with your website so they don't have to leave anyway, and they can also like your content like your posts Alright awesome. And if you want to Center your Facebook like box in the middle of the page, you can always go back to elementary and click on the section where you put it and we're gonna click on the pencil so we get inside the text editor here and now I'm just gonna click on the text tab and Around this whole piece of code I'm going to show you a little HTML trick which is to write Center like that with the alligator brackets and then at the end Right center again, but with the closed forward slash like that and Center All right, and that should Center just about anything and update it and refresh and voila alright scrolling down our page we can see there's some nonsense little widgets right here that WordPress came with like recent posts recent comments and So on to delete those widgets as they're called we can just hover on our site title and click on widgets All right. So here we are in the widgets area where you can also get to if you just hover on appearance and click widgets So these are the footer one little widget pieces and nonsense. We're gonna open them up and delete them Alright, and you can get them all back for free. They're just sitting on the left hand over here So if you want to get the search bar back Just click to open it and choose where you want it like footer one and add widget and you'll get it Then you can just drag it to the top. But for now, we're gonna delete everything so we can keep it simple Especially on a new WordPress website or blog you gotta remember that less is more All right, so we're just opening each one of these tabs and deleting Let's let the categories Lastly delete the meta which is the login because you know how to log in you don't need that meta thing You just go to your domain name.com forward slash WP admin and now when we go to our homepage It looks a lot neater perfect to set up a couple more pages in WordPress You can hover on the skinny nav at the top where it says new and click page So we're gonna give ourselves an about page. So just up out and publish And we can write a little something about us like this page is where all share my mission statement and goals for the Blog and Website because we've got both to them We got a website with a blog and now we're gonna update that then we can quickly repeat the process by clicking add new on the left And let's give ourselves a contact page. So contact us or whatever. You want to write. We can write some text in there too. Like this is where You can reach to put a contact form on the contact us page Let's just make a little space beneath that hello and we're gonna publish the page so we don't lose our progress Now we're gonna jump over to plugins and we're going to use contact form 7 which we installed earlier For a contact form 7 you can just click on settings Now click on the shortcode that the plug-in generated for us Which will show a basic contact form and right click copy it we're gonna take that back to our Pages app Open up our Contact Us page again by clicking on the title Now just put your cursor down in this new block and we're gonna right click and paste that shortcode Perfect And let's update the page. All right, we can see what that looks like by clicking view page and Awesome. So not only do we have this cool text. We have a contact form that looks good and it matches the theme of our So whenever someone pops in their name email subject message and hit Send that'll go to whatever email address you have inside WordPress settings Which would be in your dashboard? Settings General All right, so this email so now that you have a few more pages on your WordPress website we can make a menu in the navigation area that actually Organizes those page tabs aka page links to make a menu. You can hover on the site title and click menus Menus looks super confusing at first like what are we even looking at here, but I'll walk you through all of it So first we need a menu name. So we're gonna go with the main menu and then click the blue create menu button This is one area of WordPress that over the years has pretty much remained unchanged next in our add menu items area Just click on View all on the pages and we can choose our blog about and contact us And click Add to menu and those will populate in the little menu structure area right here We can click and hold on these tabs to drag them in the most logical order and now in menu settings We just need to choose where this menus going to go. So let's go with desktop or it's not till desktop expanded and Have a mobile and save it now. Let's open our site in a new tab and see what we made so now we get the links across our screening which is like the normal menu style and we get the Expandable menu with the three dots So it's pretty cool. This expandable menu is like a new feature of the 20/20 theme So let's keep this menu and get rid of this traditional link menu Go back to menus and just get rid of the desktop horizontal menu and save it Awesome, if you're used to having a home button in the menu, you can add a custom link. So that's right here Just click custom links and then we're gonna type in your homepage So to do that we can just copy our site URL at the top and we're gonna paste that over this little URL Paste it and give it the link text of home and Add to menu and Now drag it to the top and that's how you make a link to the home save it and refresh and we're good to go and we can see that if we drag the corner of our site in and make It mobile we've also made a mobile menu. So now it makes perfect sense Someone will just click with their right finger in the upper right and they'd get a menu to navigate the rest of this site Awesome. So now that we have an about page and a contact page that look good Why don't we work on our blog page a little let's click on the link to blog And we can see we have our first blog post here. But let's do a little more work. Let's click to the dashboard and Click on posts now to delete a blog post at any time you can just click on the trash button and Then this blog post will live in the trash area if you ever want to get it back. So here's the link to the trash let's click add new and There are three types of blog posts that I think every new blog should launch with that really have promoted success on my past blogging ventures So we already have a welcome to the blog post and the next one you should have is an ultimate guide To really whatever you do The ultimate guides are traditionally long-form content Lots of images lots of explanations some definitions some videos Basically something that ranks well in Google because Google loves long content We don't have the time to create an entire ultimate guide it but I'll leave you links to some examples in the video description For now, I'm just gonna grab some pan Epsom Which is my favorite site for creating like default text placeholder text so just click on that and then you can choose what kind of text you want like catnip some Cool Katsaros in and then you just click generate new ipsum and it gives you some Like catnip some and it'll generate some text for you So then you can just highlight it and copy it and take it back to your site Alright and paste it in and that was relatively pointless. But at least we have some content right here Don't forget that your blog posts need a featured image So if you click on document, you can get back to the featured image set featured image Go to our media library We don't have any pictures of cats yet. So let's look up cats in pixabay All right, there we go choose the first one free download download Ultimate guide cats and save it and Just put that image in the featured image section click select files Double click on the image to upload it to you new WordPress If you have visually impaired users it helps to create alt text. This helps screen readers determine what a picture is about when someone can't really see the picture and set featured image and publish and publish Let's click add a new post one more time And the third type of blog post your site should have is a controversial piece Something that distinguishes you from other bloggers in your niche and shows that you do it differently So we're gonna call this one Controversial piece. All right, we can put that cat Epsom in again Reuse that we can go back to pan Epsom and get a different kind of Epsom this time Maybe we want to get Dungeons & Dragons ipsum All right copy that Throw that in wordpress and here's our controversial piece We're gonna go to document and now we can click on featured image and we're just gonna use the picture of the family camping right now Set featured image are at perfect. So this should work for the sake of our example. Let's just publish it Alright, if you want to share your blog post with friends via email or social media You can always copy this link right here and put that wherever you want to share it and then share it Let's go to our home page now and let's see how our blog looks So we're gonna click on the menu blog and Beautiful. So we have a controversial piece ultimate guide to whatever you do and welcome to the blog and the reason to welcome to the blog post doesn't have that big image is because we didn't put up a Featured image we just put an image inside the blog post to take advantage of wordpress 20/20 themes Different blog posts layouts we can just edit one of the blog post Click Edit post And now just like we did with the home page. We're going to add a different sort of column beneath this block right here So here the text. It's in our first block We can hit enter beneath it to set up a different block and you can do that as many times as you want But we really only need a couple blocks To delete a new block you can just put your cursor in the block and click delete and it'll go up to the next block So let's set up a few more columns We can click on the add columns button and let's try the second option now click on the plus to add some content Let's go with an image Media library Media library and if we're in the upload window, we can't get an image from pixabay. So cancel now, let's go back to pixabay let's look up a standard image of a beach and now we can just click and grab one of these images and in free download and download Name it and save it and let's get one more beach image Do another search again? Alright, this one looks really cool little Cove right here free download download and Name it and Save it. Alright now back in our blog post we can just upload that image upload We're gonna choose both to select and hit commander control and select double click the image Beautiful then I'm gonna grab some of this text right here Copy that and put that in this block right here. I'm gonna click plus Paragraph and then paste it in next Let's move our cursor to the outer area right here where we see these small died lines and click on the columns And here we can change things like vertical alignment or Make the column full width. All right, awesome. So that would stretch it across the page. Let's create one more block Just so this page looks nice and clean We're gonna hit the columns and we're gonna make this one the fifth layout which I know will be popular among you guys Because this one allows the skinny column then the fat column and then the skinny column and it's gonna look Especially good at cross the whole screen So let's start by just putting some text in the middle Click on the plus paragraph again. You get the picture and pay text. All right now, let's click plus and grab an image upload Double click on the beach Cove or whatever image you got from. Pixabay Cool, and now let's click on the column on the right. Click plus image Upload, and I'm too lazy to go back to pixabay. So I'm just gonna grab this Blue Host logo I have from making a different guide Alright cool. And now we can stretch this blog post layout across the whole screen like we did before Let's just click on the outer settings for the columns and then change alignment - how about wide width? We can try that one. See if it looks any different Alright cool. So now let's update the page and let's see the different layouts we made or Update the post. I should say you can use preview. If you want to check out your post before the changes are made I know I used to when I was really nervous about publishing blog posts. So they look perfect But now I just go with the view post and the publish because I'm not too nervous anymore so we can scroll down and see we have our block of text and then our second block of text and Our third block of text and we've established three different blog post layouts cool If we look at this post from the view of the blog page, we're gonna see a preview of it It's not really a preview like you preview a blog post It's just a preview in the sense that it's like a short version of it Or maybe it'll show us the whole blog post, so if you don't want to see the whole blog post But you just want to see like a read more link. You can go to the blog post Edit post and Then at any point like after the image of the beach and the woman we can click plus to get ourselves a new block Close up the most-used and come down to layout elements and just choose the more All right, so that will give us the read more button Let's just click and drag it up though. So it's in the right section with this lady And beautiful now, let's update and let's see how that looks. So if we're on the home page, and then we're on the blog page Now we can see we scroll down and we shouldn't see quite as much of this post So there's just a continue reading button instead and it looks like we got too many of those buttons. How did that happen? Let's go back to the blog post Edit post, I guess this read more button is not in the right place so why don't we try to put it instead beneath this block of text instead and update head back to the blog page and That makes a lot more sense so now we have a perfect looking continue reading button and if you click it It'll take you right to the part of the post where you should continue reading at. All right? Awesome so Alessa We can add a gallery to our blog post because I know some of you are gonna want a gallery You can click Edit post and I believe there is a block for a gallery let's just click plus at the bottom and we're gonna go to Search for a block and gallery and there she blows click on gallery and now let's click on media library Media library and then just like you would add an image. We can actually just select multiple images now Alright, so we have seven images here and we're gonna click create new gallery inter gallery Beautiful. So WordPress knows right away to organize them and this cool masonry style layout we're just gonna update it and then we can see What it looks like and just for fun. Why don't we add a little border to it? So a block let's go for the separator Choose that and then we can just drag this guy up above Not sure why the page isn't scrolling too well right now it seems to want to like have whatever we're looking at be in the screen, but I can hit command minus and shrink it and there we go Alright perfect. You can see how easy the drag-and-drop is once you get the hang of it and update and view post and There we made a gallery of course using your own blog content. I'm pretty confident You can make something even more beautiful and more symmetrical and a lot cooler looking but now you have the skills to do it to Make yourself a logo so we can replace this site title at the top. We can go to logo maker com That's l OG o ma ke r comm Just click in the gray space to get rid of the video And now we're gonna search for a graphic like a compass and as it said there are millions of graphics once you find the graphic you like just click on it to put it in your canvas here and then click and drag it and You can click in the color wheel to change the color Awesome. You can click on the T to bring in some text and then just start typing so our site is called Bluehost set up So I'm gonna make Bluehost set up Dot-com and Click and drag it and it'll even line it up for you You can of course change the font by clicking on top of your text and choosing from the font categories Like designer picks and then just choosing the actual font itself on the right awesome and You can change different colors in the image. For example by clicking on the paint bucket. Then choosing a different color like maybe a nice Purple and then you just need to click on top of the image where you want to change it So it takes a little precision, but you can just click and there you go Awesome Once your image looks good, just click on the cop button in the lower, right? It's gonna guess how much white space you should give it and you can bring that in So there's less white space around it then click on enter to actually cop it and click on the floppy disk in the upper Right to save it Now we're gonna say no. Thanks down the low resolution make sure to give credit to logo maker com and now we're going to save it as Bluehost setup logo Version one and save it now we can go back to WordPress and this is a perfect transition to get us into customize So in order to change the logo and actually replace it We need to click on customize in the upper nav for our first time. So we have a ton of blog content That's all done Pretty much and customize is where we change the style of our blog content the first place we're gonna want to go to is cite identity and right here, we can change the site title itself like, you know, Make a different site title and the blue setup will go away and you can also change your tagline Now we have the option to select logo. So let's click that select files again Go ahead and double click on the new logo. We just made Click select we're gonna skip cropping And the logo should insert itself awesome now, let's click publish And exit and see what we made Awesome work So we have our new logo and our site tagline in line with each other looking good So next I'd like to walk us through every part of customize So let's click on customize again where we installed our logo Because the theme developers like the people at WordPress and onder's Nairn really intended us to design in customize and build In the block editor like when you click new post or new page Even though we're using Elementor to make ourselves a little more powerful and cool. They intended us to use mainly those two things Customize and the block editor. So I want us to explore customize to the fullest. So clearly we already covered site identity That's where you do the logo, but there's one more part to it Which is a retina logo and beneath that there's a site icon So if we click retina logo, it'll just scale the logo to half its upload size and make it look better on high-resolution screens That's not a terrible thing a lot of sites. Like if you visit Apple com use a really tiny logo so they can maximize what you see on the homepage like their products and their offers and their links to the important pages so that's something to consider and then we have a site icon which you definitely need so we can replace this little globe icon or Maybe it just looks like a piece of paper. You want to have an icon that goes on the browser tab? So what we can do is go back to logo maker Hopefully you still have it open exit out and we're gonna do another crop But this time we're gonna drag in and crop it so we only see our logo icon So we're getting rid of the text try to Center the whitespace and now I'm gonna hit enter and Save it again Go for the low-resolution file and call this file. It just fav icon. Perfect and save it So now back in customize we can click on select say icon and we can just go to the Select files and bring up our cite icon double click on the icon and Beautiful for some reason I think it got in there twice. I'm not sure how but either one is good We're just gonna select it. Skip the capping and there it is. Perfect and publish So that does it first site identity now, let's go back and let's see what's going on in colors So in colors, we can choose a background color, which I believe will apply to Anywhere on this site where there is a background So this is like the body of your site and the body can have a different background color the header up here Where the page title is is not going to get that back on But we're actually gonna learn how to remove this area in a second But then if you wanted to change the header and footer background color Let's bring this back to white because greens not gonna work for us And then actually you can change the header and footer Background color right here, and that one should do it on the upper area and also on the footer so pretty cool Whatever you want to do you go for it and actually kind of like that blue But white is their color for now You can also choose the custom color blue and this will apply a color for any links buttons and featured images So not bad if you wanna change the color of your links So people click them more if you think there's a better color to go for that but defaults really good So that would be colors. We can go back and we can click on theme options next This will let us show the search button in the header All right, so generally like having that pretty standard feature that helps people get around your site look for your blog post really quickly once you have a ton of them and Then on archives pages post can show the full text or this summary So I'm pretty sure that means that it's gonna be a summary on pages that are like a category page Or maybe even on your blog page, but full text is good plus You know how to show that read more link if you want to cut off the text All right, let's go back and let's hit cover template and see what's going on there So these are the settings for the cover template page template If you're on one of the pages like our about page and you choose cover then there'll be a fixed background image Overlay background color you can change that and over like text color You can change that and also the opacity of the overlay which will go on top of the image We can also check out the background image area So this is if you wanted to have a background image on like every page I think including the home page You can put an image in there Pretty cool feature and you don't have to use any CSS to create a background image in WordPress like we've had to do before Next we have our menus. So this is the same as going to appearance menus you just get to edit your menus in this little screen if it looks better to you so we can change our Tabs like drag them to different orders You can also create dropdowns by indenting them and other useful features are creating the footer menu and the social menu So why don't we try doing that right now? Let's go back and let's click create new menu And we're going to call this one the social menu Which will obviously go in the social menu menu location And then let's click Next and add some links. So add items wants to be clicked bouncing around. Let's do it Alright, so because this is a social menu, it's pretty clearly needs social links for it So I'm gonna do custom links and I'm gonna start by going for our Facebook group So if you can grab that from the internet, I'm just gonna look up dear blogger group Facebook So we can grab those links from the internet. They are alive now. All right Copy that and paste that in the first link just paste it over that existing HTTP colon slash slash Facebook that's Benny you let me do that again for Twitter. All right, so Twitter a little bit easier to get just forward slash my name and you really should follow these pages I answer a lot of questions every day. It's super honestly for free it's a great way to get really quick WordPress support when you're stuck help you get unstuck paste it in and Twitter and Add to menu Nailed it. All right. So let's publish it with those two and let's see what it looks like Now we could scroll down Wherever the social menu is, I'm not even sure And there we have it. So just like that We have some cool social media icons set up on our new WordPress site Of course, you can go crazy to you with you know, Instagram LinkedIn. Snapchat Rumble grabble reddit, whatever you use I don't even know all the names anymore. Okay, cool So we've covered the menus now, let's go to widgets and just like menus widgets is the same as going to appearance widgets This is just a way to put more stuff in our footer and we don't have a ton of content now Maybe when you have comments and you have like more about us information or a map, for example You want to put that in the footer but for now, okay, fine. We'll learn how to put a map in the footer Alright, so if you want to put a Google map like a lot of businesses do so It's like people can just see where they are right away. Just open up footer one. Click add a widget scroll down and go ahead and jump into the Should be a custom HTML option right there Alright we're gonna call this one our Location now we're gonna go to google.com slash Maps and we're gonna search for Chelsea Market In New York, which is pretty much the only office I have at the moment Whenever I'm in, New York I go to the YouTube headquarters there and get a little work done if you're around and hit me up we can grab a coffee and of course, it's free and delicious that wraps and Anyways, we want to grab the map location. So what we're gonna do is go to share You might have known you could do this. If you use Google Maps to like find your restaurant, but you can actually click embed map And you get this really cool iframe source. So just click copy HTML Super easy and it syncs with WordPress perfectly. So we're going to come back to our location here and paste that in HTML And publish it and that should be it when we scroll down. We have a nice-looking map. How about that? Super big and the coolest thing is people can click and search and zoom right there from your website So they don't even need to leave. Ok, we can go back now. We're almost done with customize We're gonna click homepage settings and this is where we have the home page, which is the page We made called home, but we renamed it to welcome to our magazine And the post page is blog It's so that's just standard web developer Protocol and you know it and we can go back and lastly we're going to hit additional CSS and this is the end It's just a blank window and most people think that this window does nothing but let me show you how to make something out of Nothing right here. And this is actually one of my favorite parts of the tutorial So we're gonna learn how to get rid of parts of your website Using the display:none command and literally just by writing in our own CSS and HTML into this little window We can remove stuff from the website You don't even need to delete it and it's really helpful when there's a pesky website feature You just can't get rid of so let's work a little magic here the first item we want to get rid of is of course this title I Think that makes sense to get rid of it because we already have that on our beautiful hero image in the middle of the image So what you need to do is first of all, I hope you're using Google Chrome but if you're not if you're using Safari or Firefox It should work fine. It'll just look slightly different in terms of buttons. You click but like I said I think it should work fine. So what we want to do here is just highlight the part. We want to get rid of right click and hit inspect and Once you do that you're gonna get this little console and elements down here and what you need to do is find the right area and Hover on it and you'll know your mouse is hovering on it because it becomes selected. All right Sometimes there's duplicate areas like you can have the inner area and the outer area and it will take a little bit of trial and error but in our Case I want to grab as much of this section as I can So instead of just grabbing like the welcome to our magazine part. I really want to grab welcome to our magazine along with the Green space around it to get rid of all of that. So here I'm hovering on the green space I'm gonna click on this line of HTML So it's highlighted in blue and then I'm gonna go to the right and I'm gonna click on my mouse Somewhere on this great out little command area Clicking there, it will highlight it and you need to right-click and copy all that sometimes It's just a couple pieces of words or like one sentence. But in this case, it's a lot of stuff so with this section copied we're gonna close this little X box right here and we're gonna come back to our custom CSS window and right-click and paste alright, and then we're gonna make a space after the end of it and do an open bracket just like such I'll zoom in so You can see it just hit enter see have a little room to right and then right display : none Semicolon and you get rid of it So in this case, it looks like we were a little bit aggressive and we got rid of the whole site header so if we publish and We check out our site We've gotten rid of like everything at the top now you might want that But I want us to keep our logo in our menu because we worked hard on them So let's go back to the customize window and try again And like I said, it takes a little bit of trial and error So we're gonna do is just delete what we wrote whole thing and highlight it welcome to our magazine again, right-click and inspect All right. Now, let's try something a little bit smaller. So instead of the entire area with the green space Let's just try this area with orange base. You know what better yet. Let's just try this title itself so just the part that highlights welcome to our magazine or whatever your page title is and this time I'm just gonna target the Actual header itself. So just where it says welcome to our amazing Alright, so make sure we're selected on to that line of HTML Now let's go over to the right and let's grab these couple sentences with the click So h1 entry title and h2 into title and right click and copy that all right Now we're gonna paste that in our little additional custom CSS window here Paste and again make a space now make a space after it Bracket hit enter and now again right display no and perfect. So that did the job now We got rid of the title The only concern is that that might get rid of the title on every page and we just want it removed on the home page So to make sure that's the case Let's go back to the home page itself and click Edit Page and you need to locate your page or post ID Which at the top is where it says post equals this number right here So I'm going to remember that number, so I'm going to remember that number It's a so, I'm gonna remember that number 12 and come back to customize now We're gonna put our cursor at the front of the h1 and right period or dot page - ID - 12 space and that will make sure to target just the home page and remove just the h1 entry title H2 entry title on the home page. So how about that? You just learned how to use some CSS and apply it to the HTML that's already on your WordPress site I know you chose wordpress.org a little bit because you'd be able to edit the code and customize everything So, of course, we're gonna learn how to edit the code and customize everything There you go But why stop there because we actually want to remove this white space at the top and some of the white space in the middle Of the homepage as well and I want you to know how to do all that So now that we've written this one beautiful line of custom additional CSS Which stands for cascading style sheet, let's right-click on the whitespace. You want to remove and get back to it? We're gonna hit inspect And we can see that it's right away highlighted in green. So what does that mean? well we're right here on this line of HTML and we're gonna need to go over to the right and scroll down a little bit because some white space is obviously Padding or that white space is margin, but when the white space is green, its padding and when it's orange its margin So I've found some padding here and I want to know if this is the right area. All right So here we are. We know we're highlighting the right area. But I want to know if this part on the right is correct So I'm going to check it And we can see it is correct. This is what's going on. There's some padding of eight r.e.m There that we want to get rid of. Okay, cool So I'm gonna do is like before I'm gonna click in this area and highlight everything up here Just kidding. Everything right here is what we want to highlight not the @media part and then like before we're gonna right-click Copy it And close it out. All right, and then we're gonna paste that in here I usually like leaving one space in between the last piece of CSS and the next one Then do Open bracket enter and right padding colon zero Semicolon and you did it perfect. So the first CSS we did was display:none which as you can tell means You know display nothing there. We don't want none of that and the second piece of CSS We did is just padding, which is white space in code speak and we want that to be zero padding All right. Keep in mind guys If you get any part of this wrong if you miss some punctuation like the colon It just won't work and you'll wonder why because you wrote it out, right, but you miss some punctuation So that's got to be perfect and publish Okay, so we can scroll down and we can see that there's a little bit of more pesky whitespace Right above this Facebook like box right here So I'd like to show you another way to get rid of that white space and that's just to do it in elementary so our homepage uses the elementary page builder because elementary made it really easy to set up this text on top of an image with the parallax and When you use Elementor on a page you want to keep elementary on a page? You don't want to go back to using the WordPress block editor So let's make sure you published and X out of here now that we've covered all of this Customized area a great job, by the way, and we're gonna go back to elementary on our home page So here we are on homepage looking beautiful. Let's go back to edit with elementary scroll down alright, and then we're gonna scroll down to this section beneath the hero image click on top of it and make sure you can follow That light blue line to see exactly where we are So that goes all the way down beneath our video to the Facebook like box and we're gonna click on the section settings the six dots now make sure you're in advanced and unlink the padding and Just make it zero Alright, so that will make sure that the spacing is less if you want to do the same for margin Go ahead just pop a zero in there, but sometimes it just doesn't do much now I'm gonna click on our Facebook like box section. So the six dots for that section go back to advanced and unlike the padding and You can see right away became zero and the spacing got reduced awesome Alright, so that's how it's done in elementary just to remove whitespace You gotta do advanced and then remove the margin or the padding We can also get rid of this image here because it's kind of a duplicate. We already have the image at the top So I'm just gonna right click on the pencil icon and that's gonna be a delete so that's how you delete Individual things or you can hit command C if you delete it too much in my case I actually just need to open up this section right here and get rid of the image by editing it Go into content and just clicking on the image and deleting beautiful Alright guys, you really mastering WordPress 2020 and elementary. We're almost at the end of our tutorial great job so far Let's update and one of the last features I want to show you how to do is just a button So a button to really get under the hero image to get people to different parts of your site like a land page an offer Wherever you want them to be just to like submit content to you or do whatever So now we're going to hit the plus So there's another space in between the hero image and our page content and then we could just drag a button in right now by Clicking and dragging but I actually want two buttons because that looks cooler. So we're gonna grab the intersection pop that in there That'll give us two columns and if you want more columns a little trick is you can right click on the column button right here and Duplicate it. And now you have three columns for content I'm gonna hit command Z though because we only want two and now we can go to our elements by clicking on these nine dots and grab button one pop it in there and Button, two and pop it in there Awesome to make your button centered in the middle. Just click on the Left button right here And make sure it's alignment is to the right we can get rid of the space around the buttons by of course going to advanced and getting rid of the padding all around them and The margin if that doesn't do much it's really because we're on the wrong section So we just changed the button margin and padding but instead of doing that. We actually want to change the padding on this intersection So click on the intersection settings advanced and now it's time to remove that padding cool and that margin just for good measures All right. Now, let's make those buttons totally you so we're gonna click on the first button Edit it with the pencil icon Go to content and we're gonna change what it says. So Learn more is always good. You can do all caps if you like And this link is gonna go to our about page So what we can do to get our about page is open the site in a new tab click on our menu And then just right click on the about and copy the link address That's a common WordPress move. Now come back and paste that over the hash brown right here Beautiful you can also make the button bigger And you can change the color You can change the type of the button So, you know These are just different types of buttons Different colors that apparently work for someone but I like go in with the custom color and you can click style to do that Then just click on background color click anywhere in this little window to change the color. And of course, there are millions of colors to choose from I'm gonna go with a nice dark grey there and And we can change the other button as well. Click on top the other button or do the same thing We're gonna make the link go to our contact page though. So right click Copy address and come back and paste it over the hash brown Alright and that'll help people get to our contact page to sign up or you know book a trip with you whatever it is You're doing on your site or your blog? Make it large. All right, we got to change that text. Of course. It doesn't say click here. So this is gonna be Book a trip just as an example and uh, yeah that green color is actually pretty pleasing we can get a style and one of the coolest parts of buttons is you can actually change how they interact with someone and why don't we change the hover just for fun so click on hover and Now change the background color to something different like totally clear when someone hovers on it or for example You go with a different green like here's green. You could make it just become like a little bit darker green Super subtle. And so now when I hover around this button, it'll just become a little bit interactive So ooh dark green Maybe I want to click that now click on the color to get rid of this little window you can also give the button a border and you can make it have box shadow if you want to and You can curve the button more by choosing a border radius in our case I'm not going to go with the border or the radius or the shadow, but I do like hover animation You can click on that and make the button to even more puls for someone So that's pretty cool. If you want people to direct their attention to a certain button, alright and update I'm just gonna add in a little more text just because I want there to be a little more text now Let's click on the hamburger and view page And Awesome, great work guys last but not least. We want to change the footer copy right down here So how do we change where it says, you know site title pod by WordPress and customize that for you? All right, folks are the final pieces of the puzzle are to change the copyright at the bottom? Let's do that right now and then we're going to change it so it doesn't say site title in our browser tab, so to change up your Copyright area at the bottom. We're gonna go back to the dashboard We gotta actually dig in a lot of the times in the default WordPress theme they hide the copyright section and appearance editor So it's kind of a cool way to end the tutorial I'm going to show you basically the keys to the castle and all the code. So click I understand and then it's up to us basically just to find this section and with a little bit of searching around and some Guesswork from previous themes edited I'm gonna take a while guess that it's in theme footer So click on that and scroll down and it might not look like what we want to see it first Like it might not look like site title pod by WordPress But if you look really close at the right area, you'll actually see the words powered by WordPress So, you know you're in the right place ok? So what we're gonna do and I don't recommend this if you don't have a teacher here like me but you do so you're fine is go ahead and highlight everything in between the P class equals footer copyright that I've highlighted and in between this P right here, so that Would be the and copy which is the symbol for copyright. This is like what translates into the copyright symbol we're gonna actually leave that and we're gonna highlight everything except that up to this bottom a and I'm just gonna hit command X to cut it and now we're gonna write in our own custom footer so copyright 2019 and then if we want to make a link we can do a link to the YouTube Channel so you can do an open alligator bracket This is just how to make a link for a future reference for you. You do a space hf equals Quotation mark quotation mark closed bracket, and then it'll close off the a so if you just want to write greg narayan in Between these two alligator brackets like such so that that becomes our anchor text for the link Then I'm gonna go to YouTube My channel here at user slash Naga, it's just a nickname that my good buddy Shawn's made for me copy that and come back to Well, trying to blank the appearance editor and paste that in between the quotation marks You can also do make sure that quote doesn't get removed at the end. You can also do a target equals underscore Blank in quotes to make it open in a new tab. All right, so it does it let's update And now let's refresh and awesome, which made her own custom copyright footer with a link to wherever you want to take people that can link to your theme like An affiliate link, whatever you want cool And now we just need to change where it says site title right there because that looks really weird so I think that'll change on its own because We can see the site icon in some windows and others it's not there You just need to really clear the cache shape. And if you're in chrome, you can get this exact clear all cache a button I have that saves you a couple steps. It's a clear cache a shortcut and it's a chrome extension called Clear cache a shortcut you need to search for extensions in chrome Alright, so that should do it and then our actual site title and our icon our favicon should show up soon All right guys in y'all so that does it for our tutorial. Thank you so much for watching I really enjoyed making this for you And I hope that you make a better blog and make WordPress and the whole web a better place with your new blog slash website The final step to launch your website is just to click on the green or no, that's orange actually coming soon active button Alright and then where it says launch your site here in this little Bluehost dashboard that you get You're just gonna click on launch your site and that's gonna get rid of the coming soon page Because right now you can see your site as it is like as we're building it but when other people look at your site if I opened up like an incognito window by hitting command shift and other people just see this Which is no fun at all So we are gonna get rid of this little landing page default screen from Bluehost by clicking launch your site So if you're gonna do that, I'm ready And let's move on with the world and with reality and let's just make your site become a real thing All right now we can click view site and you are officially live So again, thanks so much for watching guys If you learned anything here, please make sure to smash the like button that would mean so much to me That's like the most free way of saying thanks to me and letting me know that you care Please make sure to subscribe and hit the notification button that little bell So you get WordPress tutorials, right? When I publish them it would be an honor to have you in our subscriber community here on the YouTube channel can't wait to talk to you more and Yeah, that's it. I'm Gregg Narayan. Thanks so much for watching. I'll talk to you soon
