Build & Design a Professional WordPress Website | Part 1 | Robin & Jesper ✓ | Skillshare

Build & Design a Professional WordPress Website | Part 1

Robin & Jesper ✓, Teaches Digital Marketing

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
22 Lessons (3h 1m)
    • 1. Installing WordPress Using Bluehost

      7:44
    • 2. Logging In to WordPress

      2:29
    • 3. Navigating WordPress

      8:54
    • 4. Installing a WordPress Theme

      9:12
    • 5. Required WordPress Theme Plugins

      1:53
    • 6. Set Your Title

      3:02
    • 7. Set Your Home Page

      6:48
    • 8. Introduction Guthenberg

      13:13
    • 9. Pages, Post Editors & Blocks

      12:52
    • 10. Edit Your Home Page

      10:57
    • 11. Designing Resources

      6:34
    • 12. Set Your Custom Menu

      16:33
    • 13. Publish Your WordPress Website

      1:42
    • 14. Writing a Post

      11:05
    • 15. Customize Video Posts

      6:49
    • 16. Categories & Tags

      10:51
    • 17. Post Settings & Blog Design

      9:28
    • 18. Sidebar Design

      19:03
    • 19. Change Your Site Icon

      6:46
    • 20. Customise Your Footer

      4:36
    • 21. Make Your WordPress Website Mobile Friendly

      4:14
    • 22. Dashboard, Pages & Posts Cleanup

      6:21

About This Class

Welcome to the first part of "Building Your First WordPress Website".

In this Part of the course we're going to start setting up your Website from scratch using WordPress the NEW  Gutenberg Editor.

We're going to go step by step and learn.....

Install WordPress using BlueHost

Navigating WordPress

Installing a WordPress Theme

Required Theme Plugins

Set Your Website Title

Set Your Home Page

Pages & Posts Editor: Introduction (Gutenberg)

Pages & Posts Editor: Blocks

Edit Your Home Page

Design Resources

Set Your Custom Menu

Publish Your WordPress Website

Write a Post

Customize Video Posts

Categories & Tags

Post Settings & Blog Design

Sidebar Design

and... Remember to sign up for Part 2!

See You Inside the Course.

Love

Robin & Jesper

Transcripts

1. Installing WordPress Using Bluehost: in this video will be installing WordPress using Blue Host. In other words, we're going to start setting up our website, so let's get started. So what is Blue host and why do we need them? Well, Blue Host is a Web host. In other words, they're going to allow us to install WordPress and all of the files that come with our website. Right? So WordPress is just a program that we use to customize our website the rest of our website . It's just going to be a bunch of files. And for those funds, we need a Web host who can store those files. And Blue host happened to be great. We have used him in the past. We used them. Now we think they work really well. They have great support and they are, in my experience, the fastest and easiest way to get WordPress installed. So let's go ahead and install word for us using Blue Host. Now all we're gonna do is go ahead and go to blue host dot com, and we're gonna pop up in this side here and we're just going to click on get started now. Next up, we have a bunch of different options or rather, price plans. As you can see, we have basic plus choice, plus and pro, and they all come with different features and different costs. Now, in the basic one, we only get to have one website, a limited amount of storage. We get a free SSL certificate unlimited band with ah lot of good stuff, you know, eventually asked our website growth we're going to want to expand. But for now we're going to go ahead and go with the basic because it's plenty off what we need. And as we grow bigger, we can go ahead and expand this plan. We're gonna go ahead and click on Basic and then selector. So now, in order to create our website, we need to have a Web host, right that is blue host and we need to have word for us installed on that Web host now in order to have our website, we also need a domain name in other words, in name for your website. So you could go ahead and purchase that name on Go Daddy or any other site that offers domain names. Or you could go ahead and write it in here and just buy it from Blue Host, and that's exactly what we're going to be doing. So before you write in your name here, you want to kind of have an idea off why you're choosing your name, right? So if you're going to be selling a certain product or a certain service, you're going to want a good name that reflects your brand that reflects that product, etcetera. Now for me and Jesper, we're just going to go with Robin. And just because that is our brand. So we're going to choose new domain, and we're also going to choose dot com here, and the reason we're choosing dot com is going to be evident later on in the course. But for now, let's just say that out of all off the other extensions is the most effective one. If you're already advanced and have a reason for another one off course, you can go ahead and pick that one. And if you already have a domain name here, write it in here, click on next and then blew host is gonna help you transfer from the and use that domain ing for this website. So we're gonna go ahead and click on next and perfect. The name is available now. If the domain name wasn't available, would have to go back and use another one. But lucky us, it is available. So next stuff, we're going to be feeling out our first name, last name or business name all of this personal stuff in here. And then we come to the package Information rights. The 1st 1 is the account plan. Now, as with most businesses and most price plans, the longer you take your price planet cheaper, it gets. Now we're going to go ahead and use the 12 month price. It is the most expensive, but also it is the least limiting. So we're agreed to go ahead and pick that one. There we go. And then there's a couple of things that we get for free. It's the set up feet. That's great. We get a domain registration that's also great. That's the name that we just picked. And then we get on SS l four free, which is also great. That is this little lock up here, and it makes your website look much more professional and safe. Now there's a couple of additional things in here. That's that you could buy that. You could include for a fee. Now, the 1st 1 is domain privacy protection. Now what this does, is that it? A voice, your name and email and personal information to get out on the web Now, the second that you publish your website. Ah, lot of information about you. Like your name, your like your email, etcetera is going to be public is going to be available because you now have a website and people can search for you and people can find you and your information. But if you choose this domain privacy protection, all of that information is hidden. And, you know, I prefer to keep it like that because I like my privacy. So we're gonna choose this one. And now for site look, Security for code guard for Blue host, a CEO or office email essentials. We're going to be getting all of those things using plug in, so we don't need to pay for them and some of these things we don't even need. So we're gonna go ahead and on, check all of these and just keep the domain privacy protection. You cannot check it if you don't want that. But we're going to keep it in here. Then we're going to scroll down and enter our credit card number and then click on Submit. Awesome. So we just purchased our web hosting. We got a domain name and now we're going to be setting up our WordPress website. In other words, our site. So we're going to go ahead and click on set password, and this is going to be the password so that we can access our blue host accounts. So let's go ahead and write in our password right now and then we're going to click on. I have read and agreed to blue his privacy policy and terms off service and we're gonna click on next. Great. So we just created our password. Now all we're gonna do is log in. So now Blue host is helping us customize our website already, even though we haven't really set up our website were able to choose a theme for it. What we're gonna do is we're gonna scroll down and click. Don't skip this step because we're going to be covering the theme that design and everything later on in the course. So let's skip this step and it's all down. So let's start setting up our website guys. We just set up our web hosting. We got our domain name now. Finally, it's time to get WordPress install so that we can customize the website itself. And remember, this is where we're going to be spending the vast majority of her time on WordPress because that's where we customize the website. So click on start building. Okay, guys, we just set up our website. Awesome. Now this is where we're going to be spending the vast majority off for time on the website itself. So so far, we have gone in a Web host a domain name and just God, our website up now it's not launched it not official. No one can access it but you so far. But now we're able to get started. We have everything set up. Good job. Let's move on to the next lecture 2. Logging In to WordPress: In this video, you learn how to log into your WordPress website, which is a very handy skill to have. Now, before we go ahead and do anything, I want you to go and check out your mail inside your mail. You're going to have something that looks like this. It's the roux is verification. Now we want to verify our email. Otherwise, then you domain that we just got is going to be de activated and that's no fun. So before you do anything, post this video, go to your mail and verify your email. Okay, you're back. Great. So in order to log in to our WordPress, it's actually super simple, and you're going to be using this method basically all the time. All we're going to do is they were going to make a new tab here, and then we're going to write our website, which for us is Robin and jesper spurt dot com. And then we're going to do a forward slash that looks like that. And then we're going to write WP Dash ad men. Now I've included this in the resource is as well, and then we just press enter and then we get to this little log in screen, and all we're going to do is writing are used her name and then or email address and then our password and click on Logan. Now, in the beginning, when you get your blue host account, you get a word press up. Chances are it's gonna take a couple of days before this method works, simply because Blue host is a little slow so it can take a couple of days before you actually get to log in is going to say invalid email or invalid user name if it's not working, and if you forget your information, that's also in your mail. So in order to log in right now, if this is not working for you, all you need to do is go ahead and go to blue host dot com and then go in the upper right corner and click on Logan. And then here. All we're gonna do is that we're gonna go to the middle the second this is finished working and we're going to click on log into WordPress. And then here we are at our website. Awesome work, guys. So remember the majority off the time you're going to be using your website dot com forward slash WP dash admin. Okay. And then you log in their perfect see in the next lecture. 3. Navigating WordPress: in this video, we're going to be navigating WordPress. That dashboard is different functions, etcetera. So when you first log into your WordPress site, it's going to look like this right is going to say, Welcome toward press and then offer some help and we're gonna cut it can. I don't need help, because that's why I'm here. Right? And I wouldn't have anything to do if we use this. So we're going to click on. I don't need help here. They would go. And then we're gonna go through everything all of the different functions that WordPress has. So suddenly we get a slightly different looking our WordPress, and it looks like this. There's a lot of things going on here right now, but we don't need to concern yourself with this yet. Okay, that's later on. What we're gonna concern herself with is going to the left here. Now, this is the WordPress dashboard, right? And because we have installed WordPress using blue Host, we have certain preinstalled things in here. For example, we have blue host, which is a tab that you Conover over. And if you over over one of these tabs, there's gonna be a sub menu. This is a sub menu. We also have things like WordPress forms inside and often monsters. Now, if you would have installed WordPress with another Web host, then Blue host, some of these plug ins might not exist on your WordPress. So let's get started now. The first thing is the dashboard, right, and the dashboard is always going to be the main thing that pops up when you look into your website and we're going to be customizing this later on. And then we have something called updates. Now updates are super important because your theme, your plug ins, your WordPress itself is going to be needing updates from time to time and whenever one thing up days, for example, your WordPress theme that might get your plug ins out of sync. So whenever we see a number to the right here, we want to go ahead and click on updates, and then wherever you see the need to update whether it is the version of WordPress, it is a plug in or it's a theme. There's gonna be a cheque, books that you can click in and then click on updates so super important, always make sure that you keep everything up to date every single time that you log into WordPress. And then if we go down, we have something called posts in here. And post is basically your articles, your blawg post. Anything that you can post in the right in the written form is basically a post. So when you want to reach other people and write something that's called a post, so if I hold her over, you can check out all the post you have. You can add in new categories, tags, etcetera, down below. We have media, so media is basically in the video and a picture etcetera, that you have added onto your site. You can go ahead and check out your library to view all off them and also add new. But we're going to use another method for adding them in the posts later, and then we have pages now. Pages on your website could be, for example, a contact me page. Or it could be a blawg page or it could be a product page. Basically, when you go into a website, there are different tabs you can go into, like if you want to contact someone you click and contact me. Now that's called a page. So this is where you view all of the pages. And then here you can adding new page, and then we have common. So if anyone is commenting, you can go ahead and administer them from here. And then we have WordPress forms and this is a plug in. We're gonna go through plug ins later on. So we're gonna ignore this for now and then we have a parents now. Appearance is super important. It includes things such as our theme that we currently have. It includes things such as widgets, menus, etcetera. And if half off these things doesn't make sense to you. Never heard these words don't were about it. We're gonna learn all about this later on in the course. But basically, theme is to look off your entire website and you can change all of the appearances in here . And then we have plug ins and plug ins are huge. Basically, if there's a problem, there's a plug in. You can live by that moto. So with plug ins disguised a limit. Whenever you need to back up your site, you need security. You need certain customization or there is something that you want to edit or changed. There is a plug in for it, right? There's a plug in for everything you want to do. A contact form specifically is gonna be a contact form. Plug him and we're going to go through all of the essential and all of the best plug ins later on. But basically, here the sky is the limit, and then we have users and users are gonna be If you want to add someone as an author who writes on your website or you wanna add someone as an admin who has all off the access that do you have a swell or you could add someone who just helps you out and manage your website . Basically, here you can view the users, add them and check out your old user profile, and then we have tools. Now, when you install certain plug ins, they are going to pop up under tools in here. So if you go to tools, you're going to see that plug in name here and then you can access it, and other tools are going to be popping up on the dashboard to the left here and then we have settings and in settings you can change things such as If you want certain comments to be showing if you want comments at all, if you want to change the header your sub header. If you want to customize something on your website, if you want to change one off the core settings of your website basically in here, this is where things really happened. Like in general. You change the head of the stop header and everything. We're going to go through this Maurin debt later on. And then we have insights and we have often monster and these are also plug ins. We're just gonna leave them for now. Okay, now, if we go up, there's something up here that's called Jet Packing. That's a plug in as well. So we're gonna leave it. And then there's Blue Host and we have blue hose because, well, we installed our WordPress with Blue host. They are a web host, so we kind of got this tab when we installed our WordPress. And in here there are things such as the marketplace and in the marketplace. Blue hosts are selling different features different themes, plug ins, etcetera that can help us improve our site. But we're going to be used in free plug in, so we don't need to bother about that. We don't need to pay money for those things. I just want you to know that they exist, OK? And then if we go to the top up here, we first have the WordPress logo. And here you can read about word President. Or you can go to the support forums, all of that good stuff, nothing important. Nothing that you'll be using. And then we have the welcome right. And here we can visit our site and see what it looks like. And we're going to be doing that in a second. And to the right here we can see if we have gotten any new comments and also a quick access to those comments. All we need to do is click here and we can read them and administer them. And then to the right, we have something called New and we could create a new post in the media. A new page in New Yusor, etcetera. It's just a quick access part, and then we have catching if your pages slowing down is gathering up too much in the cash, you can go ahead and purge this. But if you don't know what that means, don't worry about it. We're going to go through this stuff later on. It's not important right now. And then finally we have the coming soon activate, and that's basically launching your site. But we don't want to do that yet, right? We haven't really started building our website yet, but know that it's right there and we can launch it any time we want to. So if you want to check out how our website looks right now, I would do is we hover over it. Welcome. And then we're just gonna open this in a new tab and then have a look at it. And this is what it looks like right now. Pretty plain, if I may say because we haven't chosen any theme, we haven't installed anything. But as you can see, there are still some things going on here right now. So your website exists? It looks like this. We're going to start customizing it. But before we go ahead and do anything, we're going to be using a theme. So let's move on to the next lecture and install our first theme guys see in the next lecture. 4. Installing a WordPress Theme: in this video, you learn how to install a theme for your WordPress website. So let's get started. Now Let's start off at the back and off our website and the back end is when you just logged in at your website dot com forward slash WP dash admin. Right. So this is the back end and if we go to welcome here and we visit our site in a new tab, this could be called the front end off our website. Right. And this is where our theme matters. The theme is the look off the entire website. And right now there is a pre install theme that looks, well, very boring. And we're going to change that up and install a much more interesting theme. Okay, so let's go back to the back end here now, in order to change the theme, all we're going to do is go down to appearance and click on themes and before we get started and let's click these messages if you have them as well on yours away because they're just cluttering. There we go. So as you can see, there's already a theme preinstalled on our WORDPRESS website now, there are a couple of other themes as well. And these have been the release theme for WordPress, this one coming from 2017. And this 1 2000 and 16. Now what we want to do is install a new one, right, So we're going to go ahead and click on add new theme. Now, in here, you'll find a bunch of very interesting and completely free themes. So looking at the top here, we can see we're currently browsing featured. Now there are more tabs we can cross popular late this favorites premium. In other words, once you have to pay for and then we can put some filters right? So scrolling down, we can have a look at always there anything we find interesting. And if there is one we find interesting, we can go ahead and click on it to preview how it's going to look. So I just took this club travel by random, and we get a preview how this site looks like unedited. Okay, so let's say that you have a theme for your website. All you would need to do is click on search themes up here and let's search for work out, for example, and then we get a bunch of different themes showing up. So let's just scroll through and see if we find anything interesting. Well, this one looks really nice. So let's click on details and preview here. Okay, looks really cool. So let's say we want to grab this one. This theme all we need to do is click on the install here. You can also click on install right away here. And since these themes are already on your WordPress, all you need to do is click on this install button and then you can activate it right away . Now, if we go back in, click on themes here, you can see that the new Olympic theme shows up in here, and we still have our old old white boring theme in here. And it's not going to be on or activated until we click on Activate here. So let's click on, activate and then go back to the front and and just update this and we can see how our website looks like right now. As you can see, it just updated. Okay, so now we have a new theme installed, so let's go back so you'll find all of your themes in here. You can activate another one. Let's say we want to activate the old one back. All would need to do is go ahead and click on Activate for the 2017 1 in here, okay? And then would have the old one right back. But there are also more ways and different themes that you can be finding. For example, there's something up here called upload, and that is, if you want to upload a theme that it's not directly from wordpress dot org's. We know that is from word protect or because we're in WordPress and we have clicked on themes and search for it internally in here. Okay, so let's say that we want to grab a theme outside off WordPress. Now, the website that I recommend for this is theme forest .net. They have been around for many years. They have a bunch of different themes, like, I don't know how many themes they have available over thousands, and they work great. So go to theme for stop net. It will be in the resource is and then over over at WordPress and in here, you're going to find a bunch off different genres. So let's say that you want to have a theme from corporate. Now, the themes in here are more premium themes. So they are going to cost you. You can scroll down here and look at one of these teams. So you could either go on a site like this and buy a theme. And the benefit with that is that you get a lot of feature with it and have a unique, very unique look to them. Usually you can also google WordPress free themes and find themes in there. So let's say that we find a theme in here that we like. We're going to click on preview, have a look at how it looks like I think it looks really good. Okay, so then all we would need to do is go ahead and purchase it. Okay, so we have already perched a theme. And what's gonna happen next is that you're gonna get on email, and as soon as you have confirmed your email with bought a theme called Restart. As soon as you have confirmed your email, you get to go to the download section off theme forest, then you will click on download here and just download the install a ble wordpress file. There we go. And once it's downloaded, let's head back to the back end of our store and here we are. And what we're gonna do next is they're working like click on upload theme and then I'm going to click on choose file in here and just select this one. Now, if you're not able to choose your file, all that you need to do is go ahead and go to your file and then right click on the file and then click on compress. So what this is gonna do is make it into a sick file. And once it's a CIF file, we're gonna be able to upload it as a WordPress theme. There were goes to now we have the restart dot sip. So let's go back. And then we're gonna once again choose file, and then we're gonna double click on restart dot sip and then click on install now. And once it's done, installing, which might take a couple of minutes, is gonna look like this. You're going to be taken to this page. So now if I go back to themes. We're going to see that the new theme that would just download it is going to show up. And there it is. Here it is. Restart. So all we need to do is now click on, Activate and then it's gonna be activated. Let's go to the front and and have a look and make sure everything worked. I'm gonna update this one. And here it is. Our new theme. Restart. Awesome. So these are the two different ways that you can install a new theme on your WORDPRESS website on. Now, if I want to remove the theme that I just downloaded, all I would need to do is go back to annul theme. Let's say this 2019 the dull one. I'm just gonna activate that one, and then I'm gonna go to restart and then I'm going to click on theme details and then I'm going to click on delete down here and then click on OK and the theme will be deleted. And this way you can keep all of your theme's clean. In other words, you don't have a bunch of themes say that you're not interested in, and you can start filtering between them. Awesome guys. So this is how you install a theme in the two different ways You don't wordpress dot or or you downloaded and use theme forest, for example, Now to follow along in this course, we're going to be using a specific theme. Okay, so let's click on add new theme here, and then we're going to search for theme, and this one is called Ocean WP. Now, this is a great looking theme that is also very easy to work with and has so many different functions to it. So we're gonna use this one, and then we're gonna go ahead and click on Activate and they would go. And now it's activated. And again, if you want to get to the front end of your store to check it out if you don't have the tab open, all you need to do is go to the welcome part here and click on visit site. I prefer to open it in a new tab, so I have both my back in and the front end of my store open. And as you can see here, it is our new theme. It's just installed. Great job guys, so you can, of course, installed anything that you would like. But in order to follow along with this course, I strongly recommend that you installed the Ocean WP theme. And then we're going to continue on to the next lecture and build upon this great job. See in the next lecture. 5. Required WordPress Theme Plugins: Now, if you've been following along the course this far, you will just have installed your first WordPress theme. Congratulations. And if you've been following it step by step, you will just have installed the ocean WP theme. Okay. And as you might have noticed on the top pair, there is a warning sign. This theme recommends the following plug ins, so we're going to click on begin installing plug ins Now. The reason that we need this plug ins is because the theme has certain elements to it that needs the plug ins in order to function. If we don't install these plug ins, the theme is not going to be functioning properly. So whenever you get any theme that has recommended plug ins to them, always install those plug ins. So next up, we're just gonna select these two and we're going to click on bulk action, click on install and then apply, and it's gonna take you to this page, and it's telling us that the install was successful and that's great. So now you're going to be taken to these pages, asked you to run and set up elemental one off the plug ins. We're not going to do that? We're not gonna touch this because plug ins are later on in the course. Okay, You will also have noticed that it's added itself to the left side off our dashboard like plug ins often will do. Now, all we're gonna do is go ahead and click on appearance and click on themes, and we're just gonna make sure that it has no more warning. Sign it. As you can see, it doesn't is asking us to set up Google analytics, and we're gonna do all of that later. So we're just installed of required plug ins for our theme. Not everything is gonna have plug ins that are required, but if they do install them it make sure that the theme works properly, and then we move on to the next lecture. 6. Set Your Title: welcome to the next section off the course. Now it's time to really get down and start building up our website and making it look good . Now in this video, we're going to be changing the title off our website. So let's get right into it now. From here. Let's first have a look at how our website is looking, As you know, before we go here and then I'm gonna open this visit site in a new tab. So this is currently how our website is looking. Not too exciting, Not too impressive yet. But that part is yet to come. So as we can see the title off, our website is currently welcome and as nice it is to be welcome. It is not a great title off a website, right? So we're gonna go ahead and change this title. We're also going to be changing this tagline and this tagline is going to be representing basically what is your website about? OK, so let's go ahead and do that right now. So let's go back from the front and to the back and off our websites. Then we're going to go down two settings and we're going to click on general and in here we have the site title and we have the tagline. So this is where you really want to get creative with your website? What your website is going to be about, how you want to present yourself. Now the site title here is going to be Robin and Esper because it is the name of our company it is the name of for Brand. It is basically how we present ourself and how people recognize us. So we want to go with the site title that is Robin and Jesper Now for the tagline. We want to explain more what the website is about. So since we're going to be selling courses and going to write something like courses to change your life, for example, we're doing courses in business. In marketing, we can help people land a job. We can help people, you know, become self employed can do a lot of thing to change a person's life. So that's how we're going to be presenting ourselves here. So the site title will be Robin and Jesper and the tagline courses to change your life. And I'm going to scroll down and I'm going to click on save changes. Okay, so let's go back and have a look at our site. Remember, this was the old one. Now I'm going to update this. And now this site is named Robin and Jesper and where percent innocent would a tag line that says courses to change your life. All right, so now if you haven't already, it's your turn to go ahead and do this, go into settings and then general, and then find your title. Find your tagline, and then we move on to the next lecture. 7. Set Your Home Page: in this video, we're going to be setting our home page. So what? It's a home page. Well, if we have a look at how our website looks right now at the front off our website, it looks like this. So when we go to Robin and Jesper dots, come the first page that pops up here, that is our home page. That is to go to page. The first page has gone on display. Now, right now we have this a post to the left, and we have a side bar to the right. So basically, we're displaying a blawg. So what we're going to do is that we're going to be changing our home page and build something to represent ourselves, and we're going to move this blawg part to a different section. So let's go ahead and do that. So let's go to the back end off our website in here, and the first thing we're gonna do is click on pages and then we're gonna go ahead and remove these two page that that came with the theme which is going to select them. And then here it bulk action. We're going to click on move to trash and then apply. So now we have no pages, and next up, we're going to click on add new, and then we're going to click down this tutorial because I will be your tutorial. And then we're just gonna write a title. So the 1st 1 is going to be home, okay. And then we want to change the content layout to full with. Now the full with here is going to be removing this sidebars we want to use full with. We're also going to go down and click on title and then where it says display page title, we're going to click on Disable here. Now, what that is going to do is disabled the name. So instead of it saying home here is just not gonna say anything because we don't need to explain that it is a home page is gonna be self evident. So when we have done this, we're gonna go ahead and click on Publish and then click on publish again. They will go and then we're gonna go ahead and click on add New once again. And now we're just gonna call this blogger. It could be article or it could be anything, but it's gonna have the same theme as this one worth displaying your post and is also displaying the sidebar. Okay, so whether there's gonna be articles for blawg posts, that's completely up to you. What you want to create? We're just gonna call it Blawg here, and then we're going to click on Publish and then publish again. Perfect some. Now, when we click on all pages here, we're gonna have to pages created we're gonna have home and we're gonna have blawg. Okay? But still, even if I refresh this page, which is Robin and jesper dot com, it's still going to be showing the same page in here. So what we need to do is set in. You first paid in new homepage. So we're going to go ahead and go down to settings, and then we're going to click on reading. So right now the home page we have is displaying our latest post. We want a static page and a static pages. It's gonna be the same page. It doesn't change. So we're going to click on a static page here, and then we're going to select home as our home page and then for post page. We're going to be selecting Blawg. Okay, so that is where all of the posts are going to end up. Now, if you don't want to have a blogger and the articles or anything, all you need to do is click on selector and you won't have any that's going to solve that problem. But for our intents and purposes, we're gonna have it for this. So we're just gonna select Blawg, and then we're going to scroll down and click on save changes. Okay, Setting saved. So let's go back and then refresh this page, which is Robin and jesper dot com. And now say, Welcome to our new home page. So it's completely blank. It looks dull, which it's supposed to, because we're going to start building something in here. That means that we can put anything we want Teoh represent ourselves the way that we want to. We have also removed the sidebar. So this is our home page Robin and jesper dot com. Now, if I would write forward slash blawg, we're going to be getting to the Blawg part off the site which is here now. I haven't put that out as menu button. Yes, just know that it exists. It exists because it's called blog's. So it's Robin and just don't come forward slash blawg. But right now we don't need it. All that we need is to make sure that we have Robin and jesper dot com We have said our home page. You might also have noticed that the tagline has disappeared from here and that is due to this theme. Now, some themes are going to have the tagline disappears sometimes the title as well. And this theme dust that Now, if you really want to have your tagline showing, I'm going to show you a way to do that because we will be representing ourselves in here with our home page. We can add in that tag line in there. Now, later on, in the course, I'm going to show you other uses for S e o how to properly use to tag link to your advantage. And if you don't know what S CEO is, don't worry about it. We don't need to know it now that's later on. But let me show you how to add the tagline in this theme should you want it. And if you don't want it, you can move on to the next lecture right away. So this is how you do it. You click on customize, and then we're gonna go down to header and general, and then we're going to change the style from minimal to top menu. Now notice this is going to be changing the entire outlook off. Your website is going to be adding a search bar. It's going to be centering your title, and it's going to put the tag line right down below. I think it is a really nice look. And whether you choose to go with this one or the original, which is minimal, that's completely up to you for us. We're going to go with the minimal to continue on in the course. And when you're all done, all you need to do is click on publish. Okay, guys. So we just said our home page. Great job. Let's move on to the next lecture 8. Introduction Guthenberg: Okay, guys, great job on making it this far in the course. Now, before we move on and start editing our home page, making it look all good, we're going to be learning about the post and pages editor called the Gutenberg editor. So let's dive right into it. Now. All I have done here is that I at the back end off or website have gone to pages and then add in you. So this is the editor. This is the way it looks like. If you are old time WordPress user, you're gonna notice that it looks a little bit different because wordpress completely changed the editor in December 2018. And if you're completely new to WordPress than awesome, because this editor is much more enjoyable, easy, intuitive and more fun to be using. So let's get started now. The first thing we want to do before we go ahead and start adding and learning is to have a look at this ocean WP settings. Now, these settings are unique to our theme, meaning if you don't have this theme, you're not gonna have these settings in here, so we're not going to use them for now, So I'm gonna click up here and just collapse it like that. And then let's go ahead and add a title. Now, this could be in a title for any page. We already made a home page. We could just call this about about me. Page just essay test. Now, the first thing we're gonna go through is we're going to start at the top. Pair up here. We have something called adding a block. Now, the beautiful thing with this editor is that you're going to be working in blocks. A block is basically any type of content. It could be a paragraph on image reverse. It could be a column, A button. It could be a gallery, anything. So we're going to be working with blocks throughout the editor, and we're going to be adding our content within that block, but blocks, we're gonna go through more in depth in the next lecture. We're also not going to be spending a lot of time with this bottom because if we go down here to the block itself, noticed that we also have the same button here to the left. And this is much easier to use because you always know what kind of content that's gonna appear in which blocks. So I always use this block to the left in here, and I I think you're going to be enjoying that as well, then to the right off the add content up here we have the undue which is very handed to have. Basically, if I write hey, I can undo it. And then to the right, I can redo it. A great feature to the having. We also have something called content structure. If I click on it, we get to keep an eye on the world. How many words we have been riding. How many headings, paragraph blocks Really great. Especially if you want to limit the amount off worse that you using in any certain post or article and then to the right there we have something called block navigation. Now, when you started building your articles or posts or pages in here, you're going to be getting to the block navigation and you can instantly access any part of it. So if we have a lot of images on the bottom, we're going to see that in the block. Navigated, weaken, double click on them, and we're gonna access them right away to the right Here. We can also use the elementary editor, which is one of the plug ins that came with the theme. But we're not going to be using that. And let's move on to the right here. We can save the page as a draft. Meaning you can continue working on it without it being published. If you wanna Billy big, nice page article or anything, you can say the draft. Close it down, Come back work, born it. And keep saving the draft. Now, if you want to see what it looks like right now, you can click on the preview here. And when you click on the preview is gonna open in new tab for you. And in this tab, you're gonna have a look at what it's looking light like right now. So this is the current preview. Not too exciting, right? So we're gonna collect that one down, and then to the right, we have published, we click on here and we publish this page. And then we also have these settings. We can choose to turn it on or off in here. Now we're gonna basically having this on all the time. We're going to go through this in just a second to the right. Here. We have even more tools and options, and the first thing we have is the top toolbar. Now, notice if I click in this block now, this is currently a paragraph block and I've write something. Hey, hey, you're gonna notice that we get a tool bar up here, right? It's very easy to access. It looks really nice. But if I go to the options and I click on top toolbar, watch that toolbar and notice that it pops up to the top up here. Some people are going to be preferring having the tool bar up here. But me personally, I prefer to have it where I'm riding. I think it's easier to access. And then we also have the spotlight mode, and basically, the spotlight mode is gonna just like that. Is gonna put a spotlight on wherever it is that you are working. So if I'm working here working here now, this is gonna be in a more focused color, and everything around is gonna turn to gray, right? So if I turn this off, We're gonna notice that it gets to its original color. It's just easier way to be focusing on. And then we have the full screen mode. Now the full screen mode can be really nice because it covers the entire screen. It removes distractions. It allows you to work in a really focused kind of way. And I enjoy using this feature. You might ask Well, and then we have something called a visual editor, which is what we're using right now. But there's also a code editor. So let's add a piece of text here once again, we're just gonna right? Hey, and then I'm gonna turn go from visual editor to a code editor, and look what happens. It turns this entire piece of text that I had into a code. So when we're working with the visual editor, we don't actually see this coat. The code is just doing its work. And like we were talking about earlier, this is a paragraph and that's what showing in the code. We're going to be working with codes at different parts in the course. But don't worry about that, because it's most of the time. Just copy, pasting which is super easy coast are not scary. I promise. I don't work with coding. I just cope it pay certain pieces off code, and that's what we're going to be doing in the course. So let's turn this one back to visual. There we go and remove this sticks and then under tools, we have managed all reusable blocks. So when you started adding pieces off content, you can actually save down those blocks. So if you then click on here, you can go ahead and have a look at all of your say blocks and start reusing them very handy feature. And then we have the keyboard shortcuts. Now, since I'm using a Mac, I'm gonna have these interesting command bottom. But if you're on a PC, it's gonna look a little bit different. Now, these are the short custody, different things you can be doing. For example, duplicating the selective block, removing the selected block whenever you want to go. Really official. You can learn a couple of these shortcuts for the things that you used the most, and then we also have Kobe all contents. All I do is I click on this bottom to copy all of the content that is currently on the page and then we have options down here. Now, the option part is going to be allowing you to show which one off these features that you want to have included. So if we go into the option, you can see, for example, at the panel the document panel were currently showing the Perma link to feature image discussion and page attributes. Rights were also using advanced pounds for the Ocean WP theme settings, which we just collapse that little bar. Now, if you want to go really clean, you're not gonna and you know you're not gonna use this ocean WP set things. We could just remove this one and you see that it disappears. We're not going to bother about custom fields because that is about coding. And also, if you're not going to be using these for a while and you're gonna be writing a big page or a big poster article, you might want to remove this because it makes things so much cleaner. Also, when we start using plug ins, they're gonna take up some space. So this is a way to de clutter whenever you're working on anything, Then on the top here we have the enable tips. So if you want a couple of tips along the way, you can enable this and it's gonna pop up along the way. And then we have the enable pre published checks and what that is It's basically this part over here. So if I click on publish right now, you can say that is asking me, are you ready to publish? And it's also telling me the kind of way that I'm publishing it is gonna visibility is gonna be public, and I'm gonna publish it immediately. So if I go to options and I press this one away, then it's just gonna publish it right away. OK, so that's the pre published checks and then we have two options. We have the blocks and we have the document and we're gonna go over blocks in the next lecture angle, really In depth into those here in document. We have a couple of things that we can change. The first thing would be the visibility. So when I publish this, what is gonna happen? Well, right now we have it set to public, but we can also change it to private meaning. It's only gonna be for the admissions and people with access to the word precise, or we can have it password protected, meaning Onley. Certain people with the password can go ahead and read whatever this that you have written , and then we have the publish. When do you want to publish it? Now you can back data it. You can go back and have it look like it's published in January. For example, if you have any sort of historical articles order, it's a relevancy to having it publishing on earlier date. You can go ahead and set it like that. You can also put it in the future, making sure that is going to be published in, Let's say, a month in a week or in a day and then set the time and everything here and then we have depending review, meaning, if we put this one on is gonna be up for review and you have to allow it before it's published. Okay, and then we can move it to trash. If we would like that and then we have the Perma link and the Perma link is basically the U R l Now, if you remember when we were checking out our website and we wrote Roman and jesper dot com forward slash blawg Now, that took us to the Blawg part off the website. Now here. If I publish this page and it's gonna look like this about and then dash me so then it's gonna be Robin and jesper dot com forward slash about dash me. Then they're going to get directed to this about me page so we could be changing it. We could write, for example, info. So then it would be Robin and just not come forward slash info, and they would get right to this page. And you also get a preview down here. You can access is and check it out. Okay, so I'm just gonna have it like that. And then we have the featured image and a feature image is, for example, if we're making a blood post, then we can set a feature in mixed. It's going to be representing that block post we consider featured image for this page. Maybe a picture off me and Jesper, or maybe a picture off on admin or a picture of me or a picture of Jesper, for example, or a picture off you that's going to be representing this page or this post and then a discussion. We can allow or not allow comments to be made. And then we have page attributes now with a lot off the themes. We have different templates. So, for example, have the elemental cameras elemental, full with, and we can make it into a landing page. If you have a different theme, it's gonna have different templates in here that you can just changed outlook of this, Um, and then we have the parent page. Now a parent page is basically, if you want this to turn into a child's page, So what a parent pages is the top page. Let's say that we are selling a service. Let's say that we're selling coaching. Then the coaching would be the parent page and a child page might be prices for the coaching. Booking for the coaching would also be a child page, dates, location. All of these additional pages that kind off are connected to the coaching would be child's pages. So for about me, it might be things like we could make a child's page For about me. We can also write about Austin. We can make a child's page for an admin for a Web editor for Jesper for me, etcetera. And then all we would need to do is choose which one is going to be the parent page. So if I pick home right now, then this is gonna turn into a child's page, okay? And then we have the order as well. Which number you want it to be in when it comes to being a child's page? So those are all of the settings right now, we have gone through the top right here, and also the document how to preview publish everything. Now, in the next lecture, we're going to go through how to use the blocks. Now the blocks is gonna be the fundamental aspect on how to make your page and your post look really, really good. So let's move on to the next lecture and learn all about blocks and how we can design our pages and posts. See, in the next lecture, guys 9. Pages, Post Editors & Blocks: Alright, guys, let's continue learning about the pages and Post Editor. And now let's learn more about blocks. OK, so we're back here. We're still at the same test page that we created, and we're going to start going through what blocks are and how to use them. So this is a block and a block is basically going to contain your content. So whatever content it is that you have here, that's going to be putting a block four months, so if I write a piece of text there, for example, piece off takes, then this would be the first block. Okay, Now, if I wanted to add another block, all I would have to do is click on Enter and I would be creating another block down here. Okay, so this is the first block up here, and this is thesis unblock down here. Now, if I want to add a block above, I would just click on the plus here, and it's gonna add a block up above, or I could go and click on this one. It's gonna add a block down below. OK, so what can you do with a block? Well, the first thing you can do is choose what you want your block to contain, what kind of content that you want to be using. So if we click on the plus here, ad block, the first thing we can do is that we can search for any specific block. So, for example, if you want to use a call them I concert for call them, you're gonna have it right there. If I want to have, For example, I want to embed YouTube. I could you serve for you to be gonna get the embed right there. So once you get accustomed to this, you're going to be using the search function a lot because it makes things this quick. It's absolutely awesome. So let's go through the different types of content you can have in your block. So the first category here is the most used. That's a paragraph heading image basically the most common ones where the gallery verse archives, quote button, columns, etcetera, etcetera. Now, we're not gonna be going through all of these because they would be taking forever. But along the course, we're going to be using a lot of them. I recommended to experiment with a lot of these see how they work and function. But we're gonna go through the most common and useful ones and then scrolling down. If I click here, we have something called in line elements. So on in line image could be, For example, if you want some text to the left and an image to the right, we could be using an in line elements in here. Let's collapse this one as well. And then we have the common blocks and most commonly used. And that's gonna be the paragraph two heading the image gallery quote list, audio cover file or video. So, in other words, if I would click on video here, then I'm going to get to add the video and in that particular block is going to be displaying the video that you uploaded. And then we also have formatting and former thing. Could be if you want to write a verse if you want to add a piece of code, and also we have the classic editor and this is for your old time WordPress users. So, like I told you in the earlier lecture, this is a new editor. If for some reason you would like to use the classic one. You can go ahead and click here, and within that block, we're going to be having the classic editor. So if you have an old WordPress with old plug ins that you still want to be using that are not functional with this WordPress, you could go ahead and activate the classic one and then get those plug ins to work. If you're new to WordPress, chances are we're not gonna touch this. We don't need it. We have custom. HTML, which another form off coding that we're not gonna use if we want the same form a thing for everything. Within this block, we would use the pre formatted. We can use a pull quote, which is gonna make the quote within the post frame. There's another one for quote up above. That takes up much bigger space. This one, it's more narrow. This was called a pull quote, and then we have a table and the table could be if you're offering, for example, different prices for a certain product for different functions. Like when we signed up with Blue Host, for example, if we got the basic with the premium package in there were more packages. Basically, by using a table, you could have different package deals with different prices. So there's a lot of very useful things that you can add into your block that makes this so easy and intuitive to use. And then we also have the layout elements. You can addy bottom, for example, he by now bottom several columns. Media takes mawr page breaks separator, spacer basically that it fixed the layout that you can tell. There's a lot of good stuff in here, and then we have widgets. Now a widget performs a specific function within the box. So if I would use a archives widget than the entire book is going to be displaying the archive. And if I used WP form, for example, is going to be displaying the WordPress form, we could, for example, use a contact form widget. Then that entire block would turn into a contact form that we could be using a short code categories or latest comments. So within that block it would always be displaying the latest comments. And then we have latest post, so we just always performs a specific function for that block. It changes the entire block into that specific function. And finally we have embeds. And this makes embedding so easy and so simple. Like here. For example, if I wanted to add a YouTube video, all I would do is click on YouTube here and then add in that link that you to blink and then we would have the YouTube video up and running the same with, for example, Instagram or Facebook. All I need to do is putting, for example, willing to the post. And then the post is going to be displaying within the bloc. Super easy, super fast. And there's a lot of different embeds in here, as you can tell like Ah lot. Okay, so let's go ahead and actually add one. Let's go to common blocks and we're going to add on image in here. So in order to add an image as you can tell, it just changed the entire block in here. All I'm going to do is click on upload, and I'm just gonna choose an image lists. Let's choose this one so there's gotta find a picture off me, and just for that we've got a while ago, so humor me for a second while I'm using this. So as you can tell, we just change this block into an image block. And if we look at the previous one, this would be a paragraph block. Okay, now that's the most basic. If you just ride in the text and you don't change anything, that's a paragraph block. So that is a very easy way to be editing the blocks. Now, if we go to another block down below here and we move on to the right, you can see that there are three different I comes in here Now these icons are dynamic. What that means is that they're going to be displaying the latest used blocks if we have been using. So if I'm adding a lot of pictures and doing a lot of headings, a lot of paragraphs, then they are going to be displaying here. So we get easy access to them, which is a really useful and makes the whole editing a lot faster. I love this system for that. So these three are always delayed, this use content type, and then if I click in on this block, you can see that there are a couple of things that we can do to the block now. The first thing would be we can actually change this block type and we can transform it into a cover into filing to media and text. Now, because we're using an image, we can transform it into similar blocks without ruining the block itself. Now the other things we also can do is that we can, for example, aligning to the right middle left. We can also make it wider like this, and we can watch it in its full with we can add it the image and more. Interestingly, we have more options in here, and the more option is going to be different, depending on what kind of content that you have in your block. So in here, for example, I could be hiding the block settings. I could duplicate it. I could insert a block before then. It's going to be inserting a block up here. Insert a block after is going to be inserting a block after and I can add it as HTML and I can add to reusable blocks and then finally I can remove the block. Now, if you remember this ad to reusable blocks. If we added in there and then we go to the options in the upper writer and then to manage all reusable blocks, then we get access to all of this kind of saved blocks that we went through in the previous lecture. Okay, so I also want to show you another function. Now you'll notice that there's a lot off point and click in here. In other words, it's super simple to choose what you want. Click on it and you have it. But there's also a drag and drop function. So if I click on one of the content blocks like in this picture and we look to the right, we can see that we have something here called Block, and this is going to allow us to edit the block, specifically the one that we have targeted. So for this image, for example, I could be adding in on alternate text on alternate text that is to describe what the pictures for the search engines. More about that later, I could change the image size three thumbnail size to full size or medium. I could change the width and height. I could link it to somewhere, and I can also go into advance for CSS. Now, that's the code, and we're not gonna need that. But my point here is that if I click on a block and I go to the rights here, this is why we always have these settings activated. If I click on a block and go to the right, I can edit the properties off the content off that block. So if I go to the paragraph here, notice how the block changed now in here, I could be changed in the font size. I could be changing more specifically in here. And interestingly, I can also add a drop cap making the first letter really big like that. We can change the color settings and we can also add the code here Should we want that? So in other words, you click on it and you can change it. You can also customize this size like this for the image. Basically, everything is just point and click. Now, there's also a dragon drop function within this. So let me show you how effective that is. Now if I want to add a block in between these, the piece of takes the paragraph, in other words and the image all I would do is I'm gonna click on the plus here, and then I'm gonna add in a heading. And then I'm gonna call this a piece off heading because I'm very creative. As you can tell now the order here doesn't make sense. Right. So we have this paragraph, we have the heading in the middle, and then we have this image down below. So if I want to change the position off, let's say the paragraph here and I want to add it to the bottom. Then all I would need to do is either I hover my mouse over here and I click on the down arrow and it's gonna move this down. So if I just click on it like that, I'm gonna move it all the way down to where I want it now. The second way I can do this is that I can put my mouse to the left here where we have the six dots and then I click and hold, and then I can just drag and drop it where I want it. So let's put it in between here and this is what makes it so intuitive and simple to make pages and to make post with this editor. It's highly improved from the previous version. So let's go ahead and put that one back down here. They would go, so it's super simple to use now if I want to remove a block, all I would need to do is that I click on the block. I go to more options here, and then I click on a remove block. There we go and the same here. Click here and remove block and same here. And then I click on a remove block, and then I have removed all off the blocks rights. So now we know how to use this editor and the many different functions in it, and basically here the sky is the limit on how you use it and how creative you get. But the most important message here is that it's actually super easy to do and very intuitive. Once you learn the function, you can just point and click and drag and drop, and you're going to be making beautiful pages and beautiful post in no time. And it's a lot off fun. OK, guys, let's start using this knowledge that would just learn and start building our home page See in the next lecture. 10. Edit Your Home Page: Okay, guys, it's time to start applying what we have learned and start editing our home page and make it look good. Let's get right into it. So we're going to start off at the back end off our website here, and then we're gonna go ahead and click on pages and go to all pages here. Now, what we can do right away is to hover a mouse over about me and then click on trash because that was just a practice patient we created to check out the editor. Now, what we're gonna do is that we're gonna go ahead and we're going to click on home because that's our home page, and we're gonna make it look awesome. So let's click on home. All right, So to get you up to speed, remember what we did in the previous lectures. When we said our home page, we use the ocean WP settings and we made sure that the content layout has a full with meaning. We remove the right side bar, and we also went down to title and disabled it so that this home isn't being displayed on the page itself. Okay, so that's all we're gonna use the ocean WP set things for. We're just gonna collapse this and then not use it anymore. All right, let's get started. Now, in order to speed up this demonstration a little bit, I have a pre written text here that I'm going to be using. Okay. Now, for your own purposes and intense you can be writing asks you make your design for your home page when it comes to designing a home. Pacers? No. Right or wrong, there are so many ways of doing it. And you can I'm sure make it look much better than me now that you have the tools to do So . So what I'm gonna do is that I'm gonna start up by copying this piece off text they were Go command, see? And then I'm gonna go back. So the first thing I'm gonna do is click on this block hair. Remember? It's already a paragraph block. I'm gonna click here, and I'm just gonna pasted in. Okay, so here we have the first piece off text. Now, before I move on, I would actually like this piece of takes to be a paragraph and I would like this to be a headline. So what I'm gonna do is I'm gonna click away. I'm gonna put my mouse and then click on the ad block so it adds a block above and then I'm gonna click on heading and then select this piece of the text. I'm gonna cope it and then remove it from here. There we go. And then I'm gonna go back to this block and just paste it in. OK, now I'm also going to center it. So I'm gonna move on to my right. I'm gonna send to it, and I'm gonna make it a heading one. Now they lower the heading number, the bigger detects is going to be OK. And I want this headline to be big, so I'm gonna use a heading one. There we go. So there's no greater joy than watching beautiful testimonies of people achieving their goals and dreams. Awesome. Next up, I want to add in a picture, or rather, two pictures off. Our course is to show off what it is that we have to offer on our website. Now, remember, a home page is meant to be displaying what you're all about. OK, so I really want to show that first off, we're making courses. And also secondly, what kind off course is it is that we're making? I'm gonna put my mouth. I'm gonna heat enter, is going to create a new block down below, and then I'm going to click on the plus their adblock, and then I'm going to search for gallery there ago and add that one in. Okay, so the 1st 1 I'm going to add is a picture off Shopify or Shopify Course Rather. So I'm gonna choose this picture and just double click on it. And then I'm gonna let this one load up. There we go. And then I'm going to click on upload an image again, and I'm going to select the one from digital marketing course. There we go. Awesome. Now notice the order off. This image is the first when I upload gets put first, and then the second picture goes to the right and then the next, and then the next. Should I want more pictures? But I don't. So what I want to do here is that I actually want to make them bigger. I want to make them wider. Gonna go ahead and click on wide with. So they take up more space and then I'm also gonna click on them, and I'm going to write a caption in here, and the capture is going to be something that describes the picture. Okay, so here I'm going to write. First of explain that it's a course on what the course does. Start your online business with show. If I okay, and I'm gonna do the same here with digital marketing when I click on right caption down here and then I'm going to write learn market research, how to attract on audience and how to sell. There we go. So this is what we have created so far. Now, let's have a look in the preview how it looks. Remember that we have already published this page. Their home page is published, so we can't just click on preview. We have to update it first and then preview it. What we could also do is click on switch to draft to be editing it right there instead of just keeping the update. When you update it, it goes live instantly. But we're gonna do this for this course, but we're gonna do that for this demonstration. So I'm just gonna click on updates and then I'm going to click on preview. So this is how it looks like right now. I think it looks really nice. Now what I would like to see is this text being bigger and also this text being centers. I'm gonna go ahead and do that. I'm gonna go back to the editor. I'm gonna click in here, and then I'm gonna change the phone size from normal two medium, okay? And I'm also going to align it to the center. I'm going to click on updates and then I'm gonna click, come preview, and then we're gonna have a look at how it looks right now. There we go. OK, I think it looks really nice. I'm happy with this. Let's continue adding some more material. So I'm going to go back here now, remember, with the design, there's no right or wrong here. This is the way I am designing this home page. You can follow suit and do similar, or you can find your own design is completely fine now that you know how the editor works. So I'm going to go back to the text and I'm going to copy the rest off this text here, Command. See? And then I'm gonna go back here. I'm going to be clicking on this block and just pasting it in. Now. Notice what happens when I paste this in. What happens in here is that they all turn into separate blocks. This is super handy because it means that you can edit them block by block, piece of text by piece of takes. You can also change the order off them Should you want that. Okay, so what we're gonna do is that we're gonna leave it like this for now except that we're gonna align them to the center because I know that I want everything in the center. So all I do is I click on the box and I click on a line to center Click, Aligned to center, click aligned to center. I'm gonna miss say, if I keep saying that And there were click and ally into center. Everything is aligned. Everything is looking nice, I think. Let's stop guessing and instead update it and preview it. Ok, guys, this is actually looking really nice. I'm enjoying this. Look now There's just one thing. I'm missing rights here, and that is something to make this a little bit more personal. And that would be a picture of me and Jesper in the bottom here. And then I'm actually going to be really satisfied with this. So let's go ahead and take care of that right away. Let's go back, scroll down here and then down here, I'm going to click on the plus sign and I'm going to add on image and going to click on upload, find a picture off me and Jesper. There we go. And then I'm going to change the size of this. Now this is way too big. So I'm going to click it and just make it smaller. Actually want this really tiny ever go, and I'm going to be centering this one as well. All right, there we go. And then let's click on Update and then have a look at how it looks like scrolling down. And there we are. Okay, so let's break down What we just did. We have a headline that attracts our audience. We're passionate about teaching so instantly we get into on emotion, passionate, and we get into what we're all about. We're all about teaching. OK, so the question is, what's in it for me? There's no greater joy than watching beautiful testimonies off people achieving their goals and dreams. Oh, well, I have goals and dreams. Someone visiting your site would say, Then we're gonna display The courses were offering starting online business with Shopify and learning market research, how to attract an audience and how to sell when it says digital marketing here also to explain what it's all about and then what? We're offering what's included in the course, and then we're ending with something personal love, Robin and Jesper and a picture of us. Now you can use this template for your own home page using Nice header that explains what you're all about. Then describe it in further detail, something to explain or show what you're doing using one or several pictures than what's included in there and then end up with something personal. Picture off yourself or a logo, for example, off your business. But I recommend something more personal, like a picture off you, or the staff of your company, etcetera. Okay, so this is how you design your home page now, like we spoke about in the beginning. If you haven't written your text already, then just do. So as you're creating this home page in the next lecture, I'm gonna go through how to find great d sign. Resource is, you might have noticed that I already had a picture or for Shopify course or digital marketing course in a picture off me and Jesper. So what if you don't have any pictures at all? For example, these nice pictures. Well, in the next lecture, I'm going to show me where you can find these pictures and for free. And then you can start making your own home page. So don't move on in the course until you have finished your home page. Watch the next lecture, and then make sure that your home page is all set and done, and then you can move on in the course. Okay, guys, See, in the next lecture 11. Designing Resources: So in this video you're gonna learn where to find great D sign. Resource is now. If you remember from the previous lecture, I already had a couple of nice images to use. Now, if you don't have that, you want to have a couple of sores where you can find great looking images and use them. The problem with using images is that they need to be royalty free. You need to own them in order to be using them on your website, especially if you plan on making money from that website. Okay, so I'm going to show you three different great resource is, but you can find different images and this signs to be using for your home page for your website overall logo or even just your posts. Okay, so always keep these three in mine. Now, the 1st 1 is picks obey dot com. I'm gonna put that in. The resource is now. This website is absolutely amazing. All of the images in here or royalty free, you can search for anything. Find the image like in downloaded. So let's start for coaching. For example. Let's say that you're selling a coaching service. We can scroll down here. We can see if there's anything that's fit sing with with what you're doing. Look at this, for example. So we have the goal options. Reality will do coaching. So let's say that we like this one. Then all we need to do is have a look at the license. Now this is free for commercial use, no attribution required. Basically, all of these pictures are, but just to make sure, check these ones and then you click on free download and then you pick the resolution want and click on download, and it's all yours. Okay, so that's picks obey, and you can search for anything. You may also want to be using the filters. For example, if you want to have a transparent image or if you want to use Victor graphics, etcetera, etcetera. Now the next page is canvas That come is also gonna be in the resource is. So what's so great with can mother come is that you can edit the images on their website. So let's say that we want to use a nice image for a WordPress for a post, for example, on our website, so I'm gonna first of all choose in design. If you want to see all of the possible decides to just click on, created the sign, you're going to be shown all of these options. Now what you're seeing here are just different sizes or rather different formats. So let's say that we want to use the social media former, which is 800 times 800 and this one usually worked really great. I'm just going to click in here and you're going to get a bunch of different templates that has that size. Okay, so looking to the left a week at a bunch of different templates that we can scroll through until we find something that we really like, and we can also off course, like before, search here. So let's say that we want to have an image off coffee, for example. Let's search for coffee, and then we get a bunch of nice templates here for coffee, and then we can just click on Let's click on that one, and also note that the ones that say free on the bottom here, obviously they are the free once, and we don't need to pay for this. Just stick with the free ones unless you find someone you really like. Of course. So the great thing with Canada here is that you can go ahead and start editing the image right away. So all the idea is that I clicked on this image that I really liked, and then I can start editing different parts. So let's say that I would like to move this. Well, I won't assume in a bit more. There we go. I think that looks a bit nicer. Gonna change that? This piece of text just clicked on it. I'm gonna write Who doesn't love coffee. Let's say that this is an article about coffee right on here. Says it's always coffee time. Top 10 benefits off. Drinking cough. There we go. Now, this could be a featured image. This could just be in your post. This could be basically anywhere. The point is that Canada is so useful because it gives you a bunch of different temples and you can edit them straight away. And then you get a bunch of different tools like the phones the size. If you wanna use, you wanna center spacing, etcetera, etcetera. And then when you're all done, all you need to do is click on download and then download S P N G. You can also use others, but I recommend P and G's because it's the highest resolution size and then click on download and it's all yours. Okay, you do need to sign up for Canada, but it's so well worth it. We use it all the time, and then finally, we have a fiver. Now, fiber isn't freeze the Onley option here that isn't free. But if you want something super specific or you want a logo, for example, or something specifically designed, this is the place to get it. So all you need to do is go to Fiverr. That comet's gonna be in the resource is as well. And then you would search for, for example, graphic this signer, and then he'd search and then go to the writer. It's a sort by and we're gonna change from relevance to best selling. And then we can start wading through the different designers here and pick one. Generally, you don't need to pay more than $5 for a nice design. Okay, so we're just gonna look there. Let's say that this one looks nice we can check through. Well, these one looks really good. Yeah, Liking what I see I can click on on this person. I can see what's being offered with the basic kit. Maybe I want this standard because you get the source file. If you, for any reason, would like that for your own editing if you are a designer and you can go the premium. But for our intents and purposes, we will go with basic click on, continue right to him and explain to him what it is that we want and notice these unlimited revisions, which is awesome. So if you want something super specifically use fiber. And for all other purposes, I would go either with picks a day dot com or with Canada dot com. With these two. Resource is, you'll have an amazing library, both for post pages for your websites for the logo. Basically, for everything that is WordPress and website related. So used. This decided resource is finish your home page before you move on in the course, and when you have designed your home page, then we move on to the next lecture. Awesome. See you there, guys 12. Set Your Custom Menu: Okay, guys. So in this video, we're going to be setting our custom menu. So if we have a look at our page, how it looks like right now we're gonna do is go to the upper left click on visit site and open it in a new tabs. We always can refer to it. Now we also know that we have a blogged, but we can't access it in order to access the blood. We have to write Robin and jesper dot com forward slash blawg. What I would like to do is create a menu in here to gain direct access to the blawg to our home page and then add a couple of extra pages. So let's go ahead and create this menu. Let's go back to the back end off our website and start off by going to pages. We can just click here, and it's gonna display all of our current pages. Now we're gonna go ahead and create a couple of new pages. There are actually three ways to create the new page. You could click add new here, you can click, add new here or the fastest way would be new here and then just click on page and it will you choose to do it. We're gonna add a new page, and we're gonna call this one contact because we're going to want a contact page and then we're gonna publish it, and then we're gonna click on Add New and this will be our about page, and we're gonna publish this one as well. And let's use the third method as well. We're going to create a new page, and this is going to be our courses page right. This is personal for us because we will be selling and advertising for our courses on this website. So for you, if you're doing some sort off coaching, for example, you might want this one to be called coaching or maybe price, or if you're selling products, you want to create a product page, depending on what you're doing and what you have, you're going to want to create pages that are designed and unique for you. So this will be courses, and then I'm going to click on publish. So there we go. Now, if you look on all pages, we should have a couple of extra wants. Yes, indeed, we do have 1234 and five pages. So let's go ahead and create our menu. So all we're gonna do is go to appearance and then click on menus here. And the first thing we want to do is we want to give this menu a name. So let's just call this so main menu and then create menu. So this is only for you to see, so you know which menu this is. Okay, so the first thing we can do is that we can add in the pages. Now, these are the pages that we just created, right? So we want to add in all of the's. So what I have to do that is, click 1234 and five and then click on add to menu. Okay, so now we have all of these pages in the menu, but we haven't decided which menu to use yet. There are a couple of display location with use. We can use the top bar, and the top bar is actually on the very top up here. This is the top bar. Then we have the main, which is gonna be down here, the one we're gonna use. And then we have the foot, sir, which is in the bottom, off the page. And then finally, we have mobile so that we can customize it and make it look better. For people access in this through a mobile device, we're gonna use the main one. So we're just gonna click here and then we're going to click on save menu. Because now when we have saved this, when we have picked our pages and we have picked a display location, we can actually see these menus on our website, and then we're gonna go to the front off the store and we're gonna update this page, and here they are, there are outlined like this. We just created these pages and now we created a menu for them. That's awesome. So let's go through a couple of extra things that we can do here now. We just added pages, right. You could also be adding posts to be showing up there. Right now, we only have Hello world. We haven't freed in any post yet, but it's the same thing you collect, gonna click on add to menu and you put it out. And then we have custom links as well. So, for example, I could be linking to our YouTube channel, right? So I would write YouTube dots, come four slash robin Jesper, which is our YouTube channel. And then we have the link text. We could call it tutorials because we have tutorials on there and then click on add to menu . And now, when I saved this menu and then go to the front of our store and I'm gonna update, this s well, you can see that now. We have tutorials here. So if I rightly can open this in a new tab, this is gonna take us straight to our YouTube channel. And here we are, so we know that it works. Perfect. Now we can also add, for example, categories. It will click on this one. We could add a certain category we haven't created any yet, so we won't be adding any and we can. We also have the menu. I come settings, and these are different styles off icons. And I'm gonna show you just in a second how they work and what we use them for. But here you can decide on which difference does that you want to show up as an option. Okay, so let's go back here to the menu that we just created. Now, First of all, I don't want to have the tutorial, so all I need to do to remove it, it's click on this one, which is going to expand it, and then I'm gonna click on a remove here. Now, I also want to change the position off the many how it's ordered. So all I need to do this is just drag and drop. I'm gonna pick home and I want that one to show first. And then I want to show courses I wanted to show blawg and then about and finally contact. Right then all I need to do is click on save menu and this is going to be the new order. Go to the front of our store, update this and check out the order here and we can see that now It has changed. Perfect. Looking much better. Now there are additional things that we can do with our menu. For example, we could be creating sub menus. In other words, if I would like home to be a main menu and I would like courses to be a sub menu. All I would do is drag and drop it to the slight right underneath that menu. So all I do is I grab it and I move it to the right. Now, if I want the blood want to be sub menu for home s. Well, I'm gonna do the same. Move it to the right. So now, if I save and I go ahead and update and then updates here and have a look, we can see that there's no way Drop down icon on home. And there we confined courses and there we can find blawg. Okay, so this is called a sub menu when you create a drop down menu like this and this is gonna be excellent for us when we have courses in here and we want to be displaying or different courses in a drop down menu, for example. Or if you're selling certain products, you could have different categories in the drop down menu. It's perfect. So let's go back and let's go ahead and put these back in order. So more things you can do. For example, if I click on home here and expand it. The first thing we'll see is a navigation label. What do you want it to be called? And for us? That's home. And that's why we named it home. That's gonna be the navigation label as well. We could change it to another name if we wanted to. And then we have something that's called Disable Link, and the disabled Link simply means that if you click on it, nothing is going to happen. So a good use for disabling the link, for example, would be using a drop down menu. So if I'm on the website right and I have a drop down menu right now, if I click on home is going to be taking me to the home page. But if I click on Disable Link, then nothing is going to happen when I click on home. So you could use this primarily for the drop down menu, and this is just going to show what the menu it's about. It depends on how you want to be using the menus for your own purposes. So let's go back now. We're not gonna disable the link. There's also something here called Mega Menu. There's a pretty fancy name. Now what a mega menu is is basically a really big menu. So a good example of this is Starbucks. Now Starbucks. Here they have a mega menu, and it looks like this. You can see why they call it a mega menu. It's absolutely huge. It covers basically the entire screen here, and you get a lot of different options. Now. The benefit with a mega menu, especially if you're selling products, is that you can have a bunch of different genres or displaying all of your products in a single menu. Okay, so in order to create a mega menu, all you would need to do is click on this one, enable mega menu, and then you would be dragging the courses down below like this. And now you notice that there's a additional option in here. Now you get to create more menus, so this one is right below home and this one these two are right below courses. So now if I go ahead and save the menu and then go to the front of the store and update it , you can see that would just started creating our mega menu. Now we can add in different columns here as well. So they're going to be displaying, for example, over here. And we can even add in a footer like Starbucks did. If we have a look at their many, once again, we can see that they have a footer down here where they also have clickable links in their menu. So let's go back and we're gonna put these back into place, and then we're gonna go into home and we're going to disable mega menu by clicking it off. And then we have mega menu or two with. Now, as you notice, the mega menu right now is huge. But if I go ahead and I click on the mega menu Auto with, it's going to size itself more to the page and become a much narrower menu, okay, and then going down, we can decide on the amount of columns that we want from the mega menu. Having a look at Starbucks. They have plenty to have 123 and four columns and a 50 year where they have added in a widget. And then we can also hide them mega menu heading if you don't want the heading for each label in the mega menu. Okay, now we come to the icons. Remember, we're talking about the menu. I consent things here to the left. Well, you can select. I comes for all of your menu items. So if I click on selector, you can see that we have elusive and simple line icons. So we could choose a picture to go along with the name off the menu or remove the name off the menu and Onley use a picture. So, for example, if I had a log in to my website, I might want to use a symbol like this one, for example, a lock to show that you're gonna log in. Well, let's say that you have a download section on your website. For example, you could be using this sign just to show it that this is the download section with the menu named download or without the menu named Download. This depends on your design and your style, and also, of course, what your website is all about. But we're not going to be using any off these, and then finally we have the original where it's linking to, which means that we could have a different navigation label that's going to show a different name on the site. If I change the name that. So let's close this up. Let's just make sure that everything is saved and then we're gonna go and have a look at it . And then let's go to the front of our website, updated and have a look, and it looks awesome. It's just the way I like it Now, if you want further customization to this, for example, the color off it when you're hovering over, do you want it to do have some effect when you put your mouth over etcetera. There are more customization that you can do so all you need to do is be at the front of your website and click on Customize. This is what I come up here. So let's go ahead and click on it and we're going to end up with this interface. So what we want to do now is click on Header and then we're going to click on Menu and here we get a couple of different options to further customize our menu. And this is live customization ass. Well, which is really nice Now, the 1st 1 is to select any templates. Should you have one, or should one come with your theme and then we can select if you want. In a top level, second level were dropped on top border for the icons or border. We're just gonna have all of these Check. We're not gonna play any with them. And then we have the position off the menu itself. We could center. It looks really nice. We can also put it to the left. But I don't think that looks two nights. We're gonna keep it to the right that we can also add a fixed to the link. So right now, when I over my mouth, you can see that it changes color. You could add a further effect, like we could do a triple dots under, for example, Now the nice thing again, it gets lives. Now, let's try this one out is gonna look like this quite fancy. And you can just go ahead and check out the different effects that there is to choose from here. Now, I'm gonna go with no effect for this, and then we can style it. The first thing we can do is decide on the distance between the ICO's. I'm gonna put it somewhere like this. I think this looks really nice. And then we're gonna go ahead and change the link color, as we can see, right now, it's black. We could change it to read, for example. It's gonna change the color of all of them. When you can decide on any college is gonna fade your theme, your design and your idea for your website. I'm gonna go with the default one here and then we're gonna collapse this and go to link color when you hover over. So right now it goes kind of blue, teal ish in color. I'm going to click on this one, and I can change the color for that as well. We can make it purple, for example, and it changes instantly. I'm going to go with the default once again. Then we have the current menu item. So right now we are at the home page rights and if you want something to be displayed for that, we could be changing the color to say red. So then we know the okay, we are at the home page that one that you have collecting has a different color. I'm gonna once again go with default because I like it's simple and clean, and then we have a link background. Now the link background is going to be the background off the menu names themselves. If I take on red, for example, like this, you can see that the entire background changes caller. Now that looks absolutely awful. So you could change the different color, the fits with your theme. Once again, the fits with your design. And of course, if you have a different theme that fits with the theme itself again, I'm gonna clear this and collapse it. And then we can change the link background when we hover over. So let's say that we want something that is bluish when we hover over like that. So now when I put my mouse over is going to change color like this. As you can see, there's a lot of customization that can be done in here, and then we have the A current menu item, for example, Once again, I am at home, and instead of changing the home, the name itself in color, we can change this entire little box. So if I want to put this in again, let's go with something bluish. There we go that we could be changing that entire box to show that. Okay, this is the one I clicked in effect the concourses. This color's gonna change on courses. And then if we're doing in a drop down, remember, if we have sub items down here, we can be doing the exact same customization down here. OK, so it's all the same. And then when you're done, all you need to do is go ahead and click on Publish, and then you have your men. You all set and all done a great job so far. Guys, you're doing really well. Remember, if you have any questions whatsoever, will be in the Q and a great let's move on to the next lecture. 13. Publish Your WordPress Website: Okay, guys, great job on making it this far. It's time to publish our website now. Even though there's not too many exciting things to be doing on the website yet, we can still make it go live and make it accessible to other people. Right now, if you go to your website is going to look something like this, there's going to be these coming soon. Page and I can see this because I'm in a private window right now and I just access Robin and Jesper Dots come. So in order to launch our website, all we're going to do is go to the back end off our website and we're going to go in the upper party which is coming soon active. And then we're gonna have our website alive and then go down and click on launch your site and that would just launched our side. Congratulations, guys. So if we go back to the private window and we go ahead and we update this page, we get directly to our home page, which means that we're now live. People can access us by writing, and robin and jesper dot come, and we're going to start showing up in the search engines like Google Yahoo being etcetera . Now, if you think that it's too early to be releasing your website and going live, that's okay. You don't need to publish your website yet. Just know that it's this simple to do it and then publish it whenever you are ready. Okay, so we have a nice home page. There's not too many exciting things to do at the website yet. Let's move on to the next lecture and make this fun website. Ah, lot more fun seeing the next lecture. 14. Writing a Post: in this video, we're going to be writing our first post, so let's have a look at how far we have come. Now we're at the back off our website. Let's ask usual, Go up here and click on visit site in a new tab so that we can have a look at what is happening throughout the changes. So we have our website so far, right. We have a beautiful home page that we have made, and we have also created a menu so we can even access are blawg right now, however, there is nothing interesting in the bloggers on Lee, this sample that says hello world. So it's time for us to make our first post. So what is a post? A post could be on article it tutorial a blawg post. A post is just opposed, and then you can decide what you want to make of it. And it's gonna end up right now in the blog's section, which could also been called Article section or tutorial section, etcetera. So let's go ahead and do this. Let's go to the back of our website and then we're going to click on posts now. The first thing we want to do is just hover over here and then put this hello world to trash because we don't want it to be there, creates. And now when we're rid off the sample post, let's go ahead and create our own. I'm gonna click on Add New here. And as you can see, the Post looks so similar to the page editor because it's using the same editor. It's still using the Gutenberg editor, So let's go ahead and make this post look nice. Now I'm going to be riding a post about the digital marketing system and then adding in a couple of interesting block contents for your own sake, you're off course, going to want to write a post about whatever it is that you're selling maybe a product, maybe about your service. Maybe you want to write an article, etcetera. Just make it about your website and what you are doing. So follow along here and see how I do it, and then you do it yourself. Now the first you will want to do is add a title, and the title for this one is going to be called digital marketing success in four steps, Okay. And before we move on, I'm gonna close down the ocean WP settings. There we go. It's collapsed. So let's start writing the post now. I'm going to start over the paragraph here. I'm not going to be capturing their interest. I'm going to be riding something. Like sometimes digital marketing can be tough along the way problems arise down below. We explain the number one reason why most businesses fail. There we go. So this is going to be the text, and I'm going to want to increase the size off this one. Now, if I just click on this one is going to start office at one. And then I can keep clicking until I get a size, which I think looks good. Let's try this one there ago. So what I want to do now is that I actually want to embed a video in here. So I'm going to press on enter. I'm going to get a new block here, and I'm gonna click on this plus here, and I'm going to search for YouTube. There we go, because I'm going to be embedding a YouTube video in here, so I'm going to click on this one and then is asking me to enter a u R l So I have already prepared a video that I want to add. And it's this one. Digital marketing branding Why most businesses fail within the first year. Now, in order to embed this YouTube video and this is super important to remember, you can't just go ahead and use this link that's not going to work. Is going to be messing up the former thing on your website. Gonna get aware placement or it's gonna look weird. Now what you want to do is click on the share button down here and then you get a link here and where you're going to click on copy and then go back to the website and paste that link in here. There we go and then click on embed. And then we have our video perfect. And it looks really good as well. So if I go ahead and I click on preview, we're going to get a preview on how the website is looking. I'm gonna pull that to the right tab here. So this is how it's looking right now. We have digital marketing success in four steps and then we have the text that I just wrote . And then we have the video in here. So now if I click on the video is going to be playing directly on the website, which is perfect. There's a lot of options in here. They could subscribe instantly from this video. You can add it to watch Lady. You can jump forward backward. You can customize this video all on the website. It's embedded, it's ready and it fits. The format off The post is one of the great things with embedding with the Gutenberg editor . So let's continue. So right now, I have described the digital marketing success in four steps. I have written some text. I have added a video to explain why and now I want to continue. I want to add the solution. So I'm gonna go here and click on Adblock. I'm going to add in a heading in here and I'm going to write something like the four simple steps to souks to success. Okay. And I'm also going to put this in the center. There we go. Now, when you're adding mawr headings, you want to make sure that the following headings are heading to, and the reason for that is because the search engines air going to understand your post better. We're going to talk a lot more about this later on in the course. But for now, just know that it's enough with one h heading one and put the rest to heading two. Okay. And now I want a new block in here. So what I'm gonna do is click on New block here, and then let's say that I want to add an image. I'm going to search for image in here, and then I'm gonna click on image. There we go. And now I could upload an image in here as usual, or I could do something really interesting. I could actually transform this block into something similar that also uses an image. All I need to do is click up it where it says change block type, and I'm going to change this to a media and text. So I'm gonna upload a picture here. First of all, when I use this one and then to the right here, I'm going to be writing the four steps that I've been talking about. Two digital marketing success. Okay, but the same thing applies, Say, as you can see on the upper right in, This is currently a paragraph, and I can click on it and I can start writing. But I can also change this paragraph into a heading, and I can also change it into a list. It's super handle like this. You can customize on the go. It's very fast, very effective and intuitive. So this is why I enjoy this editor so much. But what I'm gonna do is I'm actually going to use a paragraph to right, even though it I'm going to be doing a bullet list. And the reason for that is when you write paragraphs, you're able to change the size of the takes, which you aren't when you're doing bullet lists. So I'm gonna go ahead and write the steps. So step one, find your audience. Step two, attract your audience. Step three, sell it. Step four do mawr off. What works now? Notice that every time that I hit enter I get a new block. If I wanted to continue writing within the same block, all I would do is that I would hold down shift and click on Enter and I can continue writing within the same block. But if I hit editor, I get a new block. So, of course, the benefit of adding more blocks is that they are easier to move around and the benefit off putting everyone into one block is going to be that you can customize them all at the same time. Okay, so we just added in this one, lets have a look at what it looks like so far. So I'm going to hit preview once again, it's gonna take me here and let's have a look. So here we are, and I'm going to scroll down. First we have the text. Sometimes Itamar can be tough along the way. Problems arise, right? And then I have the video that explains the problem. And then we have the four simple steps to success. This is the Digital marketing guide and then the different steps here. Now the first thing that I see is that I want to make the steps bigger, and I want to make the completely star marketing guide picture bigger as well. So I'm going to go ahead and do that now with the picture. It's super easy. All I need to do is click on the picture and drag on this one, and it's gonna make it bigger and for the text itself. It's super simple to remember when we were doing the paragraph. You decide on the text size in here, and I'm gonna try 18. So all I need to do is click on this one and write 18 and this one right? 18 and then this one and write eight seat. There we go now. Had they all been in the same block, I would only have to do that once. So let's hit preview once again and have a look and let's scroll down and we can see that I still want to make these steps bigger. So I would just go ahead and do that, and I would keep customizing until I'm happy. Let's put these 2 22 this to 22 22 and 22. There we go. So now to continue on with this post, all I would do now is adding another block that would adding a paragraph and then I would start writing about the system and explaining this system and then we have our first post, so I would just write something like the way to to implement this system is through and then start writing about the system itself. Now, I'm not going to do this because this is a tutorial on how to write post in the different features and benefits off doing. So we're not gonna focus on this post specifically, but I want you to be focusing on your post. And before you move onto the next lecture, I want you to have at least started your post. Okay, So great job on making it this far. In the next video, we're going to go more in depth about the post, and the first thing we're going to be talking about is further customizing, adding in videos into your post. Then in the further lectures, we're gonna talk more about things such as categories, tags, excerpts, etcetera. And if you don't know what they are perfect. That's for your in this course. So let's move on to the next lecture. Start your post, guys. See you there 15. Customize Video Posts: All right, guys, I hope you're doing well writing your first post. Now, before you do anything further, don't forget to click on save draft. When you're working on you're posted. You always keep it saved. Okay? It doesn't publish it. It just saves it. The publish button is over here. So in this video, I want to talk more about embedding and putting videos in your post rights. And when we put this video into this post, it was really simple. I'm gonna put a video above for comparison. So all the wood did was it was search for the YouTube block right there. And then we pasted the your Ellen here and we had it. And if we look at the video, it's perfectly formatted to the website. We can access it all of the features of work, and we can subscribe. What, you later etcetera, etcetera. Complain it off course, But what if we want to customize it further? And also what if you're embedding a Facebook video, for example, and you get this strange code? Well, there are other ways to add the videos on your post, and that is called embedding, and I'm gonna show you exactly how that works. I'm going to use the same video for comparison. So what I'm gonna do here instead of using YouTube to embed, I'm gonna use something else. I'm going to remove this block and then I'm gonna put another one up here, and all I'm gonna do is search for embed because then we get something that's called custom html. And what a custom HTML is is basically a code a code for how we want the format and also the link to the content itself to appear on our website. So I'm gonna do is I'm gonna click on this custom html and then it's gonna ask me for a code. So let me show you how to get that code and also what the benefits of using this code are. So let's go back to the video. It's right here with me and myself with a little bit off here both on my head and face a little bit. So what I'm gonna do is I'm gonna click on share once again. But instead of using this link, I'm going to click on embed. So the first thing we get there is all of this code. And this is the code that we're gonna copy paste into our website in order to get the video itself. But the benefit of this is that we can start editing the code before we put the video on our website. Now, we're not gonna go too much into this. We're gonna use the help off you two pair by scrolling down. We get a couple off different options in here now. The 1st 1 is that we can decide when we want the video to start. If there's a reason for you to start in the middle or at the end of a video, you could just go there and then check this one and then copy all of this. And the video is going to start at that point on your website. Now, a couple of more interesting options. Is this one by default. When you're using the link like a shooting in the previous lecture, you're gonna have the controls on the video looking like this down here. We see that these are the controls. You can change the volume. You can click on the play bottom. You have the captions on here. You can go to you to directly etcetera. But what you can do here is that you can turn those player controls off by clicking here and now, if I played the video, you can see that there's no controls. I'm gonna press in the middle of the screen to play, impressing the middle off the screen to pause it. So I've just removed these controls, and this can be great. If you want a cleaner interface on your video, it allows you to customize the video a little bit more. You can also enable something called privacy enhanced mode. And what that is is that it makes sure that YouTube does not put cookies onto the people who watch your video. And a cookie is basically something that you to put into your visitors browser to track them. We're gonna talk much more about cookies later on in the course and the disclaimer for cookies, how to use them and how to make sure that you bear no responsibility for what happens etcetera. In other words, you need permission. We're gonna take care of all of that. But for now know that we can enable privacy enhanced motor if I enable this, then YouTube is not going to be putting the tracking cookies onto the video and hence onto your visitors. There may be a reason for you to use this. Maybe, maybe not. But just know that you're able to use this. So I have enabled private enhance modes and remove the player controls. Now all I'm gonna do is click on copy here, and it's gonna copy all of this and I'm gonna go back to the website and I'm going to paste this in here, OK, this is all of this coat and then I can preview now if we look at the previous here, they look similar, right? They look very similar. But if I look at the preview on our website, how it's going to actually appear, we can see that there are a couple of different resolutions. Now, this is more assumed in, and this is completely often for the website. This is framed perfectly. So the benefit of using the easy technique, if you will in the previous lecture, is that everything fits perfectly while with this technique, you're going to have to put some off your own with and height options in order to fit that yourself. And the way to do that is simply by going into HTML and changing these settings, you can see what's us with. And it says height. So if I look at the video here, I can see that it's been cutting off the height a little bit too much. I'm just gonna go ahead and change that. So I'm going to change the height too. 500 here. And then I'm going to click on a preview and see how it looks different. So as we can see, it's is looking much, much better, much more fitted, and now these two are starting to look more similar. So again, you don't have to use this embed herbal option. But I just want you to know how it works. And if you embedded a video from video from Facebook or from wherever on the Web, just make sure that you add in and change the width and height so that it's gonna fit on your website super important and also, if you want to, they are more customizable options in here. Okay, now I'm gonna go back, and I'm going to go ahead and remove this block And now it's looking the way it did before and, of course, saved the draft. And then we're gonna move on to the next lecture and go more in depth about the different options in the post. See in the next lecture, guys. 16. Categories & Tags: in this video, we're going to be learning about categories and tags what they are and then some best practices for them Now. I know there's still a lot of interesting information in here that we haven't gone through , and we're going to go through that in just a bit. But for this lecture, let's focus on these two the categories and the tags. So first off, what are they? And what's the difference between them? Well, categories and tags. They serve two functions. Number one. They help the search engines. Explain what your site is all about, and number two. It helps your visitors to navigate and find the information on your website that they're looking for. So what is a category? What is a tag? And what's the difference between them? Well, a category is a grouping off your post. A broad grouping off your post. You could see it as the table off contents is going to be grouping very large amounts off data in a large category that's going to be easily accessible. So, for example, for this post, the category could be courses because this post is ultimately going to be referring to one of four courses. So the category for this could be courses or the category for this could be digital marketing. So what? It's a tag now. A tag is a collection off micro information. You could see it as the indexing. If you imagine a book, the category would be the table of contents, and the tags would be the indexing at the end. So Tags is a collection off very tiny bits of information that you could add on to your post so people can search for it and then find that information. So, for example, a tag I could be using for this because in the video I'm talking about branding would be branding. So if they would go to the site here and search for branding, then this post would show up because we have added the tag branding to this post. So how do you use categories and tags effectively? Well, when it comes to categories, you want to be really careful with not making too many right, you want to make the navigation easy for your visitors. So in the beginning, especially the fewer categories, that better So what? I'm going to go ahead and do in here is to create a category that's just called courses. Here we go. I'm just gonna go ahead and write courses because these blawg posts are going to be about our courses in the end, okay? And then I'm going to scroll down. I'm not gonna have a parent category right now. I'm gonna talk more about what that is in a little bit. I'm going to uncheck this on categorize, and I'm gonna click on add new category. There we go. So now this is added to the category courses. So I'm gonna have all of these types of post. It's gonna be about the courses. For example, digital marketing Shopify, etcetera, categorized into courses. So that is E C for our visitors and for the search engines to find. So now let's move down to tags. Now let's move on to tags. So when it comes to tags is actually quite the opposite. You could add as many tags as you want to, basically, if you add more tags, there's more indexing for the search engine, and also your visitors can hit their information. They're searching form or easily. However, even though you can write 10,000 tags. You don't want to go overboard here. What I would recommend is right. A maximum off 10 tags per post. That way you focus on the most important aspect. You make sure you don't go overboard. Okay? So since I have added a very broad category had called courses, I could add a tag here called digital Marketing. And then I'm gonna hit. Enter Now that is address a tag. Now I could also add a tag, for example, called Branding and hit. Enter. I could add another tag such as business, add and keep going until I have 10. Or until you feel that it's enough. You don't have to go overboard with the tags. You don't even have to add the tags, even though I recommend that you do so for the sake of the search engines and your visitors . Okay, so now what? We have added categories and tags. What we're gonna do is actually post this post and have a look. So right now we can see to the right here that in categories there are no categories. OK, but if I go ahead and I publish this post and then go back in and update this site. You can see the to the right. We have our first category courses. Okay, So if they want to know more about our course, that's all they would need to do is click on here and then they would get that information . OK, so let's go back here at the back end of her website. As you noticed, the left it There are actually categories and tags in these sections as well. So let's open them up in new taps. There we go. Now I'm in here in the category section, and as you can see, we have two categories. We have courses and on categorized. You always need to have a minimum off one category, So I would recommend that either you remove the UN categorized or you change its name. I'm actually gonna change this to other, because there's always going to be time when you put some sort of material that doesn't fit in somewhere. So all I'm gonna do is that I'm gonna hit edit the way I did. I'm gonna call this other, and then there's something here called a slug that you can add it now. The slug is basically how it's going to be looking at the euro. So, for example, for people who want to find the other section, it might look something like this Robin and desperate dot com forward slash other. So that is what the slug is all about. It allows you to edit this log that this site what happens in the U. R L Now, if you for the sake of your visitors or for the sake of the search engine and we're gonna talk much more about search engines later on, you would like to name this something different. Like, for example, resource is you could name it into resource is so it would show on the side of other any this log, it will be called Resource is Now. I recommend that you keep these to the same general Daddy Say good idea both for your visitors and for the search engines. So I'm just going to name this s other and you always wanna use the lower case letters there. Now, with categories, there are parent categories that you can use. So, for example, now we have the courses in here. We could decide if you want this to be a child category off the courses. Now the benefit with you sing parent and child categories is that you can have a super broad topic. Like, for example, right now we have courses and then as child categories, we could have business courses. We could have digital marketing courses. And then as we write even more post, we might want to have Shopify courses, social media courses and go even more specific in Twitter courses, Pinterest courses, etcetera, etcetera. But for now, we're going to keep it at none. And then we have the description. If you want to write a description to the category and in some things, the description actually shows on the website, and then it would show around here what the categories actually about. But on this theme, it doesn't show, but we're not gonna write any description. We're just gonna click on update here and then click on back to categories. So in order to add it, any category the way I just did, all you do is hover your mouse over and click on edit. Okay, Now you could also add a new category straight from here. All they would need to do is write the name off the category and then this slug Remember the slug. And then, if you want to have it into a parent category, making a child category or not, and then the description. Now when it comes to categories, remember I told you that Ask your blog's involved. So should your categories, and I think this is the way you should go with your category. Start off with one very broad category and ask you write more posed or articles, etcetera. That's when you start making mawr off the categories. So the more you involved, the more your categories of all. There's no point in making 10 20 or 30 categories that has zero or two or three post. Keep the categories broad and let them evolve with time. That is my recommendation, and then we also have the tags. Now the tags work in a similar way, but they don't have a higher key. There are no parent, all tags and there are no child tags. Now a tag is simply piece off micro information that's gonna help the search engines and people who are using the search function. So let's say that there are 1000 posts on this website and they would search for digital marketing in here now if they would hit, Enter This post would show up because we have tagged it as digital marketing, and he's also going to help the search engines understand what the Post is all about. So let's head back to tags now. They work in a very similar fashion toe, adding new tag, right, the name right, this log and then the description. It doesn't show up on this steam, and you can also go ahead and click on them and then hit, edit or just click on a straightaway. And then you can do the editing in here for those tags that you already created. And if you want to edit the tax or edit two categories, you can do so in bulk like we've gone through before. Just select them. Choose the bulk action like you can delete them than hit apply, and that's gonna delete all off them. So, guys, now you know what a categories. You know what a tag is. It's very important that you keep in mind to be very spare, some with your categories, and it's okay to make more tags so low amounts of categories a maximum off 10 tax per post . Make sure that you nail down the information that is in here, and then we move on to the next lecture. Remember, if you have any questions, guys will be in the Q and A C in the next lecture. 17. Post Settings & Blog Design: Okay, guys, let's go through the final post settings and then a little bit about your blawg de sign designed for your post specifically. So, as you might have noticed in this post here ah, lot off the options they look very similar to when we created a page. And they are. But there are a couple of additional settings, and we're going to go through them now. So the first difference that we're gonna notice here is that we have something called a post format. So there are different forms that you could be posting on. For example, a gallery former, the lean quote, standard video or audio. But the truth is, even though some themes optimize their post for a specific format, most themes don't, and this is quite useless. I believe this theme doesn't have any support for it. And honestly, this Gutenberg editor is so good that we don't need any custom that we don't need any optimization. We can just customize our own post because it is so easy to use. So we are not going to be using any post for months for this. And then we have these options stick to the front page. So if we are using a widget and it is displaying a bunch off post on our website by clicking on this one, we're going to be pinning this post to the top there. So this is a way to pain this post. And then we have something here called Revisions, and we also have revisions. When we create our pages and this is super useful. I'm gonna open this up in a new tab. Now, what a revision is is basically that every time when you make any major changes on your post or on your page, WordPress saves your previous version in case it would crash. In case you would change your mind, you have gone through big changes. Now, you can't really see properly here because it's all displayed in code. But if you know that you like the earlier version better or something went wrong along the way, you need to restore it. All they need to do is check out the date. Maybe you've been working on a post for many days, drag it to that date, and then Klay can restore this revision. Okay? It's a very handy feature to have both for your pages and for your posts. And then we have the Perma lengthen. This is just like before, the way we wanted to look for the u. R L. Now it's Robin and Jesper that can force latest a marketing success in four steps. Now we might want to change this just to digital marketing success, for example, for a nicer You, Earl. It's nicer for the visitors and also much easier for the search engines. And then we have categories and tags. And you know these by now writes that we just went through them. We're going to go through a featured image, an excerpt in just a second, and then we have discussion. And here we can decided one allow comments and also allow ping backs and track backs. And this is great that we have an R. S s feed, for example, or for our social media's. When we're making any updates, aping back in a track back will notify other sources connected to the website that there are changes happening or post being posted etcetera. So I strongly recommend that you leave this one on and then we have the post attributes, which is if we're going to use any templates and we are not. And then finally, another difference that comes with the ocean WP is the image gallery. Now we're gonna talk about Image Gallery later on in the course, but we're not gonna use this functions if you see it, don't stress about it. Let's just leave it there or remove it in the options if you like, like we went through earlier. So those are all of the different settings for all posts. Now, we already posted this one right now if we go ahead to the blog's section off our website and we have a look, this is the way that our blawg entry currently looks like doesn't look too good, doesn't it? I mean, there's a little bit of text here, quite a bland takes going on here, and even the embed is showing in the excerpt here. Now, this is not very impressive. So let's go ahead and this Sign our block a little bit by changing up our post. So let's head back to the back end here and this it will restart using these two features. We have the featured image and the excerpt now the featured image is allowing you to put on image to represent your post. So all we need to do is go ahead and click on featured image, and we're gonna enter our media library. So here in the media library are all of the different pieces of media that we have been uploading. And as you can tell, I've been up loading this same picture several times because I haven't been using the media library. We're going to go through the media library in just a little bit in the course. For now, I'm just gonna go ahead and use one off the pictures. And if I didn't have one a picture here, I wanted to use another one. I would go ahead and click on upload files and just upload one. So I'm gonna go ahead and select this one as the featured image. There we go, and then I'm gonna update this one, and we're gonna see what happens to our post. So let's move on to Blawg and let's go ahead and update this. And as you can see, we now have an image to represent our post. It's looking much, much better already because there's something representing even if the picture maybe isn't the most attractive for the post would do have an image for it. Okay, now scrolling down the next thing that we're going to want to do here. It's changed this excerpt, right? Because we don't want this embed to be showing like this and maybe wanted to sound a little bit more attractive right now. It's just taking the takes that is, in the first piece off the post itself. That is not always the best description. Off a post is not always the best way to get your visitors to read or the search engines to understand what it is about. So what I'm gonna do here is that I'm going to see Is there something here? I like I actually like this piece of text, but I don't like this embed. So what I'm going to do here is that I'm going to go ahead and select this part, and then I'm going to cope it. And then I'm going to go back to the back end here, scroll down, move onto excerpt and I'm going to paste it in here. There we go. So now when it's pasted in here I'm just going to click on updates, and then I'm going to go to the front end off our website, and then I'm going to click on update here. And as you can see, we just cleaned it up. Now we remove the embed we have the peace of takes that we are enjoying. So this is an excerpt, meaning that if I click on continue reading, I'm going to be taken directly to the post. The benefit of this is that we can show a lot off different posts in here, right? So if we don't want to use excerpts in here instead, we want to show the entire post. Then we're gonna move on and click on Customized up here, move down to where it says blawg. And then we're gonna go to Blawg entries, and then we're gonna scroll down until we get to this point. This is excerpt length. Now, if I want the entire post to be showing, I'm just gonna go ahead and put this to 500. And then, as you can see, it's suddenly displaying the entire post instead of just on exert. So this is a way depending on what you want for your blood that you can change it up now. There are more options in here. It's well, if you want an infinity scroll meaning that you can just keep scrolling through your blood post endlessly, you would change this joint Infinity scroll. So in here, you're going to be finding a bunch of different options on how to edit your blawg post. But for our own sake, we're going to stick with the basics. So far, I'm gonna revert this back to default. I'm gonna use standard, and I'm not going to be touching anymore in here now, before we move on this one more feature that I want to show you and that is at the back and off our website here. Now, if you have installed WordPress using blue hosts and you're using the same theme than this is not going to be a problem, But if you're using a different theme or maybe installed your workers with someone else, you might want to check this part. So what we're gonna do is that we're gonna go ahead and move to settings and then click on Perma links now in here By the fault we have already checked in post name meaning that is going to be Robin and jesper dot com forward slash and then the post, for example, forward slash digital marketing success like we were talking about earlier. But when you're using certain host or certain themes, this one might be selected by default. And this is not very good need for your visitors, and especially not for this search engines again, more about the search engines later. But we're gonna want to have the post name selected here. It's going to be helping out. Ah, lots of Just make sure you have this one selected scroll down click on save changes and then, guys, we have just made our first blood posts. It's looking good. We've come quite far already in the course. Let's move on to the next lecture. See you there 18. Sidebar Design: Okay, guys, in this video, we're going to be designing our sidebar. So first, let's go ahead and have a look at how it looks. So we're gonna go ahead to Robin and Jesper up here, and I'm gonna right click an open visit site here in a new tab, basically like we always do. And then I'm gonna navigate to blood. So this is decide Bar. And right now it has a bunch of functions that's really good to have, like having the search having the reason, post. But there's a lot of things in here that doesn't make sense and frankly, that we don't need. For example, we don't need categories right now because we only have one. We don't need a metaphor example. So what we're gonna do is that we're gonna go ahead and redesigned this and set it up in a way that we want to, and that's going to be fitting with our website and our own style. But before we do this, understandably, the question is, but what? It's a good looking the sign. And also what are the functions that I might need on my website? Well, first off, for good looking the sign, I highly recommend that you check out other people's blog's. We're gonna do that in just a second. And secondly, when it comes to useful widgets, these air, all called widgets when it comes to useful widgets, is all about what's on your site, where you want to navigate people. The number one reason for this is to navigate, and also how much can you fit with your dis sign? So before we move on, let's have a look at a couple of different blog's and see how they have designed their sidebar. Now the 1st 1 is a classic in a huge blogger. That's Pat Flynn from smart passive income dot com. Now looking to the right and we can see that he's using a sidebar. First of all, where he's introducing himself, who he is and what he's all about. And as I scroll down, we can also see that he is putting a widget here. There's going to navigate us to the different categories on Hiss site, for example, affiliate marketing, better blogging, email marketing and podcasting, which are the four pillars off his website. They're vastly different categories. So is such a good idea to be putting them up like this. I want to learn, and then you can just navigate to that category right away. Scrolling down. There's also advertising his own advertising for his e book. And what's clever with this also is that by clicking on, get this guy, you're going to be asked to write in your email, and suddenly he is building an email list. If you don't know what that means, don't worry about it yet scrolling down. We also have popular posts here, which is another widget is using so we can check the all time popular post it pats, favorites, podcasts and articles. And remember when you could pin a post to the front page. Well, this is the kind of widget where it will be showing up in the top in. You can also be adding post manually when using these form of widgets. So this is the way Pat Flynn dusted on smart passive income dot com. Now, if we go to simplicity in the south dot com, this woman is doing it a little bit differently. She has a very different style, but she's using similar widgets, so the 1st 1 is still to be using on email list building. So this is called an opt in. Basically, you're asked to ride in your email address. You can subscribe to get news to get updates, and she's going to get your email to Billon e Mai list. And then there's an introduction to her and what this website is all about. And then here she has put in a slide where you can check out the different pictures from her website. And this is perfect, because if we have a look up here, we can see that she is all about do it yourself decor, ideas, etcetera. So it makes sense to put in the right sidebar showcasing different ideas, showcasing different themes or the course. And then we have the dish daily dot com, and interestingly, this is a very minimal this science. You can see there's an opt in here to write in your email, and then this person has added in popular posts nothing more, nothing less. If I scroll down, it just disappears. So there are different ways that you can use your right side bar to, and then finally we have blogged a ghost dot org's and they're not actually using a sidebar at all as we can see if I scroll down here this no side bar to the right, there's no side bar to the left. It just takes going on. And the benefit with this off course is that there's less clutter and it can be more enjoyable to be reading the text. And the down part is that there's less navigation now. They're also using an app it's you can see showcasing how much you progress on the page while you're reading. That's a plug him. We're gonna go through plug ins later. And interestingly, you don't only need sidebars on your right. As we can see, Pat is actually added a left sidebar as well. Where he has shares, he has Twitter. He has Facebook. Basically different Social media's where you can go ahead and share. This post is very clever way to do it. So now maybe have a couple of ideas off your own, so we're gonna go ahead, take those ideas and start implementing them and editing our own sidebar. Okay, so what we're gonna do is that we're gonna go to the back end for website and then we're gonna move down to appearance and then click on widgets. So here we are. And in here there's a bunch of different things you can edit. Like you can edit the left sidebar, the surfers old sidebar and the food er, we're gonna go through these things later. For now, we're gonna end it. The default sidebar, also known as the right sidebar. And as you can see here, everything that is put in here is the exact things that we're having on our blawg page right now. On our blog's sidebar, we have the surge, the reason post recent comments, archives search recent recent post recent comments archive. Now the first thing we're gonna do is that we're going to start removing a couple of things that we don't want and don't need. So to begin a search function can be great to have recent posts also really good to be showcasing when you're adding some new post when you're adding any new material. Recent comments I don't think you should be keeping this in the beginning because there won't be a lot of people commenting, and also it's not that interesting to read, usually again, depending on your website and what you're doing and selling etcetera so I'm gonna do is I'm gonna click on this one. I'm gonna go down to delete Here, click there. And now, suddenly, recent comments are gone. Archives? Well, there's not a lot of material right now, so I'm gonna delete this one as well. Categories. We only have one. So I'm not going to keep this either. I'm gonna delete it, and then we have metta and this is all about Loggins. RSS feeds, etcetera. And if you don't know what half of those mean, don't worry about it. This is just basically a bunch of coast that we don't need access to. Not right now. We're gonna go ahead and click on delete. So what we're left with right now is the search and recent posts. And if I go back to the block here and I update this one, we can see to the right that there's not a lot going on right? And that's perfect. More potential for us. So if we go back in here, if we have a look to our left, we can see all of the available widgets and scrolling down. There is a lot off different. We just going on that you can choose from. So I'm gonna offer a couple of ideas, and then I'm gonna designed this side bar, and then hopefully you'll have your own ideas on what to put on your website. Now, the first thing I want to tell you about is that with the ocean WordPress theme the Ocean WP theme there are a couple off which is included, For example, this widget called about me that's actually been included with the theme. If you have a different theme or you haven't installed in a specific theme, you're using a WordPress original theme. This might not be here, So if you're going through your witches and there's something in here in the course that's not on your theme in your widgets, all they need to do is go to plug ins and search for it. For example, search for about me in the plug ins area and similarly, search for instagram research for Facebook like books, etcetera, and you will find it there again. We're gonna go through plug ins in just a little bit. So, guys, let's start designing now. The first thing that I would like to do is actually add some about me in here. Now, the way that Pat Flynn has it, it was scroll to the top pair where he has some information about himself on what he's all about. I think that's genius. So let's follow suit here. So what I'm gonna do is that I'm going to click on the about me widget here and I'm going to drag. It's to the right A to the default sidebar and put it to the top. And this allows us a couple of different options. And first off, it's too title the widget itself right now. It says about me. And if I go ahead and I scrolled down and I click on save or sexual already been saved and I go to the block and I update this, you're going to see that up here it says about me, but I don't think that looks too good What I would like. It's just a picture here in some info, and then that's it. I don't think this contributes at all. I think the picture and the information is more than enough. So what I'm gonna do is that I'm going to remove this information and just leave it blank. And then what I want is a picture in there, right? Look, quite empty. I'm gonna click on upload picture, and then I'm gonna use this picture off me and Jesper, and I'm gonna click on insert into post scrolling down. We have the name and it's gonna be the name off for website. And of course, it's me and Jesperson. I'm gonna right, Robin and Jesper. And here is a very good idea to be writing. What? The website ISS about Robin and Jesper, our digital marketing and business Start up experts here ready to offer you a device and courses in learning and thing you need to fulfill your marketing and business dreams. They will go just some text off the bat there. You might want to think this through a little bit extra and how you represent yourself. Okay, so now if I scroll down and I click on save, let's go to our blood page again and then I'm gonna click on update. I'm gonna refresh this page and let's have a look here. OK? So it's looking much better than about me is gone. There is a nice looking picture of me and just press a Superman here. I love this picture, says Robin and Jesper Robin, and just produce the marketing and business startup expressed it, said You just heard me read it anyway. So here it is. Here's the takes that's about us and what this website is about. Perfect. I love this widget. I think it's perfect there. So I'm very happy about this one now moving on. There are couple off more options that we can put in here now. The 1st 1 is the social style, the style that we want on the social links that we're going to be adding, Let me show you what I mean. So if I want to add a social media, I come, for example, Facebook. I would just go ahead, and I would write facebook dot com slash Reuben Jesper and this is the link to our Facebook page. So now if I go down and I click on Save and I go to our website and I refresh this, have a look at this section. You can see that there's an icon that popped up there, and if I click on this one is going to be taking us directly to our Facebook page on Dhere . We are so we know that it works. So let's click this one down and go back. Now I'm going to remove the Facebook one because we're gonna add another fun widget in here . However, there are a couple of more options in here. And 1st 1 that I already told you about is the one with style, how we want those I comes to be looking and right now it's looking like this is the colored style with the white after traditional style. And I really enjoy that. You can be changing this one up here and we also have something called social Link target. And right now it is at blank. And that means that if I click here is going to open a new tab like it just did and take us to our Facebook page. Now, if I go back and I changed this one to self, then if I click care, it's going to change our website into the Facebook page. Okay, so what I recommend is that you keep this one blank so that people stay on your website and there will be new task whenever they click on them. So what I'm gonna do here is that I'm gonna add in our instagram That's instagram docked com slash grow been and Jesper And I'm also going to add in are you two which is YouTube? Com slash row Benji Esper And then I'm gonna go ahead and save. I'm gonna go to block. I'm gonna update this and see how it looks. There we go. Now there's two icons. Great. And the reason that I removed the Facebook one is because we're gonna add something that's called a Facebook like box and that is this one. So let's collect this one. We're done with it now. A Facebook like box. You've surely seen it on different websites before. It's basically a little box that's going to be displaying a summarizing your Facebook page , the amount of people who have liked it, and the option for the visitor to be liking it themselves. So all I'm gonna do is I'm gonna click drag, and then I'm gonna put it in. I'm gonna put it below a recent post here. There we go. So there's a Facebook like books. So here is the title if you want a title and I prefer not to have a title because I think it makes the widget more clean. And then the Facebook your l that's facebook dot com slash robin Jesper. And then I'm gonna save just to show you what this looks like originally. So I'm gonna go ahead and update this page scroll down, and here it is. Okay, so this is our page. This is the amount off likes who have gotten. And here's the option to like the page and to learn more. Now, if I want to customize this one, I can remove the show faces that's going to remove all off the people that you can see that have like that. If you have any friends who have liked, it's not gonna display that we can show a stream. Basically, this is going to show your newsfeed in here. So if I click on show, stream saved and I get updates. And now if I scroll down, we can get a direct access to our news feed, and that's me, the banana plantation. And if we don't want that, we just go back. And we pressed this one off and then show border. If we want to show the border around the plug in, and if you want to show, show a wall, then it's going to show a places Patris is great if you have a restaurant, for example. But we're just gonna leave it like this, and then I'm gonna click on Save. So as you can sell, there are are bunch off different plug ins you can use. You can use social icons, drag it in here, put it in the bottom, and then give it a title, putting the links and then you have the social media buttons in here. If you don't like it, you go to the bottom. You click on delete, but you could also do. If you have any new product, you have any new service and a new course, etcetera is that you can go ahead and go to image, gonna grab image, and then I'm gonna put it on the bottom. I could give it a title like new course released, click on Add Image, and then I could add an image off a course like this one and then add widgets. And in here I could be linking to the course itself. It will be you Demi dot com for sledge complete. And then I would just write in the u rail to our course and suddenly on the right side there would be basically your own advertising for a new course for a new product for a new service, etcetera. So when it comes to this, the sky is the limit, and you're also going to have to decide yourself. Do I want a clean looked. I want a lot of information in here and what exactly is important? I strongly recommend that you use different social media feeds different social media sharing. And finally, if you just want to add a little bit off text in here for whatever reason, you can just go down at this text widget, write whatever you want to write, and there you go. You have all that information. And if there's something that you feel that's missing in here, then later on you're gonna be able to go to plug ins, search for whatever that is added in here as a widget. And remember, a widget is basically just a box of information adding that widget and then you're gonna have what you need. So hopefully this has given you a lot of ideas on how to design your sidebar should you choose to use one? So remember the number one purpose of a sidebar is for navigation and also advertising. But those two go hand in hand. And to end this lecture, I want you to know that if you want to edit your right sidebar live, you can go ahead and do so by clicking on this manage with live preview. So this is going to take you directly to your website and is gonna put you in the live more the customization mode. And we have used this before. However, since there's no sidebar in here, you're going to need to click on Blawg, and now we're going to be able to add it. All of these different widgets straight away in here and it works similarly, would just click on default sidebar In here. Here is our widgets. If one add a widget, just click on it in here, added in at the information, changed the order by Dragon drop just like before. And you also have the ability to be clicking on the widgets straight away, and you can be adding them this way. So for a lot of people, this is going to be faster and easier to edit. But you can also do it straight from the back end of your website the way we did it. That's how I prefer to do, because I think it's easy to customize. But you can choose whichever way you want to edit great job guys. I hope there's giving you a lot of ideas on how to edit your own sidebar should you choose to use one see in the next lecture? 19. Change Your Site Icon: in this video, we're going to further personalize our site by creating our own site icon or just adding in one if you have one already. So what is a site? I come also known as a fabric on. Well, if we go to Pat Flynn's website Smart passive income dot com, and we click on the U. R. L here, you can see that there's a tiny little logo here. Now this is called a fabric on or just a site. I come and this icon is representative off Hiss website whenever you right in the u. R l. And if you're not using safari, you're using chrome or using Internet Explorer for windows, for example. This is going to be visible all off the time now on. So far it is not visible. But you want to add this one into further personalize your website. If we look on huffingtonpost, don't come. You can see that they're also using their own site. I come so let's learn how to add in our own site. I can't makers have looked much more professional and make the site even more personal. So what we're gonna do is we're gonna go to the back and offer website. And then we're gonna move down to appearance and then click on Customize. Now we have been in the customization part before and in here we're gonna go ahead and click on site identity, and then we can see that there's something here called site Icon. All we need to do is click on Select Image and add on our own. I come now if this is not visible in your theme shoot. You have chosen a different theme that all you need to do is go to the plug ins and search for Fabrikant. You're gonna find a plug in fourth. There's plug ins for everything ice. So as you can see the recommended psych outs Icon resolution is 512 times 512 pixels. How do we make sure that we can fit in our own picture into the fabric? Um, because it needs to be a dot icon. To be able to use is a file type. A normal fire time might be D j pick or dot PNG, but this is an an icon file type. Well, the first thing we can do is go to a website called Convert aiko dot com. And just the way it sounds is going to take your picture. There's gonna be in a PNG file and converted into on aiko file. So all we need to do is go ahead and click in here to upload it or added from a your L in here, I'm gonna upload it manually and then you're gonna choose a PNG file. Now, if you don't have a PNG file, let's say that you're having a J pig file like these ones. All you need to do is open paint, for example, and re save it in a PNG format. Now, PNG's higher resolutions I always recommended use that one. So we're gonna choose this one click and choose is gonna load a little bit. And then to the writer, you can see it has already been converted into an icon. So all I need to do is click here and then it's gonna be downloaded. And then I can just go ahead to my website, click on Select Image and uploaded, and this is gonna be a new icon. But what if you don't even have a picture that you know that you want to use an icon? Well, there's an option for that as well. We can go to a website called Icons eight dot com. Both of these websites are gonna be in the resource is, and then we can choose our own icon and customize it. Now all of these are free I comes to use. So what you could do, for example, is that we could go to categories down here and let's just go by popular for now and then scroll down. Let's say that is, this looks like a nice style, the iPhone IOS style. And then we're gonna scroll down to a fine something that looks nice. Simple. You don't want to use a Pinterest icon, for example, Scroll down a little bit more, something simple. Listen, let's just use a speech bubble. For example. I'm gonna click on the speech bubble here and then to the left. There are some customization options, which is awesome. And then I'm going to go down and click on text here, and then I can add in my own take. So what I'm gonna add in this r N J, which is symbolic for Robin and Jesper, there we go orange A and then I can change the location where I wanted to be. Like there, for example. I can change the size. Let's make it a little bit smaller. I can also change the overlay. Should I want to add something? But I don't. And I can also change the color. But I like this simple black style. We can add a fix in here as well. Like a stroke effect, A padding effect, A background Should we want the background? A circle, A square, etcetera. But I'm not gonna add in any of those. I'm gonna keep this one super simple like that. It says orange A. It's a in a speech bubble, its square shape. This looking nice. I'm gonna go ahead and hit download here, and then I'm gonna download it as 500 PX is still gonna work. Well, even though it's not 512 and then I'm gonna make sure that I put it into 500 pixels, Even though it's not 512 it's still gonna work perfectly well and I'm gonna keep it as a PNG. And then I'm gonna click on download, and then I'm gonna go back to the comfort. I could not come gonna hit this button in here. I'm gonna find that I can double click on it. And there it is. So I'm gonna have this one converted. It's been converted. I'm gonna download it. There we go. And now let's go back to our website. Here we are. I'm gonna click on select image upload files, select files and then I'm gonna select the dot Aiko right here, double click on it. And then he'd select, and then I could crop it in here by deciding the size and click on crop image while also getting a preview to the right here. This is the way our site icon is gonna look. But I'm just gonna skip cropping click down there and now it's been added. It's up. We're just gonna go ahead and click on publish. And in a second this boring globe I come. That's the default. I come for all website do doesn't have her own Fabrikant is going to be changing to this icon that we just added. So this is the simple and the fast way to change your fabric into anything you would like to Now make sure that you get a design that you enjoy. Make sure that you crop it nicely more nicely than I did in this quick preview. And then you have your own custom fabric on the people going to recognize your site from. It's just a way to look more professional and become even more personal. OK, guys, good job. Let's move on to the next lecture. 20. Customise Your Footer: in this video, we're gonna talk about customizing the footer on your website. But before we do that, let's go ahead and find out where the food or actually it's So we're at the back end of the store. We're gonna go ahead to Robin and Jesper or is going to say your websites name appear going to go to visit site opening a new tab now on your website. If we scroll all the way down, we find the very bottom here. That's the footer hence the name, foot footer. It refers to the bottom here, So as you can see right now, there's nothing in here except this copyright takes by Ocean WP theme by Nick I don't really like that. So we're gonna go ahead and remove these takes and add our own copyright. And then I'm gonna show you how you can design your own footer. So all we're gonna do is click on the customized icon here on your websites. And then we're gonna scroll down to where it says Footer, bottom and we're gonna click here now. In here we have the enable food or bottom, which is the lower part down here. If you want that enabled and then we have the text itself. Okay, so all I'm gonna do is I'm going to remove this text, and then I'm going to write my own copyright notice. Now, when it comes to copyright is kind of a tricky deal. For example, in the United States, basically anything that you create privately is going to automatically be cooperated to you . Now, in other countries, you're gonna have different rules. So I recommend that you go ahead and check out what a copyright means in your country before you go ahead and copyright your own website or your name to your website. So what I'm gonna do here is I'm gonna add in the copyright symbol, and this is gonna be in the description off this lecture, not the resource is but in description. Off this lecture, you can just go ahead and copy, paste the symbol or Google it and then I'm going to write cope. Be right. Robin and Jesper lt d witches are company all rights reserved. Now there are different ways to copyright. For example, I could copyright robin and jesper dot com, or I could just write copyright Robin and Jesper remove the LTTE There are many different ways to copyright in So when we're all happy with this, all I'm gonna do is go ahead and click on published. And as we can see already in the bottom, we have our own copyright than we have removed the previous one. Clean this one up. So let's talk a little bit about food. Er this sign now me personally, I prefer to keep it clean off course depending on what kind of website were creating. But you can add a lot of valuable information in here. And if you want to do that, it's super simple. We're gonna go ahead and go back and we're going to go into widgets and then we're going to click on Footer one here and designing your food er is the very same thing as when you're designing your sidebar is just gonna appear in a different place. So say that I want to add a widget in here. I'm just gonna click on add a widget and then we could add a contact info widget, for example. I'm just going to click on that now if I go ahead and scroll down and Then let's just add some sort of info in here so that it's gonna update. And now, if I scroll down, we can see the way that this widget is going to look in here. You can add your phone number, mobile fax if anyone is still using that, your email website, Skype call and then some info about how to contact you. Then in a foot or two, for example, we could be adding another would jet foot or three and food, or for you can design this the way that you want to design it. It's all about adding in the widgets, adding in the information that you enjoy. And if you want inspiration on what to adhere, go and check out some other people blogging and especially check out other people in your niche and see the way they're doing now. For this style, we're gonna go with a clean look, so I'm just gonna go ahead and remove this. I'm going to scroll down here. I'm going to click on delete, just gonna delete it and then I'm just gonna go back. They will go. Nothing's changed. Except this part. We now have our copyright perfect So go ahead and sit and customize your own footer changing to your own copyright. And then this signed the food. Or if you would like to, and then we move on to the next lecture. See your there, guys. 21. Make Your WordPress Website Mobile Friendly: in this video, we're going to talk about making your website mobile friendly. Now, guys today, making your website mobile friendly isn't really optional. It's really mandatory. And the reason for that is two fold number one. The by far biggest reason is because a lot of people are I dare to say most people are surfing on their cell phones whenever there, you know they have any dead time. People go on their cell phones whenever there's a toilet break, people go on their cell phones. People are always surfing. So if your website is not adopted for mobile surfing, then there's gonna be an issue. You need to make it mobile friendly guys. And the second reason is search engines really appreciate websites who are also mobile friendly. So we're gonna go ahead and make sure that our website is mobile friendly. So I have already been at the back end and I've gone to visit my site. We know the drill already, right? I'm gonna go ahead and click on customized up here. Now, if you've been following along this course and you've been taking the similar steps as I have, you've been installing similar themes. You've been going through this similar design. Then you are in luck because with this theme with the Ocean WP theme, there's already a plug in included That makes your website mobile friendly. And we can shake this out simply by going to the bottom here and clicking on the one to the furthers. Right now, this is the mobile version off your website. As you can see right away that the menu just went from big into a crammed up collapsed menu here. So if I click on it, I opened this one up. So this is the way it's gonna look on people cell phones. Now, if you have a different theme and you notice that things aren't looking that good, then don't worry about it, because you're gonna be able to install a plug in to make it mobile friendly. This is so important. But if you have the Ocean WP theme, then it's already gonna be mobile friendly. So what you want to do is make sure that everything in here it looks good because truth to be told, just because it looks good on your PC and it is mobile friendly doesn't mean that things were gonna look good on your mobile. It's still gonna be responsive. You consume mean you consume out. You can click on things, etcetera. So if I go down for example, I can see that the text in here, This isn't looking too good. For example, I have to scroll in here to see what it says. Same with this one. So that would be the first thing that I would want to change. Now the header here, the header, the text going on here. I think it all looks great and scrolling down the picture looks great. It fits. Everything looks good. Now I don't enjoy this part is just a dead part. And then we get to the food er and we have the copyright that we have just set. So it's such a good idea to go ahead and check it out. How it looks on your cell phone now to the left. Here we also have an adaptation that we can see how it's gonna look on someone's tablet, for example, were some with a huge phone, so it's a little bit bigger, but we still have a collapsed menu and we can click on it and check it out. We have this search bar in the bottom here. I think everything looks really good now, as long as it looks good. Perfect. Don't worry about it. But if there is something that you want to change, go ahead and change that right away. Because the more you work on your website, the harder is gonna be to make it mobile friendly or rather, may looking good on a mobile if you don't have that mindset from the beginning. So what I'm gonna do is I'm gonna go ahead and remove this part right away. And if you don't like this part, either all you need to do is go down to where it says food or widgets. Click there and then disable food or widgets like that. And then this space is going to disappear just like that. And I'm gonna hit published. And to me, this looks much better. Gonna check it out in the cell phone version as well. Scroll down. Looking much better. Much cleaner. And it looks good on the PCs. Well, perfect. It's published. It's all set up. Great job, guys. Now let's move on to the next lecture and continue our journey. See you there 22. Dashboard, Pages & Posts Cleanup: OK, guys. Now, before we move on to the next section and start going through plug ins, let's talk about cleaning up. As you might have noticed in your dashboard, things are probably looking quite a bit off a mess just like this. Now, if I scroll down here, there's an endless amount off stuff going on, and we don't know what half of it is. And even more importantly, we don't need most of it. So just for now, the dashboard, we haven't been using it. It's just been laying around here being this big pile of miss. What we're gonna do is that we're gonna clean it up and then we're gonna keep it clean so that we can actually use it and have our most preferred stats. And quick access is directly accessible in the dashboard. So how do we do this? Well, in the upper right corner, there is something called screen options, and interestingly, there's a lot of people, even veterans on WordPress that doesn't know about this. But this is such an important feature, because this is going to help you keep your dashboard clean and the clean dashboard Clean mind. Great website. Great content. Great results, right? So as we can see, there's a lot of things in here, and I don't think that we need most of them. Yours might look different if you're using a different theme, for example. But what we're gonna do here is that we're gonna deactivate a bunch of things. Please connect often. Monster. We don't want to show that Ocean WP or review. Nope. Elementary overview. WordPress forms monster insights at a glance. Let's keep activity Quick draft for now and then WordPress events in news and then we can also click away. Welcome. There we go. So now if I minimize the screen options, this is looking quite a bit better now. There are a couple of things we can dismiss Get the most out of open monster plug in. We can just click that one away. It's gone and the same with Jet pack here. Now jetpack is a package is a plug in with a bunch of features and we're not gonna touch in a plug ins right now. And we're not going to be touching and plug ins for now. We can just go to the plug in section so we don't want this in here? Let's click that one away. OK, so I think it's looking a bit cleaner right now. Don't you think? We also have the welcome to Ocean WP. We can skip the set up. It's been staring at us for a while already. In this course, we can just skip setting it up because we're doing it manually together. And then we have the police configure your Google Analytics settings and we're going to be doing this in the plug ins section, so we can't really affect this, but we're just gonna leave it for now. OK, so we're left with these two rights. We have the quick draft and we have the activity. Now, the fun thing we can do here is that we can also drop and drag this so I can drag the quick draft over to here, and then I can move the activity over to here. So what is the quick draft? Well, this is basically if you have anything special on your mind like Oh, yeah, I have this idea about a Let's say, Shopify follow up course. What's on, Mama? So what would be included? More products, research, blah, blah blah, blah, blah, blah. I'm going to click on save draft. You can see I already It's saved a draft her earlier. And now once I save this draft, it's going to be put into post. So if I go to all posts here, I will already have started a post on here it is Shopify follow up course. Okay. And they supposed to draft that? I made this. Not gonna be on yours, that I'm made earlier. So if we're not gonna use this as always, bulk action moved to trash and apply. But it's just a quick and easy access if you have something on your mind that you wanna work on later on. And, of course, if there's something you want to add in, you can just go back to screen options. Everything is still here. We might want to have at a glance how many posts would have how many pages that we have. And if you want to collapse the menu, all you need to do is click it and we're gonna collapse this menu. I'm going to remove that one, and we can have it even this minimally. Now, one of the things you might want to add later on when we go to the plug in section is the analytics part. You always cannon opted how your website is doing. So now we have cleaned up the dashboard. This is awesome. You can keep whatever you want to keep in your dashboard. We can also do the same with posts. So right now, this isn't too big off a mess. But what I can still do is go ahead and click on screen options, and I can start removing a bunch of things like I can remove the author categories, tags, comments and dates. And, as you can see, if you have, for example, hundreds of posts, it's gonna be easier if you're looking for a certain title. Of course, you can search for it, but if you're looking for something specific, is going to remove a lot of the cluttering. Let's add these back. We can also number the items per page, and we can have an excerpt view. If I added an excerpt view and I click and apply, we get to see a small excerpt from the post itself. Now I'm not gonna have this. I'm gonna go and move on to list view, and we can do the same with pages as well, just moving up to screen options. And then we can remove the author comments, date and number the amount of items per page. So why is this important already? Well, because once we start adding more plug ins, these plug ins are going to be a pairing both here when it comes to our pages at our post, but also at our dashboard. And the more clutter there is, the bigger than mess, the less functional that we become. So I recommend that you clean everything up right now, and as we go through the plug in section, make a move and go to the pages and post and dashboard every now and then and just make sure that everything looks that what you wanted to look because trust me, the more plug ins we install and we're gonna install a few them, or they're going to add themselves onto your posts, pages and dashboard. This is how you keep it clean. Let's continue keeping it clean, and then we move on in the course guys see in the next lecture