Create a Professional, Branded Website With a Clear Call To Action

1. 1. Intro: Welcome to my skill share course, my name is David, and I'm going to walk you through step one to step done, how to create a very beautiful professional high converting website in Blog using the 2024 theme from Wordpress. In this course, I'm going to cover everything that you need to know. That means I'm going to show you how to get a domain name, at a domain name register, how to get a web hosting account, how to install WordPress, and then how to design your website in Blog with the 2024. Key features of this design are to focus in on a high converting homepage with a clear call to action that directs the end visitor to a web magnet that helps grow your email list so you can sell products and services. Also show you how to design various pages for your website, how to blog with this theme, how to edit the header, the footer, and all the other little design elements that you need to know. So if you've been looking to create a very beautiful professional high converting website and blog with a clear call to action, this course is for you. If you're ready to get started, let's begin. 2. 2. Site Overview: The website, I'm going to show you how to make. So the goal is not to teach you how to make this exact site. It's just to show you how to edit and adjust different aspects of the site so you can achieve a similar outcome. Specifically, like, how do you make an offer section at the very top of your website with a nice H one title tag, a nice big button has a little bit of animation associated with it, a sales video over there, selling Oma to help sell people on why they want to take advantage of the free offer. How to add in additional sales copy to your site design, add in blog post, a final call to action, how to edit and adjust the footer, how to add internal, external links, how to adjust this menu at the top there, add a button, create a logo, add a favicon, and adjust your blog post pages, as well as your individual blog post, all those little details you need to know for designing a very effective site that's high converting with this free theme. Anyways, let's get started. 3. 3. Domain Names: To my laptop. Let's begin. So the first step with creating a website with the 2024 theme from WordPress is to register a domain name. While you can get a domain name at a web host, I strongly recommend using a dedicated domain name register. You'll get better prices, for who is protection, and lower renewal rates. Now, I personally use and recommend Namecheap. Now, to get started with Namecheap is very simple. All you have to do is type the domain name that you want to register in this box and then click on Search. Okay, so after you've inputted your domain name, let's go ahead and click on this Big Red button. Fantastic. So the domain name will come up whether or not it's available to register. Now, if it's not available to register, that means you have to come up here and figure out a different word combination. Now, I definitely suggest getting a.com if this is your first website. But if your domain name is available, simply click on the add two cards button. Now, you can ignore all these upsells over here, and then you can just click on the Checkout button. And it's really that simple. So now we're on the checkout page, so we have our domain name registration. Now what's cool about a domain name register is that you can register your domain name up to ten years for a low price, you get free his protection. So us Protection is very important because when you register your domain name, you do have to provide accurate information about who you are, like your name, email, address, phone number, sensitive information, and so domandamePrivacy just keeps all that information private, so you definitely want to have this enabled. Now, you're going to want to click on Confirm Order when you're ready to register your domain name, and you're going to have to create a Namecheap account and then add in all that additional information like your name, email, phone number, and so forth, as well as just creating an account for Namecheap. So when you're ready to proceed, click on Confirm Order. 4. 4. Web Hosting: It's time to get hosting. So you need a web host in order to have a website. And in this tutorial, I'm going to be using Hostinger. Now, I really like Hosting herer because they are very cost effective and beginner friendly, and they're ideal. If you're just starting out, you need a basic quality web hoosting plan. On top of that, they're also recommended by Wordpress right here. So they're a quality web host with a great price. Now you can click over here to claim the deal, but let's click over here for hosting. We want web hosting, okay? And so this is the web hosting page right here. Let's just scroll down a little bit. You have a couple of different plans, premium business, Cloud startup. I like the business plan personally. What's the main difference between these two? Well, you get 100,000 monthly visits over here, and you get a free CDN. So CDN helps speed up your website. So that's quite useful. But the premium plan is fine. If you go to the premium plan, you want to upgrade to the business plan, you can do that. But the price difference is so small, I would probably just go with the business plan. So just click on this Choose plan. And finally, all you have to do is complete your order. So I'm not going to insult your intelligence and show you how to pay for something online. Just a few key things you want to pay attention to since you're on this page. Now, you do get a 30 day money back guarantee. And right down here with Business web hosting, you have the period of time. So you got 48 months you can change this to 12, 24, 48 or one month. Personally go year over year after year. You can make a decision if this is for you or not. You do get a free domain name if you buy web hosting for a year or longer. Now, the catch with the free domain name is it's free for the first year, but then after that, you have to pay the renewal rates, which is why I like Name jeep because Namecheap has lower renewal rates, and you can register a domain name for up to ten years in advance. That's personally why I like to keep my services separate. Anyway, it is right down here. You can create your accounts. You can select your payment option and then navigate down here with a coupon code, and we can use web P. Click on Apply, and that will save money as well. And then when you're ready to purchase, click over here to submit secure payment, and you are good to go. 5. 5. Website Setup: Welcome to HostingR So now it's time to install WordPress. So once you sign to Hostinger and you go through the onboarding process, you create your account, you're going to get a bunch of emails. And this is what the dashboard initially looks like. So you're going to have your account actions and you can set up your hosting. So let's get started. So I have my business web posting right here. Let's go ahead and click on Setup. And it's going to direct you to an onboarding process. So click over here for I'll create a website, then click on Next. Now, this onboarding process is very useful if you don't have any type of tutorial video, but because you have this video, we're just going to be clicking on Skip. And then we're going to be using a website that we already own. Okay? So we registered our domain name at Namecheap. So what do you have to do? You have to put in your domain name right here. So let me navigate over here to Namecheap. This is the domain name that I'm going to be using voghow.com. So let me type that in voghow.com. And it will pop up underneath that this has already been registered registered at another provider. Now, again, because you signed up for a year or longer hosting account, you do get a free domain name for the first year. So if you want to take advantage of that, you can do that right here, but I already registered this domainame at Namecheap, so I'm going to click on that. When using a domain name, register elsewhere, you need to manually connect it to your website. No problem. I'll show you how to do that. It takes a minute. It's not complicated at all. Anyways, just click on next. But and now we can select where we want our data center to be. So you want to pick the data center that's closest to where your traffic is. So I'm going to click over here for Massachusetts, and let's click on next. And it's initializing setup. Fantastic. So this is our dashboard for hostinger. So first off, right up top here, it says domain status, not pointing to our name servers. Let's click on how to fix this. Let's click on Let's Get Started or whatever. And right here are the Hostinger name servers. So we need to take these name servers and input them into Namecheap. So anyways, log into your name cheap accounts. Go to the domain name that you want to manage. So here's the lockow.com domain name. Click on manage. Then it'll take you to this page right here. Now, you need to navigate right down here, Namecheap, basic DNS. Click the little dropdown. Click on Custom DNS. Now we have name server one and name server two. Where do we get that information? Right here. Simple as that. Copy and paste this in. Boom. And take this one. And put that in right there. And it's one, and it's two. Make sure to click on this little green check mark right there. And fantastic. So it says DNAT servers may take up to 48 hours to take effect. So it's called propagation. I've never seen it take that long. It takes, like, maybe 10 minutes, maybe maybe a day to propagate with every single name server worldwide, but within a few minutes, it'll be linked correctly. So anyway, let me X away from that. It's as simple as that. That's all you have to do. Just wait. It's not a big deal. You can continue installing your website. Let's go ahead and install WordPress. So we just set up our name servers to connect our domain name at Namecheb to our hosting account here at Hostinger. And now we can just install WordPress. So it's only been a few minutes and that little banner is already gone, so simple as that. All right, so let's click over here on the Auto Installer button right there, and it's going to pop up with a few different options. We have Juma, WooCommerce, Wordpress, we want Wordpress right here, so go ahead and click on Select. And then just install WordPress on the domain name. So the website title. So I'll just call this vlog H, and I'll change this over here. And we'll call this actually, I'll call that vlog, one, two, three, and then create a password. And there you go. Now, click on. Once you're all set, everything's good. Click on next. You can also open up Advance if you want over here for the installation path. So if you want to enter, sorry, if you want to install this on the subdirectory. Most people, that's not required. So a subdirectory would be like, I want to install this only on slash Blog, and then maybe use Juma for the.com, the root domain name. Why this is under advanced. Most people don't want to do that. You want to install WordPress on the entire domain name. So keep it simple like this. Enter username, password, email, and the website title. Then click on next. And over here, we have the application version, language, disspace, all this good stuff. Just keep everything as is and click on Install. Done. It is as simple as that. It takes a minute. So Wordpress has been installed, and to access your website, you can click over here for the Admin panel, it'll open up into a new tab. And there we go. It is as simple as that. Hosting makes this incredibly easy to install WordPress. So we're good to go. That's literally it. So you can access your site in a few different ways. You can either log into your hosting or accounts, navigate to your dashboard, then click on the Admin panel. I personally would recommend just logging directly to your website, so I'll let me show you how to do that. So since you're over here, just make sure everything's good. Like the SSL certificate is active and working. If it's not, click the butts in to reinstall it and make sure everything's good. If you have any issues, you can always click over here for the chatbot support for hosting and get in touch with support. Anyway, so this is your website. So let me go ahead and log Out. I know, we just logged in. Let me logout. All right. So how do you access this dashboard section right here? It's very simple you go to your domain name, so mine's blockout.com. Then it's WP Admin. Open that up, and that's this right here. How do you log in ter in your years name or email that you just created and the password that you just created. So let me go ahead and do that. Okay. And let me go ahead and click on the Log in. And there you go. So it's as simple as that to go log into your website as needed. That's how I recommend accessing your website instead of logging into your hosting account. Most people don't do that. Most people go to WP Admin and log into the website directly. Anyways, that's how you insall Wordpress with Hostinger. 6. 6. Wordpress Overview: To WordPress. We have a couple of things to do to clean up Wordpress on the back end before we begin designing our website. So let's get started. We click Dismiss over here. The first thing we want to do is delete a few different plug ins that come installed with our hosting our account. Now this is totally optional up to you, but I like to keep everything very clean. So we have hosting AI tools, onboarding. I'm just going to go ahead and deactivate all of these. We click on Apply over here. We go. And then you can click on Delete if you want to remove it. I'm also going to deactivate light speed cache because a cachet plugin is essential as you're designing your website and it helps speed it up because it delivers a cache version to the end visitor. But because we're designing the site and making a lot of changes, we don't want our site cached as we're designing it. So you just want to deactivate this, and then when your site is completely done, you're ready to go, then you want to reactivate it. Let me just click over here to deactivate that now let's go ahead and add in a new plug in over here and I'm going to type in Rank Math. Rank Math is my personal favorite SEO plugin. Just gives you control over the SEO titles, meta description, three oh one redirects, a bunch of helpful little things. So let me go ahead and click on Install right here, and then we'll click on Activate. And it's going to direct us to an onboarding process over here. If you want to go through this, you can, but I'm going to click over here to skip now so I can navigate back to the dashboard, and let's just click down there to return to the dashboard. And there you go. So if you want to navigate back to that page, you're like, Oh, David, how do I get Setup Wizard. Okay? So all you have to do is click over here for Setup Wizard, and that directs you back to that onboarding process. Alright. So anyways, the next thing we want to check out over here is users. So over here is your username and email that you have tie to everything, and over here is the role. So you should have an administrator role. You'll notice that I have a little picture of myself next to this right here. How does that work? It's from a service called Gravitar. So you can just sign it to Gravitar it's free to use. Then you attach an email and a picture together. So a picture always comes up with the associated email. So that's how this is being populated right over there. And once you're in your user account, this is where you can change passwords and add in a nice description. So additional profile URLs, biographical information. So this is that little section when you see on a blog where you see David likes long walks on the beach, that type of thing. You put that in right here. Then you can generate a new password right down there as well. And then we have rank Math installed. So now we can change how the snippet looks for the author. So the author is the author title right there. So that's why I like rank math. But anyways, that's what you do with the settings over here. So let me back out of this. And let's go ahead and add in a new user just to show you the different roles that you can create. So over here, you have different roles, you have subscriber, contributor, author, editor, administrator. This is useful when you bring on writers and additional people just to publish content on your website. You don't want to give people administrator access. Usually, you want to add in an author or an editor because those have different access to the site. So like an editor can edit all author pieces of content. Author can only edit their own piece of content. So you can look up this on your own, but that's why you'd want to have different roles. If your site ever grows, you want to bring on additional people. Type of thing. All right, so anyways, let's click over here for settings. Yeah, I want to leave this page not now. All right, so right here is the site title and the tagline. This is not really that important. So you can just leave it as is. The site icon is the Fabcon. So you can click on choose a site icon and that's this little favicon right there. Then over here, you have your WordPress URL, site address, and you're good to go. That's really it over here. Now let's click on reading. And over here in reading, you have your blog post shows most posts at times, syndication feed shows this. So you just want to keep everything as needed over here and writing just basic stuff over there. Nothing really to mention. Let me click over here. Now, this is fine over here. You have discussion settings if you're going to enable comments on your site. But the really important one right here is permink that you want to pay attention to. Now, by default, Wordpress now has postname as the default URL structure, and it's acceptable. So it's going to be website.com slash POS Title. I personally quite like. Another structure that I like would be to add in the category if you want. So I wouldn't have category first. We'll take that and put that right there. So you can have category. There you go. Category, post name, if you want. But I personally use post name myself. But if you have a really big website, and you're going to have specific categories and subcategories in this URL structure is quite useful. But for 99% of people, post name is all you need, so just keep everything as is over here. But if you ever want to change the URL structure, this is where you do it, but I definitely suggest pick a URL structure and stick with it. Don't change it later on. All right, so anyways, that's really just the basic overview of things you need to know with WordPress now we want to navigate over here to appearance and themes. Now you want the 2024 theme activated. You have the 2023, 2022 theme over here. So you just want to make sure that this theme is the one that is active. You can also go ahead and delete these themes as well if you want. I can click over here and click on Deletes. We'll click Okay, then click over here, click on Deletes, then click Okay. And then we just have the 2024 theme. Now we are ready to design our website. 7. 7. Using The Full Site Editor: Let's begin designing our website with the 2024 theme from WordPress. First off, let's go ahead and take a look at our website. Click over here where the logo is. Click on Visit Site. Boom. They should open up right here. Now, by default, this is a pretty good homepage. I really like it, but we are going to be designing a homepage from scratch, don't worry, but let me just show you how this works. Once this is open up, you can click over here to edit the site, then begin designing the homepage and any design elements that you see in front of you. If you just want to open up the editor directly, then you navigate over here to appearance. Then you click on Editor. There we go. Let's wait for that to elude. And yeah, Okay, so now the site is loading. So over here, we have a couple of different options. So you have your navigation. Your navigation is this element right there. So it says page list cannot retrieve pages. That's because there's no pages yet. So don't worry. But when you publish a page like about contact, et cetera, it'll be automatically populated up top there, and we'll get to how to edit this top section later. You have your styles right there. So by default, this comes with a bunch of different palettes that you can just click on and changes the colors. And of course, you can just customize everything yourself, whatever colors that you want and whatever font choice that you want as well. Over here is your pages. So publish schedule drafts pending. And then we have our templates right there. So you can view all the templates that are built into this site that you can leverage. So quite nice over there. Then patterns right there. And patterns are just simply block sections that you can just add in to the site at the click of a button. So you see that's all locked. That's because you can't adjust it, but you can add in these sections or patterns, whatever you want to call it within the specific page that you're editing. So you don't really want to edit it from here. Anyways, so that's broadly speaking, how this element over here works. So now we can click in to the site right there, and we have a few different things. So let's click on this one right there. See how it's like a block. So this is called the block Editor. Now a few things you need to be aware of when using the block editor is you want to click on this, now I'm editing this block. Now, if I want to edit a different block, you just click on it. It's that simple. And then you want to make sure that you have a couple of different options up top here, you have Save. You have your settings, then you have your styles. Styles are global. This changes everything on the site. And so this element right there does the same thing as the other section where you can just automatically change the style there. Most of the time, you're going to want to be over here in your settings and then the block and then adjusting the specific block. Now, once you have a block, we'll click on this one. So a commitment to innovation and sustainability. All right, so we have styles, we have default. And with Asterisk, this is just a unique aspect of this theme, so we'll just keep it as default. And over here, I can change the text color, and the background of the color. For the text, if I want, typography over here, we have different sizes that we can play around with. If you want to have a little bit more granular control, you can just click on this right there and then opens up as needed. Then dimensions are over here, so you have padding margins. So padding and margins, you can make this wider or more narrow if you want, Advanced, you can set up an HTML anchor link. So an anchor link, what that is, if you want to have a menu item up top here, we'll say resources. User clicks on resources, then they're dragged down to a specific section on the page and not a separate page. That's all that an anchor link is. But most of the time, you're going to be clicking over into a block, and you're going to be click away from that. So we're going to be clicking this one settings. Then you're going to be using the block, then just changing the text, background typography. And with the 2024 theme has this Asterk feature. So when you're designing different elements, like, you're like, over here, like, How do I get rid of this? Like, I want to get rid of the Asterik. I can't just click away and then turn it off like that with default with Asterk. That's how it works. But again, like I said, we're going to be designing a custom homepage, but I'm just giving you a kind of a broad overview about how this design process works. And so there you go. So, click on the W and then to navigate back to the Editor dashboard. And it's really that simple. So let's begin designing our homepage. 8. 8. Homepage Setup: Let's go ahead and create a dedicated homepage for our website. So to get started, is really easy. All you have to do is navigate over to pages. And then once this opens up, click on Add New. Now, we're going to create a page and then set it as the homepage, so it doesn't really matter what you title this. I don't know why that's popping up. Anyways, just add in a title. So I'll just call this home page. Keep it simple. Let's go ahead and click on Publish. Click on Publish. And simple as that. Now let's click on W and navigate back to our Wordpress dashboard, and we want to navigate down here to settings. Then we want to navigate over to reading. Your homepage displays your latest post or astatic page. We want to click on static page. And for the homepage, we want to select homepage or whatever you happen to title of the page doesn't matter. So anyway, let me click on Save Changes. And there we go. So let's take a look at the site, so I'm going to click on the logo. Open this in a new tab, and boom. Los r. Looks exactly what I expected. Home page. So now we can use this as a blank template, but there are just one additional little step that we need to do. So let's navigate over to our pages, and let's open this page up. Okay, so what we need to do is, why is that popping up again? Anyways, we need to adjust the settings on the back end over here. So we need to open up page, and then we need to change the templates over here from pages, and then we want to swap template. Now you're like, Well, why? Why do I want to do that? All right, so open up the site again and take a quick look. Right now, what do you see? You see an H one title tag front and center that says homepage. I don't want this H one title tag. I don't want this title sitting at the very top of the page and I can't get rid of it. It's like, How do I get rid of this and add in something else that's a little bit more compelling and better designed. So with this theme, it's very simple. All you have to do is click templates over here for page. Then you want to click on Swap Template. Now, you have a couple of different templates. You have page with sidebar, page with image, or page, no title. We want page with no title. Then click on Save. So it should say page no title right there. Let me just click on Save There we go. And there we go. All right, so let's go ahead and reload this. And there we go. So now we have a nice blank template to begin editing our website. 9. 9. Create a Call to Action: Adding in a call to action for our website. Now, let's take a look at the homepage. We have a blank template set up, and the way I'm going to design this homepage, it's sort of like a sales page for a free offer. So you've seen on other websites where it's like, download my eBook, get my checklist, watch my master class, whatever. We're going to be designing a homepage that's like that in addition to blogposts and pages and the header and the footer. All that stuff I'll show you later in the tutorial video. But right now, we need to be adding in a call to action at the very top right here. So navigate back to the page that you have set as your homepage. Then click on the plus sign. Then click on Browse all. Then we want to navigate over here to patterns. Now, you have a bunch of different patterns all about banners, called action featured, so forth. If you jump into called action, you have a bunch of different templates over here that are quite nice. And I'm going to actually be using this one. This is just good example to show you how to edit things. Right here, this looks quite nice. Let me click over here for the settings. Now that I have the settings open, we have this background color. Maybe you don't like this color. So make sure you have the image or the pattern, whatever you want to call it, selected. And then make sure you have block selected. You want to navigate right here to the settings or the styles. And then this is where you can change the color. So I want to change the background, and I want to inherit the theme color. So there's whites, and then there's the theme color. So I like the theme color that's off white. I like the way this is set up. And then over here, this should be your H one title tag. Why your H one title tag? Because it's the title of the page. Because again, remember this is your H one title tag, but the tempo that we're using, we're hiding the page title. So this is now the page title. So you need to highlight this, change this to H one, and you feel like, Well, I don't like how big that is. Like, no problem. Click over here for typography, and then you can kind of minimize this a little bit, shrink it down just a bit. Then you can change the copy over here as needed, right here and here. Now, we have this image over here and you can replace this image with your own image. Obviously, you're going to have to create an image, and it should display what the end user is going to get. Whatever your free offer is, whether maybe it's a video, a course, again, master class, cheat cheat, checklist, whatever. You're going to have to create a graphic and add it in over here. But you can also add in a video, which is what I'm going to show you how to do. We can just click on this image right here. Actually, let me go ahead and click on Save. And let's take a quick look to see how this appears. Let's reload the sites right there. And yeah, that looks great. I want to change this to say a video. I have a couple of different tabs already open for video, so let me just click on this image and click on Delete. So just remove the image. Now we can add in a video over here. So let me click on the plus sign, and I want to type in YouTube, and then there's a YouTube button right there. And this little YouTube block. We can paste this in. Click on Embed, and we'll click on Save again over here. And now let's reload this. Yeah, and now we have a nice looking video right there. But what if you're like, Well, I don't want to embed YouTube or I want to be a little bit more branded for my site, totally fine. So I definitely suggest using an alternative hosting option like Vemo or Vemo. Vimeo, not Vemo. Not sending money. Vmeo or something like that. If you want to use YouTube, you can maybe just make the video unlisted, and then use a dedicated plug in for Wordpress that can help you brand the video a little bit better. So what plug in do I recommend? So let me close out of that. Click over here for the W, and let's navigate down here to plug in or plug ins. And let's go add a new plugin. And we're going to add in Presto player Presto layer right here. Okay, it's the ultimate video player by Presto player. Okay, so maybe it's called the Ultimate Video player now. Anyways, go ahead and install this. The ultimate video player for WordPress, by Presto Player. Let's click on Activate over there. And good. So now we have rank Mathio and Presto player as active plugins on the site. So now we need to navigate back to our pages. And let's go into the homepage, the page that we're editing over here. And now we can again, delete that and click on the plus sign. And then we want to type in Presto player. So Presto player right there. Click on Ns and this is a YouTube video. So if you are creating a sales video, I definitely recommend using VMO. So just because it removes all sorts of, like, recommended videos and all that. But you can use YouTube and use unlisted video for your sales video to entice people to click the button over here to download the thing that you're giving away. Anyways, let me take this URL again and let's put that URL right here. Let's click on Add video. And that looks much better. So let's quick on save. And let's go ahead and open up the site just to take a look yeah, there we go. Okay, so everything loaded correctly. The reason I like Presto player is because you have a lot more control over the look, feel, branding of the video that's being displayed on your sites. So if I click over here, if I click over here, now we have the block selected, and then I have a bunch of different options for the way this video player is displayed. Video settings, muted, autoplay, play time over there, and then we have default. I can change the course, minimal, simple, YouTube, optimized. So just a bunch of helpful presets over there, global player branding, so you can change the color over here to match the design of your site and your chosen colors for your website. So anyway, that's why I like Presto player because you have a little bit more flexibility and control over how this is displayed on your site. So next thing you need to do is, again, for your site, make sure to create some type of sales video if you're going to be offering some type of free course or whatever, and then have a nice video, upload it to Vimeo or YouTube, make it unlisted, then use Presto Player. Then change the copy over here to match the free offer. 10. 10. Customizing the Call to Action: So I updated the copy for our call to action. So a few different things I did. So I bolded the text up top here. I added in little checkmark emojis for bullet points, so it stands out a little bit more. And I updated the button, so it's a little bit more attention grabbing and changed the color, so it matched the video player over here. Now, let me jump in here and just show you what I did. So how to highlight the text and bold it, just highlight the text. And click on the B button. That bolds the text right there. And then text paragraph right there, very simple. Then I just added in bullet points right here. So literally this is just a line of text, line of texts, line of texts. Now, how did I get this little checkmark Emoji? I just literally Googled green checkmark Emoji. And then directed me to Emoji PDA over here. You click on Copy, then you click on Paste, paste, paste. Done. Simple as that. Then right over here, we have the button. So I did a few different things over here. The first thing I did is under the settings for the block, I have it be 100%. So that does, it makes the button 100% wide to fill in the entire this vertical section over here. So it just looks appropriate. Then the other thing I did was click on styles. Then I went to background and made the background color of the button, match the video player over here, and then I just made the typography L large. So again, it's more attention grabbing. 11. 11. Finalizing the Call to Action Section: Okay, so this button right here, not going to lie. It kind of sucks because it lacks animation. With buttons on your website, you do want to have some type of animation to indicate to the end user that they can click and interact with this button. So if this was able to highlight, darken, lift, whatever, just do something, that would be great. But unfortunately, this is the default button with Wordpress, and there are no options to have any features like that. So we're going to have to install a different plug in and create a different button. Now, again, if you're happy with this button, you're like, I don't care. This is fine for me. Fine. Great. Keep it. Up. But for me, I want something that's a little bit more attention grabbing and dynamic. So anyway, let me click over here. Let's click on the W, and we're going to navigate over here to Plugins. And I'm going to add in a plugin called stackable. So click on Au Plugin. Then click over here and type in Stack ble, Stack, ble. All right. Search for that. All right, so here's Stack Bull Page Builder Gutenberg Blocks. All this does, it adds in additional blocks for you to use for designing your website. Click on Install and click on Activate. There we go. And we'll click on skip over here. All right, so that's installed. So let's navigate back to our pages and go back to the homepage that we're editing. And it's time to add in a new button. So let's navigate down here. Let me hit a little bit of space. Click on the plus sign, and navigate here and click on Browse A. So now that you have stackable installed, and there's a wide range of Wordpress plugins that add in additional blocks. I just like stackable. So this purplish, hot pink color, this is stackable. So what we want is we want to add in the button. So right here for button, that's a stackable button. Now we can begin designing our new button. So let me go ahead and add in the text right here. So get the mini course over here. Okay, so that looks good over there. And we want to change the color of this button to match. So let me click over here. Let's click on styles, background, and the custom color that I have right there. We'll click on Copy over there. Then let's click on the button over here. And butts and colors right there. Then butts and color. Click on that. And then right here, we just want to copy and paste that color in, and there we go. And that looks good. So again, bit small. We want the text to be bigger, and we want the button to be bigger. But we can do all that within StacableJ a little bit different. Like you can't highlight the text here and all that. You have to interact with everything over here. So that was button Color. Now button sides and spacing, borders and shadows, icon, typography. Let's jump over here for typography. And over here, we can make the button a little bit bigger. So keep it like that. And I want to change the typography and make the weight. We'll just say bold. And yeah, that looks great over there. So let's click on Save and see how that is looking. Let's revad the sight Okay, so I quite like this button the way that this is set up, so it looks good over here, so let's click on the button again. And we can just keep going. So with the layout over here, if you navigate over here, so you have block size and spacing, so you can have a bunch of different margins and padding, little things like that. You're going to typically be staying in the style section over here. You have default, Goes plain link. I like default. Anyway, so button borders and shadows over here. So you can add in a border radius if you want to have it be a little bit rounder. So I do like little bit rounder right there. Keep it maybe just a four, just ever so subtle right there. And then shadow outline. You can give the button a nice shadow just so pops off the web page, you can go nine. I'll just keep it something subtle like that, maybe a five. Styles over here, hover effect. Right now it's sent to darken. And I want this to be's say lift. Keep it as lift right there, and maybe we can make the button a little bit bigger button size and spacing. So maybe just full width, keep it simple like that. And let's click on Save And let's reload the sights. And yeah, that looks way better. So this button much better, little bit of animation associated with it. So again, to change the styles uptop there, the Hover effect, you can change the lift, darken, scale, lift, and scale. You can play around with this to see whatever you like personally. Has a nice little drop shadow now. It's just ever so subtle design. It's rounded. So I really like that. That's much better. So now we can go ahead and delete this butts in right there. Back out of that. Great. And we need to give this a little bit of breathing room. Like, I don't like how this buttons right underneath the text, so just hit Enter. Yeah, I know super complicated. Anyways, click on Save. All right, so let's go ahead and reload the sites right here. And now we have our nice stylized button that pops off the webpage when we mouse over it, and we are good to go. And finally, where do you direct people to exactly? So I know I'm going to get this question. So now you have your button set up. People click on it. Where do you send them to? You want to send them to a squeeze page. So a squeeze page would be I click this button, then I'm on a page where I can enter in my email to get access to the thing that I'm being sold on right here. How do you create that page? Either you can create your own page on your own site, so just follow the process I already showed you where you create a page, page with no sidebar, no header, whatever, and then just add in the email opt in form there. For most people, I would suggest using your email clients. So if you're using ConvertKit, ConvertKit comes with free landing pages, so you can just custom design a landing page and have the form here that people can subscribe to to get the free thing. You could also use card.co, which is a very nice one page website Builder. You can use lead pages. But the user journey is to click the button, take them to a squeeze page. On the squeeze page, that's where they enter in their email or name and email to get the thing. Once they hit that button to actually submit their email, then you direct them to either download the free thing that you're providing or watch the free video. And to actually link out to the specific page, you just want to navigate under here to where it says Link. Now, you'll see that it says open in a new tab and open ink in a it box. Generally speaking, if you're linking off your website to a different URL, to a squeeze page, whatever you generally want to use open in a new tab. You don't have to, but that's what I would do. Open in a Lightbox. A Light box is a screen or a box that appears as an overlay on top of your website. So I definitely wouldn't use Openink in a light box. So I'd use open in a new tab, again, if you're directing people to your squeeze page, but it's totally up to you anyways, when you have your squeeze page or sales page, whatever, we're going to be directing the end visitor two. You want to click on the button right there. You want to navigate to Link, then you want to input your link right here. 12. 12. Create a Selling Element: Adding in a selling elements for our sales page. So a selling element, as I like to call it, is something that just helps establish trust and authority with the site. You've seen this in other websites where you're on a website that says, like featured in this site, this site, this site, or thousand AB clients, five Server reviews, an award from governing body. Type of thing. So how do you add that in to your site? So let me open up the block settings over there, and I want to click on the broad block. So now the whole thing is selected, and I want to click on the little plus sign that's right down there to add in a new block. We're going to click on Browse A, and we're going to navigate back to our patterns. And then right down here, testimonials I know, surprising, but the testimonial block I actually really like for this purpose right here. So just click on that to add that in, and there we go. So the first thing that we want to do is we want to change the background color to match the accent color that's going on with the rest of the websites. So let me click over here for that blue. There it is. We'll highlight that accent color. And now we'll click on the block down here again. And then we want to click over here for styles. You want to click on background. And then you want to click up the white area right here so this pops up with the hex. You want to ignore this base two, whatever. Now you want to paste that in right here, and that looks great. And then we want to make sure that the text is white because that's what we're doing across the design. So the blue button right here has white text. Now, right here is a bunch of images. And so we don't want this. Just want to get rid of that. Keep it simple. And next, we want to add in a bunch of different columns. So I want to click over here for the plus sign, and then we want to add in columns right there. And I would suggest either three or four, but I'll keep it simple. We'll just do three. And so then we have a bunch of different columns right here. And then with these columns, this is where we can add in text. Now, we do have a little spacer right there. So we want to move the spacer up. So just helpful right here. Not a big deal, but we keep that right there. And now we want to add in text. So we click on the plus sign, paragraph, and then title. Click over here, paragraph text, title, click over here, paragraph text, boom, and title. There we go. Okay, so then hit the space bar, then copy goes here and same thing with this. Copy goes here. Then same thing. Again, copy goes here, just for demonstration purposes. And of course, we want to change this text to white, so you can just click on that, you click on the asign and then you change the color text by clicking on that over there. So let me click on the backspace to get that back to black. There we go. All right, so anyways, let's just change that back to black just to keep it consistent. Sows let me click on Save. And great. So let's go ahead and view the website. So we see how this is playing out from a design perspective, and that looks really good, but a few things, so it's not balanced. So we want to make sure that these columns are all centered, so it all kind of fits in perfectly. There's too much space over here. So we need to do when you're creating the copy over here is take that and make sure to just center the text right there at line Center, and then a line center, a line Center, Align center, Aline center, and line center. There we go. So let's click on Save. And let's reload the sites right there. Much better. So the copy I want to add in here is just anything that helps establish trust and authority with the site like thousand students join 5,000 other people, an award from a governing body, whatever. So I'm just going to update this section with some copy. Alright, so here's what I came up with. We have 6,000 bloggers. I've watched mini coors, Blueprint, steal my step by step process, resources, learn how to steal the secret, how to behind creating different styles of video content. Whatever. Then I also decided to add in a little asterik next to each piece of text right here just so it stands out a little bit more. So we take a look at this on the back end. All this is is literally just an asterisk that you can use from your keyboard. And then I just made the title text over here large. And then this is the same body text. So you want to make sure that this text is the same size as this text up top here. You want to be consistent with that. So your H one, H two, H three, title tags, which are these things, your H one tag, H two tag, H three tag or certain sizes, then your body text is more consistent. So your body text should be consistent throughout the site design. Anyways, that's it for the selling elements. 13. 13. Create a Middle of the Page CTA: Homepage design is coming along quite nicely. Now the next thing that we need to do is we need to interrupt the end user who's visiting the website with another called Action right here. We just want to add in a button, nice big button right there. And so the button should match this button uptop there because you're priming the end user that, Hey, the big blue button that says this text is the thing I want you to click on. So we've already primed the end user like, This is the button I want you to click on. Just need to add it in right here. Anyway, let me take a look at the page over here and let's just navigate down here. You want to click on the elements right there and click on the plus sign and then type in button and create a new button. Simple as that. Now, unfortunately, you can't copy and paste the button over here. You do have to just manually design everything again. But it's not too hard. Just do what you did for this button up top. The right down over here. I'm going to get the what was it 101 K to ten K or zero to one K mini coors? There we go. The let's click over here again. Get the dollar sign zero to one k, mini course. Okay, so then just go through the whole entire process of setting everything up. So let's click on the button. And what style was this? Let's navigate down here for the button color, and there we go. And we'll highlight that, copy that. Take that. There we go. Navigate down here, take on that, and we have the style, butts and color right there, back out of that. And copy and paste that in looks great. And so just go back and forth with everything. But a few things I do want you to pay attention to is with the style, you do want to click on that, so it's a full width button right there. And then the text right here, you do want to make this text bigger, obviously, so it fits in. So let me minimize button colors right there. And you want to navigate over here to, I believe it's styles. No. Okay, so we want to have this as well. We want that to lift, and button size and spacing. That looks good over there. Button borders and shadows, typography. There we go. Okay, so under typography, I want to click on Ns. We want to make the weights. We want to have this be bold. And then we want the size of the text to be a little bit bigger, so it pops off page. Yeah, it looks good. So maybe that's a little too big. Minimize it just a bit. Yeah, there we go. So I really like the way that that is looking over there. It's minimize that. Okay, so button, borders and shadows. So the radius is how we can make the button a little bit rounder, so not so many sharp not so sharp edges right there. And then we'll just add in drop shadow a little bit, five is good. And yeah, I'm really liking it. So looks good over here. Now, there are a few issues as well. So it's like, Well, it's touching this. So how do I make this have more space? So in order to separate the button from it, touching this element right there, what we have to do is click on the plus sign, and you want to type in SP, ACER. So the spacer right there, click on that, and we want to move the spacer up. And maybe that's a little too much space, but we want to keep it right there, it looks good. Let's click on save. Great. And let's reload the site and see how that looks. And that looks fantastic. So very nice called action at the very top, right there. User scrolls down. This grabs the user's attention again with a nice big button in the middle of the page because you want to have a called action at the very top, somewhere in the middle. And then again, a final called action right at the very bottom of the page, right above this footer. So anyway, that's it. That's how you add a button to the middle of the website. 14. 14. Sales Copy Design: What exactly are people going to learn from your free lead magnet? That's the next section that we want to add in underneath this element, right here. So basically, what are people going to learn? You got to remember that people are selfish. People want to know, like, what's in it for me when I'm on your website. So let's go ahead and navigate back to the page that we're editing. And let's click over here, and I want to click on the little plus sign. Then let's click on Browse A. Let's click on patterns. And then let's click on about right there. Now, one pattern that I really like for this job is this one right there. Feature grid, three columns. Let's click on that. Now, it adds everything above this element, but not a big deal. Just make sure it's selected. Then you want to click on this little arrow right there, move down. Done. Simple as that. Now, it has a nice space between this element right here and this element right there, and all you have to do is change the copy. I personally like the way this is laid out. If you don't want six items, you can just come down here and delete these three. Very simple. Highlight it and just delete it and just keep these three uptop here. I personally I'm going to leave all six. And all you need to do at this time is just update the copy and emphasize on the benefits that the end user is going to get from downloading your cheat sheet guide watching your hidden video for your class, whatever, in this case, like a mini course. What are people going to learn from the course, from the thing that you're providing? Okay, so I updated the copies. So for the H two title tag at the very top right here, I just bolded the text, and then I updated the little titles right here to make it something compelling that people would want to subscribe and get a free mini course to learn. And then this is just dummy text. So let's take a look on the back end about how this is working. So the little text paragraph that was underneath this, I just deleted it, and then I highlighted this and clicked on Bold, and that's it. Then over here with each of these little blocks, let's open up our settings right there and you're like, Well, how do I get rid of the asterik? All you have to do is click on default and it removes the asterk. But I personally like the asterik. I think it's a nice little design element. It's very attention grabbing. Maybe remove the asterk from this main one right there. Maybe that would look better. Let's click on Save. I think that would probably look better. Reload this. And yeah, I like that actually more. So this is nice and attention grabbing about what the end user will learn. Next up, is there some sort of process that you teach within your free giveaway, like step one, do this, step two, do that. Step three, do this. It's so fast, quick, easy, anyone can do it. That type of section, you can add that to your sales copy so the end user kind of understands what the value that they're going to get by getting the free thing. So we're going to add that type of section right here underneath. We want to maybe break that design up just a little bit because we got this nice little six element grid layout that looks great right there. So maybe image on the left, right, left, right, left, right, that type of layout. So you want to do that with maybe three images max, two or three is all you want. So I'm going to have a little step by step section that I'm going to add in. So anyway, here's the homepage that editing. And let me navigate down here to the bottom, and let's click on this and click on the plus button, Browse all patterns. And I'm going to go to the About pattern section, and we can use this pattern right here, text with alternating images. So I'm going to click on that. And now we have this nice little section here with an image over here on the right, left, right, left. And few things. So first off, this whole thing has been added above this element right there, so we can fix that by clicking the whole thing right here. So the whole thing is selected. Now just click on the down arrow, move it down. There we go. So we have this right here, followed by this element right here. Now, if you're like, Well, I want to have three images, how do I do that? Well, because this image is on the right. This is an image on the left. The next image right here should be on the right. And again, I would do three images Max. You don't want to have this be redundant and repetitive. So to do that is just very simple. We want to click on this element right here, click on the little Options button, and then we want to click on Duplicate. And there we go. And let's move this down. And now there's not enough space right here. So right here, we have a little icon, or it's not icon, but a spacer as what it's technically called. So we want to duplicate this. Go ahead and duplicate that, then move that down right there. Simple as that. So now we have three images over here. Now, obviously, you're going to want to replace these images with your own images. What size matters. There's no proper size that you should or should not use. You got to just test this out, okay? But one thing is, you want to make sure all the images are actually the same size. So whether it's 500 by 500, that type of structure, that's what you want to kind of model after over here. So anyways, let me click on Save. Great. And let's go ahead and reload the homepage. And, yo, yeah, that's coming together quite nice. So now we have a nice little section right here. And again, like is, all we have to do is update the copy to reflect our offer, as well as update the images to again, reflect the free giveaway, the value that the end user is going to get. So for this section, like I said, in the beginning, I'm going to make this into maybe a step by step process, step one, step two, step three, with unique images. So I just updated the content, and here's what I came up with. Nothing too complicated. So right off at the top, the H two title tag, I bolded it like I've been doing with every single H two title tag. Then I added in my own custom images. Now, where did I get these images from? How does this work? So first of just jump over here. Now, just again, update the copy over there. Same thing with the asterisk and default, that type of thing. So I'm going to leave it. Then just change the copy with the bullet points over here. Now, if you're wondering how big were these default images, they were 1,200 by 800. I took that information, and then I just jumped over to Canva, and you can create a free account with Canva, and you want to go to Custom Size. Then you want to type in 1,200 by 800, then create a new design. Because that's the design that comes with the size of the image by default. If you really like that size and shape and you just want to keep so that's what you can do 1,200 by 800 and then just create your own images over here. So I used photos and then typed in words that reflected what I was looking for, like flogging, editing, monetization, whatever. Find the image. Go ahead and download it and away you go. Now, just a few things right away, we minimize that is once you have the image downloaded, I downloaded it as a PNG, but I didn't upload it as a PNG. So I use something called GIMP to convert it into a dot web P graphic. So to do that is really simple. All you do is right click, then you open with, then GIP. So you have to download GIP a GIMP. This is my photo editor that I use. Then you have the image right here, and then you want to go to File, then you want to go to Export As, then you want to give it a title, and you want to changes from PNG or JPEG to web P. Why do I do this? A web P graphic just looks better and it's more efficient in terms of size, especially if we're uploading an image that's 1,200 by 800, that's a bit of a big image. And all you have to do is export. Done. Simple as that. So simple. So I always like to convert my images from a JPEG into at WebP image, only because with Canva, for some reason, I don't know why they don't allow this, but you can only download images as a JPEG or as a PNG. So not only, but just the ability to download that as a dot WebP file is not available. So we can download it as JPEG, PNG, PDF, SVG, NPFoe video and a gift. But there's no dot web P. So that's why I do this little quick conversion process. All right, so once you have your two or three images because it got Step one, step two. Step three, like I said, then all you have to do is click on the image and you click on replace, you click on Upload, you upload, then you go ahead and you select the theme or sorry, you select the image that you want to upload, and then it automatically replaces it over here. Done. Simple as that. Now, once you have the image over here, you do have a few different options to adjust things. You have the aspect ratio. You can change and play around with that, resolution large. You can play with that. You also have your settings over here where you can have styles, default rounded, and then you can change the radius over there if you want. You want to add in a border, you can do that. You want to make it really round, you can do that. So totally up to you, how you want to play around with this. So let me just make that back to 14. So it's nice and round. There we go. And yeah, just have the corners rounded ever so slightly and just subtle little things and otherwise, it looks really nice. So overall, I'm very happy with the way this homepage is coming along, and that's how you update the images within this section to your own custom images. Again, this is a 1,200 by 800 image. You can get it from a wide range of websites. I like to use Canva personally for all my images and then convert this into a WebP file, upload it to your website, and change the copy as needed. 15. 15. Adding an FAQ and Testimonial Section: Next up, we can add in an FAQ and a testimonial section for our homepage. So the goal of an FAQ is really to answer objections that people would have from taking advantage of whatever it is you're offering, whether or not that's a free course, free download for your free thing, or if it's a paid product. And obviously, testimonials are useful if they're verifiable, because, again, that's just a form of social proof. So how do we do that? So let's jump over here back into these sites. So I got the page open right here. Let me just minimize that. Let me scroll down here and if we click on this element right there, you can see the plus sign. You don't want to click on that one because you click on this plus sign, it adds everything to this section right here, which we don't want to do. You want to click down here. And now now we're adding in another section underneath this section. That makes any sense. Anyways, go ahead and click on the plus sign. Let's click on Bows A. We'll click on patterns. And I believe it's under featured is where the FAQ is, so it's scroll down a bit. Yeah, there we go. So now we have the FAQ right here. So we can click on that automatically adds it into our site. And very nice design. But one little thing, I don't know why it keeps adding into the middle of the site right there. Just move this down, move it down. Just keep moving it down. There we go. And obviously, you can adjust the look and feel of this section right there. Anyway, so we want to add in a little testimonial section so we can click on that, browse all patterns, and then we have testimonials right down there. Then we can add in whatever testimonial we want, maybe this one right there and looks good over here. I like how this kind of blends together, but we can move that down. There we go. So now we have a nice little FAQ section right there that leads in to a testimonial section right here. Okay, so how do you edit and adjust these two sections? So, first off, I do like that they blend together, so I would keep the background color the same. So if you're going to go with black, just keep it black or whatever accent color that you're using. But anyways, to adjust everything, very simple. It's a section, so you just click on it. You navigate up top here for your settings, and then right over here, you have your colors. You have the layer over here, which you can change and play around with if you want. I personally like the way that this is laid out as is. And we want to click over here for styles. You have your background color right there, so you can change it to maybe inherit theme color over here or maybe make it into a light gray or green or whatever it is you want to do. You can just play around with this because it's your website. You can do whatever you want. And so just a little thing, let me change it to the theme color. What do you notice? And let me change the text over here to black. So a couple of things you are going to have to kind of manually click on things over here and highlight it, then change it to the respective color. So just be aware of that. But I like black. I personally just like the way this works and looks. So the setup is quite nice. So to create a new line is very simple. You just want to click on it first so you can understand what element this is, and it says the block, and then it says separator and it's selected as a wide line. So that's what we need to add in. So we click over and what do we need? We need a separator. So we need a separator, foam and there we go. We want a wide line, and we want the color to be white. Simple as that. Now once we're underneath here, so we want to click over here, which type in Hello, I'll click on down, so it moves underneath. And this is all H three title tags. We'll click over here, change that to paragraph. Heading. Now the heading disappeared because H two is set as black. We'll click over here to H three, and now we have to change the color manually. So click over here, click on white, and there we go. So just call this new title, and we highlight that again. Click over here for A, make that white. There you go. It's a new title, then Hello world. I'll keep it simple like that. So obviously, that's how you adjust this section over here. Very simple. These are just little paragraphs, H three title tags. This is set as the H two. From SEO perspective, that makes sense. So this is the title of the section. These are subtitles over here. So I'd keep that as is. If you do want to get rid of this big FAQ, then you'd probably want to change these to H two, H two, H two, and so forth. And I would keep the FAQ short and sweet. Like this is perfect, L one, two, three, four, maybe five, Max. That's as far as I would go. Four, I would probably keep it to four, by default. Let me just back out of this. There we go. And just adjust the copy and again, answer objections that people would have from getting the course or downloading the thing or buying your product, what is the testimonial section. So again, same thing as before. You just click on the entire block over there to change the color and text and font size and all that good stuff over there. And with this template right here, it does come with the option to add in a little image. Now, this is very wonky. I don't know what the right word is. The way this works, it works. It's just not intuitive. Like, you want to think like, Oh, I'll click on the image over here and I'll click on Median texts and this No, no. What that does, that transforms this little circle into one of these items uptop there. We don't want to do that. You literally want to click on the circle right there. See little side, I can scroll left and right with the scroll bar. You want to scroll down. You want to click on Upload. I know. It's ridiculous. Now we just want to click on an image, let's upload the image right there, and then it formats everything correctly, and that's how you can add in an image with that if you're wondering how that works. You got to click the little circle and kind of scroll down and look for where it says, Upload and upload the image that way. But overall, I think this looks quite nice right out of the proverbial box. 16. 16. Adding Blog Posts to the Homepage: Blog post to our homepage. Now, for this type of design, I'm not a big fan of blog post on the homepage, simply because it's a distraction from the primary call to action, which is to click this button right there. But I know a lot of you are going to be like, How do I add a blog post to my homepage? So let me just show you how to do that. Now, the thing that you first need to do is you need to click away from this element and navigate down here to this white section. Then click the plus sign. The only reason is because all of this content is all kind of grouped together. So if I click over here for the plus sign, I click on Browse, click on Patterns. Click on post, and I don't know, let me just select any of these right here. We'll click on this one, adds it up top here. So it's kind of a big mess and difficult to kind of move. So back out of that. So let me navigate down here. And so we want to click away from that. Click over here. Click on the plus sign. Click on paragraph. Boom, there we go. Now that we have the paragraph section right there, then we can click the plus sign. Then we can click on Browse all, then patterns, navigate down here for posts, and then you can select whichever one you like. So if you want, an image and text to go together, that's totally fine. I'm going to select this one right here. I don't know. This just grabs my attention with the really big text. So let me click over there, and that looks really good. Maybe the text is a little bit too big, maybe it's a little bit too wide. Let's see. Let me click Utop here. Let's save the design. And then let me go to the homepage and see how this looks. So scroll down here. And yeah, that that's attention grabbing. I kind of like that, but right, how do we adjust it? Maybe make it a little bit smaller. So you just click on the elements over here, and this is just all the elements. Then click over here for your settings, then click on the styles right there. Then custom size, we can make it a little bit smaller if we want, maybe 4.6. Then we have a patting over here. So maybe if it's a little bit too wide, we don't like that. Increase it ever so slightly like that. We'll click on Save so there's a little bit more breathing room on the left and the right of the title. So let's go ahead and reload that and looks good. So I kind of like the way that this is kind of broken up. So again, you could just play around with this on your own time or maybe just want to make it a lot smaller, like that. You could go ahead and do that or maybe a pinch bigger like that. So anyway, it's totally up to you. You can play around with the different layouts for the blog posts. I'm going to probably keep it like this. I kind of like this design. But anyways, that's how you add blog post to your homepage. 17. 17. Final CTA: And finally, we need to add in a final call to action for our website. So we have the called action at the top here, get the mini course, all that good stuff. Then user scrolls through the web page right here another interruption to click the button. Now we need to add a final called action at the very bottom right here to do the primary called action, which is click that button, get the free thing, get on our email list. So how do we do that? So we just want to add in another call to action, which is there's plenty of premade sections that we can easily add in. And so you just want to add it in underneath this block. So you don't want to click here or here, just add it right underneath this one. So let's click on the plus sign and click on Browse all. Click on patterns. Click on call to action. And there's a few different calls to action. Right here, actually, there's two, sorry, not two. So anyways, you have this one right there, Join 10,000 subscribers, then this one with the little icon of the email. I personally like this one right there because we have a lead magnet, so I would change the copy as appropriate, where this is a little bit better if you're creating a branded email newsletter, and the email newsletter is the offer. So anyways, I'm going to click on this one right there, and there we go. So now all we need to do is just change the copy over here. So want the copy to reflect the call to action at the very top right here, how to make profitable travel videos for bloggers. So you want to kind of re emphasize that over here, join 900 other people and learn how to make profitable travel videos. Learn how to do XYZ one, two, three thing, blah, blah, blah. Then this button right there. This is okay. I mean, I would swap it out with this button. So again, you got to go through the whole process and update this and redesign the button right down here. So let me click on save over here. Okay, so anyways, let's take a look at the home page and see how this came out. So right down here, this looks quite nice. Maybe there's a little excess padding right there we can get rid of. So I don't really need this spacer right there, so we can delete that elements. Now, we have this section right here. So if I click on this, we can click over here and to check out the padding overall. So there is a bit of padding around this block, so we can reduce this and see how that looks. Let's click on save. So again, all I did was select the block the item, the block, click over here for styles and then just reduce padding. That's what this is called when you see space between different elements on the page, we reload that. And, oh, yeah, that's looking way better. So here's the footer, called actions right there. We click over here again and maybe minimize the padding completely. We don't need any padding whatsoever. Let's click on save for that. And let's reload this. Yep, I really like that. So that's looking fantastic at the very bottom. So again, of course, you can design it, so just make sure everything else is good. Yet didn't adjust anything on the webpage. I like it. Now, the only thing that you need to do from here on out is obviously just change the copy. So it should be join 3,000 other people and get access to the mini course. Learn how to do XY Zoo one, two, three, blah, blah blah blah blah. Boom. Then the button right there should match this button. Nice, big, clickable button with good copy at the bottom, right here. So anyways, let's jump over here, and then over here, we can just delete this together, delete, and then navigate over here, and then same thing as before. Click on button, create the button right there, default style. And then over here, you can just go through this whole process and just edit and adjust this button as needed. So get the one or sorry, zero to one k, mini course. There we go. So that looks good. And then dark in effect. Nope, I want that to lift. And then button colors. Just change the button color right there. Size and spacing. I want this to be a full width, big button right there. Borders and shadows. Yeah, I want to be a little bit rounded, and then maybe some drop shadow to it. So minimize that and then typography right there. So quick over here. I want the weight to be bold. I want the typography size to be a bit bigger and more attention grabbing, maybe, like, that looks good. And then we just need that color again. So let me click up top here, see what that is. And butts in color, take that. We'll highlight that, boom. Copy, scroll down here again, and click over here. Alright, so button color. Back out of that. Paste that in. Boom, there we go. So we need a little bit of space, so I'm just going to click above it, hit Enter, just to space it out a little bit. And there we go. So let's click on Save. Alright, so now let's take a look at the page, see how it looks. Yeah, that's great. So again, you can change the background color and things like that if you want. So you can click over here for this entire element, you can change the background image to a specific color if you want. So it has two layers as the outer layer and has the inner layer, so you have to click over here to change that color to something else. So click over here, so it matches. So if you want again, if you just want to do this, don't. I like it being white looks good, but that's how you adjust it. So you can do something simple like that. But anyways, right, good copy over there. And you could also have an emoji, if you want. So Emoji hand down, open up that's Alright, so let's open up this right here. Copy. We can put that in right there and paste that in, save. There we go and reload this. And yeah, nice subtle little thing. So if you want to add that in. Anyways, it looks really good. Now we have the footer and the header to adjust. But anyways, the homepage looks good, all sets, and you should have enough knowledge about how to customize and edit each of these sections. 18. 18. Create and Add a Logo: Adding in a logo for our website. The homepage is done roughly speaking. Now let's update this boring text logo right here. How do you do that? Very simple. Navigate back to your WordPress dashboard, navigate down here to where it says appearance. Then you want to click on the editor. Now allow a few seconds for the editor to load up, and then you want to click into the design. There we go. So let's click on it. And now we want to select the header section, click on the header section. Then you want to click on Edits right there. And then you have this box right over here. This is where you can upload a logo. So you click on that to upload a logo. And so I made a logo right here. To add your logo is very simple. All you have to do is create a logo, then drag and drop it into place. So let me go ahead and select this. And you want to call it the name of your website. And logo for the text right there. Then go ahead and click on Select. Then the logo should uppear. So let's expand this out just a bit. There we go. Now we have text over here, so you have two options. Either you can just back space out of this or you can completely delete this text section if you want totally up to you, it's really that simple. Now, the more complicated part is like, Well, how do you make a logo? Let me open up Canva. Canva is what I use to create graphics. You can create a free Canva account and create graphics. Now, once you create your account, you want to click over here for Custom Size. Click on Custom Size. I found that 300 by 80 pixels works best, and then click on creates new design. Then it's going to open up with a white space at 300 by 80, and then you can add in a logo. Here you can play around and design your own logo. Was able to design this is I actually clicked over here for text, and then I clicked over here for font combination. Then I just played around with the font combination right there. But you can create custom logos from scratch if you want. So the font over here is TT blue screens. Then the effects over here are it's offsets like this, and then the direction you can change around. And obviously, you can play around with the different colors over here for the design of the site. So you want to have the accent color match the accent color that's on your website. When you're ready to download, all you do is click on Share. Then click over here to download the logo, and then just upload it to your website. Over here. It's really that simple. 19. 19. Menu Design: Editing the menu section for our website. So right here, I added in a few additional pages. So about block contact resources, and of course, we have the home page from the very beginning of the Tutorial. Now, the way this menu is working with this theme is that any page that you create, it automatically populates the menu uptop here. So all I did was go to pages, and then I clicked on Add New page, and I just created an About page, a blog page, contact page, et cetera, clicked on Publish, and then just automatically adds it to the menu uptop here. It is nice and also can be a bit annoying because you don't want to add every single page to your menu. Sometimes you just want to create a page for whatever reason. But it's not a big deal because you can delete any type of page. Homepage I'm going to delete and I'll show you how this all works. So once you add in a few pages, I do suggest an about page, contact page, things like that. Go ahead and add that in. And let's go ahead and delete Homepage, and I'll show you how to add in additional pages to your menu that you want to add, as well as a button. Alright, so anyways, let's navigate over here to our WordPress dashboard. And let's navigate down here to appearance. And we have to navigate back to the header section, which is where we were at when we added in the logo. So we're going back to the same spots. So let's click into the design. Let's click on the header. Let's click on Edits. And there we go. Okay, so we want to play around with the menu, so click on the menu. Simple as that, and then click on homepage over here. So once we have that menu selected, you want to click on Edits. And so Edit page is the Navigation displays, your websites, pages. Editing will enable you to add, De reorder pages. However, new pages will no longer be added automatically. Yes, we don't want new pages to be added automatically. That's convenient at first, but you want to have a little bit more control. So just click on Edit. Now you have to manually add in pages as you see fit to your liking, as I like to say. Anyways, homepage. We don't need a home link because people can and they will click the logo to navigate back to the homepage. So all I have done is select homepage. Navigate over here, click on Delete. By simple as that. Okay, so now we have the menu items selected over here. We click on plus, and then we can add in additional items over here if we want. But we don't want to do that. We want to click into the menu item like that. Okay? See the difference. Now once we click over here, then we can add in additional links. We click over here, click on NTS, search or type ARL or click on Add block. So right over here, once you create a page, then you can navigate and find it over here, just easily add it in like that. But again, we already have blog added, so make delete that's. That's how that's working from that aspect. Or you can just type in a word, so type in learn. Click on plus done. What all I did was type a word, hit Enter, adds it. But the issue is that it's not linking to anything, so then you have to kind of manually mouse over it, and then you want to click over here for the link, then click on the little pencil icon. We have the text right there, then the link over here, that's not a link. That's not linked to anything, so you have to type in the website. So we'll just say blackout.com slash I don't know, we'll say LAN. Maybe a create a page that's called learn. Over here under Advanced, this is where you can select to have it open in a new tab. Okay, so I hope you understand. I hope that makes sense. I hope it's not too complicated, so let me go ahead and delete that. So let me go ahead and click on this little plus sign over here, add in a block right there. Then you can add in a button uptop here if you want. Now, again, the same issue with this button is the same issue with the other buttons where you don't have a lot of control over the animation and style of it. So let me click over here. I'll just say click here. Yeah. So anyway, once it's button selected, you click on Styles always. So navigate over here or sorry, not styles. Wrong. Styles affects the whole website. You want to click on settings, the button selected, click over here, and then you can change the background color of the button right there. So back out of that and back out of that. So, you know, again, totally up to you if you want to add in a button right there, may go ahead and delete that and delete that. There we go. Okay, or you could do this over here. We click on the block in the middle and then type in button. Over here, you can add in a proper call to action button. So get the ten K mini course, or we'll call this the zero to one K mini course. And then of course, you got to go to your settings and you got to play around with the whole design of this button over. Like, Well, I don't want the button in the middle. That's kind of weird. Like, that looks odd. So how do you switch things around? So you click over here with this little arrow, move left, done. So now your logos kind of more centered with the button primary called action button over here. So those are your two options with a button. So either you click over here for the plus sign, and then you add in the manual button right there. You could click on Browse all. Let me click on buttons and see how that works. And maybe that does work. Let me click over here. And yeah, okay, so that tend to end it. Add it underneath here on me, back out of that. B out of that, back out of that, back out of that. And let's go ahead and delete the button right there. Okay, and go ahead and delete that. Let's click over here. So let's add in a block, browse all. Button right there, and there we go. We have the button right next to it. So those are your two options. So you can either add in the button right there and move the button over to the right, and that gives a nice little bit of space, or you can add the button into the main menu item over here. So just to call this D again, or 020, two, one K, mini course. Then we have the menu item right there. Okay, let's click over here with this entire elements, and looks good. So again, you just got to jump over here, go into your settings, and then match the button to the button that you have over here. So I hope this makes sense. So that's how you add and delete things from your menu. You can also add in a button, but again, you have to select the entire thing like this. Click on this, the plus sign, Add block and then browse all and then literally type in button and then find that stackable block button right there. Or you can click over here for the element in the middle right here to add in a button, then you can move the button over to the right. The menu item kind of moves into the center a bit. So whichever way you like more. I personally kind of like the way this looks with the logo right there and this element. Okay, so I went ahead and updated the button style over here to match the primary called Action button right down in there with quick little copy. So let's just jump back over here to the logo design, so it's click on the button right there. So just to show you a couple of things I did the style, I have it as default. I have the hover effect as darken, the link over there would link to your primary call to action page, landing page, squeeze page, whatever you're going to be directing the end user to. The button color right there, I have the button color set to the same color that I use down there. Then down here, I have borders and shadows, the border radius is how you make it rounded. I don't like sharp edges like that. Ever so slightly nice. And then the shadow outline, if you want. This is optional. I like the way it kind of looks over there, and that's pretty much it. That's all I really did for that. Again, just so the logo and the button have the same color, and the button over here matches the buttons that are found elsewhere on the website because you're trading the end visitor that, Hey, the big blue button is the thing that you click on to take advantage of the offer. 20. 20. Header Background Color: How to change the color background for your header. So right now, I have everything set to whites, and I quite like the way this looks. But if you're like, Well, no, I want a colored background, how do I do that? This is how you do that. Navigate back to your editor. I have the header section selected. Now, the first thing that you need to do is you need to make sure that you click on the entire header section. S has a blue outline. That means the whole thing is selected. Not this, not that. Let me click over here. Yeah, like this. You don't want that. You don't want to click on in the middle over here. You want to make sure the whole thing is selected. Once you have the block selected, the navigate over here to where it says styles. Click over there, and then you have a bunch of different options over here to change the background. First off, I can change the text color. If I want to do that for some reason, I'm going to leave it as black. If I want to change the background color to a different color, I can go ahead and do that. If I want to add in a background image, if there's some type of pattern image that you have that you want to use, you can use that. You can also change the typography over here, make things bigger or smaller, as you like over there. You can increase the padding, make it bigger, crease the padding on the left and the right, make it more narrow margin. Again, there's a few things that you can play around with over here. And you can also add in a border right there. So a border may be helpful so for example, over here, there's no border. So what if you want, I want a slight black line across the top like that. Over here is where you would select border to do exactly that, and then you'd click over here for the style. So for the board over here, I would keep that zero, zero, zero, and we'll keep that like one. So then you have a nice little line separator, the header from the body, the website. If you want to do that, which I don't. And that's really it for the different options that you have for designing the header with regards to color. Now, one thing that you're noticing right here is that the logo has a white background? You're like, why is that? That's because the logo doesn't have a transparent background. So if I navigate back over here to my logo, I click over here to share, download. Right here, it says transparent background. I just click on that, and then the image will have a transparent background. But one little thing is that this is a paid feature from Canva, so you will need a paid subscription or to have access to this. Otherwise, if you're like, I don't want to pay for Canva, fine. You can download the image as is. But then you have to use another tool like a PNG transparency generator website. I just found this so you can just upload your PNG image over there. Then I'll make it into a transparent background over there if you really don't want to pay. But again, I pay for Canva because it's very helpful and I use it all the time. But really, that's all you need to know for editing and adjusting your header. 21. 21. Footer Design: Editing and designing the footer for our website. So let's navigate all the way to the bottom of the website. So this is the footer for this theme. And by default, I actually quite like this. It looks really good. The only thing I probably would switch around is I would change this links right here to something else. So I would always put the terms privacy, your legal pages down here. So I would switch this from design with WordPress to copy of your website, terms, privacy, that type of thing. And then I would just reword this from privacy to company Info, whatever, and then add in additional links over there. Then the social media links. I quite like that. This looks good. Just update these links to link to your social media profile. So let me just show you a quick example of my favorite footer not of all time, but that's a little Grandios, but this is a good footer. So logo for the website, what the sites about company, learn info about whatever you want to call it, then links links, then the fourth column over there, social media links. Email, phone number, physical address of the business. That's what you can do over here. Copy the website terms, privacy, done. So I would do something similar to this over here. By default, I quite like this. So again, like I said, I would just change com over there. Now, anyways, how do you edit and adjust? So you have to jump into the editor. So I have the editor open over here. Let's click into the design. Let me away from that. And let's scroll all the way to the bottom. Alright, so mouse over the Footer, you'll see the purple wine. Click on that purple wine, and now you can click on Edit over here. And simple as that. Now you're editing the Footer. So you can click over here to make the logo bigger if you like. Similar to that other website, you can have a little tagline, describe what the sites about. Like a blog about flogging. I don't know, whatever. Then about is fine. Then you can just click over here. And so, these are all links over there, so you click on NTs. Click over here. That has an anchor link right there. So if you want to change this, so for example, it says about you know, whatever. You can backspace out of that to actually change the text. So just call Hello just as an example. Then you can highlight this over here and then update the link right there with something else. So it'd be like vlog how.com slash Page Title. And so you can just manually go through each of these items right there and change everything as needed. Then the design with WordPress over there, I would obviously, like I told you, I would change this and I would have it be copy w log, how, and then I would have maybe a page separator. There we go. Then privacy, page separator terms, and so forth, then have your legal pages down there. Then actually make these link, you'd have to highlight it, hit the link, and then you can either link to a page that already exists. So if you already created a privacy policy, then you can just link to it from here or you can just manually type in the URL. So you can type in voghow.com slash. Privacy policy. Now obviously, you need to make a page for privacy policy, but that's how you add links over here where you have this be vocow.com, whatever. Okay. That's what I would do with this over here. Now, let me click over here for the settings and click the square again. So now we have the whole template selected, and over here, when you click on Template Part, you can easily change design to another template layout. So for example, this is a nice minimalistic layout that I quite like. This one looks good. All these template parts look great. So you can edit and adjust as you like. I personally like this one. It's nice to start off with very simple, just another menu right there. And then I would just change design with Wordpress and I would update this, again, copy the website, terms, privacy, and I'd probably, like, mute the color a little bit mute means, like, so it's not dark black, so it's just, like, light gray. So anyway, it's totally up to you, but that's how you edit and adjust the footer. Now, as I have the block selected, again, just like your header, if you want to change the colors and all that good stuff, you just navigate over here to setting. So you have right here the text, you can change the text color to whatever you want over there. You can change the background color as needed. If you want, again, you'll have to update the logo. Again, like I showed you with the header. You have to create a transparent logo. Didn't because I'm using a white background, so it's not that important. You can also update a background image right there. You can change the typography to different sizes over here, increase and minimize the padding if you want and minimum height, border, and similar to the header, if you want a border, so I want a border there, but I don't want it on every side, have it be zero, zero, zero, then have a nice subtle border at the very top right there. Then the radius, same thing. Over here, if you have a colored background, you want to have this design. Again, I'm going to keep it one solid color white to match everything, but I'm just trying to show you different things that you could do to this template part to edit and design. Is that's how you edit and adjust the footer. And if you are going with a colored footer, make sure it's the same color as the header. So you want the header section like the footer and your header right up top here should match the same color, like a sandwich, if you're going to go again with a colored background. 22. 22. Blog Page Design: Editing the blog page for your website. So if you want to start blogging with this team, you totally can do that. So up top here, in the menu, I have blog, and all this is is just a page that I created and called it blog. Simple as that, and make sure that the URL is slash Blog. So how did I do this? So let's jump over here. Let me navigate to pages over here, and it's literally just a page called blog. And so all I did was create a New Page, and then I literally titled it Blog, published, and then I made sure that the link, the URL is slash Blog. Now, the way it should work and with most WordPress teams, it works like this is you want to navigate down here for your settings, click on Reading, and we have a dedicated page sets a homepage so we could custom design our homepage. Well, the post page should work the same way. So I have the blog page and I want it to be my post page. We click on Save Changes. I'll just show you what happens if you do this. Now let's reload the page and it brings up the default template. I have no idea why this thing does this. I guess it's a quirk or an oversight. You got to weave it blank. Weave the post page blank, and we have to custom design the blog post page ourselves, which is how do we do? Very simple. I'll show you right now how to do it. Keep Postpage as select. Then once you have your blog page, we reload this. There we go. Now we want to edit page, not edit site. You want to edit the page. Let's go ahead and edit this page. Alright, fantastic. So first things first, we want to select the template over here. So why do you want to do that? Because now you want to click on Swap template. Why do you want to do that? Is if you want your blog page to have a sidebar, then you select page with sidebar over here. Again, totally up to you. Or you can leave it just with page with image or page, no title. Just leave it like this with the blog and just have that be the title right there. Simple as that if you want. Anyways, let me go ahead and swap template, and I will select the sidebar layout page with sidebar, and there we go. Now we need to have the blog roll as the body content over there. So we click on plus sign right there to add a block. Want to browse all pattern, and you want to navigate down here to posts. And there you go. So you can click on standard post right there or this one with the image onto the left the copy over on the right over here with masonry grid layout or the stagger design right here or this simple design where it's like list of posts with one column. Again, you can play around with this on your own time to see which one you like the most. So I'm going to go ahead and click on this one right here, grid post featuring the first post, two column, whatever. Let's click on Ns. There we go. And that looks great. Let me click on Save There we go. Okay, so let's go ahead and open this in a new tab, just to see how it looks. We have a sidebar over here. Now the problem with this design is because I have a sidebar, it's kind of crushing all this copy over here. So if you are going to go with a sidebar layout, it's probably best to go with a design where it's just a single column with, like, block post, blogPost blogpost. If that makes any sense, now let me click over here, page with sidebar. Let's get rid of that swap template and we'll just click on this one, page no title. Great. Let me go ahead and reload that. And yeah, that looks way better. Now you're like, Well, I want a sidebar, how does that work? All right. Anyways, me. Click over here and let's go ahead and delete this. Let me click over here for the page, page no title, Swap Templates, sidebar and let's click on a design that matches a sidebar. Let's go ahead and click on Post right here and keep things easy. We'll click on the very first one Utop there. Let's click on save. And if you're just wondering what this is, that is your featured image for your blog post, which I'll cover in the blog post section. Anyway, this for the blog page. So let's take a look at how this page is looking. Let's open up this in a new tab over here. And there you go. So now you have, two different layouts if you want a sidebar or if you want a, like, full width design. So this looks quite nice. And this will show the featured image for each individual blogpost as you add it on top of the H one title tag for the blog. 23. 23. Sidebar Design: Now, if you're curious about how to edit and adjust the sidebar with this theme, the way you do that is you click on Edit sites right here when you have the blog page open, and then you can access the sidebar elements. So we click over here, and then you can click on Edit for the sidebar, opens up like this. To be honest, it's a little clunky. I don't really like the way this works, but this is how it is. And so then you can just adjust things over here with the sidebar. If you want to add in new blocks, you just click down here. Scroll down a little bit. See that's why I don't like this. It's clunky. We click over here for plus, and let's click on Browse all. Then we have blocks over here that I can add in if I want. So for example, we have categories, how is that added? We go over here for category list or categories, displays a list of categories from taxonomy, displays a list of all categories. Click over here for category list, and there we go. Now we have one category. That's where this is being populated from, and that's how this element over here works. So if I was to actually use a cyber, which I'm not, I don't like sidebars personally. Here's my design tips for sidebars. If you're going to go with a sidebar, keep it simple. Sidebars are kind of fading in popularity because honestly, most people are going to visit your site on a mobile device, 50% or more. So let's take a look at Justin Welch if you're going to go with the sidebar. I like this. Literally one thing to do one thing. Click here to subscribe. Done, or niche pursuits, has a little box over here with a button. So you can design this with stackable and add in a button if you want. Then they just use the rest of the element over here to run ads to have display ads, be showing. And this is an old school now defunct blog. But I do like the sidebar over here where it's a bunch of well designed images with a drop shadow that have been added in over here that link externally to products. And so this is a good way to get people onto your specific products if you want to go with a sidebar and want to have a design element. That's what I would do with the sidebar. Okay, so let me just show you how to adjust this. So maybe I'll get rid of that in that uptop there and click over here for the plus sign we say Image image over here, and I want to upload an image. I'll upload image of myself. There we go. And let's move that above right there. And so then I have an image of myself right there. Looks good. And let me click over here for the plus sign. Hi, my name is David. Welcome to my blog about flogging. I'm the author of XYZ 123123 product name. I created this site to help you vlog better, whatever. Okay, so let's just move that up and move that up, and let's click on Save over here, and let's take a look at the log page now. Click over there. Let's open up this. There we go. So we have a nice little image on myself and little title right there, and something that you could do with this is like, for example, if you wrote an Amazon book or maybe you have an eBook that you're selling, you can just link internally to that. It's like, I'm the author of this book, and then just link again, link externally to that book. So how would you do that? I'm the author of XYZ 123 product. We'll just highlight that. Then click over here, then link to Amazon or wherever your eBook is hosted, and you could do that. And so that's how you kind of adjust the cyber over here. Again, I would keep it super simple. I'd probably go with maybe an image like this, little blurb about you. And then a call to action to subscribe to your website. So if you're like, Well, how do you get this? This is from your email marketing client, this option to subscribe. Or what I would also consider doing is just add in a button, and the button links to the squeeze page that we've been doing like this. Like, click your to subscribe, and then the person clicks on it and then direct it to that page. Or if you want to have this form right there that people can enter email and click Subscribe, then you get this little field from your email clients. So again, I'd keep it super simple. A box, a button, a thing to subscribe, a bunch of images that link externally to products, a little blurb about who you are. Really, that's it. I would not go with a super long side bar with categories and links and tags and search this website and a bunch of other things to keep it very minimalistic. Anyways, that's how you edit and adjust these sidebar. 24. 24. Single Post Design: Editing your individual blog post pages. So we have to cover a few things over here. So first off, I have this blog post right there. How are your blog posts created? Where do you create blog posts? So let's navigate to your dashboard. You want to go over here to posts. And then you want to click on add New Post and simple as that. That's how you add new post. So let's open up this one overall best microphones for vloggers. This is what a blog post within WordPress looks like. You have your H one title tag at the very top right there, followed by your body text. Then you're able to create H two, H three, title tags, and so forth. So let's just have a quick example. So best shotgun mics, shotgun mics. And I want that to be an H two tile tag. So I would highlight that. Click over here. Click on heading. And then you want to make sure that this is H two. Why H two? Because this is a subheading of this. Like, this is a subheading of this title right there. And so then you could have copy underneath that, just as a quick example, we copy that right there. And then maybe we have a subheading of this. And then microphone name. I don't know, call it that microphone name, and I want that to be an H three title tag. So we'll take that as heading, and I'll make that H three, because this is subheading of this. So let me just actually open up a quick example of a blog post so it's a little bit more. Easy to understand. So let's click over here, seven best types of websites. That's your H one title tag at the very top right there. That's an H two tile tag because that's a subheading of this. And then as you're scoring through this, you can just make H three, like H that's an H three Tile tag because that's the subheading of this right there. And that's really how you want to structure a blog post. Okay, so with the blog posts, you have a few different things that you need to pay attention to. So over here, you can adjust the size with the block. So again, let me back out of that. And we have this over here. Let me click over here. We'll click on settings. And then I want to select this block right there. And maybe I want the texts to be a little bit bigger for this block, so I'll click on Large. So it's a little bit more attention grabbing. Then you can change the text color and the background, as well as adjust the dimensions and advance. Okay, so anyways, I don't want to do that. So back out of that. All right, so let's click over here for Post. This is actually Important over here. So, first off, you have the author over here, you have the title and the link. With the link with the URL, you want to keep it short and sweet in general. So if I have the overall best microphones for vloggers, this should really be best microphones for vloggers. You want to kind of keep it simple like that. Categories are important. All blog posts must be organized into a category. So this site currently has only one category blog. General, I probably think of four to six categories that you're going to be creating content on and kind of stick to that and maybe add new categories once you get beyond maybe 60, 70 posts per category. Really, you want that much over here. So I had to add a new category. So for this, I'll call this Microphone. We'll click on Add New category right there, and I'll unselect that. And now we have this category right here. Let me go ahead and click on Save. And there we go. So with categories, you want to put a blog post into one category, not two, not three, one. Now, you can also tag things as well. I'm not big on tagging. Tagging is not that useful in my opinion, but the idea behind tagging was, if you're going to be creating a one off piece of content on a very specific topic. So maybe your category is, like, cars, and then or trucks, and then a tag would be like Ford, very specific. In general, I just use categories for my sites, but again, up to you just don't overwhelm. It's not like a social media thing where you can tag things and helps it rank better. It's really for organizational purposes for the end visitor. And really, that simple. Then you have link successions right there and really that simple. Now, how to set a featured image, which is what I kind of talked about over here. So at the very top with this scene, you have sets featured image. You click on NATs, and then you can upload a feature image, which is what we'll do right there. So I just created this image again with Canva, like I showed you earlier. And you want to title this something that's related to the blogposts, so microphone logging, and then all text would be the keyword of the blog post. So what's the blog post about microphones for YouTube. Okay, so microphones for YouTube. Now we'll click on sets feature image right there. And now we have the feature image right there. Let's click on Save. Great. And let's go ahead and reload our blog page just to show you how that looks like. And yeah, it looks good. So now we have a little borb right there, image and the title, and that looks good. So that's how this section's going to look and be populated as you create feature images and blog and so forth. Alright, so anyways, let's navigate back to Dashboard. Underneath your post. This is where you have your categories and tags. So if you click on categories over here, this is also another spot where you can add in new categories and you can manage how many categories you have and blog posts within the categories. And you can also create subcategories if you like. So for example, we'll call this logging, and then the parent category would be blog just as an example. And then that's a sub category. The URL structure for this site would be logout.com slash category slash Blog slash flogging. So there you go. Simple. And you want to use subcategories as it makes sense for the primary category. So if you're talking about, for example, back to trucks, maybe trucks is my main category. But sometimes but I do write a lot about four trucks for whatever reason, maybe I would create a subcategory on Ford or four trucks and structure it like that. And really, that simple with the design and with blogging. So that's how you want to kind of approach this, create content over here, H two, H three, title tags, put every block post into a logical category, not thoughts or uncategorized logical category, maybe four to six, does it make sense for your website. And also, don't forget that you still have access to all the block editing goodness with WordPress. You can click over here for Plus, click over here for BRS. Maybe I want to have a pattern in over here. So we'll click on the featured right there. Maybe I want to have this section right here, add that in. Wordpress is pretty flexible and allows you to design beautiful pages and content. Now, if we take a look at this individual block post that we just published over here, it's going to be a single column design. And if you're like, Well, hey, I want to add in the sidebar or maybe you just like the way this looks. Maybe you want this to have a sidebar and then your individual block post to not have a sidebar, totally up to you. But if you want to add the sidebar in within the single post page, you can easily do that by clicking this over here for the settings. Then click over here for the template, single post, swap template and then single post with a sidebar, and then that's how you add in the sidebar. Or if you just want to keep it in as is, you can just use the default template, which is single post. So by default, there's no sidebar with the individual blogposts. Personally like the way this looks. That's just me. But it's totally up to you. Again, if you go through the process of creating a sidebar that you want to use, you just want to add it in over here. But overall, that's all you need to know to get started with blogging. And one quick final thing I want you to adjust and be aware of how to adjust is how to change this title right there. So it says, B then Vlog 123. That's the admin login username. So we don't want that. Obviously, we want this to be a more logical name like Brian or whatever her name is. Then this is the category, which I love. Perfect in category. Perfect, wouldn't change a thing right there. That's great. The date over here is fine, as well. Okay, so a few quick little things. So with the date, how do you change the date? So maybe you come back to this blog post in a month or two months, and you update it, and you don't want this to say this date anymore, you want to be the more current date. So you can just change the published date right here. Okay? So never get to your post. Never get here to publish, and then you can change the published date to something else. To get rid of the admin title right there, so you got to go to appearance. Alright sorry you got to go to users. All users. Open up that. Then open up this right there. So user name. And then user name is this and you can't change your user name, but you can change the nickname. So I don't want that. So we'll just say as Brian, whatever. Then display publicly or display name publicly as Brian or whatever your name is. Then write down here is biographical information like I touched on earlier, where it's like, you can have a quick little description of the author right there. Then we'll click on Update Profile. And grates. Let's revode the sites, and there we go. So that's how you change your name. You can update the date and having it be in category, that's perfect. Nice internal link to the category pages. 25. 25. Favicon: How to add in a fabricon for your website. So a fabricon or site icon. Is this little thing up here in the tab. So how do you make it custom instead of it being the logo that we uploaded and then squished together? Well, that's pretty simple. You can use Canva to create the graphic and acing your website by navigating to the settings, then going to the general tab. And right here is where you can change the site icon and upload a new icon that you create. And it tells you the size over here 512 by 512, at least 512 by 512 pixels. Let's jump over here as a quick example to Canva, custom size, 512, 512, create a new design. And there we go. So we have a nice little square right there. We'll type in elements. I don't know, type in vlogging, vlogging is fine, whatever. Okay, or vlog maybe better. How about type in camera? So yeah, whatever. So do you just want to find some type of image or graphic as it makes sense to your topics? Let me a flag and see what comes up. Yeah. Okay, that's fine. Now, an actual from a practical standpoint, really should match the design of your site. So that's the logo that I've created for my own personal site right there. Then the fabric up top there is that Du symbol right there, circle background, that's transparent. So again, totally up to you if you want to design that. So if you do want to go with, like, a circle style background, then you can just navigate over here, type in circle. All right. Boom, and change the color over there, maybe make it blue. Then make this nice and big, like that. There we go. All right. Now position. We want to move that back. Okay, let's put that into place right there. And yeah, okay, so not bad. And now we want this to be a transparent image so we can share and download, transparent background, download. And we'll save it to my desktop over here. And let's open up these sites and minimize that, minimize this. We'll drag and drop that into place, change slide icon, drag that right there. Set site icon. There we go. Click on Save changes. And then let's reload the site. There you go. So now we have a nice little icon. So for tutorial purposes, that's how you update it. I would create something a little bit more custom, maybe like a VH or whatever, but you get the idea on how to create a custom site icon fabrican for your websites. 26. 26. SEO: Basic SEO for your website. So we're nearing the end of this tutorial. So how do we set up the SEO for a website? So search engine optimization, there are a few little things that you just need to be aware of. So first off the homepage, right here, we have it set as homepage, page separator. Learn how to grow your income, blah, blah blah, blah. And that was populated because I happened to add the tag line right there. But we can change it. We're not stuck with that. So navigate over here to Dashboard. Then you want to navigate over here to Rank Math, which is a SEO plugin that we installed in the very beginning. And now, once we have Rank Math open, we want to go to Titles and Meta. And once Titles and Meta is open, you want to click on homepage right here. And Static page is set as a front page. Add SCOTile description at home and Meta to the homepage. Normally, you could edit here, but we have to go over here to edit the homepage. So over here is where we can set the title. So how do we do that? Very simple. So let's click on this right there, there's a little box that says rank Math. Then we click on Edit Snippet right there, and we can adjust everything over here. Okay. So in general, with most themes for Wordpress, once you have rink Math installed, all you have to do is click on Homepage, and right here is where you can set an SEO title. But this is directing us to the homepage over here. So just click on this little box uptop there. Then this populates over here, and this is where you can change the title. So it should be something like vogHT site title page separator, learn how to start a profitable vlog. Then the meta description should describe what the website is about. So learn how to make better logs and grow your audience. Advice and guides on blogging. Ever. You could also use this generate with AI if you want. Anyway, just a like Ds and it looks good. Click on save that's how you change the SEO title for the homepage uptop there. So there we go. Changes uptop there, but it stays the same right down here. So there you go. Simple as that. Now, you need to do that with each individual page as well. So, the About page as a quick example, we can just open up this, click on this box right there, and then edit Snippets so this is the About page, should be about log, how. Then again, same thing. Write a description, and away you go. So the other thing you want to do that is for blog posts as well. So with blog posts, you do want to go with a title that's not overly optimized and not super keyword rich, but something that's a little bit clickable, like the stunning truth about vlogging. I don't know, something like that, it's a little bit more compelling than, like how to start a vlog that makes money forever, instead of how to start a vlog. Anyways, the overall best microphone for vloggers. You want to click over here, edit to snip it, and then you want to get rid of the site name right there, and then just manually type in Vlog how or you can just get rid of this all together if you want, and just have the title. But I typically like to go with title and then the site name like that. If the title is not too long. So if the title is taking up the entire section here, then just leave it. But if there's a little bit of space, then I typically like to have the site name at the very, very end. And then you want to write the description right there and adjust the permian link over there. So you just want to go through the site, and when you publish pages and blog posts in your home page, just make sure that everything has a logical SEO title that's very useful and descriptive for the end visitor. 27. 27. Final Touches: Okay, so by now, you should have a good understanding about how to design a website with this theme that's good, compelling, has a good copy, offer section, sales copy, blog post pages, all that good stuff. So let me jump over here back to my WordPress dashboard. And let me just open up the editor, just to show you a few final little details that you can tweak if you want. I personally kind of just like the way this theme looks by default, but again, you have a lot of options over here. So let me just show you briefly how things work. Okay, so right uptop here, we have styles. Again, styles affect site wide. So if you ever want to change an individual block, you always want to be operating under your settings. But here, styles. So I touched on this in the very beginning, but uptop here, styles kind of broadly change the entire site. If you want to do that and change the color right there. But again, you can change each of these elements individually, but this is for site wide. Okay, so then we have our typography uptop there. It's probably the most important one because you can change the typography for the site. So if you don't like this font choice, you're like, How do I change this? Drives me crazy. I don't like this. Up top here. So really, you want to change your text and your headings. Text means your body text, and your headings means your H one, h2h3 tile text. So when you click on this element, it says H one right there. That literally means heading. Heading one. So that's the title of the page. Then H two is a subheading of H one, H three is the subheading of H two, so on and so forth. So over here with headings, we can change the headings to something else if we want. Like, that's and we'll back out of that. Then we have the text right there. Then we can change the text to something else if we want like that or that's over here. These are your only choices we can it be cardo, Enter, whatever. So that's how you kind of change the font choice, size if you want to play around with that over there, and that's really it. And generally speaking, you want to have your fonts be kind of similar across the website. So really, your H one, h2h title tags, your header tags are one font choice, then your body text is something else. So you don't want to have, like, a different font for your menu items and a different font for your H one, h2h title tags, a different font for your body. To. You want to go with two. One style for your headers, another style for the body text. If you do need help with kind of figuring out what matches, you could play around with a website called fonts pair over here. And so this gives you an idea of what fonts match with each other. But again, you're pretty limited over here with your typography. This is it. It's one, two, three, four, none of the defaults. So play around with this to see how you like it. But again, you can change the size, appearance over there, can make it extra light, line height, letter spacing. So you have a lot of flexibility with the design over here. Otherwise, that's the primary thing you're probably going to want to change over there with typography. Then we have colors over there. Coors, you can change the link internal ink colors. So when you have an internal link or an external link to another website or whatever, like Amazon or YouTube or whatever, this is where you can change the link color too. So if I had a link right there, high quality travel vlogs, like like that. We'll take that. Let me just link over here to YouTube as a quick example. There we go. I'll bold that. And so the ink right there is how I would change this color. So, what if you're like, I don't like that black. I don't want that to be black. So right here, contrast black, you can change the color and play around with it right there to change this color. So links over there is how you change colors. You have other options and gradients, too that you can play around with. And overall, those are kind of primary things that you want to change. Biography, your H one, h2h3 tile tags, your header tags, and your body fonts, then the colors for, like, your links. Pretty much it. And then shadows over there. Then you have layout. The layout is useful because you could make the site wider if you want and add padding. And if you want to add a background image for the entire sites, you can do that over here. And one final thing is that you have additional CSS right down there and also blocks so you can customize the appearance of specific blocks for the whole sites. So if you want to customize these blocks, so you don't have to continually, change the block every time you use it, you can just change it right here site wide. And again, like I said, additional CSS is over here. So if you know how to code CSS and you want to, where do I input the CSS that I want to add. Boom right here under your style. Anyways, that is it for this tutorial. 28. Thanks!: Alright, everyone. That's it for my Skillshare course on how to create a very beautiful, professional high converting website and blog with the 2024 theme from Wordpress. I hope you enjoyed it, and I hope you got a lot of value out of it and were able to create a very effective homepage with a leer call to action. Anyways, I just want to say thank you and have a great day. Bye bye.