Twenty Twenty One Theme - Create a Niche Website! | David Utke | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Twenty Twenty One Theme - Create a Niche Website!

teacher avatar David Utke, Web Pro and YouTuber

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

18 Lessons (1h 49m)
    • 1. Course Intro

    • 2. Get a Domain Name and Hosting

    • 3. WordPress Install and Setup

    • 4. Create a Homepage

    • 5. Hero Image and Call to Action

    • 6. Write a Welcome Message

    • 7. Design a Visual Menu

    • 8. Add Blog Posts

    • 9. Bio and Email Opt-in

    • 10. Logo and Favicon Design

    • 11. Making Menus

    • 12. About, Contact and Legal Pages

    • 13. Blog Post Design and Layout

    • 14. Add Related Posts

    • 15. Hide "Powered by WordPress"

    • 16. Install Analytics

    • 17. Additional Customization Options

    • 18. Conclusion

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn how to create a professional, responsive website and blog using the FREE Twenty Twenty One theme from WordPress.

The Twenty Twenty theme One was released as the default theme for WordPress in 2021 and has numerous design features. An easy to edit header and footer, great looking responsive blog posts and an overall minimalistic design that works exceptionally well with theĀ Gutenberg editor.

In this course we cover from step 1 to step done about how to create a personal or professional blog with this amazing theme:

  • Get a domain name from a Namecheap (a domain registrar).
  • How to get a shared hosting account at Bluehost.
  • How to properly install WordPress.
  • A complete design tutorial on how to make an impressive looking website and blog.
  • Pro back end settings, permalink and security tips.
  • Advanced customization features for the Twenty Twenty One theme.

The Twenty Twenty One theme is perfect for anyone looking to start a professional looking website that can be customized to a high degree. Multiple design options for pages that is also responsive for multiple devices. This theme is perfect for anyone wanting a blank slate theme to design upon.

This course is a complete guide on how to create a professional website and blog using WordPress on a self hosted web host.

Meet Your Teacher

Teacher Profile Image

David Utke

Web Pro and YouTuber


David Utke is a professional blogger, web designer and a highly rated user experience consultant.

Starting in 2009, David first began learning web development and WordPress for his own online projects and now translates technical skills in an easy to understand way for beginners with his educational courses.

He currently lives abroad, travel vlogs as a hobby and runs his online business from cafes and workspaces.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Course Intro: Welcome to the course. My name is David. I'm going to instruct you from step one to step done how to create a website using the 20-20 one theme from WordPress. The 20-20 one theme is a fantastic free themes. It looks great on mobile devices. It has a minimalistic style that I think you're going to really like and appreciate. And it's optimized to work really well with the Gutenberg black editor, which is the default block editor that comes with your WordPress installation. As this is a step one to step down tutorial, I'm going to cover all the steps that you need to know in order to create a website using this theme, that means we're going to be getting a domain name at a domain name registrar, we're going to be getting a shared hosting account. I'll show you how to properly install WordPress and design your website. So if you're ready to begin, click that next video and I'll see you on the inside. 2. Get a Domain Name and Hosting: Welcome to my laptop. Let's begin. So this is the website I'm going to show you how to design. And this is completely using just Gutenberg ND 20-20-20 themes. Pretty impressive. So I'm gonna show you how to set up a logo menu bar. How to set up this nice call to action, and then how to add different elements to your website, like visual menu for a specific pages on your website, maybe another section for like a call to action. How to add in like your weight as blog posts, how to add in like maybe a quick little bio about yourself and email opt-in form how to properly set up the Footer by adding a disclaimer your legal pages, how to hide deep powered by WordPress option there, as well as a custom information about like how to properly set up the blog page to have feature images, appropriate categories, how to set up breadcrumbs as well as a disclaimer for each individual blog posts with ease, as well as how to set up an About page and a contact page. So let's begin. Well, let's get a domain name. So the first step in getting a website setup is to register a domain name at a domain name registrar. Now most of you may be more familiar with something like GoDaddy, but Name Cheap is my preferred register because they have better prices than GoDaddy, and they also have much better prices than any web post we can get your domain anyways, so get started. It is very simply just type into domain name that you want to register right here. So I'll type in my amazing website, Alright, let's go ahead and click on search. And there we go. So now it's 80 a year into. Just get started. I'll introduce Add to Cart now if it comes up as not available, then you may have to type in a different combination for You can also jump into BCE mode and kind of narrow down things of different like TDL is that you want to use like if you want to get like dot org, but I definitely suggest sticking to a dot-com. Anyways, just click on Add to Cart. Okay, and let's go ahead and click on Checkout. And that is it. Ok. And so now you just have to confirm your order and submit payment. You will have to create a named cheap account. And there you go. And that's how you register a domain name. So for the registration, you can have auto renew on or off. That's totally up to you. And you can register your domain name for up to ten years in advance. And so it's up to you how long you want to register that four and then you get who is guard with named Shiba for free. And what this does is it keeps your contact information private because part of I can rules when he registered domain is you have to provide accurate, up-to-date contact information. Who was guard just keeps everything private and you get it completely for free. Name cheat in anyways, that's how you register a domain name. Now we're going to get a shared hosting account. So what a shared hosting account is just a small piece of an industrial strength server that's on a 24-7. So your website is available 247. Now the shared hosting account that I really like and recommend for beginners is blues. Primarily because they are the number one recommended web host by Blue Host, They are very user friendly. They provide good support and their just overall a good user experience. They're easy to use and they provide good hosting. Anyways, he gets started with blue hose is very simple. You just click on this big Get Started button right here. All right, so now you should be looking at their pricing table for their different plans now, honestly, I recommend plus, plus this is what I had PTSD count that I personally use in half. This is a account where you get enough resources to build your website to over 100 visitors a day. And once you're at that level, 1000 visitors or more a day, then you can make that decision whether or not you want to move away from Blue Host and go with a weapons that's more geared for larger websites or upgrade to their Pro plan, whatever. But I really liked her choice plus plant. Now they're basic while very affordable, you only can have one website. So for me that's a deal breaker there. Plus Plan is pretty good too. But it just like the choice bust because it gives you enough resources to really build a website, to a really skillful website. And also you get a great deal, thank 36 months at 545 a month. Now it does renew at 1499, but you can lock in this low price. All web hosts do this. They offer very low rates as an introduction rate. So I definitely recommend 36 months. That's a lot of time. That's a great price. Anyways to get started, just click on Select. All right, so now you have to select your domain name. So either create a new domain name or use a domain name you own. Now if you go here to create a new domain name, I don't recommend this because this is going to register a domain name through blows and Blue Host charges, I think 1799 per domain name, worst Name Cheap, you're paying 88. That's why we use named sheet because we save money in their proper domain name registrar. Instead we want to use a dominion we own, which is what we registered at named cheap. So just go ahead and put in right here. And now you have to create an accountant. So I'm not going to insult your intelligence and walk you through how to pay for something online, just fill out your account information to come down here, make sure you have your package information. You can select 1224 or 36. Right down here, we can uncheck site lock security essentials. We don't need that, so just go ahead and unclick this. Ben's come down here, put your credit card information in, come all the way to the bottom, say that you have read and agree to Blue Host renewal service in terms of use, and then click on submit and you're good to go. Welcome to So once you submit payment, you're going to be presented with an onboarding process. You can just go ahead and click on skip at the very bottom of the webpage. Just skip, skip, skip because you have this tutorial to follow so you don't need to do the onboarding process once you get here, this is your dashboard. Now right up top here is where your domain name is, but you should be looking at something that says like Box temporary 1234. That's totally fine because you've registered your domain name cheap. So we need to do now is set up the name servers that named cheap to have them point to your shared hosting account. And we're gonna show you how that's done. So you have a domain name and a domain name registrar, and you have a shared hosting account. How do you connect it to? Its very simple, and you have to have your name servers at your domain name registrar point to that of your shared hosting account. Now that sounds way more complicated, but it's really not. It takes about five minutes and I'm going to show you how it's done right now. Pointing your name servers at name cheaper to your hosting account at blows. This is short and sweet and going to be super easy. So the first thing that you need to do is jump into your email that you use when you sign up for boo-boos and you should receive a welcome email. And at the bottom of the welcome email you're going to see something that says name, server and S1 and S2 blows. And so then you have to navigate back over to your name cheap account or whatever domain name registered you're using. And then manage and going to manage your domain name. And now we want to navigate down here where it says the name is servers. Now you want to make sure to come down here and it should say name cheat basic DNS. You want to change that to custom DNS. Then all you have to do is copy and paste in NS won't boost in NF2 Blue Host. And that's it. And so once you do that, you're going to see this little green checkmark appear it there. Make sure to click it. And that saves your name. Service now says it can take up to 48 hours take effect for everything to propagate. From my experience, it usually takes between ten minutes to 30 minutes and I've never seen it take that long, but just take a quick little break, take ten minute break. It should propagate within that time. And that is how you set up name servers. 3. WordPress Install and Setup: Once you sit up named serious properly and you give it like ten minutes or so, it should propagate and you should start seeing your domain name right here. And this is going to be called Deep primary domain name for your account. Ok, so anyways, now it's time to install WordPress. Now what's awesome about Blue Host is that they make it so easy where WordPress is actually already installed once you set the name servers, Everything's probably good to go and you kinda can just launch your website. But I don't like that because I want to have a little bit more control over the login information. So anyways, let's just go to my sites. Now. I'm actually going to go ahead and delete the site. And I suggest that you do the same as well. Okay, so now we're going to add a site from scratch. Now don't worry, everything's set up still, you can have your name service pointing to your shared hosting count. It's totally fine. Now go ahead and click on Add Site. Now here you can put in the site name. So I'm gonna put in the site name, which is my name, and the site tagline. I'll just leave that blank or you can just put in something that you want. I could just say like hello world or something as simple as that, you can change this stuff later. It's not that important. What is important is to come down here and go to advance. Now here you want to set your email, you want to set your admin username and you want to set your admin password. You don't want to have glows just automatically generate everything for you. You want to have control for that. So it's something that you can actually remember. The email address that you put in here is going to be your recovery email just in case like you don't log into your website for a month and just completely forget what your password is or your username is. You can recover everything via this email address. So please put in something that you actually check. Okay, so I'm just gonna put in. There we go. There we go. Alright, so I'll just make up a admin username. Okay, and then let's put in a Wordpress admin password. There we go. Okay, next, click on Next. Alright, so now here you can choose the domain name and you can choose the directory. I would leave the directory blink. We want to install WordPress on the root domain name. We don't want to install it in a directory like blog for example. We want it to be on the whole website. Now it right down here we have helpful plugins. Wp Forms is a fantastic contact form plugin. So I definitely recommend this one. We don't need optimum sudo and we don't need monster insights though. So anyways, click on Next. All right, so WordPress has been successfully installed. So let's go ahead and click on log into WordPress. Welcome to WordPress and welcome to the dashboard for your website, you just successfully installed WordPress. You've just successfully set up a WordPress website. It really is that easy. Now, I'm actually going to go ahead and log out over here because I want to show you how to log into your website. So if we come back over here, you want to navigate to where it says WP dash admin. So right here you have your domain slash WP admin. When you go to that address, you're going to be looking at this and this is how you log into your website. Okay? So we have to do is put in the username that you just created. As well as your password each and every time that you want to log into your website. Professional backend settings for our website. So again, it's not going to be fun, but this is just basic stuff we need to take care of to get our websites set up properly. So try and make this as quick as possible. Anyways, the first thing I want you to do is to navigate over to permalink. So you have to go to your settings and under Settings, go down here to where it says permalink. Click on it. Now with permalink, so you're going to have different options. So this permanent literally means deep permanent link. And so permanent effect the blogposts structure and you wanna go with something logical. So I recommend either going with post name are going with accustomed structure. I personally would go with post name, then click on custom structure, then click here, type in slash, forward slash than Blog, and then post name. That's personally what I do in order to structure my blog posts on all of my websites because I find that it just gives a nice website architecture. So for example, if we come over here to top ten domain name registers, you don't write theory of blog slash the page title. And that's how you kinda control that with the permalink settings. But again, it's totally up to you. It's your website. If you wanna do post name, that's fine. I would shy away from dates because unless you're publishing time sensitive content, you don't need dates and definitely don't have P equals once you three, that tells search engines like Google and nothing about what the piece of content yet you're publishing is all about. So stick to post name or custom structure. Next you want to navigate to where it says users. Now under users you go here to users and then you go to all users. And this is where you have your different users for your website. And here is where you can add in writers as you want. So you should have one account, your main account that you're using to log into your website. And if this role is the administrator which has full access to the website. So anyways, if I open this up, let's go ahead and click on the administrator accounts. Alright, so if we navigate down here, we have a couple of different options. First off, we have biographical information in right there is where we can fill out that, you know, you see in the bottom of a blogposts. David likes long walks on the beach and coffee, that sort of thing. That's what this is being populated from. When you see that on a website. Now right here we have the profile picture. And so this has being populated by something called gravity. So if we click on that, we're gonna navigate to this website. You can quickly and easily just sign up for grabs guitar. Then you can associate an image with an e-mail. And so what that does is set everything up so there's an image associated with the email, and that's it. And then right down here is where you can change your passwords as you want. So anyway, let me go back to all users. Now, what you could do is well as you'd also go to Add New. And if you want to add in a new user, you can come here to add in a new username, a different email, not the same evil as the administrator account. And then you can set a password and then here is where you can change the different roles, okay? And so within WordPress you can set an editor author contributors subscriber. So an editor account is typically what I recommend setting up and then logging into your website as an editor. Because it provides us another layer of security because you want to keep your administrator account as private as possible. Again, totally up to you. There's nothing wrong with logging in as an administrator, but for security reasons to want that next level, next step. Just go ahead and set up an editor account. Then over and under here author account would be, you know, if you want a higher pay writers too easily login to your website to publish their own blog posts. You could set up an author account and they only have access to specific blog post and maybe uploading images. You know, each, each role is limited in terms of their access to the website. Ok, so after that's navigate over to plugins. So we have to go to plugins right here and installed plugins. So me exa, this, I've got a bunch of things, okay? So we have a lot of plugins installed by default, and we can go ahead and deactivate a lot of this stuff right here. So first we have a Kismet anti-spam. So if you're going to be having comments on your website, like comments on your blog post, then you probably want to activate this in enable it and just go through the process to enable a Kismet. It's pretty intuitive and has an on-screen prosper how to set it up. But I'm not going to be having comments on my blog, so I'll go ahead and delete this. Ok. Next we have blows. Blows has their own plugin that comes with your installation. I'm gonna go ahead and click on, deactivate that and click on delete. Next we have hello dolly. We can go ahead and delete that because that doesn't do anything other than leave quotes on our homepage. Next, we have creative mail by a constant contact. And so this is like a type of email marketing plug-in that allows you to capture emails and then send out your blog posts automatically when something new is published, completely up to you if you want to do that, but jet back does the same sort of thing. For now. I'm just gonna go ahead and deactivate that. And I'm gonna go ahead and delete that because I just want to have a nice clean installation. Okay, now we have a jet back by WordPress in WP Forms late, I recommend keeping these two jetpack. What this does is it enables you to have a lot of features because jetpacks is actually a feature on But like it allows you to have a lot of features from on your own installation. The main thing that I like from jetpack is that has related posts. And so what related posts are like if you come to the bottom of a blog post right here, see this, this is powered by jetpack. And what this does is really helpful because it provides nice internal linking to your blog post. When people get to the bottom of the blog post or directed to navigate to somewhere new, et cetera. So I really like this and that's why I kind of recommend having jetpack installed. Ok. And so here we go. So we have those two there. Now, there's a couple other plug-ins that we need to install as well. So we'll go to Add New. Now I want you to install something called Yost SEO. Okay, go ahead and click on install and activating. Okay, fantastic. So now you have use SEO installed. You should have an icon over here that says SEO. But this plug-in does it gives you a lot of on-page SEO control over your website and your blog posts in pages. Okay? And so we'll get to a little bit more in detail a bit later. But Yost SEO is really helpful for like for example, become o here that this is breadcrumbs use SEO enables us to add breadcrumbs to our website. If I do a quick search for Web, say creative Pro for example. This right here, this description is being powered by Yost the page title, all these little detailed stuff you have control because of, thanks to use SEO. So I really recommend and sewing this plug-in. The next bug and I want you to install is called smush. Let's, they've been smush OKs and only have smushed in this as lazy load images. Now go ahead and click on, install and activate. And what this does is it optimizes any image you upload to your website. Because as you upload images to your website, they take up space, they take up bandwidth and they take time to load so you want them to be as optimized as possible so your website loads as quickly as possible. You don't want to have these big images at take forever to load. So this is just one little plug and that really helps them because it automatically optimizes anything you upload. Now, last, we want to go over to themes. Now we're going to be designing with detuned T2 and T1 theme. So currently it's already installed and activated. But what I want you to do is if you have any other themes on your site, just go ahead and delete them. Okay, click this and click on delete. Go ahead and click OK. And go ahead and click on this one and then click on delete. And that is it. And so now we have the 2021 theme installed and we are ready to go. 4. Create a Homepage: Okay, so we're finally ready to design our website with the twin C2 and C1 theme. Everything is set up. We have a very strong foundation. So now we can get into how this theme works. So we can create something really impressive and beautiful. Now if you take a look-alike website, crave, you can kinda get an idea for how I personally designed websites. I like to have a dedicated homepage and make that homepage very beautiful and make it into sort of maybe a visual menu for your entire website. Then I'm going to show you how to create an About page, contact pages, your legal pages, your blog roll, and how to customize your individual blog posts pages, how to high powered by WordPress, how to add in a logo, favicon, et cetera, all the little details that you need to know to create a very beautiful, customized looking website. So let's get to it. Now. We want to create a homepage for our websites. So right now this is technically our homepage, but what this is is your blog roles was showing your weight as blog posts and that's okay, but we really want to create a decade homepage because that's just makes her website look better and more trustworthy, et cetera. So anyway, so you could start with creating homepage with Wordpress is simple. We have to go to settings and then you have to click on reading. Now, once you click on reading, it's going to have your homepage displays. What? We can click over here, a static page, and then we can select the homepage and we can select a posts page. Suppose means like your blogposts, Okay? Now the one issue is that we actually have to go ahead and create these badges because we can't select anything because we don't have any pages. So anyways, navigate to page, pages and click on add new. Alright, so this is going to be our homepage. So I'm just gonna take this homepage. Alright, so next we want to navigate down here, and right here is where we can set up the page title and description. So whatever your what's it's going to be about This is where you can kind of set it up. Okay? So I'm going to set it up as I go. I'll just call it the site title. Okay, so we'll say the say title and then page separator, and then a keyword description of what the website is is about. So I'll say this is going to be iPhone, photon, gra, fee, resources and guides. Ok. We'll just pretend like I'm starting like an iPhone photography website. Alright, and so now we have that page titled setup, and then we can have a meta-description goes here. Okay? And so for the meta description, you want to put in something that like kinda describes what the website is about. So if we type in website creative Pro, for example, this is the meta-description for my websites of credit websites or blogs machine only store blablabla that's powered by this section right there. So go ahead and just quickly describe a sentence in one or two sentences. And when you're ready, all you have to do is click on Publish. That's literally it. Just click on publish. Ok, so now we have one page that's ready to go. And so we want to navigate back to our WordPress Dashboard. And we want to add another page. And now we're going to be adding a blog post page. So a page that's dedicated for our blog roll. And so what I mean by that is you come to the homepage here, you click on blog, open a blog. And this is your blog post pages, the blog roll page. Okay, and so you want to create a decade page for that. So I'm just going to call this blog, okay, so I can understand what the site is about. So when I'm in my Wordpress dashboard, I understand what it is. Next, you want to make sure that the Euro is correct. So should be the site slash blog. Looks good. Okay, so anyways, let's navigate down here. And again, I suggest giving this some type of like unique, specific description. So like for example, the iPhone photography blog, page separator, and then the name of the website, ok, and then same with meta-description. Bright a2 words to two or two sentence description of what the page is about specifically. And then again, same when you're ready, go ahead and click on publish. Okay, so now we need to navigate back to our WordPress Dashboard. And what I want you to do is click on Settings and go to reading. Alright, so now we want to click on a static page. We want to set the Homepage as the homepage unless at the post page as our blog page. And next we want to click on save changes. And that's it. So anyways, let's take a quick look at the sites. And there we go. Okay, so now we have a nice clean blink website that's ready to be customized. And this is now the homepage page that we just set up and now it's our dedicated homepage. So let's get to designing. 5. Hero Image and Call to Action: Let's begin customizing our website. So I'm going to walk you through the Customize tab and all of the specific options that you have with this theme to help you make a decision on how you personally want to design your website. So anyways, all you have to do is get started is click on Customize. Alright, so right here, we can get rid of this awful green color if we once. So they could start with that. We have to navigate two colors in a dark mood. So dark mode is just a, you know, a setting that people have on their phone where if they visit a site, they can turn on and off a dark moods of someone's viewing your website at night on their mobile device. That's sort of things. If you want to enable that, you can go ahead. And he was under here is where we can kind of change the color. So if you want to make it white, we can just go ahead and do that and get rid of that awful green. I personally, I think I'm gonna make my say ever so slightly grading that looks just a bit nicer, okay? Okay, so I really like that. Just very, very subtle. Can't really tell too much, but just not, not super bright white. There we go. That's perfect. And we can also go ahead and add a background image to our website if we like to do that is very simple. You just click on background image and then you can go ahead and click on Select Image and then just drag and drop an image into place. So let me go ahead and do that. Okay, so again, make sure your image is a JPEG, and make sure it's one hundred and five hundred by 1000 pixels or something like that. Not too big, not too small. Because you don't want a big image is going to vote slowly, but you don't want to small image that's going to be blown out and look pixelated. Ok, anyways, click on Choose image. In. There you go. So now you have a lot of different presets. So by default should look like this, which looks pretty bad. You can have it fill to screen and you can have it fit to screen. You can have it repeats, et cetera. So it's totally up to you whether or not you want to add an image. Now it looks wonderful. But the issues like the texts really hard to read, so I'm not going to be using a background image in this tutorial video, you have to change the font to white and it's still just not readable. And so personally, I think it's interesting that you can add a background image with this theme, but it's for practical purposes, it's not really that useful. So I'm just going to go ahead and remove that and I'll just be keeping it like this, a light shade of gray. So let's continue. Let's add a hero image and a call to action to our web C. So what am I talking about when they say hero image? So if you visit something like once they create protocol, this is called the hero image. This is your call to action. This should be the H1 title. H1, meaning like Header one, the title of the page. And so our pages completely blank. And so to get started, just click on edit page. Once you're in the edit page, You should see this. And it should say homepage wherever you titled this page, but something that you've noticed that look, the title is not there. That's because we've set this as the homepage. So this theme is automatically designed, so it just hides whatever the title is here so we can add something that we want. So anyways, hero images are incredibly easy to set up with this theme. So you just click on the plus and then you want to click on the block that says Cover. Okay, so there we go. Now we can upload our own theme. So I'm just going to jump into my media library. And now we notice right here I have this image they already uploaded. Okay, so let me go ahead and click on select. Now where I'm getting a lot of my images from sometimes is a website called unspliced. I mean, it's a good starter website to find photography. So I'm going to be using this image as the background for my hero image. Okay? And so now we have it set up right there. And so if we click on update, it's going to update the image. Let's go ahead and reload that. And okay, that looks okay, but there's a lot of different options that we can do to make this a little bit more fun and interesting. So if you click on the image itself, not the text, you have to click on the image. You're gonna get this little bar right up top there that gives you different images, different options for layout. So we wanna click on this. And the ones that I like the most are full, light, wide width, like wide width like this. So we click on update. What does the images that kinda makes it this big rectangular square. And I think that kinda looks interesting. It looks nice and that it doesn't need to be a massive hero image. Again, totally up to you. And I'm gonna go with full width. Okay? It says click on update and let's reload it. Alright, and so now we have full width set up, but it is, oh, I want this to be like longer. I want to stretch this out and make it just a little bit longer, a little bit more space. And what that is very simple as you scroll down a little bit and this little blue dot right there, you can just drag and drop this to give your image just a little bit more breathing room. Ok. Now over here we have a couple of different settings. We have style as default and borders. Typically don't like borders. I don't think it looks nice, but again, you can play around with that if you want. Now media settings, fixed background, you can turn that on in office. What that does is it allows the person to scroll and the image stays put. I'm not going to have them just going to be as good I liked the way that this works, so we'll minimize that. Okay, so now we have the overlay right here. The overlay is self image is kinda dark. And so if you come over to the website, great pro, so yeah, this image is blue, like that's an overlay. So you use an overweight to make your text a little bit more readable so it stands out. And so if we take a look at this, the overlays a little bit dark, so you can turn that down just a bit. You'll begin to turn completely off if you want. Just turned down to 0. I think I'm going to leave mine at ten. I think that looks nice. We can also play around with like different shades of colors. So if you want to click on, say, green, habit as a shade of green if you want. So I'm gonna go ahead and click on ingredients in. I'm going to play around with this. So I think I'm going to keep that blue. I'm going to change this one to a different color, blue just a little bit. Yeah, I think that looks nice. I think that kinda matches the gray Just a little bit. Okay, so let's go ahead and click on update. Okay, let me go ahead and reload the homepage. Alright, so I think that's looking quite nice. Now let's go ahead and add in a call to action. So to do that, it's very simple. We come over here and we write in our title. So whatever you want to write. So I recommend making this the one title tag for the page. That should be your call to action so quickly in tell people what the website is about quickly and succinctly. Don't get too verbose, just get right to the point. So I'm just going to lead off with, we'll just say iPhone. Iphone, iPhone photography made easy, something like that. Ok. So again, click here and then go to heading, then make this shared. This is h one, okay, this is your title. And we're gonna go ahead and center. That's so it looks nice. Okay, and so that looks, that looks good. Okay? And so over here you can change the font size if you want to change it, make it bigger or smaller or whatever. Obviously you can come in here and bold things as you want. So that's about it with the, in terms of customization, with the topography, it little bit, you know, you don't have, it's a free thing. You don't have a ton of control, but it's enough to get you started. Anyways, let's go ahead and add in a little plus sign and add in a paragraph. Okay, so I'm gonna say advice, advice to tutorials and guides. There we go. Okay, and so let's go ahead and center that. And I'm just going to view this as texts. And let's go ahead and click on update and come back to the homepage and was revolted. All right, so that's looking really nice. Okay, so you open up the web, say boom, iPhone photography Made Easy advice tutorials and guides. Okay, and so there's a quick little introduction on how you can personally sit up your own hero image and it's in a typography over it as you see fit. Let's go ahead and add a button to our call to action. So a button would be a perfect addition to this call to action right here. And now the goal of buttons should be to direct people somewhere, be a blog post, a free guide, YouTube video, free Udemy course, whatever. Just make sure to direct people somewhere. Now to add a button is very easy, so let's just jump back into our homepage. We'll click here. I'll click on enter. Now we're in a new block. So click on the plus sign and I just want to add in a button. And so if you don't see it, make sure just to tape it button and there you go. So you want to click on the block that says Buttons. And there you go. So now we have a bunch of styles we have fill me about like I'm going to be this fill because that fills a button with a color. Outline is one of those transparent buttons, but the global button is to be clicked on. So let's go ahead and have it be fill so it's just we can make it a nice bright color. Next, I'm going to navigate to color settings, text color. I want the text to be white. And then the background color. I want the background color to be a nice red, so it stands out a little bit. So let me just put that down just a little bit of play around with this. There we go. So I think that looks quite nice. Okay, so now let's go ahead and add in text. So I'll say gets our free carefree Beginners Course, Something like that. Okay, so now to link the button somewhere, you have to have the been highlighted and then click on this icon right there. And here you can just insert a hyperlink. And so if it's going to be off your website, have it open a new tab. If it's going to be on your website, then don't have it in open in a new tab. Now let's continue on. So we have border settings over here. And so with the border sings allows us to round out the button if we want. So totally up to you, to your site. So I'm going to make mine a little bit rounded like that. I think that looks nice. Okay, we'll come over here and now we have Links Settings there. And that's it. Now you're like David, how do I sent her the button? Well, there's no center option there to center anything you have to click on the block. So now I have the block selected, okay? And then you come over here and then you can click center, okay, understand. Because if you click on the button, these are all the settings for the button. But we want to center the, everything that's in the blocks. We have to click on the block settings, okay? And that's it. And so go ahead and click on update. And let's just go take a quick look to see how that K-modes. And yeah, that looks really nice. So there you go. So that's how you add a button to your website. 6. Write a Welcome Message: Let's go ahead and add a welcome message to our website. So right underneath the hero image is where we can have a welcome message. So for example, like what I'm talking about is like what I've done on website probe. You don't have to do this, but this is just something that I personally like to do because it allows you to kind of introduce the site a little bit more detail and maybe direct people to a specific page. You know, you just want to, again, constantly reiterate the value that your website is providing. Anyways, to get started, we just have to come down here and just type in something catchy and keyword rich that kinda describes the sate. So I already went ahead and wrote create professional photos with your phone. So let's go ahead and update that and let's take a look to see how that looks in. That looks terrible. Okay, so there's a lot of work that we need to do to this. So anyways, first things first we want to click here and we want to click on heading. Now we want this to be H2 because we already have an H1, so we just need this to be an H2 tag. Now I want to go ahead and center this OK. And so maybe I'll have this be bolded. It's okay to have that kind of stand out a little bit like that. Okay, and so over here is where you can kind of change the font size to wake whatever you want. So let's just go ahead and take a look to see how this appears. Okay, so that looks that looks pretty good. Okay. So if I want to make this bigger, I can come over here and come to the font size. And I can make this like normal. And then we can just play around with the font size that we want. Okay? So maybe if I want this to be like a 45 font size over here, we can change the line height if we want to be closer together or separated. That's called line-height. So I think I'll just leave it like that. It looks really nice. Now with the block settings, we have wide and full width. So we go to full width. I really like the way that looks because now we can set that to full width and what's below this. Okay, so now we have like a nice full with sentence right there. Now we can add in a little paragraph, and now the paragraph is going to be a little bit more centered with padding on the left and the right. So let's go ahead and write a paragraph for our website. Ok, so I just went ahead and add in a little paragraph and I think it looks really nice the way everything's kinda weighed out where we have the sentence nice and wide, a little bit of padding on the left and the right to squish the paragraph to be very readable. Anyways, that's how you add a welcome image to your website. 7. Design a Visual Menu: Creating a visual menu for our homepage. So right underneath the call to action, I want to add in like three boxes right here that help get people into the site. So maybe we can have something like iPhone gear, iPhone photography tips, iPhone photography tutorials, whatever, sort of like how I've done that with web scrape pero where we got like three boxes right there. So if we can jump into the backend of our site and let me just navigate down there. Now if I click on that plus sign and we go to something called columns, we can kinda do that where we can have three columns and then I can add an image to this one. But the problem I have with this though is like look how narrow it is on the left and right. So it's all kind of squished together. Like the boxes are going to be the same length as the paragraph in I just don't like that. Like I want that I want the boxes to be wider than the paragraph right here. And so there's no way others to do this with the default editor other than to go ahead and install a brand new plugin, which we're gonna do. So we're going to navigate to Plugins and let's go to Add New. And we're going to go ahead and install the stack double plugins. So just type in stackable. Okay, click on install now and go ahead and click Activate. Great, so stackable is now activated on our sites. So go ahead and reload the page. Ok, so now we have stackable installed. So let's go ahead and navigate down here and let's go add a new block section. So click the plus sign, click on Browse All. And now you should see these pinkish purplish blocks. These are coming from stackable because what's cool about WordPress is that you can solve various plugins that add new additional blocks to your installation. The good to just help keep expanding Gutenberg. So it's really nice. So we can come down here and we can add in a bunch of different other specific boxes. So let's go ahead and add in a type of column box so we can have three images. Okay, so I'm gonna go ahead and click on advanced columns in grid. Okay, so there we go. Alright, so first off, I want to make this into three columns, okay? And again, the same issue. I don't want this to be the same width as the paragraph, but right here we can come here and we can go to wide, width. And there you go. Ok, so now we've just successfully added this and now we have a nice wide width, so it looks good. And so now it's add an image is very simple. You just click the plus sign and just go to image. Okay? And then we go to, you can either upload your own image or you can go into your media library. So I already went ahead and downloaded a few images from splash for example. So we just go ahead and add in a few images. I'll add in this one. I'll click select there, get, and I'll go this one. And I'll go to image, and I'll go to my media library. Okay, and I'll add in, we'll say this one right here. All right, and I'll click on plus n again, and I'll go to images, and I'll go to media library. And we'll select this image over here. Okay? And there we go. Okay, so now we can continue on where we can have a little title if we want. So right here I can say something like, you know, I phone, iPhone, gear. Was a iPhone, iPhone, photolithography to tutorials. And what's to say iPhone. Iphone. Or was this a best video editor or something like that? That's good best video editors. Okay? Alright, so now we can, you know, now we have these little boxes there. Let's go ahead and click on update. And let's take a quick look to see how these sites is looking. Okay, that looks really nice. So now we can go ahead and kinda link these images to a specific page if we want. So let me back out of that. Ok, so to do that is very simple. Here we can just add a link, okay? You can just click this and then add links wherever you want. So for example, if you had a blog post or decade page on your site, that's all about iPhone gear, the ten best piece of equipment for your iPhone, whatever. That's where you'd kind of want to add this in. And same with this, okay? And you can just go through that and just add in the links as you want. Okay? And so we have underneath there, we can make that bold if we want. And there you go. Now if you don't like how the caption is so small, you have other options. Okay. We can kinda we can kind of back out of that and we can come down here if you want to add in a new block. So I can do something like iPhone gear. And I can come here and I can kinda center the text. And maybe if I wanna make this like maybe H2 or I can make this an H3 because this is the H2 tag and then centre it, you know, I can have that option too. So it's really up to you and about what you think it looks best in what do you like, but z like their ego. So if you want to have a little bit more control to change the look and the feel of the item right there. You can just quickly set that up easily. I personally like the way this looks like small and subtle, like I don't want it to be big, but again, it's Easter ONE. I'm just trying to give you It's much design options as possible. Okay? And so anyways, let's just go ahead. And for example, when we just go ahead and link to page two, Facebook will just say HTTPS equals Go. Okay, let me highlight that and we'll take that coffee. Okay, and I'll add a link. There we go. Okay, so let's go ahead and click on update. And so when just reload the page, there we go. So now it's linking to Facebook. And so you could do that with this, and you could also do that with this item right there, right down there. So if I want to do that, boom, paste that in. We'll say open a new tab. I click Save. There we go. Update that. Some I'll show you what it's going to look like. Okay, so there we go. So now we have iPhone gear. Now within the theme, we can later change to see how these interact. But, you know, CLS says and they subtle animation when we mouse over it where it gets a little bit of an indication that it's a we can click on it. But you can just, you know, that's how you do that. Ok, so up to you how you want to design it. But anyways, that's how you add like really helpful images to make this sort of like a visual menu TO people navigate your site more easily. Lets continue adding a visual menu for our websites. So right here we have our resource guides. I want to add our latest blog post, but I want to have something that kind of breaks up to two sections, sort of like how I've done here with website, credit program, the resource guides. And we have like a nice section right here that has dedicated tutorials. So how do we do that? Because I want to link to something, anything you know, like maybe you want to link to a resource guide, your online courses, a dedicated resource page on your website, whatever. So let's go ahead and do that. So first things first we need to get back into the homepage and then navigate down here. So this is one block right here, so we need to click on a new block at a block there. Now what I want you to do is click on browse and I want you to find something that says header. Okay, this is powered by stackable. So we want this header. There we go. Alright, so added in the wrong spot when you move it there. Okay. So just psi note with WordPress, you can just move things up and down as you want with this little arrow. So we'll just, we want to add it underneath this block right there. Okay, so now what I want you to do is click on the block. And now you have a lot of different options. So you can go to like full width. You want to make a full width block. And there we go. We have a nice little section, but I'm gonna go ahead and click on free, and I'm just going to use this free one that's right here that has this cool triangle feature. It's going to automatically install and that looks good, but it needs a little bit of help. So let's click it ok. So first things first, we want to change the background image. Now for this block, everything that controls this block right here is over here. So we want to change the background image. So just look for black background. It's literally that simple. And I'm going to navigate to the little x and click off the X. Next, moving quick the image again. And I'm going to upload an image that I downloaded from unspliced. So again, this is the image 1600 by 1000 pixels or so. Not too big, not too small. Alright, so I can't see anything. So we're going to turn down the opacity and there we go. So that's 0. Maybe I'll keep it at one. Yeah, that looks nice. Okay, so now we need to have a title for the block. Okay, so let's go ahead and do that. So I'll just type in learn, learn. I phone, phone, fi, okay? And maybe we can have a nice little description in there. We can say something like, I don't know, get our best guess or best selling courses on Udemy and skill share. Okay, we say something like that. Okay, so there we go. We have a nice call to action. So again, so this looks nice. In now we won't change the button so it's minimized that. So again, we have Button one there. So if you want to change the color, it's done right there. So again, all I did was go to button one. And this is where you can change the colors so you can have different styles, whatever you want to have it. I actually like the purple. I think the purple actually, it looks really nice compared. It can contrast really bowl with this green and black colors. I'm personally going to be that, but, you know, if you want to change the color, that's where you do right over here. So now we need to change the text and you can have a link to it. The change the tax is really easy. You just literally click the text and you can just backspace and delete everything. So I can just say something like learn more, just like that. There we go. And so maybe for this page personally, I wouldn't link it to say my slash courses or whatever, then have a dedicated page where I cover like, why am I online courses on Udemy and Scotia are the best and you should you should enroll new direct people like that. So we'll minimize that. Okay, so now we have this triangle section right down there. And so if I come down here, bottom spacer, it's being powered by this, okay, so you here, you can change it so like, you know, whatever you want. So if you want, change it, something else. I personally think the triangle thing looks fantastic as it points the user to the next section. But let's click on update, and let's go ahead and reload the site. Okay, so that looks good, but the only issues like, okay, this is y and this is grey. It's like let's make sure it matches. And so to do that is again, easy. So you come down here to color and you have to go to custom color, okay? And so right there, there we don't want to black, we just want to eyeball and just kind of blended into the site as best you can with C that yeah, that looks great. Okay, let's go ahead and click on update. And let's go ahead and reload the page just to make sure everything looks good. Yeah, that'll blends in perfectly. Okay. And there we go. Okay, so now we have these three little resource boxes. We have this nice call to action to get people on maybe a dedicated page to make a purchase decision for a paid product. 8. Add Blog Posts: So now let's go ahead and add in our witness and greatest blogposts. Let's go ahead and add in our latest blog posts right underneath this image. So I already went ahead and added in three blog posts. So you just go to posts, add new nets we can add in blog posts, will get to this later in the tutorial, but for now, which is continue editing our site. So anyways, we need to navigate back to our homepage, navigate under here, and then click the plus sign. Now you want to type in something that says POSTs, post. Now you have a latest posts and you have posts. Let us suppose this is the default block from WordPress. It doesn't look that nice, not that visually appealing. Which is why we installed stackable completely free. It comes with this awesome plugin to help us install our latest content. Okay, so that looks okay. But again, we can click here and we can go to wide width. And that looks really good. Now it's going by like a two by two grid. So we have 121212. That looks okay. I kinda wanted to change that, you know, it's totally up to you, but to change any settings, again, you navigate over on the right-hand side. Okay, so let's just minimize everything. So now we have way out style in advance. Okay, so we're gonna go to Layout basic. And so here we have basic and we can change the image to be on the right-hand side if we want. So we want to navigate to style. This is where we have full control over how this looks. Now I'm gonna make this into a three-column design. There we go. Alright, and so let's continue on. And so we can change the alignment of the text we want centered or not. So I'm going to be left though. I don't really like the way it looks if it's centered. Now we go to post settings and number of items shows six items. I actually only want to show three items because we have a three-by-three grid. So I would make it so awake. You wanna show six then I would make this like a six column thing, 123123, that type deal. But I'm only going to show the latest three blogposts. So we'll just leave it like that. Now continue down here. Feature image. This is the feature image for the blogposts. You wanna leave it because it's visual, stands out and it gets people to click. Now the category, this is the category of top. They're totally up to you whether or not you want to have the category shown is helpful because people can navigate to the category page. What would more easily if son homepage. But again, it's up to you. I'm actually going to turn the category off. Okay, now we have the title. This is your title. Obviously you want to leave your title on the excerpt. This is the excerpt where here not helpful at all. It just makes a bunch of words not really helpful doesn't get people to click. Dihydrogen, just turn that off. Alright, meta Is this the no author, the date, comments all and I don't want to show that. I just really like that. Okay, and then there we go. So now we have the image, the title, and then continue reading. I really like that. So right down there we have the Read More link and we can customize the Read More link. So if we say, we can change this to whatever we want, continue reading, or we can just change it to continue whatever. Okay. So totally up to you if you want to change it to something else, and that's it. Okay, so now we can just leave it like that and we want change again. We'll just minimize that. So now we can change different things. Rate town here. We can have a top separator bottom separate to this block if we wanted to, we can change different colors, et cetera. But personally, I think this looks quite nice the way it is. So let's go ahead and click on update. And let's go ahead and reload the home page. And that looks good. Okay, so now we've got the resource guides. Boom, got this nice separator. And then we have our latest blog post right there. Now, maybe I would want to add in like maybe a title for this section too. So people kinda inherently understand what's going on there. And so we can just do a, so we can just come back down there in click here, and I'll click on paragraph, okay? And I'll just say latus or I'll just type that normally li tests, latest posts, whatever. Ok, and I'll click on that. I'll change that to a heading. There we go. And now if I want to move that up, boom. Okay. And so there we go. So latest posts, boom, may go like that. We'll click on update and let's reload the page. Okay? And so that looks really nice. So, you know, if you want to like move it over, you can just go full width and that moves the texts all the way over to the left-hand side. So let's load it again. Okay, so now that's too far over, it's way too far on the left. And so I don't really like the way that looks. So I'm gonna go ahead in maybe we can have centered, so it will keep it like that. And so again, you have to play around with it because like, yeah, I want I personally want to right there, but it doesn't seem to work that way. So you kinda stuck with it the way it is. So it will just reload this. Okay, so latest post that looks nice. Okay. No, no ideal. I kind of want to text there. I can't do it. It's either it's either over here or here or here. So centered it works best. So we'll just leave it like that. Okay, and so there you go. So that's agile latest blog post to your homepage. 9. Bio and Email Opt-in: Okay, so let's finish off the homepage. So this bottom section is really nice because you can add in, say an email opt-in form or you can add in some quick little bio paragraph totally up to you. Or you can just leave it like this. I just maybe add in Lake and CIF three blog posts haven't B6 blogposts? Totally up to you, but I'm going to add in just a quick little like Bio section, again, reiterating what the site's about, welcoming people to say kinda maybe you have a picture of myself, et cetera, as in, hey, I'm the founder and blah, blah, blah, whatever. That's what I'm gonna do here. Again, it's your site, totally up to you how you want to design it, but that's what I'm personally gonna do. So anyways, to get started with that, we're going to click on the plus sign and then I want to go again to advance cams and grids. The reason why I like advanced cams and grids is because I can do that. Okay. Guy can make the boxes. Why didn't take up all the space? So we're here, I'm gonna go here and add in an image. And I'm just going to add in an image I've already uploaded of myself, which is right here. And then click on select. There we go. And then over here, I'm going to add in a paragraph and I'm gonna lead off with maybe a title like like hey, I'm Hey, I'm David. And exclamation mark. And we can change that and maybe make that a heading off, make that an H3 because this is an H2. Alright, and so that looks good. Maybe I'll click that and bold it inside an emoji. Waving e Muji. There we go. Alright, so now we'll click on copy. There we are. And let's navigate back there. Ok, gay. And let's click on paste, and there we go. So now we have an emoji added. Alright, so now I just have some dummy text I'm just going to add in, so we'll copy that. And let's go here and go to paste. Okay, so that looks good. Alright, so now what the image, we have a couple of different options. If you want, make the image a little bit smaller and you can do that right there. If you want to add some style to it, rounded borders, have to have a frame. Whatever you can go ahead and do that. So I'm going to click on update and let's reload the site and see how that looks. And that looks wonderful. Right underneath here, you know, for example, if we continue to designing the site. So for example, like if you're a part of a convert kit, for example, you can add in like an email opt-in form right here to get people to subscribe, you can make change the copy to be Laika hei, hei. Welcome to the say I created the site to help you do XYZ 1-2-3 topic, subscribe to get my free XYZ thing and get people to send to your newsletter there. And so anyways, I'm going to show you how to add in an email opt-in form using convert kit next. Okay, so let's go ahead and add in an email opt-in form right underneath this little paragraph right there. So again, we can structure the copy to say like something like hey, welcome to the say, make sure to subscribe to get my free guide, et cetera. Now this depends on the service barrier that you personally use, but I use in a recommend convert kid. So let's go ahead and get started. So this is my demo account, and I'm gonna go ahead and click on Create New. And I want to create a form. And then I want to have it be inline. There we go. And now I want a template that is super-duper simple because I just want something to sit underneath right here. Okay. I don't want a big form. I already have a picture here. I just want to form. I just want people to subscribe. And so I like Claire. Ok. Because what's the simplest? Now, again, up to you, if you want to have a name and email address. I mean, this is not a convert kit tutorial, so I'm just gonna leave it simple like this. You know, give me your email address. That's fine. Now, whatever service pro you decided to go with, you need to find where it says embed. And then embed you can get HTML, JavaScript, WordPress. No, you're like, oh, WordPress bulk converter has their own dedicated WordPress plug-in. So we're actually just going to use the HTML option. Click on Copy, go over here, make sure to copy it again. Okay, so now let's jump in here and so enter space, okay, now we want to add in a new block and you want to add an HTML. Okay, we're adding in custom HTML and then right-click in paste. And you're like, oh, that looks terrible, that's fine. Don't worry. It's, it's totally fine. Let's click on Update. Don't worry. Alright, so let's reload the page. And there you go. Okay, and so now we have a nice-looking convert kit form that appears and it's fit into the space correctly. And I think that looks really nice bottom section of the website. And so again, like just customize the copyright here to get people to subscribe, lets you space out your on-page elements. So I know I get asked this quite a bit. So like how do you separate this? So we have these section right there and we have this block down there. How do I just give it more space? Because everything's kinda push together a little bit in with WordPress, it's very easy, so just need to navigate back into your homepage, okay? And then we want to find where it just mouse over in the middle and you'll see a plus n. And then we can add in a block right there. Now what we want to add in is called a spacer. Ok, that's literally what it's called. So stackable comes bone spacer, WordPress comes through and spacer, same thing, it does exactly the same thing. So we'll just, we'll just use the Wordpress version. Okay, there we go. And so now I can kind of minimize this as much as possible, or I can just separate it ever so slightly. Ok, if I want a little bit more space, we'll say like a, you know, it's give it to 16 pixels. Okay, may go ahead and update that. And let's reload the site. And there we go so we can push elements down. And so again, now we have a spacer there. And if you want to move it around, you can just click this arrow up and down in, add in additional spacers if you want to give more room for any specific element. Okay? And so let me just make this spacer little bit more. I think we'll give it a little bit more space and let's do that. There we go. Okay, I think that looks, that's that's the right amount. We reload that and that looks good. Okay, so now we have a little bit of breathing room between deep blogposts action and our little bio. 10. Logo and Favicon Design: So let's go ahead and add a logo to our websites. Are logos going to be replacing this text right here? Now just want to emphasize everyone that logos are simple, like the logo for website create Pro is just text. Think about Facebook. The logo for Facebook is very simple, okay, logos do not need to be overly complicated. Anyways, we're going to be using a service called canvas. Canvas, a completely free website where we can edit and make images quickly and easily. It's all you have to do is create a free account and then log n. All right, so I'm going to be using the YouTube thumbnail, okay. And then we're going to be creating a blink thumbnail. And you know, you can use whatever template you want. I just like to YouTube thumbnail because it's nice blank canvas right here. Okay, so let's go ahead and add in some text and then boom, and in a heading. Now you want to put in this site title right here. So I would say I photo authority, okay, is we'll just pretend that's what my website is called. Now I want to change this font. I don't really like Open Sans extra. I'm going to use Poppins medium primarily because this is Poppins right here. So you will want the kind of the logo to match. So anyways, I'm gonna take the authority and let's go ahead and bold that. And I think that looks really nice. Now one thing we could add maybe is like a little image right there. So go to Elements, Click on it, and then we'll say something like phone. I don't know. So it comes up with a phone and this moon. Okay, I think this one looks good. Ok, we'll take that and let's make that smaller so it fits. And okay. So I think it's a little too tall. We'll just shrink it does a bit. Yeah, that looks great. Anyways, go to Download and go to PAG, and then make sure to download as a PNG because that is the highest quality image possible. Our rate will just drag and drop down to my desktop. There we go. Okay, so now we want to remove the background from this image because our background is gray, we just want this to be transparent so we can change the background color whenever we want. And so that's really easy to do. You can use something like remove BG. Ok, so remove dot BG allows you to remove the background image of anything you upload. And it was, we'll go upload image, boom, upload this. And we'll see how that came out. Yeah, that looks great. So we'll click on download. Okay, and I'll put that there. Alright, so now let's just crop this a little bit, make it a little bit smaller. Okay, and we go to edit, will go to re-size or sorry, actually edit and I'm going to crop this again. You can use whatever picture editor you want. It doesn't matter, you can use game. There's plenty of free options. Just pick something that you like in order to crop the image in a little bit, we'll click on OK. And then I just want to go to Resize. And I suggest making your logo at 260 pixels. Like something small, 259. There you go, that looks good. Okay, we'll click on Save. Ok. So now we have our logo. And so let's go ahead and upload it. Click on customize. And you go to say its identity, and then you click on select logo, and then you just drag and drop it into place. And that is it. Ok, now click on Select and we gonna skip cropping. Now it's going to, okay, there we go. And then just make sure to uncheck the display site in tagline. And there you go. That's how you add a logo to your website. Let's add a favicon to our website. So a favicon is the little icon that you see up top there. That's important because when people visit your website and it gets saved their phone and be like recently visited. And also it's just attention to detail. This website, it's called I photo authority. And and so it's like why is it a w there doesn't make any sense. Attention to detail, you know, so you won't pay attention to things like that. Anyways, we're just gonna use this little phone icon. So again, just navigate back to Canva, find the image that you just selected and just have it be all by itself, or you just make it really big, whatever. Okay. Make it really big like that. And then just download it and follow the same exact process that you did for the logo. Okay? And so there we go. We'll drag and drop that there. Okay, and so now we want to go to remove background and to upload. And what's up with that again? And that looks good. So go ahead and download. Okay, so download that and said please, there we are. Alright, so now I do suggest editing the image just a bit. So you want to crop in on the top a bit and crop in on the bottom just a little bit. And, and, you know, you want it to be kind of a square shape a little bit. You can just eyeball it like that just a bit. Okay, we'll click edit and then we'll resize it. Just resize it just a little bit. You don't have to do this, but I kind of want to make this just a bit smaller. Okay, we'll click on Save. All right, and now we can go ahead and upload that to our website. So go here to select icon, and then drag and drop that into place. And click on Select. And there we go. So now you can just adjust it as you want. There we are. We'll just leave it like that. Will say crop image for sure because we want to get rid of the white on the left and the rights. And there we go. Okay, so now we have a nice little customized fabric ion for our website. 11. Making Menus: It's time to edit and adjust the menu for the website. So the menu is this right here, this section right there where people have links that they can click on to navigate to specific pages. Currently, our website doesn't have any items in the menu, so let's go ahead and add some menu items. So to do that, again, is very easy if to go to appearance and then go to the menus. All right, so now we have to actually create our first menu. So I'm just gonna say that this is the, I'll say this is the primary menu, okay? Then display location as the primary menu. So this team has two menus. We have a primary and a secondary. The primary is the one at the top of the website. So let's go ahead and click on Create menu. Okay, and so now we can just add items to our menu so it's go to view all in, for example, I'm going to lead off with by adding the blog page. There we go. So let's go ahead and click on save menu. And let's reload the ST and see how that looks. And there we go. Okay, so now we have our logo over there and we have the menu item over there. Now if you're like, oh, David, I like the logo and what you can't. Okay. I'm just telling you this is where the site place the logo. Okay. So you're gonna have the logo on the left and you can have your menu items on the right, and that's it. Ok, so, but I personally think that looks good. That's the Leo I use personally for website create pro. And now for menu items, I do suggest keeping it to a minimum like four to six items max, less is better. You don't want to overwhelm people with options because then people don't click on anything that makes any sense. 12. About, Contact and Legal Pages: And so now we're going to add in about in contact page, adding an about page to your website. So all websites need and about page. Now the About page should be about the website. It's not about you. For example, like the About page for web, say create Pro is about Web Sue career Pro and it's used the website and then a quick little bio about me, but it's more focused on me as a professional web designer and a user experience consultant. It's not about David likes long walks on the beach and drinks coffee. It's, it's not like, you know, a personal story it so now it's a totally up to you whether or not you want to have like a little bio, but I definitely suggest throwing in something just a quick little, just a short little paragraph that explains who you are and why you have the authority to write the website. Anyways, to create an about page is simple. We, again, we just navigate to our Dashboard and then you have to go to pages. And then you go to add new. And right here, we can type in about or we can save in some like I photo I photo authority, Something like that. Then you can write your your description of your About page as you see fit. Ok, so anyways, let's click on publish. Ok. So anyways, let me come down here. Alright, so let's open this up now, down here. Again, because the Yost SEO, I definitely recommend taking the time to properly set up a correct lake page description in a meta description. Also the slug. Slug means like your URL, just keep it as about, okay, it doesn't need to be about blah, blah, blah. Just keep it simple. Call about RNAs and then click on update. And there we go. Okay, so now we have a basic page that's kinda ready to go. So let me go back to my WordPress Dashboard. And let me go to appearance and then menus. And let me go ahead and add in about click Add. Now the whole things is about I photo authority. We want to change that. We just wanted to say about OK. Keep it simple. It doesn't want your titles to be very short and sweet and to the point, okay, let's click on save menu. And there we go. Okay, so now we have a blog and about, so if you want to change the order of this, it's very easy to, you can just drag and drop the menu item to change it like that with ease. And now if you move it over to the right, now this is going to be a sub menu item of this. So that what that'll do is it'll make it into a dropdown, which we're not gonna deal, just keep it like that. So we have a blog and about so now it's time to add a contact page to our website. Let's add a contact page to our website. So to get started, you have to navigate two pages. And then we want to go ahead and add a new page. So click on Add new. And now we're gonna go ahead entitled the contact page as either contact contact us or need to get in touch. Something along the lines of that. Ok. So let's come down here and make sure that the slug is just something simple like contact, et cetera. Sending isn't to go ahead and publish the actual page first. There we go. And so let's just make sure the slug is something simple. Just contact doesn't need to be contact us. And so we can change the SEO title, make it something like. Need to con, tact us, you need to contact us. We're more whatever, something like that, then have a meta description. This is the contact page for this website, blah, blah, blah, whatever. That's all you have to do. Sonia's let me go ahead and click on update. Ok. So now if we actually kind of view the actual page so we can go to permalink. Let's open up this. So the thing I want to add to this is kinda like a form that people could fail quickly and easily. And so I definitely recommend giving some sort of context. So thanks for your interest in the website. Reply to emails in 24 to 40 hours. Make sure to check out the FAQ if you have any other questions. Whatever, check us out on Facebook. You also mentioned contact that's there. Alright. So anyways, like things. Thank you. Thank you. Thank you for your interest in the web. See, we'll just leave it like that. Anyways, now, we want to add a form and to do that is easy. So we need a plugin which should be already installed because we set everything up with Word up blue host initially. But anyways, if he, if he didn't install the plugin, the one that you want to install is called WP forms. So again, you have to navigate to plug-ins. It makes sure that you have WP forms installed. So if we go to add new does what WP forms looks like. You can just type that in VV forms, boom. Okay, so WP Forms is this looking thing, okay, this is one of my favorite plug-ins for contact forms. Anyways. So to get started with the BB forms, now you have a should. Once you install and activate it, you should have a menu item over here. So let's navigate to this. All right, and now we want to create a form. Alright, so now we have a couple of different options here. And the one we want is a simple contact form. So click it. Okay, wonderful. So now we can click this item right there. And I personally just want to make this simple. I just want people to answer good name, email than common and message. Literally, that's it. That's all I want. Now make sure to click on settings. And when you click on settings, go to confirmation. Now confirmations where you can set up by what people perceive when they felt their form. You know, for example, if someone filled out the form, there'll be recent headings for connectedness with being touched you shortly if you want to change that to something else, you can write there. Now down here we can change the settings of the form the way it looks in. So right here under notifications, this is where you can change the sin 2x email address when people fill out the form. Where does it go? It's going to be censored. The admin ino. So the admin email Theano that you use when you set up Wordpress, if you'd want, if you don't want to go to that email, this is where you can change it to something else. So anyways, I'm going to click on Save. Alright, now I'm gonna click on embed. Alright, so I'm just going to have it be in manually or use a short code. I want to use a short code. So here's the short code. I'll click it and then right-click copy. Okay, there we go. So now navigate back to your contact page. Okay. And so it's good to edit page. Oh, okay, and now we come down here, and now we want to add in a block. And we wanted to have been short code. So all you have to use taping shortcodes should pop up like that. There we go. Right-click, paste it in. There you go. So click on update. Alright, so let's go ahead and take a look. Okay, great. So now we've successfully added a contact form to our website, and now let's go ahead and edit the footer of our website and add in all those disclaimers, Legal E's pages, etc. Now, I know I did go ahead and add context to the Main Menu bar. Now if we come down here at the very bottom, this is our Footer section in this has being powered by widgets. Now, in the footer, you should definitely have like maybe a secondary menu, you know, any type of disclaimer, that sort of thing. That's what kinda like book goes down here. Now if we are illegal pages, I have a guide that I wrote about how to write your legal pages. But again, you should definitely consult with an accountant and aware as your website grows if you're just starting now, not that important. Having a privacy policy terms and conditions because you don't have any traffic. But once you start getting like 50 thousand visitors a month, et cetera, then it's time to kinda consider taking care of that. Anyways. So let's jump in to our website and let's navigate to appearance. And we also want to go into widgets. And I also want to open up the menus item again. Okay, so our widgets, this is what, this is. This section right here is what's controlling this section right there. And so I suggest that you, you're stuck with three Widgets. Ok, so just pick three widgets that you like. Like a search box is really helpful. You can add in like recent posts if you like, if you want to change this to make this something else like an image or, or different pages or a sub-menu. You can go and do, go ahead and do that. And you can also change like recent comments, whatever, whatever you want to add that you have a bunch of different widgets down here that you can just easily add. So I would suggest either go with three widgets or just eliminate the widgets altogether. And so I personally like search and I personally like recent posts. So maybe like this one right here. I would kind of get rid of it, maybe make that my disclaimer. So get like their delete recent comments. There we go. Okay, and so let me just find where it says text. There we go, drag and drop that in there. Okay. So for example, I want this to say like something like the Amazon Associates disclaimer would be fun right there. So affiliate, this affiliate, this glue lemur. There we go. Okay? And then we can just come in here and I can right-click and paste. So it can say like I, phone authority is a participant. Thor, t. There we go. Okay. So let's go ahead and click on save. Go back here. New boat that. Alright, so that's fine. Okay, that looks great. Now for our legal pages like our privacy policy terms of use all that stuff, I definitely suggest that you use the menu options. So with this theme, you can have two menus. So you're gonna probably gonna have to go click on create a new menu. And so with the menu name, you can call it like footer, menu, whatever, okay, whatever you want. Now, make sure you have it selected as secondary menu. Okay, so let's go head and create new menu. Okay, so there we go. So now we can start adding in pages as we want. So now we actually need to create those legal pages, okay? So we have a privacy policy that comes, comes with a draft kinda default privacy policy that were present gives you with your installation was go ahead and publish this O k So we can navigate back out of that. And then maybe consider adding in a terms of use. So terms and conditions means like what do people abide by when visiting your website, so to speak. Ok, so that's the point of a terms of use privacy policy is about how your site collects data and information. The terms of the terms and conditions. Again, what do people agree to? What rules people grew to follow when they visit your website? Alright, so anyways, now we have that in. So let me go here and add new. And I'm gonna go ahead and add in a terms and conditions page. Terms and can dish shuns. There we go. Thank you. Really can't spell. Alright, so go ahead and publish that. Again. This is not exciting stuff guys, but this is just a basic stuff. You got it set up. And so obviously you're going to have to fill up your terms and condition pages on your own. But any leads us navigate to appearance. Let's go to menus. Alright, so now we have the secondary menu and I'm gonna say terms. We'll say, we'll Add to Menu. All right, so I don't see the privacy there, so we'll go to View All. And there we go. There's the privacy policy. There we go. Okay. So there we go. We've got terms and condition and privacy. So let me just open up that. I'll just change that to term. Actually, I like that terms and conditions is fine. And privacy policy actually, that's fine. I'll leave it there. Maybe I want privacy policy to come first. Anyways, click save menu. Alright, let's reload the sate and see how that looks. Okay, so let me just go into manageable cations. Okay, so let me click on footer menu, make sure you click on manual equations you have, you can have ten menus, but make sure you have the money that you want. Select the secondary menu. So I my footer menu right there. Click on save changes. Alright, me just reload the page again. Out there it is. Yeah. Okay, great. Alright, so there you go. So now we have our privacy policy terms and conditions, okay? And so what I personally do on website great pro is I have my main menu of like blog, a tutorial guide courses, et cetera. And then the footer right here is where I have my about contact resources, hire me legally stuff, that sort of thing, totally up to you what you wanna do. But notice, this is enough to help get you started. And that's kinda like how I would suggest editing the footer. Maybe you'll have like a search box recent pose or whatever affiliate to scream disclaimer. And then your legal these pages right here, like your privacy policy terms and conditions, et cetera. 13. Blog Post Design and Layout: The blogposts section of your website. So now if you click on blog, we created a dedicated blog page early in its serious, we could create a very beautiful homepage. And this is what the blog post page looks like. I think it looks really nice with this theme. Don't have too much ability to customize it, but you don't really need that much. And I really like to just simple and easy to navigate and easy to her just read. Now a couple of little settings right here. If we navigate over to reading right here, blog posts pages show ten posts at most. And so that, that dictates how many posts are going to be here. So if you want ten, you can have ten. If you want like five, then just changes to five. Okay? So if I come down here and change that to five, that will limit only five blog posts on this page. And then we'll start some page nation right there, bro, like moon 234 as you publish more content over time. Okay? Alright, so anyways, let's just jump into, let's just jump into a blog post right here. So click on this one. Okay, So this is what your blog post looks like. I think it looks really nice and easy to read where you have the image at the top and we have the title right there. Looks really cool. Anyway. So if we click on edit post, here's what I suggest doing just a little bit. Just some tips that you need to know. Okay, so first things first, you want to always make sure that your URL right here, you're all solid is something short and sweet and to the point, okay, so like right now, the URL structure for this page is pro settings for bla, bla, bla. You don't need to do that, okay, so the title is great, but what the Euro slope should be? It should be just short and sweet and a little bit more descriptive. Again, not a big thing. It's not the end of the world if you have something that long, but, you know, I would just say like what's the point of this page? Okay, low, low, light, photon gra, fee. Then iphone, you'll keep it something simple like that. We'll click on update. Now, over here is where you have your categories. You absolutely should be careful with what categories you choose to publish under. So what I mean is like me just reload this page actually. So what I suggest doing is like pick four categories, only four to just start off your block width and make sure that they are going to keyword rich and descriptive of what the website is about. So this website would be like about iPhone photography. Slave, what's irrelevant category, for example, in a relevant cabinet, camera, camera gear. That's a great category. Like camera gear, camera tutorials or iPhone tutorials. Whatever. You just wanna go through the process and pick relevant categories, just four. And then when you publish content, make sure to publish content under one category at a time. Under here you have tags. I personally don't use tags, so I don't recommend you use to actually, they're now right here we have the feature image. So the feature image is the image that you can have associated with the blog. So again, like if we navigate over to the blog, this is the feature image and that's breeds kinda do it right there. Okay, so now you're in back and see your content. And again, it's super simple with WordPress. So. Just make sure to break up the content as appropriate. So you want to use things like, for example, I want to make this into a title, so make that into an H2 title, for example, just whatever you want to break things up so it's a little bit more readable. So change that back into a paragraph. There we go. Again, like always, you have a bunch of different fun options over here. We can change things. We've default size, we won't make that H2 tag really big for some reason they omega huge, whatever, gigantic, You can do that, okay, just change things as you want. It won't change the line height. You can do that. And that's it. Ok, so just go through your blog posts and just break things up as appropriate. Okay, and so let me just update that will navigate. There we go. Okay, we'll navigate back to posts, will go back to our, there we go, URL. And there we go. Okay, so now you can break things up so it's a little bit more scannable. And again, don't forget that you have access to stackable other blocks, another WordPress plug-in so we can come down here. For example, this is one of my favorite blocks to use feature image right there. And so we can have an image over there. Someone just select something from my media library. I'll just take, we'll take this image, click on select, okay? And so we like that. And I can click on this block again. We'll click on this block over here, come over here to style, and can change things around. Like I'll make this basic like that. So it kinda stands out a little bit. Then the style and then container than I, border-radius and shadow outline like that. You know, make it. There we go. How quick and easy was that? So now if I reload the page, and there we go. So we have a really nice block that really stands out and grabs your attention. Nice little shadow, whatever. Like this is what I'm trying to emphasize that be creative a little bit with your blog posts. You have access to all these different blocks because a Gutenberg and can create a really effective looking blogposts that's, you know, get people to click and navigate people to specific directions. And that's it. Okay, that's kinda like what you need to know for your blog post and also just one little thing, Post categories. Your categories are controlled by this section over here, okay, so just navigate categories. And this is where you can add categories. And I also suggest jumping into the category page itself like this, okay? And so make sure that you have a nice description for the keyword phrase and make sure that you like this is a camera gear archives like no, that looks terrible. Like get rid of that. Call it like camera camera gear essentials. Okay. Like whatever, they must give it, just a relevant title and that sort of thing. Because people can click on that ray hears, they can click on that right here and navigate to the specific page related to this category. And so like now you can have it set up and you can have like a little title right there. And that title is being kinda controlled what you ever, you write in this description. And that's pretty much it. That's all you kinda really no need to know for your blog post section, let's go ahead and add breadcrumbs to our websites. So Breadcrumbs is this section right top, up, top here. And now I love adding breadcrumbs to oblige because it's just so helpful for a variety of reasons. First off, it's helpful for people who actually visit your website because then they can know where they are and navigate easily. It's great for search engines because it makes it easier to crawl and index your website and Google can understand the structure of your blog a lot more easily. And just a little thing like safe in web, say creative, creative pro. We'll just say domain names. Domain names. And so bright underneath here, for example, you see like what's a career pro blog domain names. For example, jet, that's what also breadcrumbs allows that to happen because it allows Google to index your site and gives you a nice clean URL structure. So, you know, someone who was visiting in senior site within the service are more likely to click on it because it just looks better. Anyway. So you could start with Breadcrumbs is very easy. So we're going to need a plugin. And the plugin we're going to need is PR, YC, WP. Again, PR YC wb. It's a totally random plugin that we want to add a custom content to post and page top and bottom. This one, totally random, 4 thousand installations, not super popular, but it makes installing breadcrumbs very easy for beginners because it allows you to just add content to the very top of any blog post and the very bottom of any blog post. Alright, so we're good to go now we need to navigate over to our SEO tab. And underneath here, we want to go into, I believe it's search appearance for Yost. There we go. Okay, now we want to click on the little tab that says breadcrumbs. And we want to enable breadcrumbs. Alright, we want to show the blog page. Yep, we went to Boulder, last page, yep, taxonomy to showing the breadcrumbs. We wanna show our categories, and that's it. Okay, now, click on save change. All right, so now if we view our website and we go to say a blacklist stage, open this up and we'll go to pro settings for this one. You're gonna, you're gonna notice that there's no breadcrumbs. And the reason is because we have breadcrumbs enable, but now we actually have to add it in. So anyways, what I want you to do next is go to settings and then I want you to go to PR, YC, WP. Now we can add custom content right up top there. And now we just need to get a short code for Yost breadcrumbs. So I'll just type in Yost bread crumbs. Literally use breadcrumbs. How to implement bread chromosomes should be the number one search result. Alright, so now we're gonna scan the page we want to find where he gives us our short code. There we go. Right here at WP SEO breadcrumbs would take that and right-click copy and put that there. Boom. Okay, now come down here, click on save changes. Okay, so let's reload the page. And there were no simple is that okay? So now we have breadcrumbs enabled. So now you can do cool things like if you want to center this, for example, we can just type in a center tag and make sure to close the tag. There we go. So come down there, click on Save Changes. Reload this. Okay, so now we've centered the, censored the breadcrumbs. And also you can just keep on going with this. So for example, if you want to add in like a disclosure. So I could say, I could do something like a break tag for example. Then we can say like this post, like this post may contain affiliate links. Check our disclosure for more. Okay? And so if I click on that, for example, we'll click on save changes. We can put that right there. And you know, maybe I want to have this to be a little bit smaller so I can like have a little thing like that. Then say, you know, something like a small tag. And then we'll close a small tag. Alright, and so there we go. Click on save, reload it. And so at the small tag does it just makes the, should make the content smaller alone. We reload the page. There we go. See what makes the content a little bit smaller than that looks really good. You can also just again Center that. Now if you're like, well, how do I link to disclosure page? Honestly, I recommend is opening up like a page. Just go to add new, let's go to a blank page and then just write disclosure and in hyperlinked to your own page. So for example, Laika disclosure, okay, and I can highlight this and take this and then HTTPS equals website,, whatever, you know, like. Like just link to your own disclosure page. Then click over here. And then we wanna click on this box and click on edit as HTML. And there we go. Okay, so we don't need the p tags, so it's a paragraph tag, we don't need that, but we do need this. Click on this copy and go over here. Then just back out of this, back to disclosure out and click on paste. And there we go. And now we have to do is click on save changes, for example. Then reload the page. And there we go. So now we have the disclosure of links. Okay, and so if you're gonna engage in affiliate marketing most your blog post is a good thing that kinda put in the top right there. And again, if you want to center it, just do the same thing they did here where you just add in a center tag and that's a kinda center this, and then you're good to go. So you know, you have breadcrumbs, so it's easy for people to navigate the website. You can add in this little disclosure thing right there. And you are good to go. 14. Add Related Posts: Adding interrelated post to your blog post. So related to pose or this item right at the bottom there. So for example, how do you add this? The process is very simple. You have to use something called jetpack. So jetpack is a plugin that's created by WordPress. And so to install all have to do again and just go to your plugins and new search for synchronous as jetpack, honestly should already, you should already have a jetpack installed on your installation because you installed WordPress. So anyways to get started, we just click this to get setup. Okay, so once you go ahead and set everything up, jetpack kinda takes it to this page a little bit. We have a bunch of upsells too. You know, pay for security and pay for jetpack, et cetera. Which you need to do is just ignore all of this. So install jetpack, create a WordPress account engine, just install it and then navigate back to your website. Okay, here we go. Here we go. Let's go back to where we were. Arie go so jetpack because you installed it, it's already activated in, it's ready to go. So there we go. Okay. So jetpack, it's good to go. It's already set up. Don't get confused by all the upsells and taking you to a different screen, et cetera. So to enable that, you just need to go to settings and then he needs to go to discussion. Then you just want to come down here where it says, oh, it's not there. We'll go to traffic. Sorry about that traffic. There we go. Then you want to click on show related posts surely had content after post. Now, jetpack will automatically do this organically. So if you only have like five blog posts, don't expect anything that pop up. Like, you need to have a lot of content before the starts appearing. And that's it. Okay, so it's literally just a click of a button. So we want to highlight related content. We want to show a thumbnail as related. And there you go. And that's literally it. And so once you start having enough content in your website, this is going to automatically populate in the footer of your blog post without you needing to do anything. 15. Hide "Powered by WordPress": And finally, let's finish off DIY tutorial with how to hide this Probably powered by WordPress now and this is totally up to you whether or not you went to hide it or not. I person want to hide it because I don't want an external link to WordPress. I don't want people navigating to the bottom of my site and click on this. Then navigating over to WordPress. Like my niche website is about iPhone photography like well, I don't want people. Directing people to is completely irrelevant. So anyways, we have to hide it. So unfortunately within the theme, there's no setting, just a terminal, click a button and turn off. We actually have to use a little bit of CSS, but it's not too complicated. So the CSS we're going to be using is display none. So this is in brackets, okay? And then you just write in display none. Now display none for what we have to figure out what this element on the page is called. So let's go ahead and highlight it. Then you want to click, and then you want to click on Inspect. Then you just want to pay attention to. So it's div class powered by, ah, okay, so it's powered by. So I'll click over here, type in dot, And I'll just type in power, powered dash. By. There we go. That's it. So now we can take this whole entire thing. That's the CSS that will hide the powered by WordPress because we're going to display none, to display none for this specific div class. So we'll take that. Okay. Now we need to go to customize. And all you want to do is just navigate to additional CSS and right-click paste. Okay, so we paste it in and powered by display none. We navigate to the bottom there and it's gone. Anyways, that is it for this tutorial. 16. Install Analytics: How to add Google Analytics to your website. So Google Analytics can be found by just doing a quick Google search for Google Analytics. And what this does is it gives you information based on how many people visit your website, how long they stay, what pages are being viewed, et cetera. And it's also really helpful because once you have Google Analytics installed on your website, you are then able to go to Google Search Console and verify your website in Google Search Console is one of the most hopeful tools Google provides for understanding how your website is being index in ranking in specific various changes that you can implement. Anyways, to get started, we have to install Google Analytics and it's very easy. So just go ahead and log into Google Analytics with a Gmail account of your choice. I'd definitely recommend having one Gmail account for all related services related to your website. Anyways, once you go through the sign-in process, which is completely for free, you're gonna get down here and you're gonna find a section where you're gonna get some type of tag, okay? And so what it says right here is that we have to take this and we have to put this in the header of every webpage B once. And so in order to do that, we have to have a header section. So what I like to do is add a new plugin called headers and footers. So let's go ahead and click on add new. Ok. Now let's search for headers and footers. Ok, yep, there we go. Okay, so insert headers and footers. Let's go ahead and click on install. And then go ahead and click on activate. All right, so now we have headers and footers installed. So just go over here to settings, go to your insert headers and footers. And now again, this has to go in the head, okay. This is the head tag. And so you have to, you have two spots, you have description, the header scripts in the body. It must go in the header, don't put it in the body. Otherwise you won't be able to verify your site with Google search console because it won't detect it. So it Haskell and header. So once you put it in there, all you have to do is click on save, and that is it. So now you have Google Analytics installed and you should give it a few days for it to start collecting information. 17. Additional Customization Options: The twin sig plugin. So now our website is functionally done. I think it looks really nice, but I want to just introduce to you this plugin because it does add a lot of helpful functionality to your website. In particular, you can adjust the header with a little bit more detail. The footer with a little bit more detail, your individual blog posts and your blog roll. So let's get to it. Welcome to my laptop. Well, let's begin. So let's adjust the header, the footer, and the fonts for our website now by default with the 20-20-20 implicitly logo on the left and then the menu bar on the right. If you don't have a menu bar, then it puts the logo right in the middle and then in the footer right down here you have your secondary menu and you have three widget blocks. And you're kinda stuck with this by default with the way the setup, but with the 20 GE plugin, you can actually change these things quickly and easily. Okay, so I'm going to show you how it works. So just go ahead and make sure that you have this installed inactivated. Anyways, once you click on the Customize button and your WordPress dashboard. There we go. So now you're gonna notice that you have something called 20 GHz options over here. And here is where you can kind of change things. So you have your site layout and this allows you to adjust the width of the texts sitewide, et cetera. And, and just the width of your website. Right over here you have your fonts and this is where you can kind of jump in and change the font to something else. So you have your body fonts, which means like this tax rate here, then you have your header font, which is this right there. Okay, so let me back out of this. Okay? And so if we go to here header, this is where we are. We can change our header layout, okay? So you can make the header sticky if you want. You can change the header to a different layout. So for example, I'll change it to stack sensor and see how that looks. Okay, so that looks good. Now we have header padding, we have large, we can make that medium. And so what padding should do should produce the amount of space between the different elements. And last, we have the option to go ahead and select like a sticky header for example. And so what that means, the header will stay at the top as we scroll through the site. I'm not a big fan of sticky header is personally, but again, with this plug-in, you have the option to change and adjust these things just like that very easily. Now, you have the same option with the footer. Okay, so if we come down here to the footer, we have our three sections right there. So I personally like the way that 20-20 one dean looks just out of box. But again, it's really helpful that you can just change things a little bit easily. So footer layout we can have, for example, inline. Okay, and so what you've noticed is that it moved the secondary menu from over here to down here, which I think actually looks a lot better. So if you want to have like the logo and then your legal pages on the bottom right there. You know, the 20 EQ plugin allows you to easily do that. Then here you can just change the footer width and credit if you want, you can have custom, but again, the tutorial I showed you how to hide. The powered by WordPress, but there's just a little bit of CSS. But you know, that's it. So you can come over here and change the footer widgets to what you want. If you want a wide are full or different columns, like if you only want to, again, you have that a lot of flexibility. So anyways, that's how you can adjust the header, the footer, and the so anyways, that's how you can adjust the header, the footer, and the type atrophy using the 20 plug-in with detuned T2 and T1 theme blog boast in a blog archive customization. So what's really nice about this additional plugin is it allows you to change how this is presented. And so for me personally, I really liked the way the 20-20-20 looks by default where we have nice big feature image padding on the left and the right there to kinda make it focused on the paragraph. I think this looks quite nice, but not everyone wants to this specific layout. And I am personally a bigger fan of like a grid layout like this. And so with this plugin, you can do that. So we go over here to the options, we go to blog. And now we have two options here we have the blog post page, okay? And they got, pay attention to what you're editing. Then we come down here and we have single post right there. So this is the blog post page, and we can just click and change it to a grid layout. There we go. And if you want to enable a sidebar, you can do that right there. And then right here you can change the separator rate. If you want a card with no shadow, whatever, you can change the columns, you can have a display or hide a feature image. I personally would display a feature image, of course, and that's it. And so we can come down there and we can hide this meta-description stuff. So it's like, I don't want the date or the categories or the tags to be on this. I just want the title in the image. Ok. So now right here, annoying thing is that the excerpt length, you do have to have an excerpt, okay? So if you put one, it'll have one word. If you put 0, then well, that just means it doesn't exist. And so just comes back to by default. So bursting out, put it like five or six, just so it's like a little sentence again, that's not the way I personally like I just, people aren't going to click on it because of the paragraph. People gonna click it based on the image, it based on the title, primarily. But again, it's nice that you can at least a justice to make it look a little bit different. And so I think that looks really nice. Now if we come over here to a single blog post, we can navigate again, back to the Options tab, go to blog. Then we come down here income towards this single post. Now right here, you can enable a sidebar if you want. I personally, not a fan of sidebars. I don't use sidebars on any of my websites. Totally up to you. I know some people really want a sidebar, but not a big for me, it's not a big deal. So anyways, right here, we can have the feature image Leo and I loved this, that we can have it as no image. Like I think this is great because I personally don't like having feature images on my individual blog posts when they're open because all it does is push down the content. It doesn't really add anything to the blog post. I like to use images to demonstrate something. But apart from that, I don't like to have images just for just for show. And I like to have featured images and have those feature images appear when people were on the blog. But the individual posts like C right here, I don't use a feature image. I use images obviously like to demonstrate something, but not just for decoration purposes. So I really liked I can just hide something like that really easily. Then again, you have your other different options. You have your posX with alignment post font size. You can hide the meta-description, all this information right here. If you want to get rid of the d author categories tags, which I personally would suggest doing. Because in the full link tutorial, I didn't instruct you on how to set this up right here with breadcrumbs. Who were you have your category right there. And we have our linked to or disclosure page. So there's no need to have like another link to the category page and the bottom section right there. And then you can then display comments or turn comments off for here. But anyway, so that's how you can edit your blog post pages and your blog post archive, creative page options that you should be aware of. So I went ahead and open up the About page, a feature image on the about page. And personally by default, I think the feature images are pretty useless. Andy, 20-20, one Dean for pages because this doesn't do anything other than just pushed the content down. So it's not particularly useful. So the feature image is set over here. But once you have this plugin enabled, all you have to do is come over here and then find where it says pages under your options. And then right here where it says Featured Image layout, we can change it to something a little bit more useful like cover and boom, this looks great. That looks really nice and professional. And so if I want to have the text centered, for example, page title centered, there we go. Okay, so that looks really nice, it looks really professional and that actually makes the feature image a lot more functional with the 20-20-20. Now, some of you may ask, what can we do the same thing with the homepage? And unfortunately, not really, because I can set a feature image up top there, but all it does just adds a feature image with no call to action. So the way that this is working right here, I instruct you in that tutorial, but it's a cover image. And then this is h one title tag that I added myself. And so that's kinda how I added this section. So it just doesn't work like a vague, I can go ahead and add in a feature image will just add this one. I'll click on select, go ahead and click Update, and let's go ahead and reload this page. Okay, so now the feature image just sitting here awkwardly at the top of the website. And the only thing I could do is come over here and change it to something like cover. But again, the issue is that it doesn't allow you to have a call to action because the 20-20 when V01 is smart enough to where it just if you set the page as the homepage hides the homepage title so you can add your own call to action in which I really like. But for this purpose, for purposes of this feature, it's not very functional, but it's really functional. If you have like an about page contact page, resource page and you want to add like a beautiful like background image. You can do that with this plugin, helpful blocks for your blog posts and pages. So once you have this plug-in installed, it does come with it's own section of blocks that you can just install at the click of a button. It's really nice. Note does work a little bit differently because you're going to notice a TW button up top there, you click that. Then you're going to have what they call our patterns. Honestly, those are just functionally blocks. And so it does work a little bit differently because I'm used to like something like stackable where I click on Browse and these purplish pink blocks are added by stackable. I really like this because I want to add it to my black library. Again, not a big deal, but anyways, let's go ahead and add one of these in. So let me just click down here. And so right here we can come down here and I can click on pricing for example. And I want to add in, say, this bracing table. There we go. Okay, so a quick underneath that, I'll click on patterns back here. Okay, and so now I can just add in something else. So if I want to add in like say latest posts, so I can do that here. So I'm personally using stackable to add my latest blog posts in. But you know, again, you have that functionality if you don't want to use Sakhalin and you want to use this feature instead. And so you can just go through here, I'm sure you're going to find at least a one or two patterns that you think are really helpful be at like the FAQ or pricing or, you know, testimonials for example. I can just click on that over here. So it's not like a super crazy, well-designed, but it's really nice because you can just add in helpful block sections that are already come predesigned. They can just jump in and edit as you want. And also another interesting thing that they do have pages. So they homepage about services and contact. And so these are already kinda like pre-designed. So like pre-designed homepage that you can just kind of install yourself. Again, I'm not a big fan of templates. I like kind of knowing and understanding how to do things myself, InDesign myself and have control over everything myself. But I am pretty impressed with their template library because just very easy to add in some type of like helpful block either to your homepage page or your blogposts section. 18. Conclusion: Okay, that's it for this course on the 2021 theme from the WordPress. So I hope you got tremendous value out of it and I hope you found it really helpful. And I really hope that you're able to create a very beautiful, responsive, effective looking website using this awesome free theme from WordPress. Anyways, I just wanna take a quick second and just say, thank you very much for enrolling and have a good day. Bye bye.