WordPress Website: How to Make a WordPress Website From Scratch | Kiril Valtchev | Skillshare

Playback Speed


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

WordPress Website: How to Make a WordPress Website From Scratch

teacher avatar Kiril Valtchev

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

38 Lessons (3h 11m)
    • 1. Class Introduction

      1:44
    • 2. Phase 1 - Selecting a Domain Name

      3:38
    • 3. Phase 1 - Setting Up Your Hosting Plan - Paid Version

      2:05
    • 4. Phase 1 -Installing WordPress On Your Domain

      1:38
    • 5. Phase 1- Installing Your Theme

      3:52
    • 6. Phase 1- Installing Important Plugins

      5:37
    • 7. Phase 1 - WordPress Customization Part 1

      7:51
    • 8. Phase 1 - WordPress Customization Part 2

      10:50
    • 9. Phase 2- Designing Pages - Selecting A Color Palette

      5:42
    • 10. Phase 2 - The 4 Main Pages We Will Create

      1:19
    • 11. Phase 2 - Creating and Designing Your Home Page

      9:28
    • 12. Phase 2 -Creating Designing Home Page 2

      9:16
    • 13. Phase 2- Automatic Page Creation Elementor

      2:48
    • 14. Phase 2- About Us Page

      6:01
    • 15. Phase 2- Pages Posts Categories Menus

      7:20
    • 16. Phase 2 - Blog Page Creation With Atomic Blocks

      9:40
    • 17. Phase 2- Blog Page Creation With Elementor

      7:57
    • 18. Phase 2- Setting Featured Image For Blog Posts

      4:22
    • 19. Phase 2- Featured Image Creation

      10:11
    • 20. Phase 2- Featured Image Auto Creation

      1:43
    • 21. Phase 2- Contact Us Page

      5:25
    • 22. Phase 2- Sidebar Creation and Customization

      2:49
    • 23. Phase 2- Creating a Table of Contents

      6:16
    • 24. Phase 3- Elements of a Blog Post

      3:26
    • 25. Phase 3- Creating a Blog Post

      5:28
    • 26. Phase 3- Creating Social Buttons

      4:14
    • 27. Phase 3 - Creating Opt-In Forms With Pop-Ups

      11:07
    • 28. Phase 3 - Taking Your Website Live

      0:37
    • 29. Phase 4 - Introduction

      0:15
    • 30. Phase 4 - Google Analytics Installation

      4:54
    • 31. Phase 4 - Plugin Configuration

      6:02
    • 32. Phase 4 - Backing Up and Restoring Your Website

      5:19
    • 33. Phase 4- Making Your Website Secure

      1:54
    • 34. Phase 5- Testing Your Website Speed

      6:08
    • 35. Phase 5 - Creating a SiteMap.xml File

      4:22
    • 36. Phase 5 - Adding Website Google Search Console

      2:50
    • 37. Phase 5 - Requesting Website Indexing

      5:53
    • 38. Phase 5 - End of Class

      0:32
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

139

Students

--

Projects

About This Class

ABOUT THIS CLASS

Learn how to create your very own WordPress website without any technical knowledge. There is no experience or coding required. All you need is an internet connection and a willingness to learn.

WordPress is the world's biggest website platform and there isn't a better time to learn how to craft and create your very own unique website. 

If you are eager to learn the basics of WordPress and some intermediate elements, this is the class for you.

This class is carefully crafted for complete beginners like you who have never built a WordPress based website but have a strong desire to learn how all the pieces come together. Trust me, it's not as complicated as you may think it is.

WordPress is one of the most dynamic platforms when it comes to building customized websites for any niche. Whether you want to create a website for your business, start a blog, create an online store, WordPress can help you do that and so much more.

At first glance, WordPress may appear daunting and complex, but once you get familiar with it, the fun begins. From purchasing your domain to setting up your hosting plan, installing a great looking theme, to crafting your pages and content, you can learn it all in this class.

WHY SHOULD YOU LEARN FROM ME? 

I have been creating niche WordPress sites for almost a decade and I absolutely love it. I have also gone through all the growing pains of plugins, widgets, and bugs.

At some point in life, I had to learn it all by myself and during that time Skillshare didn't exist at the scale it does today. I genuinely love creating websites and want to spread my knowledge and help people do the same. It's not just a hobby of mine, it's my passion. 

WHY WORDPRESS?

Nearly 50% of all websites in the world run on Wordpress. It is the best platform for beginners and even advanced webmasters in my opinion. There is extreme flexibility and there are countless third-party plugins and themes that integrate into it. 

We will go through every single process step-by-step until you launch your very own WordPress based site. You will be amazed at what you will be able to build by the end of this course and I'm excited for you to get started and learn as much as you can. 


COURSE CONTENT:

Phase 1

How to Purchase a Domain 
* Setting up Your Hosting 
* How To Design Your Wordpress Site
* Wordpress Customization
* Installing a Wordpress Theme to Fit your Website

Phase 2

* Learn to Design Pages, Menus, Headers, Footers, Sidebars
* Installing Important Plugins
* Pages, Posts, Categories Breakdown
* Creating a Table of Contents for Your Blog Post
* Create Featured Images For Your Posts

Phase 3 

Crafting An Awesome Blog Post
* How to Create Social Buttons
* Creating opt-in Forms
* Take Your Site Live

Phase 4

* Installing Google Analytics
* Plugin Configuration
Backing Up Your Site
* Making your Site Secure
* Checking Your Website Flow


Phase 5

* Testing Your Website Speed
* Creating a SiteMap.xml
* Adding Your Website to the Search Console
* Submitting Your Sites Content for Indexing



CREATING A WEBSITE THAT IS RELEVANT TO YOU

Whatever you plan to do with your WordPress website, I'm excited to help get you started on your journey towards creating an online asset that you will have and grow for years to come. 



BUILD AS YOU WATCH

I highly encourage all my students to build their website as they go through the class. It will help your learning be more interactive and if you go through the same steps as I do, you will learn much faster and actually start to understand the WordPress platform. 

I'm extremely excited for you and can't wait to see what you build.

Meet Your Teacher

Hello, My name is Kiril and I'm the creator of www.buildsitego.com. I create classes for website design, graphic design and content creation. I have a strong passion for creating websites, unique designs, illustrations and anything that helps people explore their own creativity. 

I have extensive experiencing building websites and absolutely enjoy every aspect of it. 

See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Class Introduction: hello and thinking for making the decision to take this WordPress class. This class is intended for individuals with no previous experience or knowledge of work price, but have a strong desire to learn how all the elements come together when building your own website. With nearly 50% of all websites running on WordPress, it's no question that it's the leading choice amongst people looking to build their own upside or block. In Phase one, we will learn how to purchase a domain ing. We will learn how to set up our hosting plan. We'll learn how to design our WordPress site. We're gonna go over WordPress customization options and we're going to install a WordPress theme to fit our website and face to. We're going to learn to design pages, menus, headers, footers and sidebars. We're going to install important plug ins. We're going to go over pages, posts and the categories breakdown. We're going to create a table of contents for our block posts, and we're gonna go over how to create featured images for your posts and face three. We will learn how to craft an awesome block post. We will learn how to create social buttons we will create Opt in forms and we will finish face three. Finally taking the website flies in face for we will install Google Analytics. We will configure all your necessary plug ins. We will properly back up your website. You'll learn how to make your website secure and we're going to analyze your website. Close face five will test your website speed will create a site map dot xml file. We will add your website to the Google Search Council and we will submit your sights contact for indexing. So let's get started. I'm excited to see what you're building. 2. Phase 1 - Selecting a Domain Name: So as we discussed and face one, we're gonna learn how to purchase a domain. I don't set up your hosting plan. Have a design, your WORDPRESS site, specific WordPress customization options installing a WordPress theme to fit your website and installing all the necessary plug ins you will need in order to run your site successfully. So the first step to starting your website will be registering a domain name. The hosting company and domain name Red. To star that I recommend is Blue Host, but you're free to pick any other provider for this class. We will be doing all the demos through Blue hosts Control Panel. So although it is recommended, you're more than welcome to use a different provider before we register a domain name and hosting plan. There are a few things we should consider and think about for our domain name before I purchase our domain name. There's important externalities and domain name factors to consider in research. You have to think in terms of the user experience and how they will interpret and remember your domain name wants to actually lined on it. So let's take a look at five tips for picking your domain name that will make it memorable to your users. So tip number one keep it short and simple. Your domain name shouldn't be so complicated that it causes someone to miss. Type it when they directly searched for in Google or Bing, people are more likely to remember your domain name. If it's shorter, you should shoot to keep your domain name at 15 characters or less. Took number to stick with the dot com domain name, even though they're other domain name extensions that are gaining popularity in today's age . Dot com still reigns supreme over other ones. About 50% of all domains in the world are dot coms, so you should stick with a dot com domain name. Tip number three. Avoid using hyphens and numbers in your domain. Name happens and numbers could make it difficult for users to remember your domain name. We recommend. Avoid using them unless your domain name is very short or you have some sort of specific marketing plan behind your domain name. Tip number four. Check social media checking. If your domain name could be your user name for page on a social media platform is a great way to establish your social presence online that can help people find you quicker. It's a good idea to check and make sure that a Facebook fan page a Twitter handle. Instagram i D or Pinterest User name is available for your domain before you register and finally tip number five. Try to have some keywords in your domain name. Having keywords in your domain name gives your users an idea of what your blogger website is about before they actually view it. Having keywords in your domain name can help establish a higher domain authority in the long term for your website. If you had a blogger website in which you wanted to talk about pandas, a great domain name example would be happy to be dot painted jungle dot com or w w dot panda fax dot com. By having keywords in your domain name, it gives the user an idea of what the blogger website is actually about. In the long term, it can help you establish a higher domain authority, which Ted's toe help your website rank higher in search results and Dr Organic Traffic to your website. So to reiterate, keep it short and simple. stick with the dot com domain name. Avoid using hyphens and numbers. Check social media and try to have some keywords in your domain. So once you have an idea of the domain name, you want to register head on over to blue host or the provider you plan on using and registered the domain name. So if you're using Blue Host, click on domains Type in the domain name, which you want to register. And if the domain name is available for registration, you can go ahead and proceed to get it registered. 3. Phase 1 - Setting Up Your Hosting Plan - Paid Version: okay. In this next section, we're going to go over how to set up your hosting plan through Blue Host. Now, you don't have to use blue hose. That's just somebody that we recommend. Um, you can use other hosting providers. Such is go, Daddy One on one hosting or host Gator. But for the purpose of this class, we're going to do everything through Blue Host. So the next step is to head on over to Blue Host and actually set up your hosting plan. All things considered, it comes out very cheap. It comes out to 2 95 a month. So what, you want to go ahead and do is click on hosting and then shared hosting and then here is gonna bring up all these plans for you. And you can just go with the basic to 95 plan a month because, um, this is just gonna be a starter site for you. So you don't need anything more advanced starting out. So we're gonna go had click on, select, and here you can either create a new domain as we discussed in the previous section, or if you already have a domain that you own. You can enter it here and use it for your site. Since I already own a domain I'm going to click on, I'll create my domain later and the next. You just want to fill out all your account information and your package information. Now glucose defaults. You toe 36 months, and that's how you get this to 95 dollar price per month. You can choose to do just the basic 12 month price, but you'll be a for 95 a month instead of 2 95 I suggest you opt in for the full 36 months , but if you don't want to, you can definitely go at the 12 month Ah, they also try to up sell you cold got a basic, which is something that you just don't need when you're first starting out. So after we remove that, you guys can see that the price just went down toe 1 30 and if you just go to 12 months, it will be 83 bucks. If you don't feel comfortable paying the full 36 month price, feel free to definitely do the 12 months and after that, just under in your payment information, and then after you're done, click submit 4. Phase 1 -Installing WordPress On Your Domain: So after you've purchased your hosting and domain and I've gotten everything set up, the next step is to install WordPress on your domain and get started on creating your website. Now, in order to install WordPress on your site, once you log into your blue host hosting account, you need to go over to my sites. And then we're gonna go ahead and create a new site, and then here you're going to go ahead and enter just the something to give your site a unique name. You can obviously alter this after, so we're just gonna put test site and then just test site again if you click down on Advanced. And here you can create a custom WordPress log in tow, where you can log in directly to the site. So you will you can bypass blue host, so we're not going to go ahead and do that here. But this is an option if you want to do that. So I'm gonna go ahead and click next, and the gonna select the domain that I want to create the website on. And then here you can specify custom directory for the domain. But for this purpose You can just, uh, like the domain without a directory, and we're gonna go ahead and click next. So after WordPress installs in your domain, your site will actually populate here under this my sights tab. And now we can actually go into WordPress and start building our site by clicking out manage site. And then we're gonna go ahead and click on Log into WordPress, and this will send us to our WORDPRESS panel. So where we can start actually building our site? 5. Phase 1- Installing Your Theme: now, in this next part of face one, Britain go over how to install a WordPress theme to fit your website, how to customise that team and how to design your website. So it looks fluid functional in professional. So first we're gonna pick a theme that we want installed that will fit our website and what it's going to be about from the name of my domain, you can see that my site will focus on Excel. So we want to find a theme that will go with Excel, since it will be an informational based website where people will be searching for something related to excel and how to do something specific within the program. We need to find a theme that is very simple and doesn't look too crowded. So once you're in your WordPress panel, what you want to go ahead and do is hover over to appearance the themes and that what you want to go ahead and do is click on add new theme. Most us loads up here you'll see all the most popular and frequently downloaded themes that people use for their sites, and you can scroll through and see ones that you like, or ones that you feel will be a good fit for your blawg or your website whatever you plan on building. So if you decide that there's one that you like or you can do is you can preview it. Once you click and preview, you will see what your site could potentially look like once you actually install it. Right now it looks a little naked because there's no pages or posts created or any picture elements that have really been put in here. So it looks pretty pretty blink. So what you can continue to do is look at other ones and see if they would be a good fit for your site. So once you decide that you find one that you like in order to get it to propagate to your website is you have to click on install but continued to search. And once you find one that you like, we will get it installed, and we'll actually start building it from there once we get it installed. So the theme that I've descent go with is the knee theme from my website. Um, it's actually a very good team that I've used in the past for smaller starter sites, and it's really easy to work with when you're first starting out building your WordPress site. Um, so once you've picked your own theme that you want to use, what you want to do is click on Life Preview just to get an idea of what it would look like once it loads it up. It's not going to look like much, but at least you can gain an idea of how the actual site structure will appear once you start to build it out. Um, once you want to activate the theme and propagated to your site, what you want to go ahead and do is click on, activate and publish. So once that's all set, you can actually start customizing the website the way you want it. Now, before we get ready to learn the different customization options for our website, it's important we install a three page builder, which helps us create beautiful, creative and custom pages for our site. The page builder that we're gonna use for our website is L. A mentor, which is 100% free unless you choose to upgrade to the paid version. Elementary offers a wide range of flexible options to help us create amazing page designs. So in order to install it, well, we're gonna go ahead and do is hover over to plug ins and add new, and we're gonna actually search for L. A mentor. Once it pops up, it will be right here, and you can click on install now. And once it gets installed, we just have to click on Activate. And once that activates, you'll see all the options populate here for L. A mentor. Now we'll be going Maurin to adopt on L a mentor in another section of the course. But for right now, we just wanted to get it installed before we show you how to actually customize your website. 6. Phase 1- Installing Important Plugins: Now, in this next section, we're gonna go over all the important plug ins you need for your website. First we have Yoast Seo, followed by jetpack Kids Mitt opt in Monster W three Total cash, easy table of contents and the asset cleanup. These are the main plug ins I suggest you started with on your site. Obviously, there's a ton of more options available for customization, but you really don't need to overdo plug ins on your site because it can slow it down on your first getting started. Now let's get them installed, and in a later section of this class, we will configure them as we build out the site. Now, first we have the Yoast Seo plug in, which is one of the most widely used popular WordPress plug ins on the market and is used to help make your site and its contents easy for the search engines to pick up. Installing is really simple. All you have to do is hover over the plug ins, click on add new Type and Joost and click install now and after you install, you want to click on activate, and after you activate it, it will actually populate down here in the menu. And once you click on that right here, you can configure all the options which will be showing you in a separate section of this class. Next, we have jetpack, which is another WordPress plug in and actually comes preinstalled on majority of WordPress sites, and it gives you all the necessary tools to design and secure. Your website will be going over these security options in a later section of this class, but as you can see under the installed plug ins tab under plug ins, jetpack is already installed for this website, so we won't need to go ahead and install anything for allowing jetpack. We have the kismet anti spam plug in, which is a plug in that is used to help you manage and filter spam comments from bots and malicious software, using it as easy as activating it and letting it go to work. This plug in also comes preinstalled on your WordPress site, and all you have to do is click on activate. After we click Activate, we can see that it dropped down here and it's currently running. We have opted Monster, which is another popular plug in the helps you create Opt informs on your website with the goal of growing your email list and capturing more leads. It helps you turn your website visitors into loyal subscribers, and that also comes preinstalled on your WordPress site. So no need to worry about installing it. It's It can be located right here. Moving up. We have the W three total cash plug in, which is a pumpkin that's installed in order to help the user experience of your website by improving your server performance, cashing every part of your site, reducing the downfall of times and optimizing your content delivery network integration. This may all sound pretty technical, but configuring it is super simple. The first step and doing this is to actually install the plug in. So we want to do is in W three total cash, and once it pops up, it'll look like this. Click on install. Now, after installs, we will click on Activate and in a separate section of this class will show you how to configure all the setting. Next we have the easy table of contents plug in, which is a plug in that will automatically create a table of contents for a block poster page. This is done if you have super long content and want to give the reader summary that will help them navigate to certain parts of the post. And here is a sample of the table of contents plugging in action. So here is a block post that is very, very long, and we have a table of contents plug in that summarizes all the specific headers. And if a user wants to navigate to a specific section of this post, they can simply click on it, and it will pull them all the way down to that specific items so they don't have to read through the whole thing. If they only want to view a section of the block post now, in order to install the easy table of contents, all you have to do is to have an easy table of contents, and it will be the first available option. And after that, we just want to cook, install in activity and once we activated the actual settings for the easy table, contents will be located within the page settings and also the post settings, and we will also be going over this in a separate section of the course. So once you see it in action and will make a lot more sense, last but not least, we have the asset cleanup plug in, which is a pretty complicated plugging to configure. But it's extremely important because it will help with loading your websites pages in content quickly. Having a website which loads fast is extremely important for users and for search engines. So having this plug and properly configured is extremely important, which will be going over in careful detail in a separate section of this class. But for now, all you have to do is Aziz type and asset cleanup, and once it loads all the available plug ins, it will be the 1st 1 up here. So we want to click on install now after installing click on Activate, and once that activates, it will create its own separate menu here and under settings is where we can actually start configuring all associated settings that we need in order to speed up our website 7. Phase 1 - WordPress Customization Part 1: So now we can start it on learning all the different ways we can customize our WordPress site within our theme. So we want to go ahead and do is hover over to appearance, then select customize. And once this loads pop, you'll have all these options on the side and these will be all the different ways. We can manipulate the appearance off the actual website and how it will appear to the end user. So if starting with customizing our website up top, we have our header in which we can create our menus in here in the middle, we have our container or also referred to as the body of the site on the side. We have our sidebar. If we decide that we actually want to create one for our website, not all websites have it. So it's an option that is completely up to the website owner and at the bottom we have our footer of our website in which we can include contact, information, disclaimer information or terms of condition for our site. So now we can start learning how to change all the elements around to give our website accustomed look and feel that will be unique to the niche in which we're building our website and starting with the layout option. Once we click on it, we can see that we have four separate options available to customize. We have the container, the content in sidebar, the blogging archive section and also the single post options. Changing the options in here will change how the actual layout architecture appears to the end user. Once they load up your website on their computer in the container section, we can customize the appearance of our container by changing around the style layout. We can stretch out the container to make it us. Why doesn't we want? Or we can keep it to the default option that the theme comes with which in this case is contained. Next we have our blawg archive container style, which will change the appearance of the block post section of the actual layout. You can see how it changes it once we select a different option. And last, we have a single post container style which pertains to the layout of individual block post that we create for the container section. We can keep the theme options set to their defaults, which, given the container nice fluid look. So next we're gonna go ahead, move on to the content inside bar options that we have available. So this next part changes the location and appearance of our sidebar. If we choose the have one on our site, most websites tend tohave some sort of side mark and it gives the website very good. Look, in my opinion and this option you can select, So the website has no sidebar. Here. You can move the side bar to the left hand side of the site. In here you can move the side buyer to the standard right hand side location, which most websites tend to do. There are also some advanced options that are available, which pertained to individual posts, which you can structure and customize and give the actual post their own unique structure that is different from other pages on the site. This is completely up to you. And next we have the block in archives section where we can customize the layout of our block style. Most we publish a block post there will be displayed in a certain page menu in the blawg layout determines how they will peer on that page. The excerpt length will determine how much of that post will be displayed as a teaser to the end user. The post vegetation determines how Maney block posts it will display in the layout. The metal order in details Aziz information you want displayed for the for the block posts , such as the author, name, the date, comments or category. Some people choose to leave this blank, but some people like to at least put in the date. Um, and we have the author avatar, which, if checked, is a small image to represent the author of that post. So if we were to check it and on check it, you will see a small image will appear here. Um, these options are meant to help give your blog's section a custom and unique look. Or you can keep them to the default options that they come with, which is the middle one here, and less part of our layout options as the options for single post. And here we can customize the appearance and order of elements for a single block. Posts such as the title thumbnail, the content, the tags and the comments. This is a separate section that will actually be going over more in depth in another part of this class. But for right now, that's all you need to know is that in here you can customize the appearance and order of the elements for a single block post. Next, we have the header Customization, which is you can see, has a ton of different customization options available at your disposal. But we don't need to over complicate this for the purpose of this class, since headers tend to be a very simplistic and small part of the website as a whole, headers really meant for brand recognition, and you can get creative here if you so choose. But I don't recommend spending a ton of time on it. The three main parts of the header are the logo, the primary menu structure and the secondary menu. If you choose to have one in the logo inside Identity section, we can select the logo to import into our header. We can customize a site title on the site tagline, and we can also add a custom logo with, and we can also add a site icon. If we so choose to do so let's see it all in action. So starting with our site logo, what we're gonna go ahead and do is import a logo into the header. Appear so you gets going to see what it looks like. So what we're gonna do is click out so, like, logo. And this is just an image that I have created that I will import as my header image. So I have clicked on select and next thing is, we're just gonna crop the size on display of the logo that we want in the header. So after I crop, I'm gonna click on crop Image and we could see a crop the image accordingly and it imported it up here. Another thing we can do with this is actually stretch it out as far as we want and customizes we see fit. The next thing we have in here is the site title in a site tagline. I'm just gonna go ahead and remove this logo so you guys can see them. So in here you can edit them, tow anything you want and let's say we added this toe self fund. You guys can see it appear in the tagline will be right below it. You can choose to hide either one of these options and it will hide them both if you want. But some people like to keep it least one of them open. And the next thing we have is our site icon. So we're gonna go ahead and select the same image here, and we're gonna click on select. Once we select this image, this will be the little icon that will pop up next to the search bar whenever somebody visits our website. And it's just very good to do for branding purposes. Next, we have our primary manual occasion, which we can actually change later on from the menu section if we choose to do so. But as you can see, this primary menu is located right up here. So any change we make is gonna propagate up here. Um, you can see that the location is up there and we can edit its layout and color options here along with its style appearance. So if we still like a different style, it will change it up here and you guys can see how I highlighted it. And we can also manipulate what kind of color we wanted to show up under So last, we have the secondary menu option, which is pretty uncommon for small sites or starter sites. Since it's really much for websites that have a ton of information and different sorts of categories to navigate through. We will be going over how to create a secondary menu in a separate section of this class, which will tend to propagate right under the main primary menu up here. 8. Phase 1 - WordPress Customization Part 2: So before we move forward, it's worth noting that even if you do choose a different type of theme, most of the customization options like the layout, header footer, color and background topography, custom buttons, menus, widgets and home page settings are usually available for majority of themes that you can install through WordPress. So there's no need to worry if you've chosen a different theme to follow along with our demonstration. So moving on to our next customization option are footer on your foot or we tend to include copyright information for a site name, contact information, disclaimers, terms of service about sections and alternative ways. You can connect with sites such as different social media channels like Facebook, Instagram or Twitter, and a minimum. The footer should include copyright information of the website in about US link page and also any disclaimers that you have about the contents of the site. Now, as you can see, the knee theme comes with many different foot options, but you only need to be concerned with the foot or one, and the Copyright Information tabs. You can create a custom menu for the footer, but that's typically meant for larger sites and is a part which we'll discuss in a separate phase of this class. You don't need to create a cluttered footer for a small starter site. Now, in the Footer one tab, we can add custom widgets to the footer and give it a unique look. So once you click on General and click on add widgets, these are all the widgets that are available to you that you can actually add to the footer . Many if you so choose, we can also alter its layout and layout structure, and we can shift it to the left or to the right, or align it to the middle. Another option that we have available is actually editing the foot urban. You down with this edit option button right here? Eso From here, we can actually edit its layout containment so we can stretch it to full with or actually just contain it. So if we change it to contain, you can see how it altered its appearance. We could also go ahead and altered style by shifting the row high up or down, or we can just leave it to the default Here. We can also change the skin mode and see how it that all chairs it. And we can also give it a different color, which is very, very cool. Or if you have a custom color that you want to edit input in here, you can also put it in there. We can also add a custom image if we so choose. So let's just see what it would look like if we add our custom image from before. We can see that once we added the image, it looks a little odd, and the reason being is footer. Images require custom image scaling so it can look a little weird. So if you do want to put an image down here, you just have to make sure that it's properly aligned for foot or dimensions. Ah, and also there's other options that you can do such a different color overlay, and it will go over and the image in here. But that's just another option if you so choose so moving on. Next we have our copyright section, and you can see that it's kind of written and a little bit of a code. So down here you'll see Neave and you'll see leave Theme mentioned here and then also you'll have powered by and then WordPress. So here is where you can go ahead and altered these if you want to change them to reflect your website name. So our website names Excel Jet I so I can go ahead and alter these and you can see once you alter it up here that alter the name down here. So if you wanted to give yourself a customized copyright claim on your website, that's how you would go and edit. It is through the copyright section of the Footer now moving away from the footer. Next, we have our color and background customization options. These will become more apparent to you once we actually create some content for your website. Now the link color will pertain to the color of the hyperlinks in your content. The link hover color will be the color that the hyperlink changes to once you hover over it with your mouse. Your text color will be the color of your written text on your site, and the background color is obviously pretty self explanatory. You could also add a background image to your site if you so choose, but in my experience. They're best left blank unless you have some sort of unique idea for how you want that image to be displayed across the whole page of the site. So just so you guys can see how everything changes in here once I do actually make a change , go ahead and change the text to read, and you can see how they were in text here. Changed to read. Uh, if I wanted to change the background color, for example, you can see how alter the whole state of the page itself, and it looks really, really odd. But for most people, they tend to leave the background image or page completely white. Ah, so let's just select an image and display it across the whole page so you guys can see how it will appear in the background so you guys can see how it actually altered it. For some people that actually might look kind of unique and cool. But just so you guys can get an idea, it can look the whole. It can make the whole website look a little soppy. So moving outdoor customization options. Next, we have our topography settings in our topography. settings. We can customize the appearance of the written text on our website. We can configure different font sizes and different family options and how the Texas space throughout the website. So if we were to go on alter the font size, we can see how it would change throughout. The website itself can also alter the line height and see how it spaces everything and how it spaces it from left to right. But in my opinion, it's best to leave it to the defaults that are already in place. We can also culture the size of our different header options for different types of header tags in our website. But that is best left to the defaults in which the team comes pre loaded in. We can see from the default options that the H one header tags have the largest size, and that is that in order to give your blawg posts proper separation from the rest of the content within the post. So it's clear for users to identify main points of your block posts. These will make more sense in a separate section of the class in which we discussed proper block post writing formation so moving on in the next section we have buttons and in here we can give buttons, custom color profile schemes and different patting mechanisms and different border settings . We don't really need to spend too much time here just because we will be going over how to create buttons in a separate section of this class. Since we will be learning how to create them through the element or page builder and then the elemental page builder, you have a ton more options in terms of customizing your buttons and giving them certain functionalities in certain places of your website. Next, we have the holy Grail of website structure. The menu section creating a proper menu structure is important to your website so your visitors can navigate your website and find the content that they're looking for. Now, if we want to create a menu, the first thing we're gonna do is select create new menu. Then we're gonna put a menu name in here. So we're just gonna name it test menu. Then we're going to select the location of the menu. So we're just gonna like primary menu and then click next. And now we can select the items that we want to appear on the primary menu up here. So we're gonna click on add items and before you actually Adams, that have to be created within WordPress. So in a separate section of this class, we will be going over how to create the pages and creating another customer and you again. So these pages, or was that we have already created. So since their creative, we can go ahead and add them to our menu, and when you click the check mark, it will actually propagate them up. Here is you can see if you want to add additional pages or menus, you can just add them and they'll propagate up here. If you want to remove them, you just click on the drop down and select. Remove, and, as you can see, it will remove them up here. This is a simple way to create these menus, and like I said, we will be going over in a separate section of class and more detail how to create custom menus and even sub menus. Another direct option that's available to your menu section is actually creating menus directly through here. So in here we can actually create a footer menu or even a secondary menu, which will appear below our primary money. So if we wanted to create a footer menu, we could just start and do it right through here, and it would be the same process as creating a primary menu. We just give it another name, saying, for example, Footer, be click next, and we begin to add elements as we see fit. So next we have our widget section, which can also be accessed in a separate location within WordPress Widgets air small many applications that you can use on your website to provide information to your visitors and to create different ways those visitors can interact with your site. We can access widgets in a separate location. WordPress by going to your WordPress dashboard, going to appearance and selecting widgets. In here, you will see all your available widgets within WordPress and all the available locations where you can drag and drop them. So if we wanted to draft categories under our sidebar and click save, it will have the same effect. If we went to sidebar here and added it within here, that would be the same exact thing and your categories would appear right here on your sidebar. So that's what a widget would do. Let's just go ahead at another widget that's already fully created and fully functional, so we're gonna go ahead. And so the calendar widget, which will show the dates of the current month. So, as you can see, once we added it, it pop right here. And if we want, we can give it a title test, would you? And you can see how the name changed Or, if you want, you can just toe one of this calendar. Working with widgets is a quick way to add useful elements to your website that make it stand out and and a more custom experience for the user. We'll be going over widgets in more detail in a further section of this class. Last late, we have our home page settings. This section determines what would be displayed on the home page of your site, which can either be your latest post or a static page. From here, you can sell like which page you want to be your home page, in which page to be your post page, and finally we have additional CSS options. CSS refers to custom CSS cold that you may have for customizing the look in the site. This section has really meant more for advanced users who actually have direct experience with writing CSS code for websites. This concludes phase one of this class and next and face to we will learn more technical aspects of WordPress and how to start designing pages in order to start bringing our website toe life. 9. Phase 2- Designing Pages - Selecting A Color Palette: now moving on the face to the course, we will learn how to design eye catching pages. We're going to learn how to design menus, headers and footers. We're gonna learn how to configure our important plug ins that we installed Phase one. We're also gonna learn the major differences between pages, posts and categories and how to cohesively bring them together in order to give our website user friendly float. And we're also gonna learn how to create a table of contents for our blood posts. Now, before we dive into designing our pages, it's important to establish a sense of consistent design for a website. We want the flow of our pages and content to be consistent. So the experience to our own user seamless. In order to do this, we need to establish a preset color palette for our designs. By using a color palette, we can give our pages and website consistent Appearance drop. Now let's take a look at the different options that we have available for color palettes that we will be able to use for our website. The website will be using to find our color palette. This colors that coat and this website. We can click on start the generator, and the website will give us different color palette options for our website. As you can see, a standard color palette will consist of five different colors that tend to go very well with one another. We also have the option of exploring other pre created color palette options that we could use for our website by clicking on the Explorer button here. Once this opens up, you can scroll down and just browse through all the available color options that are pre created for you. We also have the option that customized that color palette to something that we like better than the available options that are shown here. All we have to do is click on view for a specific color palette that you might be interested in using, but one to adjust some of its options. And then, once you're here, where you can do a start adjusting the settings for the palate, such as the hue, the saturation, the brightness, the temperature and as you change these elements, you can see that the number profile for the color also changes. Now the number profile here is what we will be using to create different color schemes for our website. There are also other options available. You can edit such different shades and also different color blindness profiles for your color palette. And as you change these, you can see how the numbers will alter and so will the different shades that once you have found a color power that you like, you can export it and later we will edit some of the color settings and our theme to reflect our color palette. We will also want to focus on using our color palette when we create block posts, pages and categories because it will give our website and elegant, cohesive feel. So in order to export it, you want to click up here on export and click on PDF. And once you do, it will generate this PDF document here, which will reference the color code at the bottom here, which we can later use throughout our theme. So the first thing we can do after choosing our color palette is to implement parts of our color palette into our themes color set, and the way we do that is by clicking out, customize and then going toe colors and background settings. So, as we can see, we have four color options that we can change in the colors and background. We have the text color, the background color, the link, hover color and our actual link color. For the purpose of this, we want to leave the text color and the background color to their defaults because it can just screw up everything and it would not look right. But just to show you guys what it would look like if we change the link color in the link hover color to some colors in our color palette that we selected, what we will do is pick out some of the numbers and swap them out here. So, going back to our color palette that we created, we're gonna go ahead and use the blue for the link color. And what you're gonna do is select the color and type in the code here. And once you swap that out, you could see that the link color actually changed here and next. We're gonna go ahead and change the link hovered color. So what we're gonna do is change it to Green. We're gonna copy the color code, paste it in here and it changed it. So if we go over and hover, it changes to the green that we altered here. Now, if you want, experiment with this and check and see how other colors will look. Once you swap them out, you can decide which one you want to use, so we changes the orange and you guys saw how it altered the color. Now another section where we can add our color palette and our theme is to our button settings. So what we want to go ahead and do is click on pages all pages, and then just go to one of our test pages that we have set up and in here we can actually edit the colors for our buttons. So what? We want to go ahead and do this? Click on a button here. Then what we want to do is click on custom color and select a color from our color palette that we have here and that alters the color of our button. And also you can at it the text color if you so choose which you don't have to. But it's just an option. But just for demonstrating. How this would work is that would alter the color here. So you want to pick a color scheme for your buttons that's gonna be cohesive enough for it to flow throughout the rest of Europe site. 10. Phase 2 - The 4 Main Pages We Will Create: now, after we have selected are color palette. We will learn to design and create four main pages to our website. Four pages include our home page about us Page are blocked page and our Contact US page. Our home page will be well laid out, which will have a clear call the action which will identify to the visitor and regards to what they're looking for. Like the example you see below, we will use an eye catching headline. We will provide user friendly flow and we'll make her call the action as big and as obvious as possible right from the start following her home page world, create our about US page, which will feature information about exactly what the website and or business does, what niche or location it serves. The list of services offered, impossibly, the Mission and Vision statement. It is meant to deliver the most important and relevant information above the fold and will tend to feature at least one main called action section. Next, we will make our block page, which will organize information on our block clearly and will feature the most recent articles and other different categories that the user might find useful and lastly will include our Contact US page, which will create with opt in Monster, and it will give information to the visitor and regards to how they can contact us if they have questions or enquiries. 11. Phase 2 - Creating and Designing Your Home Page: So now and our WordPress back office, we'll go ahead and design and create our home page with the element or page builder, which will include a catching headline with the clear called Action that identifies what our Website is all about. So first, what we want to go ahead and do is create a page title titled Home and then we want to open up the Element or Page Boulder so we can start designing our main page. So what we're gonna go ahead and do is click on, make sure you're on pages and click on Add New and after it loads up what we want to go ahead and do it at a title home. And then what we want to go ahead and do is click on edit with L. A mentor. And once we click on edit with Elemental, or it's gonna take us to the canvas, where we can actually start editing in creating the home page. So as you guys concede, that title of the page appears at the top and we really don't want to hear because it doesn't look natural and it will disrupt the flow of the website. So we're gonna go ahead and do is remove the title from the home page and the way we do that by going back and what, we're gonna go ahead and do a scroll down here under page settings under components and click on Disable Title. And what that will do is that where we moved the title from being included on the page itself. And you can do this with any individual age if you don't want the title appearing at the top, so we're gonna have to do is good update and then go back to edit with L. A mentor. And once we go back, the title will be removed. As you can see, the title got removed. So now we have a blank page to work with. And don't worry about the menu at the top just yet. We'll go ahead and properly arrange it once we create our four main pages on the side. Here in L. A mentor, you can see a ton of different elements to make your website truly unique, but we don't make it too complicated for your home page, but we will do is create it. Call the action and some individual elements to give the visitor a bit more information about the website, and we will also use some of our colors from our color palette that created before to make our home page pop. And we'll use a cool image to give the page a unique look. We want to create our main called Action on our home page above the fold of the website above the fold means that we want the main called Action toe appear right in the middle of the website before the user has a chance to scroll down. So the way we're gonna go ahead and do that is by clicking this plus I two at a widget and then we're going to select the structure off the widget. So we're going to select this wide range widget and then what? We're gonna go ahead and do it, Stretch it. So it'll stretch across the whole section of the website here up top. So next we want to customize our layout a bit further by stretching it so it's above the fold where main message will appear, and the way we're gonna go ahead and do that is by stretching it further out. So what we want to go ahead and do. It's just set this to 1200 you see it'll stretch it out further and we want to do what the height is said it meant height and you can see how it altered it down here. And then what we want to do it stretched the minimum I even a little bit further. I recommend going this far 600 toe where are above. The folk content will be captured within this whole space right here and then after that, we can start adding elements within here and customizing the layout. Even first of the next step is to add our style and background picture to our canvas that we have created here in the above the fold section. So first we're gonna go ahead at our background picture by making sure we're on style, clicking on background, selecting normal the classic background type and then coming over here and choosing an image. So let's go ahead and go with this laptop image, and we're just gonna go ahead and change the title to yourself and the all text to excel and click Insert media. And, as you can see, our background image got inserted and the next what? We want to go ahead and do assert like our background over like color. Now, this should be a color that you used from your color palette that we created earlier. So what we're gonna go ahead and do is click on the color and I'm gonna go ahead and use a color that I created from a color palette before. And as you can see, it changes the background color, and you can actually toggle with the opacity. Teoh make it look slightly lighter or darker as you want. But for this color, I'm going to go ahead and leave it at 90. Hasn't really good, uh, scheme to it. And it just goes well with the background picture and this tone is actually much better for it. So next we're gonna have some texts, elements that will be our main call to action. So what we want to go ahead and do is find this heading widget, click and drag and drop it here and what we're gonna go ahead and do is at it our text. So our main text gonna be learned excel online for free and then what? We want to do this center, this text, then also what we're gonna go ahead and do is make sure that the HTML tag it's H one. And then also, we want to make this slightly bigger. So what we're gonna go ahead and do is make the size of the text much larger. So we're gonna go ahead and change it to excel. Double excel on the next. The style. What we want to go ahead and do is select a color that will make it pop more. So we're gonna go ahead and select White. Next, we're gonna add a small divider between our main called the Action and our subheading. So what we're gonna go ahead and do is type and divider here and that widgets. And then once you see this divider pop up, we're going to click and drag and drop it right below our main better so as that you can see it dropped it right there. And from here we can select the different options for our style of our divider. Next, we're gonna style are divider a little bit, and we're going to use a color here that is a color from our color palette that we created . So I'm gonna go ahead and use a different color that will make this pop a little more. Ah, so what, We're gonna go ahead and do his first make sure it's centered. Then we're gonna alter the with and make it a lot smaller, and we're gonna make sure it's set on the solid style. And then what we're gonna go ahead and go to do is go to style and change the color. So as you can see that alter the color to Red, which is one of our calls from our color palette. And I'm also gonna alter the width and make it a little bit wider so it pops more and then we're also going to create a small gap between these Between the header and the divider. Wouldn't make the gap a little bit figure. So it pops out more so now that we have spaced it out correctly and made the style, you guys can see how much more and actually pops once you put the divider in their next, what we're gonna go ahead and do is at our subheading. So what? We're gonna go ahead do is select the heading widget drag and drop it here right in our subheading. Then what? We're gonna go ahead do and make sure it's centered, change the color, and then we might want to alter the topography a little bit. We can change the size, make it slightly smaller or bigger in order to make it easier on the eye. So I'm gonna go ahead and do is change the size 20 actually, maybe a little bit bigger, so it looks more professional and we're gonna use the weight at 400. And you can kind of alter it any way you see fit just to make it easier on the eyes. So what we're gonna go ahead and do is leave it as such. And next what? We're gonna go ahead and do as add small buttons below the subheading so the user can quickly navigate to a section if they really want to get started toe started and learning now, adding the buttons, actually pretty easy. All you have to do is click on a button here, pull up the button widget, drag, and drop it right below here. And you see, it populates it down here and what you want to go ahead and do this? Center it. And if you want to change the title, you can change it right up here. So we're gonna had go ahead and change it to ISS. Start learning now and then also, once you actually create a separate page for this link here, you want to drop it in this link taps. When somebody clicks on it, it will navigate him to that specific page. You can also change the colors here for the actual buttons. So what we're gonna go ahead and do is change the button to a color that we use in our color palette. So this is a green that we have in our color palette, and we could change it to that or something else that will coordinate better with the theme . So blue obviously doesn't go as well. We can try another color just to see how I look. This looks off the odd. I'm gonna go ahead and stick with the green for this. So this is our button. We can also, uh, alter the padding and different styles around it. We can also, uh, add different options to make it more unique. But for the purpose of this, we can leave it a smaller medium, and we can actually change the size of who we want to pop more. But let's just go ahead and leave it for medium, and you can also space space it out some more. But let's just leave it for a list right now. 12. Phase 2 -Creating Designing Home Page 2: So next we're gonna go ahead at a few more design elements around our home page to make it more visually appealing. And what we're gonna be going ahead and doing is adding an image care so that will actually grabbed the attention of the visitor as soon as they see the main full of the page. So before we had in our image care. So we want a first put in a divider between our main call to action in the care cell that will be creating in order to have a little more separation between the two widget elements . So what we want to go ahead and do is select another structure and then grab our divider and just drag and drop it here and you can change the color. But for right now, we're just gonna leave. It is black and neck is what we're gonna go ahead and do is at our image care so widget. So we want to create another structure and then grab our image carousel, which is this widget right here. And we're just gonna go ahead and drag and drop it down here after we had in our image care so which it We want to add some images that will go with the theme of the website. The website you can use for this is called a flat icon. Here, you can find some pretty cool icons for basically any niche. There's a paid version of this website for 99 a free version. And if you end up using the free version, which most people do, you just have to give credit to the author who created those images in the place where you end up using them on your website. Since our website revolves around education for Excel, I simply typed in education and the search bar, and there were all these related icons that popped up for the education niche. So if you want to use a specific icon, you just have to click on the icon itself and then downloaded right away. So after you have selected the images you want to use in your image care, so we're gonna go ahead and add them. So these air the five images that I selected from flat icon, so I'm going to go ahead and select each one that I want to use and then click create new gallery and then you want to insert the gallery. So once you create the gallery, it will populate down here. And you can start editing the gallery options for it in order to make it look a little bit different. So next we can start doing is customizing are carousel options. And from here we can select company slide through unto show. So if we put it to three, only three of the icons will shore. Or if we put five, all the five icons that we have will show, which actually looks very, very nice for this. I'm going to go ahead and leave it to three. And then here what we can do is select the number of slides that are scrolled per swipe. Here, we can decide if we want to stretch the images, which obviously doesn't look that nice. So we're gonna leave it to know. And then here you can select the media file if you want to insert one, but we don't have one for this or the custom. You are l link for the file. So here is where you will put the link so you can give credit to the actual author who created those images. If you end up using the free images from Flat icon and then here in the caption, you're gonna go ahead and give a small credit to the author. So this is one way you could add credit to the author just directly with the Lincoln title or just the link itself, because it will be imported in there if you end up using the free option. I personally use the paid version of Flat Icon because I use a ton of icons and a lot of the websites that have built. So I'm not required to give credit to the author. Eso next, What we're gonna go ahead and do is at it the style of the carousel itself, if you so choose. So what we can do is at the position of these arrows to be inside or outside, so actually like them inside. So we leave them as is, and we can actually edit the sides of the arrows if we so choose if you want to make them pop up more to the eye. But we're gonna go ahead and leave them at 20. Also, you can edit the color to something more that pops it or a color from your color palette. So I'm just gonna go ahead and leave him. Is this great? Because it looks very good and we can also position the dots of the care cell insider outside. As you can see, if they're inside, they don't look a smooth. So we're gonna go ahead and leave them outside. And you can also toggle with their size if you wanna make them bigger. So we're gonna go ahead and leave him at seven because that looks good. And then you can also edit the color of the dust themselves if you so choose and again, it would be much better if you decide to edit the color of the dots to make them a color. That is from your color palette to make it much smoother. You can also toggle with the spacing of the images, uh, or create a custom border around them. It's such but you don't need overcomplicate the image carousel too much because it already looks smooth because of the great images that we selected from flat icon. So after we have created our main called Action are some title our action button in our image care cell. We want to scroll all the way to top to make sure appropriately fits above the full of the website. This is an important part of Web site design, so we can ensure a website visitor sees the main components associated with their website as soon as that happened to land on our home page and becomes interested in our website visually and also becomes more curious about the type of content or services we offer. So we can see right as someone would land on our home page that can clearly identify the menu at the top. Our main called Action are subtitle and also our button, and they can also visually see the image care so which will draw them to the website and make them want to find out more about it, and we'll induce them to actually start scrolling down further. Now, after we have put in these main components of the home page above the fold, we will go ahead and add additional elements here that will further identify to the user mawr information about our website. So by this point, you guys should be a little more familiar with L. A mentor and how to drag and drop different, which elements on a page in order to customize it. We'll continue to add a few more elements to our home page, so it gives our visitors a bit more information about our website. Well, essentially, what you can continue to do is experiment with the different widgets you have available in your elements tab in L. A mentor to make the home page or other pages more interactive for the users. So next we will proceed with editing the home page by adding in some more elements. First, we'll add another divider under the image care cell and then another structure element that split in half. So what, we're gonna go ahead and do is click on add another structure, and then we're gonna go ahead and add her divider and dragon and drop it, and we can actually make it slightly smaller and center it. Then after that, we're gonna add a second structure right below it where we can start adding more elements. So now we're gonna go ahead and drag and drop another divider on here to create some more design separation on. We're gonna go ahead and edit it. We're gonna make it smaller, an altar to the left, and we're gonna use us one of the other colors that we had from her color palette, which is gonna be the red that we also used up here. And then what we're gonna go ahead and do is increase the weight of the divider, make it up to five and do a slight gap. And now we're gonna go ahead and at are heading element. You know, we're gonna go ahead and customize that title size and its elements in order to make it fit with the rest of the design style on this page and after we have edited our title and made it look the way we want to, we're gonna go ahead and add the subtitle. It also once we've completed the title and the subtitle, we're gonna go ahead and add an image into here to make the design a bit better. And we can select an image that comes preloaded with L A mentor. So this would be a good image for that. And as you can see, the image got so we actually went ahead and completed the home page. So you guys concede the finished product. There's no need for us to go over every single element and how to create it. Step by step. You guys can kind of navigate your weight through it. It will be much better if you start dragging dropping elements on your own and start customizing them so you can gain a truly unique feel for the element or page builder. You should try and create your own custom home page that will be truly unique, encourage you to experiment, adding different elements, adjusting their size, their alignment, their style, their borders and even dive into some advanced design options that can truly give your website unique look. But as we discussed the main elements to your home, page should have a focus on a clear call the action that is, above the fold, clear subheading, maybe an action button and some design elements to catch the attention of the user in order to make them wanna navigate further into the website and find out more information before we move on to creating our about US page, we will go over how you can import pre created page templates with L. A mentor. If you don't want to spend your time creating custom pages, it will make creating pages much faster. But they will not have a their own unique look. If you were to go ahead and create them on your own, so let's check that out. 13. Phase 2- Automatic Page Creation Elementor: now we're gonna go ahead and show you an alternative way to quickly import pre created pages from the amount or page template library. And what we're gonna go ahead and do is make sure on pages, select the test page that you've created or set up a brand new page and then click on Edit with L. A mentor. And once you're on your blank page, you're gonna have these two widgets here, and you want to click on the ad template widget. Once it loads up here, you have pre created pages that you can go ahead and import, so you want to go ahead and scroll through and find a page that you like and imported directly into the page at your building and the ones that have the little tacular. It's as pro. Those are strictly for the paid version of El Mentor, so those if you want to use them, you'll have to pay for them what you can do once you select a page that you want to import its click on insert but also appear, you'll have these templates where you have templates that you've been working on that you've said, and also you have the blocks up here, which are individual block components that can be used within a page. And here are the different categories of components for the blocks that you can use, such as Contact Footer Header, which will let her use a footer to show you how to create before. Right now, let's go back to the pages and import a test page that's already been pre created so you guys can see what it looks like. So let's just scroll through and pick up cool page that we like that you guys can see actually go back at the top and select this page right here. So we're gonna click insert, and right now it's loading. And once it's done loading, it'll import the whole page and all of it's related elements that have already been pre created for you. So once these load up in here, you can scroll down and see how it looks, and it's really, really smooth. So the elements in here just like the elements that we created, and if you want to edit them, you just click on them and you can start editing them right away. So if you want to remove or swap out this picture. You click on this element and the picture pops up here and you can swap it up. If you want to change the writing, you can start typing right away and editing it. If you want to swap these pictures out, you just click on the elements and start swapping them out. So this is an alternative way to quickly and effectively create brand new pages that already have a great looking design. If you don't want to spend the time to manually design and create them yourself personally , I enjoy creating brand new pages from scratch because it brings out a creative aspect to building your own website. But everyone has their own set of preferences, and this is just another option available to those that want don't want to build their pages manually. 14. Phase 2- About Us Page: you know, we're gonna go ahead and create our about us page are about us. Page doesn't need to have a ton of elements. It just needs to give a little more information about the website, maybe the creator and why the website or business has been created. It's also recommended toe have a logo and the about US page if one has been created. We also want to make sure to keep the same design style that we used to build our home page . So things look consistent throughout a great example of ah, great about us. Page is 99 signals dot com Weaken. Seeing 99 signals dot com clearly identifies what kind of blogging is right from the start and what kind of content that provide. Also, once we scroll further down that provide a little more information about the creator places that the block itself has actually been featured, why the block was created in a little background story about the creator himself. Now, this is probably the perfect amount of content that is needed for an about us page, and it can later involves your website begins to grow. So now we're gonna go ahead and proceed and get started with their about us page. Click on all pages, and we're just gonna go ahead and add it. This test page that we're going to click on Edit Given a title. What about us? Make sure you removed the title click update and an adequate element. Or once it loads up, we can start editing are about us page. So, in order to keep the website consistent throughout which you don't have to do this is simply a preference of mine and makes grating pages easier is I have copied the elements of the main home page fold and plan to copy and to hear. So what we can do is make sure you're on your home page that you created. Click on this element here and right click and select copy almost. You select copy. You can go back into here, select the template in the crate and then press paste. So what we have done is we have copied the elements from our home page that we're gonna plan to use on our about US page. It just makes transitioning between pages way smoother because all the elements are the same size scale and way and with and also the text will be aligned. So this way we can start our about us page Fresh from the same elements that we used in our home page, all we're going to do it starts swapping out some of the text and adding in a logo. So let's do that. The first thing I'm gonna go ahead and do is remove this background overlay image and change the background color for this element here. So what? I'm going to go ahead, do this, swap out this picture and use a different picture that I found mine, which will give it a fresh new look when someone navigates to it. So there, ye Olde, that looks much better. And then also, I'm gonna go ahead and change this color here to something else. It will be another color that we have used from our color power to give it a load differentiation from the other page. So we're gonna go ahead and click on here and change the background overly color to purple . Now, this looks a little bit different, and if we want to bring it up, we can. But we're gonna go ahead and leave it at 90. The next thing we want to go do is at the title. Continue to about us, and then we can go ahead and remove the start learning now button, because we really won't need it for our about us page. So next we're gonna go ahead and add it d some heading. So we're gonna go ahead and drop the subheading in here that we created and double click out, and it looks good enough. The next thing we're gonna go hadn't do is actually import an image logo that we created specifically for this page. So we're gonna go ahead and click here, drag and drop this image, which it picked the image for a local that we created changed the title to so Jetta in the text and insert the media. So this is the logo that we created, and it looks very, very good. And now we're gonna add a little bit more additional information behind why the website was started by clicking here and then we're gonna go ahead and at another heading element. Go ahead and change it. After that, we're gonna add another text element right below it and swap it out. We're just gonna quickly edit the text elements so they fit more in line to what they are on the home page for consistency. It's good to keep the consistency, so the design looks fluid throughout the website and it will make the user experience more pleasant when they navigate throughout the whole website. No, we will wrap up our about US page with our mission statement, which will have the same title and text moments as the title above it. And we quickly edit its elements to ensure their online with the title right above it. The about US page may look a little short at the moment, but as we discuss it will evolve over time. And if you want to add any more information, tow it, feel free to do so. Now we have wrapped up our home page and it looks very nice and fluid at the top. We have the main title, followed by the subheading. After that, we have our local defense very well in the fold, followed by that. We have our reasons statement and after that we have our mission statement. It all looks nice and fluid. Next will be creating are blocked page in its related post element types 15. Phase 2- Pages Posts Categories Menus: pages, posts and categories. Oftentimes, WordPress users get confused about these three elements and where they actually belong. So what are posts in WordPress? Posts are blocked content or articles listed in reverse chronological order. Newest to oldest and blawg posts will tend to be listed under specific Blawg page, which is typically called a blogged page. Once your posts get older or your website begins to grow, users have to dig in order to find specific block posts. So this is where you can organize your block posts or articles into their own unique categories and tags. This intern will help the users navigate your website much easier in order for them to find the content that they're looking for. So you're probably familiar with what a pages by now, since we've already gone ahead and created a few just like our homepage that we have here and categories are away toe, organize specific sections of your website, they organize the content so readers confined the information that they're looking for. Let's take a look and see how we can organize some of our categories that we plan to have on our website. So if we scroll down on the home page that we originally created. We can see some of the topics that we plan to offer in our Excel training and what we can do it. All these is essentially offer them as their own separate categories on our website. So if somebody wants to learn about the basics of Excel, this would be its own category. If somebody wanted to learn about, like cell functions, this would be its own category. Under a category you can have a subcategory in the subcategory, builds off the main category and just goes into deeper lengths of it. So let's go ahead and get started and create a category on our website. So now we're gonna create our categories. And what we're gonna go ahead and do is hover over two posts and then select categories. And in here we're going to start creating our categories. So one of our categories is the basics. I think so, and we're just gonna go ahead and click, Add new category. So we have added a single category here and we can continue to add more or the ones that we plan on having on our website. So another one that I plan on having is essentials of excel. So we have gone ahead and added that another one I plan the have is the Excel functions, and that one has also been that unless you're done adding all the categories that you plan to have on your website, it's a good idea to group them under specific menu page on your site That will make it easy for users to find. So in order to group them under a menu, we have to first create the menu and then assigned those categories under that menu. So what we want to go ahead and do is click on appearances and then menus. And then what we're gonna go ahead do is create a menu. So we're gonna go ahead entitled its main menu, include Create Menu. And once we do that, we can see that we have the option toe. Add specific pages, posts, custom links or categories under that menu. And if you cook on view all, you'll be able to see all the categories that you have created. So now what will go ahead and do is build our menu with our home page about us Page three categories for a main menu and also three sub categories. Under those main categories, you can see what the structural look like. So what we're gonna go ahead and do is add the home page about us page and we'll go ahead and add are blocked page to the menus. Most we checked those and click add to menu. It will add those three pages here and the next. What we're gonna go ahead and do is add some of our categories and in sub categories under those so we'll go ahead and add the basic civics. So the excel functions creating tables and data actually will go a data analysis under here . So these are three categories, and under each of these categories, we're gonna go ahead and create a subcategory. So what we want to do is look for a subcategory that actually would go with one of these. So what would go with data analysis? Creating Excel charts. So creating excel charts. So this got at it as a main category. And in order for us to add it as a subcategory, wanna click and drag and drop it under data analysis, so it becomes a sub item under data announces, and the next, we're going to do the same thing. Essentials of Excel. Gonna create that here, and we're going to click and drag and drop it under the basics of Excel. So it becomes another sub item, and then the next thing we're gonna go ahead and do is add another subcategory under the Excel functions. So, uh, we're gonna go ahead, Do is click on creating table spent data and then we're gonna click and drag and drop it in here, and then we're gonna click on save menu. After we click on save menu, we're gonna go ahead and make sure that that menu gets added as our main header menu on our target page. So what we're gonna go ahead and do is go to customize that wants this loads up. You can see that it's our primary menu is not up here. So in order for us toe, get the menu that we just created, we have to set it is the primary menu. So what we want to do is go to menus, click on Main menu, and this is the main menu that we created, and then what we want to go ahead and do is click on primary menu. So what that will do is it will make that menu that we created our primary menu. So after we clicked on primary Menu, you can see that all the categories that we added and the pages and that man you are showing up. And if we hover over to data analysis, you can see that has a subcategory that drops down. It's called Creating Excel charts, which is the category right here that are subcategory that we created. If you hover over to the basics of Excel can see you have another subcategory, which is right here. You can also create and edit this menu through here once you have your categories and pages created. This is just also another option to show you how to actually structure at first and then actually get it at it up top. So once you are happy with the menu and the way it looks, what you want to go ahead and do is click on publish so the changes and that main menu propagates to that page. So we're gonna go ahead and click publish, and once it's published, this is now your main menu up top your primary menu 16. Phase 2 - Blog Page Creation With Atomic Blocks: in this next video, we're going to set up our block page. This page will be specifically created for the location that your articles and posts will appear. There are different ways in which your blawg posts or articles can be structured to appear on your block page. So in order to get started bringing go ahead, navigate two pages, select all pages. We're gonna go ahead and create a new page which will be titled Log, Go ahead and remove this section and we're just gonna make sure to de Sable the title from appearing on the page itself and click on Save Draft followed by Publish. We can customize our block Post page with L A mentor. Or we could do it with a plug in called Atomic Blocks directly in the WordPress page edit section. We will go over both methods so you know how they work. But first, we'll go ahead and install the atomic box plug in. So we're gonna go to plug ins, add new search for atomic clocks, and once it pops up, this is what it will look like. You want to click on install now and activate once the plug in actually downloads the activates. It will be located right down here under atomic box. And in order for us to view its elements, we want to go to all pages, select the page that we want to edit, just are blocked page. Then make sure you go back to work. Press editor continue. And after that, where you can start doing is clicking on these little plus signs and you can see that you have this atomic blocks layout which it or you can simply type in atomic. And all the atomic box widgets that are available for your disposal are gonna be contained within here. So now what we're gonna be doing with the atomic blocks widgets is used them in order to create your block page post format structure. So once you create a block post or article, it gets directed to the post page in a structured manner. There's a ton of different ways to structure your block posts and how the individual block post actually appear in the page itself. It's completely up to use too high. You want them to appear, we'll show you a few different options with atomic box, but it's entirely up to you how you want to structure it. So the first thing we want to go ahead and do is add the atomic blocks widget. So what, we're gonna go ahead do is click on the plus sign type atomic, and we're gonna go ahead. And so, like a B, post page and grid widget. So once we clicked on that widget, you guys can see it imported all off the block post that we have created and from here and all the post and page grid settings, we can start to customize how the block post actually come up and appear on the block page itself. So if we were to click on this list view, it will reorganize the appearance of the block posts themselves. And if we click back on this one, it'll look different. And on the right hand side here we have a ton of different ways. We can actually manage and customize the appearance of the blawg posts on the block page. So let's take a look at some of the options that we have available. So in the right hand side here, the first thing we have is the content type, which is post, which is exactly what we want to be editing. We don't want to switch to pages because if we do, it will only pull pages to post in the specific page. So I want to keep it on post. Then the order in which they posts are propagated to the page is gonna be newest oldest, and we always want to keep this format. And here we can actually select if we want Onley individual categories to pop up under that page. But since this is our bog page, we want to include all the post that we have created. And the next thing we have is the number of items. Now, this refers to the number of blood posts that we want to appear on the page. So if we only select to toe appear, you guys can see that only two will appear. And if we continue to add more more, blawg posts will appear on that page for this section. I like to leave it at six. Uh, the next thing is, we have the number of blood post to offset, and we would just wanna typically leave this number at zero. And the next thing we have is the number off column. So if we were to increase this to one column, you guys can see how the calm actually changes the appearance. And if we wanted to, for example, leave it to three. It will spread three block posts across the actual page. This can actually kind of look cluttered, so I like toe typically leave it at two or one, depending on the kind of structure that you're going for. I personally believe that leaving it at one makes it look a lot smoother and will induce the visitor to actually scroll further down your website in order to look a more information. So actually like to leave this one so moving further down, we have the post and Patriot content. Now, if we enable these, it will actually give us the ability to configure it and make it more customizable. So if we wanted to display the specific section title weaken, do so here and you guys can see how it will populate under the actual page. But typically for this, I leave it as blank unless you want to specify and segregates. If different sections on your log page, you typically don't have to do that if you want to include the featured image from each individual block post. As you can see, our current block posts don't have a featured image, but that's OK. We'll be showing how toe specifically add that in a separate section of the class and later when we go back into our block page, you will be able to see the featured image within the actual blawg itself. Here we want to we have the option of choosing toe display the title of the block posts or not. So if we talk about this on and off, you guys can see how it removes the title. We have the option of displaying the author the date and also the excerpt, not the excerpt refers to the amount of length of text from the post that we can input in there as almost as a teaser. So we can typically leave this under 100. Because if you put too much of the text, sometimes it begins to look too cluttered. So I recommend leaving this under 100 and the continue reading section here refers to this . So this is a link that will actually pop you over to the full block post itself. So this is actually pretty good. You can leave this as is then. This is coming from the default settings in place, which the default settings typically have a good appearance to them. There are additional options that you have on the side here, such as the post on page grid markup customs. He assess options if you want to add some custom code ah, specific animations that you might want to add once the block post actually appear, which can give it its own unique look. But it's really not necessary. And that can actually slow down your site on. And then you have advanced CSS options that you might want to input in here. Um, they really aren't necessary. It's just something extra that you might want to add to the appearance of the blawg page itself and customizing the appearance of the grid content and its related settings. Use all you really need. You confess more with how you want them to appear on the page, but you really don't need more. Now if you want to add additional elements and widgets to your blawg posts. Page what you can do is continue toe add them down here such as a different block, maybe a related video. Or maybe you want to list all the categories that you have so you can type in, uh, categories, for example, and import the widget here and it will list all the categories and you have. And this will pop up below the blawg post that you have created. So let's take a look Click will click on update and then we will actually take a look at how the block posts Page appears once we have added these options. So in order to view how this will actually appear on the page, we want to go to appearance and then click on customize. Once it loads up the website, we're gonna go ahead and click on Blawg and you can see how the actual individual block post themselves appear on the block page. So this is exactly how we configured it in the actual atomic box widget and at the bottom you guys can see has the categories, which is that we also inserted in here. So if we go back to the page creation here, we can go back and see how it looks. So we have the categories listed here, and then the categories are option, obviously propagated here. And if we go back to the page, we can see the Excel Basics Overview file tab. So basics overview filed SAP So this is how it will actually look on the block page once you end up customizing it. Now, feel free to actually go and mess around with different layout options until you figure out something unique that you'd like for your actual block posts. And next, we're gonna show you guys how to actually go about creating this up blocked page structure in L. A mentor, which can be easier for some people and maybe harder for others. But it's just also another option that we like to show people how to configure. 17. Phase 2- Blog Page Creation With Elementor: Now, before we move forward with customizing your block, Pedro L. A. Mentor, we're going to show you another option that is available directly with the actual theme options, which can make this process a lot easier. So what we're gonna go ahead and do is click on appearances and then customize. And after that, we're gonna go ahead and hover over to our block page had on over toe layout. And from here we have a couple of different options available for the way we can display our posts on our block page. So we're gonna go ahead and click on Single Post and these are all the options that will appear from the single post. And then after that, we want to click on blawg and archive. So under the block layout, you can see the different structures. You can just click and customize for your block posts to appear unnatural. Blocked page. These are just some standard default options that are available within the theme themselves . If you don't want to waste a ton of time customizing your blocked page like you can with the element or page builder. So this is just a quick option. We wanted to show you that was available with thin the actual theme. But now we're gonna go ahead and look at the options that you can use to customize it with the element or page builder. Let's take also, another component you have to be aware of is your home page settings and where you want your posts page to actually be. So before we had a selected on Blawg because we had all of our block posts directed to appear on the blogged page. So in order for us to edit with Element or we have to temporarily set it back to a random page or just a select page in referred us to be able to build that actual page. Otherwise it won't work. So make sure your posts page settings is either on blawg. If you want to use the standard blawg settings that are available within the theme or to just this select option, which is a blank option, which will not display the posts on the blank page, not for that click publish after you have clicked published. Then we can go back into L a mentor and start editing the actual blocked page with customized settings. So before we jump into elementary, we're gonna install a small plug in that will help us manage the appearance of our posts much better within L. A mentor. So we're going to go ahead and hover over to plug ins, make sure you select, add new, and then you're gonna just type in posts and you're gonna select recent posts Widget with thumbnails were gonna click on Activate. So now, since our blawg page is blank, we can now go back into L a mentor and start editing the page. So you want to make sure you're under all pages and then select the page that you want to edit. So we're going to select at it with L. A mentor. In once L. A mentor loads up, we can start dragging and dropping widget elements to customize the specific block page the way we wanted to. So let's take a look at what we can do here. So, as you can see there ton of different would your options available and l a mentor. What we're interested in doing is having a specific layout to our block post. So going back to the recent posts plug in that we installed weaken, drag and drop it in here and start adding it's customizable options. So we're gonna do is type in recent and recent posts with thumbnails. So this is the plug in that we installed, which we can drag and drop in here and music. As you can see, a displays are recent posts that we have created in here. Now, from here, you can customize the title of the widget. So if we were to change it to recent posts, the title will appear up here. This will display the number of posts that we want to show up on the actual page. And from here you can customize the different options that are available for the individual post themselves. If you want sticky options in here and also describes what they are and how they will affect the appearance of the post within the page, the maximum length for the post title if we want to show the author of the actual posts so right there my name. If we want to show the categories to which these individual posts actually belong to specific posts, categories and links. If you have some specified, um and then here also the date the and the Ex ERT. So what I like to do is unchecked the dates, the categories, and actually, sometimes I like to leave the author, but it just depends on how it's going to appear on the actual page itself. We don't want it to look extremely busy. We just wanted to be super simple and look smooth on the page. I might actually be inclined to increase the length of the excerpt. So what this will refer to is the actual text from a preview of actual post that will appear on here. So as you have soft, we change it to 100. It will stretch out how much text appears, and this refers to individual letters. So if we were to span this, 250 more letters will show up. But a good rule of thumb is to not let it stretch out too much to where it takes up a ton of room and makes it look sloppy, so you can leave it from anywhere from 75 to 100. So we'll go ahead and leave this to 100 and then scrolling further down. There's a ton of different customizable options, such as adjusting the height, the aspect ratios and more appearance settings for the actual individual posting here. And as you can see, none of these posts have featured images which, the reason being is we haven't added featured images in here. And once we do, they'll actually give the individual posts a more custom feel, and it will look a lot better. But this is another option you have for simply having the posts display on the block page. If you want it. A sidebar on the actual page. What we can do is drag and drop one in here with another widget. So weaken type in, sidebar and drag and drop a sidebar in here. But we need to change the element first. So what we're going to go ahead and do is select a different element. So one that actually has room for a sidebar, which would be this one. And here. What we can do is just click on recent posts with thumbnails, drop them in here, and then from here we can add the sidebar option. So as you guys saw, we actually do have a sidebar created from a previous section, which is this one here sidebar, which lists all the categories out. Now I understand that this looks a little bit different than a supposed to our theme options gives us, but it's just another way to customize a blocked page. Now you guys can feel free to add more elements to make it more appealing to your users. But this is just another way of showing you how you can drag and drop certain widget elements. In order to customize this page, I will admit this does not look as good as the theme options that we went before, but it's just another component that we wanted to cover. Also, what you can do is simply use a blawg template or a specific temple that might hold the actual contents of the block posts better than what you have available. So you guys can also scroll through and see if some specific template catches your eye. That would be much better for holding your block post, so this is just another option we wanted to cover. And next we're going to show you how to add featured images within the posts so it makes them pop a lot more. Let's take a look 18. Phase 2- Setting Featured Image For Blog Posts: and this next section we're gonna go over how to set featured images for your block posts and also how to create some yourself. So what we want to go ahead and do is hover over to our posts and select a post for which we want to set a featured image. So we're gonna go with this one and select at it. So once the post actually loads up, what we're going to go ahead and do is look at some of these posts options that we have available here. So what, we're gonna go ahead and do a select set featured image. So here's where you will select the featured image for your actual blawg post. And once our media files and our media library loads up, here's some of the available images that we can choose from. So let's just go ahead and select this image, and also just make sure to give it a name. So we're just going to give it so so. And then we're gonna click on set featured image. So after the featured images set, what we can do is preview what it will look like on the block post. So this is what the featured image will actually look like. So if you decide that you like how the featured image appears on the block page, what you can go ahead and do is click on update, and that will push the featured image for your blood post someone's. We set our featured image. We can hover over to the category in which this post belongs to and see how it actually appears in the category. So we're just going to click down the basics of Excel category, and once it loads up, you can see how it will actually appear in that category along with its title, the category name up here, the author name, the date and a portion of the excerpt. Obviously, this post does not have a featured image that that's why you're seeing at the way it is at the moment. So if we were to add a featured image to this post, it will also appear just like this one here. So going back to our blawg page, what we can check with the featured image is to see how it will appear on the selected layout that we decided to use for the page So, as you guys can see, we decided to use the standard Blawg layout for our blood page. And what we have done is selected the post page to be are blocked page here. So once we do those two things along with selecting layout, what we can see is how these blawg posts, along with the future images, are going to appear like in the Blob page. So if we were to click on, read more for the specific blawg post and we didn't want this featured image to appear on the actual blawg post, what we can do is remove it from here, and it's just a matter of adjusting a few setting. So let's just adjust those to remove the featured image from appearing on the main blawg page are block post if you so choose. So if we want to disable and not have the featured image appear in the actual block post because sometimes it can make debug post look way too busy when we have to do is just disable the featured image from appearing in the actual post, and we will disable it in the post settings, so we're gonna go ahead gun navigate their post settings and click on disable featured image and then click on update. So once we click on Update, where we can go ahead and do is go back to our basics of Excel Tam and we can see that the featured image actually got removed from the individual post. Now the image didn't get removed from appearing on a specific blawg page. It just got removed from the individual post that it's in because it can make it look too busy. So if we hover, go if we go back to our block section us concede that the featured image appears on the page, but once we click on the individual post, it won't appear there. So that's the whole component of disabling the featured image. So next what we will do is create our own unique featured image for a bog post. And what we're going to do after that is make sure to set a featured image for each block post that we have created, and once we do that, you guys will see how neatly laid out they will be within the specific page and category that they belong to 19. Phase 2- Featured Image Creation: the website will be using to create our own unique featured images is Canada dot com. We can create some pretty stunning featured images in here, and Canada is also 100% free to use. Once you create your account, you can go ahead and get started. Once you're inside Canada, you can see that you have a ton of different options available to create different visual graphics. Feel free to explore it, but the design option we want to select is either Blawg Banner or blawg graphic. They're both good options. So what, You can go ahead and do this type in, Log up in here and you can see the two options pop up, and what you can also do is hover over them and you can see the sizing that they come with . So we're gonna go ahead and select Blawg banner. Once the loads up. We can either start with the blank page or explore some of the pre created blawg banners in here and work off of their settings. Let's first start off with the blank canvas and then try editing one from the pre created options that we have available. So once we click on the blank canvas. We can start creating different color schemes and options that we have available within here. And like we have set in previous sections of this class, we're going to be using a pre created color pattern for the section. So on the left hand side here, we concede that we have different options to work within Camba. Such s different available templates that have already been created for US images that we may want to add elements that we can add to our canvas, such as different grids, shapes, frames and so many more options. Then we have our text. We can have different textiles that we can add. We can even add music and videos, too, our blogging images that we're creating. We also have backgrounds that we can use here, custom uploads or vectors that we may have found on different sites online. We can also create our own unique folders for specific categories of our images that we're gonna be creating, and also you have another option here titled More, which gives you more ability with social networks if you want to get them incorporated into here. So there's really three steps structured process to designing a featured image. First step is to select the background style or color you plan on Using. Second is to select the design elements that you want in the featured image, and third is to select the text style and the alignment of the text. So for featured image, we want to focus on having elements for a background that will go along with the theme of our website. So we will need to go ahead and find something that continues that design consistency of our website. So let's take a quick look at some of the pages that we created before, so we can get an idea of the kind of background style that we should go for. So our homepage the you can you obviously noticed that the text pops right out and the color is very, very bright, and it gives it a very warm feeling if we go back to our about US section and also uses a very bold color and makes the text pop up, so what we want to do is find a color scheme or background that will emulate that. So what we can start doing is scrolling through the background options that we have available and start importing certain styles on here. So once you click on option here, it'll important. You can kind of see the design element that that background style has, and we want to search for one that will go along with our website theme. So I am part of this blue color, and we concede that it's bold enough and it pops out just like some of our pages do here. So next what I'll do is take some colors from our color palette and imported into here to see how the design changes. So now I'll be swapping out the different colors from my color palette to see how it will impact the design for the specific backgrounds. This is the purple. Next I will try the blue. Oops, this blue looks pretty good. Next, I'll try the green. This looks really, really good. Next I'll try the orange. Now I'm just going through them to see the impact that they have on the design and I'll have the red. This also looks very good, I think. For the purpose of this featured image, I will set the color to the blue. Actually, you know what? I like the green. I'm going to go ahead with the green overlay with the blue shade coming down to the right. This looks good. So now we have established our background style that we will be used. So for this next step, we want to continue the consistency of the Grady in background, which we selected. So we're gonna look for some cool grading elements toe ad and give this a unique look. So, once for under the Elements Tab, we want to scroll down and five the Grady INTs and click Select all. And we're gonna go scroll through here and find some grading elements that weaken slapped onto this canvas here and make it truly unique after you selected the Grady INTs you want to use, Which are these two that we selected here? You want to make sure to match their colors to the Grady INTs that you're already using in the color scheme. So what I've gone ahead and done is, once you click on this image, you can see that these two colors dropped down here. So you want to make sure to match them to what they currently are. Once you click out of it, you guys can clearly see that they match the current background. So once we added the placement of the Grady INTs, we can see that the focus of our eyes being directed right around this center point right here, which is where we will plan on adding the text elements. But before we do that, we will add some more design elements to make it pop a little bit more. So in order to add a little balance to the Grady, um, going to offset it with some white lines that will help guide our eyes towards the center of the text that we will have now, after we have added are white lines like we have up here and down here, we have in a way center the location of our text. We will also add a small vector image to further offset the consistency of the Grady in colors. So if we hover over to our upload section here, we actually have used quite a few different vector images. So what, We're gonna go ahead and do a select this vector image here and slightly resize it and put it towards the center right there. So what these colors do is kind of offset the consistency that's behind these Grady in colors and kind of draw the eye to towards a different angle, which will be directed towards the text. So once we place this little vector image here, next will go ahead and add our text elements and alignment. So now we're in the third step of creating our featured image, which is adding the textile and the alignment. So what we're gonna go ahead and do is go at the default style. We're just gonna click it here, and we're gonna match the heading here to the heading of our category, which is the basics of Excel. And then our subheading will go ahead and match to D title of the actual post itself, which is overview of the file tab. After we got through with our third step, we're now finished with creating our custom featured image, and we can hover over to the download button up here and export the image. And after our image is done exporting, we can go ahead and uploaded to our featured image for our specific post. So after we have added are featured imaged her post. We can see how it will appear on our block page so we can see the outlay. And if we feel it's necessary, we can adjust some elements inside D featured image. We're gonna go ahead and click on the post itself, and you can see that once we're inside the actual post, the featured image will not be posted in here because we have excluded it. So if we go back to our block page, you can see how it will appear, how the featured image will appear right there. So it next what we're gonna go ahead and do. It's at a featured image for each individual post. And then we can mess around with the layout to see the best way it will appear on the page for us. So we have gone ahead and added featured images for each individual block post, and, uh, the featured image elements actually remained the same. And all we did is just swap the underlying text for each individual featured image and added a different color background from our color palette on This actually makes creating a secondary featured image much quicker and more consistent By keeping the same design elements and structure the featured images, we create some great consistency to our images in our block posts. So since we have our featured images in here, we can now try and configure different blawg layout to see how it will appear and how it will best hold the I. So you can just navigate to the different blawg layout options that we have here and see which one you like best for your individual bug posts. Now that we have a featured image in here, it will give you a different perspective and how you want it to appear on the actual page. But for the purpose of this, I'm going to keep that to the standard bog layout, which I think looks very neat and a final tip. If you want to automatically copy this page in canvas so you can start creating a brain new featured image with same elements. All you have to do is hover over that page and click on copy page. Once you click on copy page, all of those design elements and texts get copied over, and if you want to swap the background color, all you have to do is hover over the background color, swap it to a different color and you're ready to go. And then all you have to do is change the title, and then you have that consistent designed from the original featured image that you created. And if you want to actually create a different background style, all you have to do is click on the different backgrounds to see how they will actually appear on the future image with the current design elements and text. So where you can do is just explore different options for your featured images and decide which one looks the bust. So this is it and how you go about creating a consistent design for your featured images. 20. Phase 2- Featured Image Auto Creation: so another interesting option you have available through Canada is using pre created templates for your featured images, and all you have to do is simply swap out the text and the contents you wish toe have on those featured images. The best available option for you to create these kind of featured images is through the presentation desired. So we're gonna go ahead and click on this presentation. Design Tabara here, and what it will do is it will open up a ton of different presentation banners and styles that we can use for our featured images. So let's just go ahead and select this one, for example, So once you select a specific presentation banner, you will be presented with a ton of different design options that you have. So let's go ahead and import this one into here. So this is a possible layout that you may want to use for your featured image. And if you want to swap out different colors, all you have to do is click on each individual element and swap out its color. If you so choose, and we recommend using colors that you obviously have in your color palette for the section . And if you want to maneuver the elements and change their positioning, you can also do that as well. If you want to create multi layered featured images throughout your blawg post, what you can do is simply add an additional page and import the next featured image and create a little guide from featured image to featured image as that progresses through your block posts. So this is also another option that is available if you don't want to spend a ton of time customizing each featured image. 21. Phase 2- Contact Us Page: so the final page will be creating for a demo site is our contact US page are contact us. Page should feature away for our website visitors to contact us if they want more information about a specific topic. Recommendations for future information or potential partnerships and a minimum. We should feature our email address that's associated with their website in a phone number . They can contact us if it happens to be some sort of business website. The easiest way to create a contact us page is through its own form, where users can fill out information that will send it directly to us. So an example of this would be 99 signals dot com. You can see that they have a full form with the subject message, your email, your name and they also list their contact email in the form here. So if they want to reach out directly through email, that could do that. But this is an example of what a form would look like for individuals to contact you directly. So the easiest way to create a contact form it's to install a plug in called ninja form on letting it do all the work for us. So we want to navigate to plug ins, select add new type in ninja forms and then once ninja forms pops up, this is what it will look like. And you want to click on install now and after installs, we want to click Activate. So once you install inactivating inter forms, you will notice it will be located right around here. Under ninja forms, someone's be installing injure forms. We can move on to the next step and actually create our form. Next, we'll click into ninja forms, and once it loads up, you can see that they already have a default. Contact me page. So we're gonna go ahead and click on it and see what it looks like. And once it loads up, you guys can see all the fields that the contact Me page has, and this actually just enough for your own contact page. So this is actually something that you could use on the contact page that we will create. So you can either go with this default option that has provided to from ninja forms, or you can go back and actually create your own Contact us page by clicking on, add new and selecting the type of formula on tubes create after it loads up, You can obviously see it looks the exact same. But if you did want to add additional fields, you can do that by clicking on the plus side here. And it will pull up all the additional fields that you can add to this contact form if you so choose. But for the contact us page, the form really just needs to be simple enough. So people have a way of reaching out to you. And once you've decided which fields you want, all you have to do is click done and select, publish, and then after it publishes, we can go back and our contact me form has been created. So the next step is to create a contact us page and then dropped the form on that contact US page. So we're gonna go ahead and do is click on pages all pages. Then we're going to select add new type in the name, so contact us remove this layout. Then we're going to click on the add blocks, find ninja forms and selective, and then we're going to select one of the forms that we created. So we created this one right here. And once the settings import us could see all the fields that we had in there. And after you decide you want to use this, what, you're gonna go ahead and do this click out, publish most the page publishes. We can click on preview, and this is exactly how the page will appear to the end user. And as a final configuration, you can choose to add the contact US page to your top level menu or to your foot. So we're gonna go ahead and click on Customized, and from there we can choose to add it to either are Footer Menu or our main Hunter menu. I personally like toe have the Contact us page at our Footer menu, so that's where I'm going to place it. And then I'm going to click on Publish, and once it publishes, we can see that the contact form here or contact this page is been propagated. So we're going to do is just test it, click on contact us, and we concede that it's been submitted. So if someone did land on your contact US page and decided to send you a personal message. What you can do is actually test of the form works. So what we're gonna go ahead and do is type in a name. So we're just gonna type in test name and then a test email just so you guys can see how this would work. And then we're gonna click, submit, and you can see a confirmation email gets sent to that user that they actually submitted the message. And for the location where we can view this message, we will go back, hover over the ninja forms, select submissions, select a specific form that we want to view, which is this one and select filter. And we can see where the actual message appears. And the message context right here, the email and the individual who sent it. Also, once your site goes live and someone submits a message to your contact form, WordPress will actually send you an email to the registered email address you have on file . So you won't really need to look in here. This concludes face two of the class and next and face three, we'll dive into some exciting technical aspects of your website. 22. Phase 2- Sidebar Creation and Customization: and the sex part, we will go over how to set up a sidebar. If you choose to have on your sites post content, what we're gonna go ahead and do is hover over to appearance and then customize once our customization options load up, we want to hover over to lay out, and that's like content sidebar. And here will be able to see where we want the location of our sidebar to be there on the right hand side of the content or on the left hand side. Or if we don't want a sidebar at all, we can choose this middle option. But let's see what our sidebar will look like if it's located on the right hand side of our contact. So we're just gonna go over to the basics of Excel category, and we concede that our sidebar is located on this right hand side here. So if we decided to move it to the left hand side, it will move it over here, and if we decide not to have a side fire, it will completely remove it. So it just depends on your preference and how you want it to actually appear on your sites content. So once you decide where you want your sidebar to be, the next step is to add specific content that you want the sidebar to include. So what, we're gonna go ahead, do this, click back and select widgets and so like sidebar. And as you can see under our sidebar, we have the categories widget listed in there. The way you construct your sidebar will be simply adding specific widgets and elements you want included. So if you want in another widget or element below the categories which we have here who would select at which it and simply click on the element that you want in here. So if we, for example, wanted a calendar click on the calendar and it will add it right below the category section , and here you just give it a title. If you wanted another additional widget, you click. Add widget and add something else that you want included on the sidebar. Now, as a general rule, dumb, you don't wanna have more than five or six items in your sidebar because it can start to make your website or blob look a little too busy. So the maximum you should really have in their on your side. Buyer is typically 5 to 6, depending on how tall they span across your sidebar. Most common waste to construct sidebars will include having a search bar option, as we have included. Maybe some of the categories that you have on your site or blawg recent posts and some sort of opt in or contact form, as we have included down here. So once you've decided the structure and location and the contents you want within your sidebar and you're happy with that and you want to make sure you push it through on your upset, you want to click on publish once publishes hit, then your sidebar will be active throughout the content on your website. 23. Phase 2- Creating a Table of Contents: and before we wrap up face to, we're going to show you how to deploy a table of contents. If you happen, have long block posts. What the table of contents plug in will do is provide clickable links that will automatically direct your reader to specific headers of your block post. Now, if you remember earlier in the class, we installed a good amount of plug ins, and what we want to go ahead and do is hover over to plug ins, click on install plug ins and we want to locate are easy table of contents plug in that we installed. So we're gonna navigate to it right here and click on settings, and we just want to make sure that the plug in is enabled for posts and pages. And if it's not, you just want to make sure you select posts and then scroll down and click save changes. Next, we will navigate over to our posts and select all posts after posts load up. We just want to click on any one of the posts here. Just click on at it. Once our post loads up, we want to scroll all the way down and find the easy table of contents, plug and options. So, as you can see, here are the table of contents options that we have available within the plug in. And here's where you can enable where you want the specific table of contents to start getting built that so these represent each individual headings. So before we create a long form blawg post, we will show you what a finish table of contents looks like. For best practices and for appearance purposes, the table of contents will typically be located under the featured image of a block post like we have created here for the sample block post. So, as you can see, this is a really long blawg post that we have created on one of our websites and in order to better organize all of the information we had enabled this block post toe have its own table of contents for easy navigation. Each one of these titles in Bold represents a specific header within the actual block post . So if we were to go ahead and open this table of contents, you can see all the main headers that we have created here. So if we were to click on this header that's titled How to Invest in Domains. It will navigate us to the exact location of where that header starts. By having a table of contents for really long block posts, you enable readers to easily navigate to specific sections of the individual post. So let's create a long sample block post with multiple headers and see how to customize it . So we're going to go back to posts and then we're going to select add new. And we're just gonna title this test post so you guys can see once we start creating it, what will appear like what? The table of contents in place. So what we have done is we've created a test post for you guys, which includes four main headings. If you hover over to one of these here, you can see that it's titled H to This constitutes an H two header. So this is one of the main headings that we have included for this post. This is also another. This is also another and this is also another. This one right here is actually a subheading for this specific main heading here. So if we wanted to build a table of contents for our users to easily navigate to the specific sections of this individual block post. We just have to make sure that the easy table of contents option is selected. So we're going to scroll down to our easy table of contents settings and make sure that insert table of contents is enabled. Wants to be ensured that the easy table of contents is checked. We can click on preview and you can see it created the table of contents right here. So if we were to have a featured image for this post, it would get propagated right under that featured image. So if we were to click on it, you can see all the specific sections that it has created. So if we were to click on this 4th 1 here, it will navigate us all the way down to this fourth heading. So that is the whole point of creating this table of contents. And if you want to have different settings for the appearance of the table contents, we can go and customize those in its settings. So if we wanted to give our table of contents a different appearance, we're gonna go under settings and select table of contents. And as we can see, we haven't enabled for pages and posts and we're gonna go ahead and scroll down and we can choose when we want to show the table of contents. Now, this here would indicate we can start showing it after four main headings have been created for our block post. If you wanted to show it after more headings have been created or less, you can choose to do that. Here. You can choose to give it a different title and here all the other relevant options that you have when you can. If you want to customize the table of contents down here, you can choose to have a fixed with that auto detects it or something specific that you create. So if you want the table of contents to stretch further across the bloc post, you can choose those settings here. And also you can choose different kind of colors for but the table of contents. So let's select light blue and go down. Click the save changes and see how it will alter the appearance of the table of contents. So if we go back to our post and then click on preview to see the changes that push through . We can see that our table of contents actually has a slightly different color offset in the background. So this is exactly what it will change, and it looks a lot better and much clear this way. So if that's something you're interested in doing customizing your table of contents further than the default options, that's where you would go and do it is under those table of contents settings. Now feel free to mess around with it and make it as customizable as you see fit for your specific website, and it will also depend on how long your block posts are. So feel free to mess around and find the best available option for your specific posts. 24. Phase 3- Elements of a Blog Post: so moving on to Phase three, we will learn all the elements that are associated with crafting an awesome blood post. We'll learn how to create social buttons, will create custom opt informs, and we'll learn to take your website live on the Web. There's some important elements when it comes to crafting an awesome block post. First, you need a magnetic headline to capture the attention or interest of the reader, and this has met the given indication of what your article is actually about, and it should induce the website visitor toe. Want to at least check out your paragraph or post Once they click on your article or block post, it should be followed by a great featured image to draw the reader in further which we showed you how to create and face two of this class. You also want to create useful sub headings subheadings break up the block post into sections and make it more visually appealing and make it easier for your reader toe. Navigate important sections throughout your block post. This has also made apparent with the use of the table of contents, which we showed you how to create and subheadings also provide a ton of S E O value when it comes to ranking your block post. It's important to also include appealing and illustrative graphics, which can further illustrate your point or a message that you're trying to convey to your readers. You should also strive to include powerful. Call the actions in your block post if you're attempting to get your readers to subscribe to your blawg post or purchase something, and lastly, it's important toe. Have relevant internal links in your block posts, which can point your readers to further information and increase your pages per visit, along with the amount of time a reader spends on your website. So let's take a look at some sample block posts that use all of the tips. We recommend it. So this is an S e O based website that we run, and here we have some of our recent post that we have created. We can see that the Post each have their own title small, high resolution featured image and a small subheading below that. If you wanted to read more, you would go ahead and click on one of these, which would end up bringing the whole post up once we're inside the post represented with the full featured image along with our table of contents, and we have our main heading right up top. So once we open up our table of contents, we can see all the relevant content that will be discussed within the actual block post. So if we wanted to go ahead and navigate to this specific section, we can click on it and the table of contents will pull us toe where that specific section starts. If we continue to go through this whole block post and analyzed the tactics that we discussed, we have and put a graphical image that is actually moving. So this is an actual gift that we have important here. We have external links there pointing out to different sources online that are related within this post. And if we continue to scroll toe other section that disposed, we concede that were actually highlighting specific sections in order to make it pop to the I. We also have other graphical images in here to help us illustrate specific points of the block post much better so we can continue to scroll through this post and analyze all the things that were in putting in here, within which we discuss for the tips that we gave. Now that you know all the elements associated with crafting an awesome block post, let's go ahead and create a full post with all the tips we discussed. We will also go over how to properly structure your block post for S E O in order for to start ranking in the search engine results. 25. Phase 3- Creating a Blog Post: So the first thing we're gonna do is hover over to our posts and then click on add New. Once our menu loads up, we can start adding all the relevant elements we want included in our block post. If we scroll down below the section titled Yoast Seo is where we will include all of our relevant s CEO features to be added to our block post. As you write your block post, the Yoast Seo plug in will let you know the things you need to improve on in your block post in order for it to be more seo friendly. So the first component to creating an awesome block post is knowing the topic on which you will be writing Once you know your topic can start crafting a magnetic headline that will draw in your readers. So let's say you plan to write a block post which discusses different ways to lose more weight in order to create a magnetic headline for the Post. You should use specific words that are indicative of what the post will be about. The more specific you make the block post title. The mark could appeal to a very specific audience, since your block post will focus on different ways to lose more weight. Some key phrases could include how to lose weight fast and keep it off 10 different ways to lose weight naturally. Five. Foods that will help you lose weight fast and a five step plan to lose £10 fast. All of these terms conveyed the intent of the article in the information it will provide for your readers. They are all different but related to losing weight. You can also perform a quick Google search to get some ideas related to your topic and start gathering ideas for the specific components of the block post that you will discuss. So once you have chosen your main title, it's time to break it down into its own subheadings. Since our title is 10 different ways to lose weight, naturally we'll have 10 different subheadings related to losing weight. Naturally, we have gone ahead and create a full block post with all the related elements that we discussed. So let's take a look at each one. First we have a say have our main title heading, and right below we have a small subheading. The plans to reveal all the relevant information about the block post. Let's take a look at the full post so we can examine every component that we mentioned by clicking on preview. Once our block post loads up, we can see our main title, the featured image small subheading below and our full table of contents. As we begin to scroll further down the block post weaken, see each subheading that we have created. We can see some internal links that are pointing to other pages that would be helpful for the reader to navigate to if they wanted to get more information. We have specific images that are related to each subheading, and if we continue to scroll down, we can see all the other related subheadings, and you can see that we're using other internal links that will help the user navigate to more specific pages. That's a bit of the standard process behind crafting an awesome block post. Now let's take a look at the S CEO within our block post to ensure everything lines up well for the search engines. So the first component, our CEO is choosing our target keyword and making sure that appears in the title of our block since we're talking about different ways to lose weight naturally, and that's an art blawg title. That's what we'll put in as our focus. Keyword Next. If we click on the snippet preview, it will bring down all the CEO options that we have available to configure such a Czar CEO title are slug and aren't meta description. RS. CEO title will be 10 different ways to lose weight naturally. And what we're gonna go ahead do is erase the ones that are here and copy and paste it right there. As you can see, the Yoast Seo plug in is currently orange, and what we want to strive to do when we're configuring r S e o settings is to make sure that it lights up green, which will indicate to us that our CEO has been configured two the best level possible. So, for example, this title right here it's currently in orange because it's not long enough. What we can do is extend the title to include the ear, and then we can see that actually turned green, which means that the CEO title is long enough for it to be considered valuable are slug is meant to indicate are your L String in our meta description, has meant to summarize our pages content and is a crucial component for on Page Seo. We should always strive to have our focus keyword inside our meta description. Typically, the first sentence in our block post should include our focus. Keyword. So it will do is include our first sentence from our block post inside art meta description . Once we copied and pasted in here, you can see that the Yoast Seo plug in detects it, and it likes the length and the choice of key words that are used inside it. So we can see that all of our CEO factors for title but a description and euro slug are complete and a good standing. According to Joost ASIO, we can also see that are readability factor for a block. Posts are good if there are issues with these, the cultural change from orange to red and you can also check and see if they do change from orange or to Brad what the specific issues are, according to the Yoast Seo plug in, and from there you can go on about fixing them that concludes the section about the proper way to structure your block posts and insurance. They're in good Seo standing and include all the relevant components for good readability and hook. 26. Phase 3- Creating Social Buttons: in this next section, we're going to go over how to create social buttons for your website. This will be all managed to a simple social plug in that we will install. So what? We want to go ahead and do this hover over to plug ins and select at new. And once you're at the menu, type in social in the plug it that we recommend to use this this 1st 1 right here, social media share buttons. You want to click on install now and then activate after installs and activate. You can locate it right here on the left hand side. As you concede, the plug in has a ton of different customizable settings. But you really only need to be concerned with the 1st 3 that are up top here. Sold the first witness. Which icons do you want to show on your website? Second is what do you want the icons to do if you want the icons to forward to a new link and where they will actually be displayed on your website, So the first option is selecting at least five social icons you want tohave on your website . We suggest having at least five, but you're more than welcome to include more if you happen to be more active on social media platforms, the five that we recommend our Facebook Twitter YouTube if you happen to have a YouTube channel, Pinterest and Instagram. But you can customize these as you see fit or thesis social networks that you happen to be most active on. So once we select these, we can move on to the second option that we have, which is what do you want the icons to do? These settings will pertain to the actions of the social icons once somebody happens to click on them through your website. So let's scroll down to some of our social buttons to see what kind of options we can configure for them. We really don't need to get super creative with the actions that are social buttons perform . Once a user clicks on them. We just need them to simply navigate a website user tore specific social media page, and here is where you can insert the link to your specific page in order for them to navigate that user there. You do have additional options here if you choose toe use them, such as liking your blogger on a Facebook page when someone clicks on the button or automatically sharing the blawg with friends on Facebook. The second settings below the 1st 1 are a bit aggressive, but you can choose to leave them if you so decide. And the third option, where shall they be displayed? Pertains to wear on your website. You want the social buttons to actually appear. All of these options are great, but I like toe have them showing as a widget because it allows me to control and customize their appearance with Greater East. So I'm going to check, show them as a widget and click on safe. Once you click safe, we can start to customize where we actually want them to show up. If you want to add additional options for your social buttons, you can choose to customize the options available here, but they're not necessary. So now we're gonna hover over to appearance and customize. My favorite place to display social buttons is on the sidebar of posts and towards the foot of the website, but you're more than welcome to include them anywhere you see fit on your website at then the day it's your website and you should customise it the way you like it. So in order for us to place a social buttons is a widget on our website, we first have to hover over to one of our categories or post. So we're gonna hover over to the basics of excel category, and after that, we're gonna hover over to our widgets, select our sidebar, select at a widget type and social, and locate our ultimate social media icons, which it select. Plus, once the widget imports, you can click. Don't on the option here scroll down and you will be able to see all the social buttons that have been imported here. And if you want to maneuver them along the line of the sidebar, you can drag and drop them higher or lower, or the best way you see fit. That will make your website sidebar look more pleasant. Once you decide where you want your social buttons to be displayed on your website, make sure you test them and ensure that they navigate to the correct pages you have specified in their settings. 27. Phase 3 - Creating Opt-In Forms With Pop-Ups: in this next section, we're going to show you how to create. Opt informs what they pop up maker plug in. Previously for the section we weren't going to use. Opt in Monster, but opt in Monster is a pay plug in, so we will show you a great alternative that you don't have to pay to use. So the first thing we want to go ahead and do is hover over to our plug ins and click on Add New and then after that type of captain. And once it loads up, you want to select the pop up maker. Plug in that looks like this here and click on Install Now and activate after the plug in installs. It will be located right here, titled Pop Up Maker, and what we want to Go Ahead do is select on all pop ups, so the function of this pop up will be for it to trigger. Once a website visitor scrolls on a specific page and it will load up either a form for the website user to fill out or a subscription box for them to become a subscriber to the website in the pop and plug in settings, We can explore some pre created themes by clicking on pop up themes. Once it loads up, you can see all the pre created themes that are available, and you can go ahead and check out their appearance. So if we click on the default theme, we can see how this pop up would actually appear once we create all of its settings. And as you can see, you have themes, settings that you can go ahead and configure here and customize an order to change the appearance of the actual pop up box. So as we start messing around with these, you guys can see how it begins to change the appearance of the actual box. So if we were to change that color, do something else will change the text color here. We can also go ahead and alter the content that's within the box itself. So from here, you can go ahead and customize the way you want the box toe actually appear once it pops up . So what we will go ahead and do is create a super simple pop up that simply captures the email for a website user. And if you wanted to go ahead and dump that email information into an email subscription service. This papa plug in actually has ah specific extensions that it works with. So we're just gonna go ahead and click on extend here, and you can see all of the other email providers and third party plug ins that it's integrated to. So, for example, if you wanted the plug in to dump the emails to a specific email subscriber of system such as mail Chimp, you can click on Get this extension here, and it will direct you to a male chimp integration section here toe where it can dump all your emails to this email provider. But it is a paid version, but it's not necessary to have. It is just an option that is available with the plug in. Let's go ahead and create our pop up by going back to all pop ups and making sure we saw add new pop up. We're going to go ahead and give our pop up a name. So this is simply gonna be titled email because we want to capture email subscribers. Next, we can give our pop up a title. If we so troops this is just an optional setting which will display a title inside the pop up container. We're just gonna go ahead and leave this blank for the section. So next we have two options we can either at a for that we created already in ninja forms or we can create a brand new form that's actually within the plug in. We're gonna show you both options, but the easiest option is to directly import on. Opt in that you created through ninja forms into here, and you do it by clicking on this ad form button here. Once this pops up, you will be able to select specific forms which you created in ninja forms that you can directly import into the paragraph section of the pop up. So we have gone ahead and created an email subscription form, which only requires the individual's name and email address. So we're gonna go ahead and import this email sub often formed, which we created, and ninja forms and then click insert. And once we click insert, it will place it in the paragraph section of this pop up. So we're gonna click on save draft and just as a refresher, we're gonna hover over back to ninja forms and select dashboard just so you guys can view that form that we previously created in here. So this is the form that we imported, which is the email sub form, as you can see and thes air all the fields in which the form will pop up once we select the pop up setting options. So let's go back and set the options toe how we want the pop up to actually trigger once we're back in our pop up makers settings, what we're gonna go ahead and do is set that triggers, which will cost the pop up to appear on the website. So here we can see the triggers menu is already highlighted, so what we're gonna do is click on Add New Trigger. As you can see, we have two options when adding a pop up, and the 1st 1 is click open, which will trigger the pop up once a user clicks inside the website. And the second option is a time trigger which will trigger the pop up once a certain amount of time has passed since the user has viewed the website and this is the recommended option I advise going with, so we're gonna go ahead. So like the time delay auto open option and click on add inside the time delay settings, we're gonna set the amount of time that a user spends on the site before they get hit with deep pop up. So I recommend leaving this to a modest 10 seconds and then clicking on add. And once you click, add the trigger has been set for this specific pop up. Moving on We have are targeting options and are targeting options are conditions that allow are pop up to show on specific segments of the site. I suggest leaving the section blank unless you have specific forms. You wanna pop up on specific pages of your website and leaving it blank will apply the pop up settings on all pages. Next, we have our display options, which will determine the appearance of our pop up. We can toggle with the theme the size of the pop up. We can add animations to the Papa. We can change the positioning of where the pop up appears on the website and we have some advanced options. Let's leave thes toothy default theme for now to see how well actually appear once we're done customizing it and later, if you feel it's necessary, you can mess more with the appearance options. And then last we have our clothes, which will determine the action of the pop up once the user clicks to close out of the actual pop up and here we can leave these to the defense that they currently are in place. So once we have gone ahead and configured all the settings for the pop up, we're gonna go ahead and click on Publish. And once we click on Publish, it will push those pop up settings that we configured live to our website, and the next step would be for us to check out and see how the pop up appears once it triggers on the website. So let's take a look. So we're gonna go ahead up here and click on visit site, and now we have to wait 10 seconds in order for the pop up to trigger on our website so we can pretend that we're viewing the website Queer Website Visitor. We can continue to scroll and then boom were hit with the email subscriber pop up that we created. So these ISS how the pop up will appear from the settings which we configured, and if you want to do something else with the pop up, make it look different, add more forms or add different customization options. You can do so within the pop up settings. But this is what it will appear like once you have it properly configured with the time settings. Now, another way to create your form for your pop up is through WordPress forms. So what, we're gonna go ahead do is click on, add new and we're gonna select blank form. So what, we're gonna go ahead and do through here? It's create a blank email form for the user to fill out, and then we can fill it with the settings that we want here. So we're going to click and drag and drop the email form, and this drags and drops the email field and then also drag and drop the name. And then this will populate the fields. And then we're gonna click on this blank form and change the name to subscribe here. So that's how the top of the form will appear once it pops up, then we can click on Save. This is simply an alternative to ninja forms that you can use to create your form. And once you click on save, we can go ahead and exit out of here and go and import these in our pop up maker. So we're gonna go back up to our pop up maker and make a secondary pop up. So we're gonna click on add new pop up type and female, too, and then click on this button here that says, Add form, which pretty much just means to import the form from WordPress forms that we created onto here. So we're going to click on the subscribe here and add form, and then you can see it adds the I. D. And same thing here. We can go ahead and add our trigger as we did before. So for this one, I'm gonna go ahead and leave it to five seconds to make it a little bit shorter to see how little pier then click on add. And then we're going to skip all the targeting display options and the clothes options and click on publish after it publishes. We can go ahead and click on visits site, and we're gonna wait five seconds to view this new form that we created just to see how it will appear and boo. You can see how this one appears and looks slightly different because it includes the last name. And then you can see after the 10 seconds we have the other form that pops up. This is simply to show you how the forms pop up one after another and how their options are simply different when we customize them. I advise on Lee having one pop up because having multiple just makes it a mess unless you have specific pop ups dedicated to pop up on specific pages. So we're gonna go ahead and delete the 1st 1 which we created because the 10 seconds might be slightly long. But we just want to make sure that we include one pop up on here at least. So this concludes the section of creating pop up forms. And if you really want a professional way to manage your opt ins, as suggests, going with integration options such as a Weber or mail chimp, and they're really good to help you send mass email campaigns out to your audience, and they are paid email options. But they make managing your email campaigns much more fluid and functional. So if you do want a professional options, those are the two choices that I recommend. 28. Phase 3 - Taking Your Website Live: Now it's finally time. All the hard work customization optimization in creation. It's finally time to bring your website to the World Wide Web by taking it live. All you have to do is go up here on coming soon. Launcher Website and click on Launch your site. Congratulations. Your website is finally live on the World Wide Web. Let's take a look. 29. Phase 4 - Introduction: and face bore. We will install Google Analytics. We will configure the necessary plug ins. We installed any website. We will properly back up your website. We will make your website secure and we will analyze your website flow. 30. Phase 4 - Google Analytics Installation: So now that we have taken our website live on the Web, we can check it out by searching it directly in the Google search bar. So we're gonna go ahead and type in excelled dot com. And once it loads up, we will be presented with all the content that we created throughout the 1st 3 phases of this class. And there's the email pop ups event which we created on. The next step for us will be to add Google Analytics to our website so we can properly track our traffic and growth. So the first step for you will be to register for Google Analytics if you don't have an account already, and all you have to do is go to Google Analytics and make sure you properly set up your account. And once you do, it will look like this. But it will be blank because you have not added Google Analytics to your website just yet. So first step is setting up the account, and once you do, you want to come to this menu here and then hover over to admin down here below. After the admin menu pops up, we want to create a new property which will be used to track our websites traffic. So what, We're gonna go ahead and do this click on create property and then you want to select web because we're gonna be tracked tracking your website and then click Continue down here and here. What you can do is just give your website property a name, and this will pertain to the name in which your Google Analytics loads up with. So it don't have to complicate this section here. You can just call it what your website is. So I'm just gonna call my Jetta, and here we're gonna type in the URL of our website. So it would be to be that so jodi dot com and then here you want to select the industry. So we're gonna go ahead and pig our industry here, which is jobs and education. And they were going to go ahead and click create. Once Google creates your property, they will generate a tracking I d coat and also a global site tag code. What we need to do in order to track your website is installed this piece of code onto your website. And don't worry, there's no coating involved. Installing it is very simple. All it is is this piece of code right here. And we have to insert this into your website. So let's go ahead and do that. So let's go back to our WordPress sites, go to plug ins, click on add new in search for Google analytics, and then this is the plug in that you want to install right here. Click on install now and then activate. So once the plug in installs, we need to link the plug into our Google analytics account. So what, we're gonna go ahead and do a select the plug and that would be installed down here Google analytics and so, like, general settings. Next thing we need to do is go ahead, scroll down here and click on authorized plug in. And after you authorize the plug in, the next thing you need to do is click on get access code. After you select that Google, ask you to authorize them to track your website traffic and you want to select. Except after that, they will authorize you and give you this code, which we have to copy and paste. So we're gonna copy it and paste it right into here and then click save access code and after installs, we can see that the plug and authorization process was successful. Now, this piece of information here shows that your website has successfully linked to Google Analytics and after the plug in authorization has succeeded. What, you want to go ahead new scroll down and click on save changes. So now we have successfully connected our analytics account with our WordPress website. From now on, Google Analytics will start tracking all the visitors that plan to our website to see your visitors. You can either do it through your Google Analytics panel, which is what I recommend you do once your website starts receiving traffic. Or you can hover over to your dashboard up here and scroll all the way down until you locate the Google Analytics dashboard plug in. And the same statistics that you see in Google analytics will also be displayed in the WordPress dashboard. So this is another place where you could view the website traffic that you're receiving to get the complete overview. You want to head over to Google Analytics and select the audience tab right here and click on overview, and here you will be able to see an overview of your visitors and your total website statistics for a given period of time. 31. Phase 4 - Plugin Configuration: In this next section, we're gonna learn how to configure all of your relevant plug ins that you will need on your website. The first plug in that we will go ahead and configure is the Yost s CEO plug in. So what you want to go ahead and do is locate the Yoast Seo plug in and select General. Once you're inside the general settings, you wanna scroll down and hover over two features, and you want to make sure that all of these features that are shown here are actually turned on so we can see this XML sent maps are not turned on. So we want to go ahead and enable that. And we also want to make sure that the S e O analysis tab features are enabled. So we want to go ahead and click that on, and then we want to click on save changes. Next, we're gonna hover over to social settings for your Yoast Seo Polian settings. And here we can go ahead and insert any social profile Euros. We have that point to a specific Web page that we have a social profile set upon, and after you import these into here. Then you want to click on save changes and that will wrap it up for configuring Are Yoast, Seo Polian? The rest of the settings under tools, search council and search appearance can be left to their defaults. The next plug in that we're going to go ahead and configure is jetpack. So we want to cover over here and click on a jetpack. Jetpack is a very common WordPress tool that is used for website security and performance. So what, we're gonna go ahead and do it Scroll down and click on set up a jetpack. Once you're at the log and slash sign up menu, you can sign up with a new account or use your WordPress log in from your website. Once you link jetpack to your website, all these pay plans will pop up. But you don't need to use any of these. So what, you want to go ahead, do it scroll all the way down and click on. Start with free and then click. Continue inside jetpack Weaken. View your website stats in terms of the amount of visitors that are coming to the site. But what we're concerned about is monitoring the downtime on your website if it happens to go down. So what we're gonna go ahead do is hover over to plan, select my plan, hover over to downtime, monitoring and select try it. And then we're gonna go ahead and enabled downtime monitoring. So anytime your website goes down, you will be alerted with an email to a new email will be sent to the email address that is registered for your WordPress website. So we're gonna go ahead and click. Yes, let's do it. So we have now enabled downtime monitoring for your website and that's the primary use for jetpack. So the next plug in that we're gonna go ahead and configure, which is right under jetpack is the kismet anti spam plug in and a kismet works by eliminating spam from your website. So what we're gonna go ahead and do is connect it with jetpack. So we're gonna hover over down here and select connect with jetpack once the menu loads up . What you want to go ahead and do it so like get personal? And once this payment option pops up, what you want to go ahead and do is click and drag this to the left, which will make it to the free version. And then what you want to go ahead and do is fill out your information here. Once you've entered in all your information, they will present you with an A P I key and what you want to go ahead and do this copy and paste it out of here and paste the A P I key into the plug and select Connect with a P I. Once we have added the A P I key, kismet is up and running it. What we want to go ahead and do is configure the settings here. So this is depending out how much you want a kiss mitt to control the amount of comments and spam that come in. But the way that they have the default settings is more than sufficient, so you can leave the default settings in place. So next we will configure the W three total cash plug in the W three. Cashing plugging is meant to help improve the user experience of your Web, say, by improving your server performance in cashing every major component of your website with a shared hosting plan, there's only so much you can do to improve your website speed. But the W three total cash plug in will make a difference. We have installed it before. So what you want to go ahead and do is navigate to performance and select general settings . So the settings in here are but technical, and you really don't need to worry about them when your first building out your website so you can just check all the settings that I will show you here and follow along. So first setting we want to enable is the page cash. Second is the men. If I and once this menu has prompted up you click, I understand the risks. Next, we're going to enable database cashing, also going to enable object cashing CD and cashing lazy look unable. And that's essentially all the settings that you need to worry about when you were first enabling deep w three cashing pogon and once you're done enabling all them what you can go ahead and do a scroll to the top and select Save all settings and all of the settings we just checked will be enabled in here. So those are all the settings that you need to worry about and enabling all these will vastly improve the load are the speed at which your website loads your pages and your posts , which will in turn improve the overall website appearance to the end user and how quickly it loads for them. So those are all the necessary plug ins you should have configured for your website when you're first starting out. As your website begins to grow, you can add more advanced plug ins and paid plug ins to better help you manage your website . But is there the starter plug ins that will help you run your site successfully? 32. Phase 4 - Backing Up and Restoring Your Website: So in this next section, we're going to go over how to properly back up your website. Backing up your website simply means that you're saving a copy of your website at a designated time and date. So if your website happens to crash for some reason or you want to revert recent changes that you made, you can restore the backup and recover your website toe a prior version that you had saved . It's highly recommended that you take regular backups of your website because of a few common issues that can cause problems. So number one issue that can happen is certain updates. Toe wordpress or specific plug ins or even themes can cause your website to simply crash or misbehave. Number two. Getting your website taking down by hackers as an unfortunate possibility, but it happens more often than you think. Um, and it can be avoided what the tips we will give you and number three human air when customizing your website. You can make airs when you're customizing or updating certain components of your website when you're creating new content and pages without really realizing it. So having a backup version of your website is extremely helpful when you want to revert back to a previous version. So in order to back up your website, the first step is to install a backup plug in. So in order to install this plug in, we're gonna hover over to plug ins, click on add new scroll down and type in the plug in name called updraft and then select install now and then activate once the plug in installs what you want to go ahead and do is click on Press here to start an updraft will walk you through, installing and setting up this plug in. So let's click on press here to start. So after we select press here to start, next thing we need to do is actually take a backup of our website. So in order to take a backup of our website, all we have to do is select this backup now button and then click on backup now. So it's requesting a start of the backup, and it's going ahead and creating a backup of our website. So after the backup is done running, you will see a backup that has been created of your website right here with the date and the time. So, in order to make your life easier when working with your website, we will schedule an automatic backup of your website so you don't have to keep going back and forth and manually making backups of your website. So in order for us to create an automatic backup of your website, what we're gonna go ahead and do is hover over two settings once we're inside are plug and settings. What we want to go ahead and do has set our file backup schedule to weekly and our database backup schedule to weekly. And then we want to change these 24 And what that means is that the plug in will take a backup of your website every week and retained the backups for a total of four weeks. This way you will have a whole month worth of backups for your website. Next. What? You want to go ahead and do it? Select a place where you want deep back up to be stored. I would suggest storing it on your Google drive and making sure you have these settings checked here, and if you want a new email every time, the plug in backups backs up your website. You can sell like this, but I don't like a ton of email, so that's something I don't need to do. And then what you want to go ahead and do is click on save changes. Once you click on save changes, you need to authorize the plug in to access your Google drive accounts. What you want to go ahead and do is click on this link here, which will direct you to your Google Drive account and then make sure to sign into the Google Drive account that you wish toe. Have your backups stored and then make sure you click allow. And once this pops up, what you want to go ahead and do is click on complete set up, and then you will be redirected back to your WordPress panel. So every week you will have it back up created of your website until they're up to four, and then it will replace those backups with new ones. If you want to change the backup schedule to include more or less backups, you can configure it to something that is more applicable to your website. So now that you know how to create these backups. The next step is knowing how to actually restore these backups. If your website happens to have an issue or you simply want to go back to an older version of it, this next step is really simple. All you have to do is find a specific date to which you want to restore your website too. So, for example, if you want to restore to the state what, we're gonna go ahead and do this simply click on restore and make sure we check all of these boxes here in order to ensure that we restore our website to include all the plug ins , themes and anything else that was done at that date. So we want to click on next, and then you want to click out and restore, and it's going through the process of restoring everything and then what we want to go ahead and do once we get the restore successful as a return to updraft plus configuration. After all those steps, we have created backups of our website and managed to restore it to a previous version that we had. So those are all the steps required to back up your website and restore it to a saved version 33. Phase 4- Making Your Website Secure: in this section, we're going to learn how to make your website secure with an S S L certificate. So an SSL certificate is a small data file that digitally binds a cryptographic key to an organization's details. And when it's installed on a Web server that activates the padlock and the H. T. T. P s protocol, and this allows for a secure connection from a Web server to a browser and as a self certificate is a paid addition on your website, that's why it's recommended you go. It blew host since they give you one for free for a year on your website. And SSL certificate is typically used to secure credit card transactions, data transfers and specific Loggins. If you use blue hosts, you can check and see where your SSL certificate is located by going to your website and clicking on manage site, then hover over to security and you can see that you have a free SSL certificate which is activated. Another way to see that you have an active SSL certificate running on your Web site is by typing your website in the Web browser up here, and once it loads up, you can see this little s right here after the H, T t. P. And this denotes the fact that your website has an active SSL certificate. So that is one way you can tell if your website or even other Web sites on the Web have a secure ah SSL certificate installed on them. Having an active SSL certificate is an important way to protect the data on your website and the transfer of information through it. If you don't have an SSL certificate installed, the best way to get one is either by contacting your website hosting provider or using 1/3 party plug in. But from personal experience, it's much easier to use your own hosting provider for this. 34. Phase 5- Testing Your Website Speed: and face five. We're gonna learn how to touched your website speed. We're gonna create a site map, that X amount file. We're gonna add your website to the Google Search Council and we will submit your sights content for indexing. So we need to test how quickly your website loads up its content. Your website speed is a very important component of your overall website experience, and it's very important when it comes to ranking your website high and search engines the website will be using to test your website. Speed is G t metric. So we're just gonna go ahead and hover over to GT Metrics that calm. We're going to type in the URL off our website and once we do, we want to hit on test your site. So GT Metrics is running its tests of our website to see how quickly the content gets loaded up. Once the speed test is done running, you'll be presented with a ton of information regarding your website speed in components that are performing accordingly and components that are loading slow. These include the page speed score, the why slow scored the amount of time your website took to load up the total size of the page and the number of requests that were made when the loading up the website. Our primary concerns from this report are going to be the page speed score, the Y slow score and how long it took for the actual page to load up. A major component of how quickly your website loads up is the actual hosting provider itself. Since you most likely be using a shared hosting solution. Your website speed can be fast, but not as fast as a website that is on its own dedicated server. So from a report, you can see that our page speed scores excellent with that 95% rating under the page Speed score stats weaken. See which components are responsible for the page speed along with its associated grade right here. So if we wanted to improve the page speed score further, we can't click on one of these recommendations that could use an improvement and see what we can do. In this case, we can leverage browser cashing for the recommended resource is below in order to improve our cashing score and therefore improve our page speed further. Next we have the Y slow score, which is a relative score that works by crawling your website and comparing it against a wide list of 23 rules based on Yahoo's rules for high performing websites. The Y slow score then scores your site against these 23 rules and gives you an overall score based on the average. So you need to be aware that this is a relative score. But obviously the higher it is, the better as we can see our Y slow scores. Actually, pretty poor has a great of C, but what we can do is click on this Y slow tab and see all of the recommendations and their associated. Great. So we can see that under use a content delivery network, we haven't f score, probably cause we're not properly using a content delivery network. And below here you can see all of the affected resource is if you're not sure what this actually means, you can hover over this blue tab and the tool actually explain to you what it is next. Going down the list, add expires headers. This is also another component that is not properly configured on our website, so down here a list. All the associated components, the next is make fewer. Http requests and the great thing about all of these recommendations here is that they can easily be fixed with our asset cleanup plug in which we installed in an earlier section of this class. So once you make a note of all these components that are affecting your wife's low score, we can later go back into our plug ins and pull up our asset cleanup plug in and find these components and ensure that they're properly configured once we properly configure them are why slow score should improve. The next component we have is our website load time. Our website loaded in 2.5 seconds, which is really fast for a website that is on a shared hosting plan. The ideal low time for a website is below three seconds, so in our case, we're well below that and that is very good toe have on your website. If you want to see which components off your website speed are taking up, the most resource is and are taking up the longest. You can click on this waterfall tab and it will do a full breakdown of everything that is affecting the speed of your website. So, for example, we can see this component here takes really, really long and it loads up and shows you all of the things that are affecting the website speed. So you can go through the full list and see which components are affecting your website speed and then from there, what you can do is either get rid of certain components that you really don't need that have a tremendous impact on your website speed. And once you do, it should actually improve your website speed. So underwater fall is where you can check all the resource. Is that have an effect on your website? So once we go back to our WordPress panel, what we can go ahead and do is locate the asset cleanup plug in and go over to settings and then from your settings. What you can do is locate the components from your website speed test that had a slow score , for example. So in this case, the content delivery network here, where you can do is locate the content delivery network here and start to configure it properly in order for it to improve the wise low score that might be suffering on your website. So what you can do is just check and see which components need work for your website, speed and your slow score and start to find them in here and the asset cleanup tool and configure them properly in order for your score to improve. And the asset cleanup tool has a ton of different YouTube videos that you can check out, which will actually show you how toe set up these components or your website loads up quickly. 35. Phase 5 - Creating a SiteMap.xml File: So in this next section, we're going to show you how to generate a site map dot xml file for your website Before we create our site map file, we're going to explain briefly what they are and why you need one. You need Google to crawl important pages of your website. An XML site map lists a website's important pages and posts and make sure Google confined them and crawl them correctly. It shows Google the structure and content makeup of your website. All websites, regardless of size, should have an X amount site map. If you want to get found organically on the Web, having one is extremely important if you plan on growing at website. The great thing is, if you have Yoast Seo, plug in installed a site map dot xml file gets automatically generated for you. So what? We're gonna go ahead and do his view? Our site meant XML file. So we're gonna go over to Yoast s seal and click on General. And once we're inside the general settings, we want to go ahead hover over two features and fine XML site maps. In what we want to go ahead and do we can already see that it's on. So a site map dot xml file should have been generated for us. So what, we're gonna go ahead and do is click on the question mark and click on see the XML site, Matt. And as you can see, this is the full XML site map off our website. We could see here that we have a category for posts under our website. So if we click on post, we can see all of the post that we have created along with the dates that which they were created on. If we go back, what we can see is the specific pages that we have created on our website. And if we go back further again, we can see the categories that we have created as well and their specific dates. And we can also see all of the contributors or authors for the website. So if you wanted to see the site map dot xml file for your website or for any other website on the Web, all you have to do is type in the euro of the website up here, followed by site map, underscore index dot xml and this will be denoted in this fashion if they're using the Yost s CEO plug in. So let's take a look at a few websites that actually have a site map, docks, amount file and see what they look like. Let's take a look at a site map dot xml file for a website that's not our own. So the website we're gonna go ahead and check out is 99 signals dot com. So what we're gonna do is in put forward slash and then site map underscore index dot xml. So once you see this oops air for a four, it means that they're using a different plug in to generate their site map die XML file Another way you could search for the site map. Uh, XML file is by leaving the site map in there and typing in site map dot xml. And once we did that, we can see that the site map is generated. It's simply just generated with a different plug in. But inside here, we can see all of the posts that this website has created throughout the life of it. So this is one way you could check the site map tax amount file for other websites to see how they're structuring their website and how frequently they're actually publishing content on their website. If for some reason, the Yoast Seo plug in does not generate your site map dot xml file, this can happen for numerous reasons. This can happen if there's updates to other plug ins that may interfere with it, or an update to your theme. So what you want to go ahead and do is make sure that your Perma link settings are configured correctly, so you want to hover over two settings. Go to karma links and make sure that your, um, common settings for your Perma links are set with the post name. So what you want to make sure to do is click on Post Name, and it will insert it at the end of your custom structure and then click on save changes. This just happens sometimes when there's updates to your plug ins or to your theme, that can kind of, uh, cause issues with the Yo Stasio plug in. But that's one way to ensure that the settings are correct. 36. Phase 5 - Adding Website Google Search Console: in this next section, we're gonna add your website to the Google Search Council, adding your website and its related site map XML file to the Google Search Council is an important component of getting your website found on the web. It will kick start the Google search engine crawlers to start analyzing your websites content and decide how they want to rank it on the web. The first step is to head on over to Google and select the Google Search Council. And here what we want to go ahead and do is type and the domain that we want to add to the Google Search Council and then it continue. And then what we need to do is verify our domain ownership for the domain that we're trying to add to the Google search counsel. So if your website is hosted through Blue Host, what you want to do is grab this verification key in here and what We're gonna go ahead and do this copy and paste it into our DNS configuration settings. So what, We're gonna go ahead, do this, copy it. We're going to go ahead and do is navigate to our WordPress panel and then we're gonna find our website. And first we're gonna go to domains. We're gonna find our website, which is right here. And then we're gonna click on the drop down and go to D and s, and we're gonna scroll down and find our text and treat settings. And what we're gonna go had Duke a select add record for our host record. What? We're gonna go ahead and do his input pats. And for a text value, we're gonna go ahead an insert the Google Verification code that was provided to us from the Google search console. So we're gonna copy this and paste it in here and then click Save after Saves it. You will be ableto locate the Google site verification coat in the text entry record. And after that, we're gonna go back to the Google Search Council and click on the verify. Now, verification will not always be immediate. Sometimes it can take 24 to 48 hours for a Google search council to verify ownership of your domain. So if you happen to get this message, don't worry and just give it 24 hours and come and try to verify the property again. And after that, you shouldn't have any issues verifying the property in the Google Search Council. Another way you can verify your property is by euro prefix. So what we're gonna go ahead and do is type in https. So john dot com and click continue. And we can see that ownership got auto verified for this property. So we're actually all set up and can go head and configure more of our settings and the Google Search Council. So what, We're going to go do this click done. 37. Phase 5 - Requesting Website Indexing: the final section of face five, we're gonna learn how to submit your sights content for indexing to the Google Search Council, which will wrap up the course and get you ready to continue building and growing your website. So the first thing we want to do in order to kick in the Google search engine crawlers to crawl your website, it's submit your site map the XML file into the Google Search Council. So we're going to navigate over here to site maps, and we're gonna type in the extension to where your site mint dot xml file is located. So what we're gonna do is click site map underscore index dot xml, which is where our site map, that somehow location is stored. So once we have that and here, we're going to click on submit, and the site map has been successfully loaded into the Google Search Council. So right here, you can see that the status is that it couldn't fetch the site map, docks, melt file. But this takes some time, typically 24 to 48 hours. So once you come back into here and check it, it will be authorized. The Yost s CEO Plug in also creates another extension for your site mint dot xml, which is titled Just simply site map dot xml. So if we were to click enter that will also navigate us over to our site map dot xml. So what we want to go ahead and do is also copy this and place it into the Google Search Council in order for it to try and pick up the site map from those two locations. Sometimes it will pick one. Sometimes it will pick the other, and sometimes I will pick both. So if you have both in there, that can make it much easier for the site map Baxam off out to get discovered by the Google search counts. So we're gonna also submit this variation and click submit, and this one was actually successful right from the start. So once the Google search engine crawler started discovering the euros on your website, they will be located right here this variation of the site Matt Jackson, I'll file it might take a little bit longer. Ah, and you can just come back and check for it to see what will happen. So if we actually go ahead and refresh this. We can see that the Google Search Council discovered this site map dot xml file and discovered 16 unique euros associated with the website that we submitted. So it's already discover the euros. And now the Google search under crawlers are going to be alerted to start crawling your website once they do what you can do inch to see that they have begun to crawl, your website is hover over to cross. That's And once there is activity from the Google search engine crawlers that they've begun crawling your website, they will be displayed here in a graph. So this is where you can go and check to see how Google is starting to crawl your website. The next component to getting your sights content Index is requesting for Google to start indexing your content. So what, We're gonna go ahead and do it simply go to a specific blawg page or a specific post that we created on our website. So let's go to our block page really quick, and we're gonna take this Excel basics post. We're going to copy the URL, and we're going to place it up top here and then we're going to click enter. So once we click enter, we're hitting the Google search engine and order to request that they crawl this specific girl and as the detect the euro is not yet indexed in Google. So what we're gonna go ahead and do is click on request indexing. So any time you go and create a new page or a new post, it's a good idea to place it in here and directly request Google to start indexing that content. They will discover it through your site map Die XML file. But the process is much slower that way. So if you go in here and directly submit a request for Google to start indexing that specific page or block post, it will prompt the Google search engine crawlers to start indexing it much faster. So, as you can see here, the euro was added. An indexing was requested. And once you're pages in post start receiving impressions from Google, what you can go ahead and do is viewed that performance in the tab right here. So once your website starts to gain traction and your content starts to gain impressions and clicks, you will be able to view all the information in here. Since this is a brand new website, all of this stuff at the moment is blank just so you guys can see a sample of this. I've logged into the search council for a website that I own, and what you can see here is the performance of the actual impressions and clicks that the website receives. So what we can do is also check the cross stats that we mentioned before. So if we click on cross, that's we concede the frequency to which Google search engine crawlers have been crawling our website. So that is one thing you can view in here. There's a ton of more information that you can explore within the Google Search Council, and you will learn more about it over time. As your website begins to grow, Ah highly suggests getting familiar with it and using it. Anytime you create a new Web page or post, it will make managing and monitoring your website much easier. And there's nothing better than seeing your website growing daily right before your eyes 38. Phase 5 - End of Class: Congratulations. If you've made it this far into the class, you should have a fully functional website up and running. If you have any questions or concerns about the class, please feel free to drop them and sculptures. Comments section. Also, I'd love to see your work, so please feel free to share all of your what page is that you have built or your whole website altogether. And I'd love to take a look. Thanks again.