 So if you are here, you should be expecting to see a beginner's guide to setting up a basic website, website design. So this is part two, part one was recorded earlier and it was all about idea generation and getting like really solid content for your website. So if that's something that sounds interesting to you, you can definitely find that later. And you will also see some of what we talked about before already gone over this. So if you are watching this and you'd like to know, pause it. Otherwise, how will you help? My expectations as always stay courteous. The golden rule is to respect yourself and everyone in this room at all times. This is an interactive space. You're going to prepare to design a website. And remember that we are all learning. So I am learning alongside with you. I do my very, very best but every time I run these I learn something that I didn't know that I didn't know. Okay, that's okay and expected. You will definitely know more than me in some places and you will bring insights from your life and I welcome and encourage all of that so prepare to share. Please do ask questions in the chat box. I wrote here so you know exactly where I mean. And of course always share what you know with courtesy. This is a recorded space and closed captions are returned on and provided by zoom. So let's get this party started and I still didn't fix this every time. That's okay. Moving on. Alright, so first let's make sure that we have a setup so the idea of today is we explain a concept. I show you, you do it. Okay, so it's an idea we do you do sort of experiment. You can email out about an hour before everything with instructions so if you want to create a website that you can play with forever more. You can do that with a bunch of different options but we're going to be using local by flywheel today. These are instructions for you if you want to get all set up you can totally do that. And if you are, and just to know this only exists on your computer so if you're creating a test blog whatever else, and you are. And you're like planning on making like a legit real website. This is just for practice this doesn't connect to the internet if you're like oh my goodness I want to send this to my my son my dad my whatever. You're not going to be able to do that it's just on your computer until you move it to a live host so just be aware of that fact. So if you're like wow there's a lot of setup steps there I wish I'd seen that email earlier, I do have a temporary sandbox link which apparently I need to right click on otherwise it's just going to spin up one of these things here we go. So if you just want to follow along, this is a temporary live website, it will only last for 24 hours but it is connected to the internet. So just keep that in mind if you're like really attached to your work. That's just something to be mindful of. If you click that link it's going to ask you for an update email just go ahead and click the email is correct again this just lasts for 24 hours. I need to do two things click the email is correct. And then I need you to head to this update button here because the current version from this link is 6.0. We need version 6.2. Click that button because this is a test website it's not going to break. And it will update to the latest version of WordPress for you. Okay, any questions about that questions comments concerns if you need to unmute because it's a little faster that's actually okay to I probably should allow people to do that during today's. Find your chat box if you get stuck. Make sure I selected. That's the right link okay. Alright, I'm going to go a little bit slower to get started earlier today I didn't have my coffee and now I have had too much so I am going to slow down and talk slower alright. So, everyone should have a test sandbox either by way of this link, or by the instructions over here. Alright, I think we are ready to get started can I get a yes if we're ready to get started or no if we're not ready to get started I see some thumbs up from people who have their videos on and by the way if you have your video on only I can see it we are in focus mode but hey you're welcome to turn it on and give me a thumbs up that's totally fine. That's just to protect people's privacy. I'm seeing some yeses and yeses. Alright, let's get started. We're using emojis with the thumbs up thumbs down alright. So today we started with a little bit of pre planning so we did a web design thought exercise from this morning so if I click this link, you are going to see my thought exercise. And I do have a link one for you as well. So if you're the type of person who is worried about the content on their website. So this is not sure like what is what I write going to be good enough for the Internet, which is a conversation that I've had a lot lately with people. I've created this graphic organizer for you and you can follow along earlier with how to use that on the recording, but it basically talks to hey, what is the goal of your website. What are your viewer or customers needs, what did they know that they need, what did they not know that they need. So this is about like how to add like how to think about calls for action how to build your credibility with case studies and all of this so this is something that you can use if you would like. This is from earlier that's why I'm going a little fast here, you don't have to use it you're going to see how I use it a little bit today. But if you would like this graphic organizer. I am dropping a link to this in the chat. So you are welcome to use it on like pen and paper and just use the prompts. You are welcome to download it and use it with Microsoft Word, another Word document of your choice you are also welcome if you have Google Drive to make a copy. So you're welcome to use this in whichever way you would like if it's for clients if it's for you. This is your playground for great idea generation just to get something on paper so that you can refine it and perfect it later on. Okay, so that was, that was part one this morning. Got that. I'm going to give everybody a chance to just make your copies make your downloads. Here is wait time. This is one of my teacher techniques that I sometimes forget to use. Give me a thumbs up or a yes when you're ready to go. We're just already in the chat box or you can say it. Anyways, and I will say I am speaking very quickly and I'm very aware of that fact. So if you need me to slow down say hey. You could just write like a turtle emoji or just say turtle that would totally tell me either way. Okay cool. I'm just like we are ready to move along. Alright cool. So, the other thing that we're going to think about with pre planning is we're going to start thinking about our color scheme or typography and images. So I want you to think about, like what colors are common in the type of website that you want to create with medical websites when I think about those I think about white clean backgrounds. I think about black text so like doctors offices. Sometimes they have like red logos because you know the American red corals or just the Red Cross has that color scheme. You don't see a lot of like, cute green on doctors websites for obvious reasons. Just because people think about that. So certain colors will mean different things and you don't have to overthink it. Don't worry too much about it, but just be aware that certain certain types of websites, probably have certain like expectations to just kind of have that in the back of your mind, you may have some preferable colors as well. For example, I really like to use black tech black backgrounds and white text, but that's not necessarily good for the types of websites that I that I would want to create my readers don't really like that type of thing for a lot of the things that I do. And that's okay. We're also going to consider our typography so like what types of fonts we're going to use. We're also going to look at some images first to get started get a setup for success so we're ready to go. I do look at that. All right. So we're going to start actually with typography because we want to pick some thoughts probably before we get started. And so you want to think about your thoughts, and the main considerations when you're thinking about fun choice, fun choices is is eligible. Is it readable, and is it appealing to your audience. So when you first install WordPress. There's usually a theme already attached to and you can pick another one will go through that in just a minute. But if you look at your theme, and you head into your editor, you're going to notice that. And I'll show you how to get here don't worry, I'm just going to show you something first and then we will come back to this. But if you start clicking around and you get to your typography over here. We're looking at our text you'll notice that Oh, I only have three fonts here. But that is less than ideal. So, we definitely have the ability to manage fonts with something so the first thing I'm actually going to have you do is a little advanced but it allows you to pick certain fonts. So what I want you to do is I want you to go to your plugins, this is how we extend our functionality with WordPress, and I want you to click add new. And we're going to use a plug in today called create lock theme. So, plugins, if you're brand new to WordPress are are ways that you can extend the basic features so WordPress. Think of WordPress like a box, like a maybe maybe like a computer right so you've got your computer and your computer can do lots of things right out of the box, but you can do things like add an external mouse rather than just using the trackpad. You can add a microphone to it. It allows you to do different things. So these plugins can be made by WordPress, the community of WordPress itself. What you can see and you'll notice if it says it's by WordPress or or they can be made by companies, or they can be made by an entire like just a person like a 16 year old kid down the street could make a plug in. If you're searching for a plug in using this directory, it does mean that it has been vetted at one point. You can definitely see things like reviews, how many people have installed it, and that can let you know like how trustworthy something is. So just for the super beginners, there's that. Today we're going to install create block theme. This is by WordPress.org. There's not very many reviews but it is pretty safe it is there are 2000 active installations we use it quite frequently it's made by and maintained by our community, which means that it is vetted there is a team of people working on it and vetting it. So I'm going to click that install button. And I am going to click, click, activate. And if you're using this like temporary one like I am today you might see a couple other things here. Don't worry too much about them. You'll also notice that if you install WordPress on a host of your own you will have different plugins here as well some come pre package with security features some add things that they think that you'll want some have absolutely nothing. That's to be expected. I mean you can always look them up later but today we're going to play with create block theme. And we're going to do that because create block theme allows us to manage our theme fonts. This is a very exciting feature. It allows you to add fonts to your website. So you've got a couple of options here you can add a local font and what this means is you've downloaded a font from somewhere else. You can upload it to your computer to this here so it's the same like you basically just choose a file give it a name and upload it right. We haven't done that yet. You're also welcome to add a Google font here. And from here, you can select different Google fonts. But it would give us a preview. Oh it does give us a preview okay perfect. So you can definitely search for things here I thought that this interface would give us a little bit more to play with. But we shouldn't do this yet I just realized we haven't picked our theme we're going to do this in a minute but this is going to allow you to pick a Google font. I was going to have you the other place you can do this open source fonts. So Google fonts you can download and you can always look for things that are open source. These are things that allow you to take modify reuse on your own website with the idea that other people could take modify and reuse that as well. So if you were to download a Google font make a change to it. Somebody else could as well but we're going to get into that later. Let's actually start by before we pick our fonts. Before we pick our fonts let's pick our themes okay. This is a new way that I'm presenting this so it's a little. We're going to come back to that. So first to pick our block theme we're going to click on appearance. And we are going to click on add new here in order to find a block theme so not a classic thing but a block theme which allows you to do a lot of really cool stuff there is this button right here that says block themes. And now there are 277 block themes to choose from. So for each of these you can install it and activate it or you could preview it. The preview is basically how it may look on your website. Wow that's really interesting. And all of these if as long as you're going through this way through your WordPress dashboard you're not Googling it but through this dashboard and all of these have gone through a process to make sure that it's safe to make sure that it works really well. And that you can use it on your website with, you know, the confidence that it is ready to go and ready to start designing on. But you're welcome to pick a font like this if you're just practicing with me today. I always recommend starting with the 2023 boom. This is the newest block theme it was created by the community. It looks like I this is already installed, but it is not active so what I'm going to do to activate a block theme is first I would install it, and then I click the activate button. And now our new theme is activated. This is what your website is going to look like on the very front. But don't you don't have to click that button yet. Let me know when you are there with a thumbs up yes I've picked a block theme and I've activated it. It can be 2023 or a different one. How adventurous you want to get today. I'm actually going to look for another one to illustrate something later, pick a theme, anything install and activate. I have a question. If we're using this one that's good for 24 hours, is there a way to sort of save it. Work on further to my WordPress account or no. Yes, please. It can be a little bit of a challenge to do. I'm not actually sure that it would work. Okay, that's okay. I didn't have time to get into the local thing there were a few more passwords and stuff so I'll work with it though. Okay, you can try. I'll stay with on with you at the very end if you have some time to see if we can maybe make that work but yeah I wouldn't plan on it, it's sticking around. It'll be good for me to go through it again. Okay, and this this will be available for you. Thank you. Is anyone else seeing any ads or is it, or is it just pretty, I'm just curious so when you look at your website let's let's all head to appearance. Well I guess it'll be different everyone's picking different themes. Alright, I'm going to go back to where I was. Also, thank you for asking the question Leslie I really appreciate that. I'm going to pick another random thing because I'm going to show you a little bit. This is the one that I keep wanting to use. So I'm going to install this thing really quick. It is not yet active. If I activate this theme, it looks a little different. When it isn't my site we're just going to see what it looks like out of the box. Oh goodness that is very pretty. So you're welcome to work on something like this for simplicity's sake I'm going to use 2023. I'm going to be there for right now. How do you get your menu, your left hand side menu, like when I go into 2023, it's full screen. Okay, did you click editor, or is, are you seeing this. I can see. Yes, I'm seeing that. Okay, now I'm seeing actually now I'm now I'm seeing the full left hand. Okay, so let's all start if we're, if we're lost, there's an icon in the top left hand corner right now it should be shaped like a w. Go ahead and click that icon. Yes, I've got that is that is always your way home back to this dashboard now that that icon, if you set a site logo will change to that site logo but just remember top left hand corner that's where that is. I'll go back to your dashboard. If I'm visiting my website. If you're logged in. There's also the, this button up here it'll be the name of whatever your site is the instant one gave it a random name so it gave it stormy Jane, I can always also click this dashboard button there. All right, let's head to our site editor. We'll go back to typography okay so we picked a block theme now I know to switch those around. And you may notice different things so if you pick something other than 2023 you're going to see a little bit of different things and that's okay they're not going to match 100%. Let's yeah let's let's start working on our editor so appearance editor this is how you get to where you edit the overall look and feel of your website. So think about this like structure. This is not where you go to write pages this is where you go to design kind of how the whole website is going to look and feel you're going to see that in a minute. So think about this and this is a new metaphor I was lucky enough I got to go see a show on Broadway the other day in New York City so this is kind of where this came from, but I want you to think about this kind of like a stage. Okay so your site editor, which is what you see here. This is setting of the stage you are creating the curtains what's what appears at the very top of your website and sometimes the sites, and you're creating the floor. So we're going to start by that so we're starting by picking our curtain color and picking our floor. Is it going to be on a New York City sidewalk or is this going to be Disney on ice. We're picking out the stage first how things are going to look and feel. So your header is what always appears on the top, your footer is what always appears on the bottom. Think about your colors and your fonts that you pick, like the lights shining onto the stage. Okay, so no matter what the actors are doing if you decide to cast them in a blue light, they will always be a shade of blue, right. So just to think about it a little bit like that to start, we're going to see if this metaphor works better than my last that I've used. So just to set the stage, we're going to start with our curtains. And we're going to start with some colors a little bit as well. Yeah, these are just out of order I'm going to come back to color, and instead we're going to start with structure. So we're going to start with our header. And you're going to sign these friends no matter what you write on your blog, no matter what you write in your about page your contact pages whatever else, what do you always want at the top of your blog. I usually like to start by just kind of putting the top on it. So in order to do that the easiest way and there. One thing to know about WordPress is that there are multiple ways to do one thing. There isn't necessarily a best way. There's just a right way for you. So the easiest way that I found for beginners is to click on this W icon over here if this is not already open. If this is already open you're already in the right spot. But if you clicked on the page like I did. You click the W icon, we're going to head to something known as template parts. And every theme is going to have something a little different so if you picked a different theme, you're going to see different template parts, almost all themes that will have some form of header, some form of footer. There may be more, there may be fewer. That is okay that is expected. But generally speaking there is one primary header that you can generally use on most page templates. So we're going to start with this header so find the template part here. This is, this is your header template part. So some, your WordPress website is made up of something called templates. And the templates is basically how each website page is structured. So whatever, what your home page looks like, right how it's set up versus how a page is set up right so you might have a contact page and about page services page. All have this a similar structure. Your blog page where you update and add new posts maybe this is a news page it updates automatically for you, that's going to have a different layout. So, each of these templates is basically just how your site looks and feels, and your template parts are basically reusable ways to use the same thing on multiple templates. So let's show you a little bit about this so let's start with our header and I want you to think pick whichever header you got so let's get to our header images. Please let me know. Let me know that you are in a header template part. Okay, seeing someone saying yes I'm there. You're in a header template part do I have some thumbs up some yeses some knows if I have a no that's okay I just need to know so I can get you there. Excellent. Seeing some thumbs up so to edit this, like this little pencil icon here. And now we're going to head to our WordPress block theme best friend, and that is our list view here. The list view is made up of every single block that is made up of our website. And this allows us to point and click and move things around with clicks of a button. Once upon a time your WordPress theme, you didn't really have the option easily to move things around. So for example, I've got the site title right. I want to put it on the other side of my navigation, I can do that with a click of a button. This used to take a lot of code to do I used to do it as a happiness engineer for automatic and oh man I never really quite mastered that skill. So you're going to see here that there are a lot of options, but it is still easier to do than it used to be and it gives you full control of your website. So, you've got a couple of tools here. The first one is your block inserter. This allows you to add all kinds of different things. Oh, I'm sorry. So there's the block inserter the easiest way to get there is by clicking this blue plus sign button. And if you click around your template that plus sign appears a couple other times, but the blue plus sign button is the easiest way to do this. Oh my goodness it sounds like it seems like there are almost more blocks that you can use than there are stars in the sky. But they are limited here. And these are made up of things that are different. Well, there are different blocks you use in different parts, but what I'm going to ask you to do is take a leap of faith with me first. Take a leap of faith with me. It is very tempting to just start clicking on stuff and adding stuff and like just kind of seeing what does what and that's a really good way as I have found to overwhelm yourself. So what we're going to do first is we are going to open up our list view so it's these three lines. Top left hand view here. So you can select every single block in your list so you may notice that these are under a group block here. If you want to see them you can drill down here. You can also press shift to select. Well, I think you can select shift maybe you can't. Interesting. If you're with me in 2023. There's one group block here and there are three dots to the right here. We're going to select those three dots, and we're going to remove this entirely. Let's live dangerously and I'm going to show you something really cool. So I'm going to remove this group. Suddenly, I've got a blank space. Give me a heart icon, or say yes when you're ready. You know yikes it's all gone that's okay though. I'm going to show you something cool. I got my heart got eyes I got a heart yes okay okay. So it is possible to recreate everything that you would see here. Step by step using this blue insert or here. I'm going to click it but rather than build it block by block. I'm going to click on this patterns button here. This button is made up of blocks that have been pushed together and designed by designers and vetted by the community so that they look lovely. I discovered because of the block editor that I am not a designer my stuff is pretty ugly when I try it from scratch. So what I'm going to do is I'm going to scroll down here to headers, click this button. And a variety of headers will appear here. I'm going to pick just based visually on what you see here. And again everything that you do you can automatically just delete so if I add something. And I look at it and I'm like wow this is really ugly I wanted something a little bit more robust if this one isn't but like if that's how I felt about it, I can always just remove it. Click the blue plus sign and start again. So I'm going to start with my header. And if you picked a different theme in 2023. And I don't know we'll get to your question in just a second. If you picked something different than 2023, you may see different patterns here. Some, some block themes will offer patterns as part of their charm that they they've the designers who created that theme created those patterns for you. What was I saying, but these are the ones that generally comes in and more added all the time. So I'm going to select one of those and then I'm going to answer Ivan's question. So Ivan has hey could you give a small internal like what is the block editor. So the block editor is what you see on this screen. And what it means is that your website is made up of blocks that you can style in a variety of different ways, with a few clicks of a button, and it's very different than what we had with classic themes. So if you installed a different theme and you're not seeing anything that looks even remotely like this you may have a classic theme. And if that's the case I have a resource for you. So what kind of theme do I have classic block or something else if you are seeing something different or you encounter a different theme in WordPress and you're like wow I don't see, you know this site editor at all. It probably means you're using a classic theme or a theme editor. Now let's talk about what we're seeing here so I'm going to use my list view again because it can be really tempting to just click on something and start messing with it right like a lots of these. You've got a toolbar that will appear across the top. Different options will appear on the right here. It can be hard to know what you're actually working on. I'm going to open up my list view and we're going to look at what we've got here. So it's important to open up anything that's in a group or a row. These are different ways that you can position things. I'm just to make sure that you can see everything. So with this header this is working on the very top of our website. We have what looks to be a site logo. Everything that says stack with site title. And then next to that we have navigation. And it looks underneath this like we have a cover block. So your site logo is an image that you can upload which I will show you how to do right now so what I did was I clicked on it. Because this overlay showed up I said add a site logo. This brings you to your media library. So I've prepared a little bit and if you don't have a logo yet that's totally fine. But I'm going to go and just going to show you a little bit of what you can do block by block here. So I'm going to upload just a random thing. You can see I've been very busy with my desktop here. The sample website I'm creating is all about like I don't know it's like a pirate bird sitting pirate rescue something parrot rescue. Because I have birds why not use bird pictures this is not a real website. But I'm going to upload this logo here. And this is just a note. And I'm going to include this you can definitely come back to this. And we're going to talk about this with images and a little bit. Every time you upload an image you want to use something known as alternative text. And this allows you to describe the purpose of the image so that people who have low vision who are relying on screen readers or if you live in a place like I do I live in Florida and a lot of the times. My internet doesn't load on my cell phone when I'm just out and about I'm not really sure what that's about but it does not load and that's been the case the whole time I've lived here. So if there's something in this image like text. I need to be able to describe what this is about that allows people using screen readers to access the content that allows people with a slow internet connection to see like what is happening here. So if I didn't have the words here. I would just write like the name of my company logo. But because it has words I want to make sure that's in here as well. So I'm going to write this as. Pirate parrot rescue logo and I am going to select it. So I've uploaded this picture I gave it out text the alternative text is really really important because open my media library and let's talk about this moment and the alternative text is really important. It not only helps with accessibility, but it also tells search engines, what your pictures are about Google, other search engines love to know like what it is they're looking for. So I think the image here is really important it allows your website to be index faster, and it usually means that your website is boosted higher in the ratings because Google figures what it is out faster and also they do like accessible websites. So that's really important. So just something to know. But yeah so I have several options now right so I can click on it and be taken to this and there's a bar above here that lets us do different things. You'll also notice some dots here and I highly recommend this part of the reason that we're experimenting not doing this on the live website. You can definitely resize it you can play with things. There are all kinds of different options here I can change its position. I can also drag and drop it with this here. So I can drag and drop it in the site editor. Again there are multiple ways to do the same thing so I highly recommend just playing with it. This this theme allows me to apply what's known as a duo tone filter so I can change the colors ho ho ho. And then I can go into a bunch of different things like there's a lot to learn about it but there's also a lot to play with so I hope that you find the courage to experiment and play and I'm actually going to leave this red and green for a reason to go back to this in a minute. So I really encourage you to experiment to play. And if you're like whoa I just did something terrible what happened, we have a beautiful back button up here that will undo what you just did. It doesn't go back forever unto eternity. I think it goes back maybe 10 clicks maybe 20 I'd have to test that. But do be aware that you do have an undue button. This is the first place that you will find things. Apparently my saving failed great test websites that don't always work correctly. Anyway so now I have a logo. The other place that you'll notice if I'm clicking around using my list few. You also have options over here on the right. And they allow you to do different things every block has different settings. So for example, this is the name of my website stormy Jay, I'm going to delete it and rename it now. I'm going to call it pirate, parent rescue and coordinate. I can decide to say hey, I want this to link to the homepage now I remember this is on the top of every single website that I have. And I want it to link back to the homepage. I also have the option with this specific block to open it in a new tab. So if someone clicks that link, it'll open and the other page will be somewhere and you're going to find that that is true for every single block that you've got. So, yeah. This one I'm using a cover block here, and I'm going to replace it with something else but what I want you to do right now is I want you to just kind of play with your existing header type of part and because you have these sample websites because you can play around a little bit. Feel free to do, like to really just experiment and know that if you break something, that's okay. You can always undo and it's just not on a real website. So take a few minutes, I'm going to stylize a couple of things. Try and make your header just look the way that you want using these buttons here. And, and the buttons that you see on the side. Just take a minute to do that. That would be perfect and that's okay. Another picture. Worry about colors or fonts yet we're going to do that next. I'm going to make another website really quickly y'all. I am quickly recreating everything that I just did because my Insta WordPress site decided it didn't want to save so that may happen to you that's not a common occurrence with WordPress. But I do hope that you're kind of watching my process if you're using it so you can see this. So I'm going to do it real quick. I'm going to just remove everything. Add it and then we're going to move on to the next part which is going to be to make it pretty and consider some colors. Sure. Place this with. All right, let's start to finish up where you are. We're going to head to another do a tone. I'm deliberately doing this to talk about the color consideration. Okay. Finish up where you are. Definitely take some time later to experiment and play. So now, and just so you know you can see that my you can know that your website worked because it says site updated in the corner if you're using Insta the instant WordPress it may throw an error for you and if that is the case I am truly sorry that is. We're going to be setting it seeming that it's going to be going away so I think there might be some more errors going on there at the moment. Let's take a peek here and you can definitely play in practice. Now if I head out so I had to head back out of this and back into my general site editor we're going to click the W icon up here, and we're going to click this arrow to get out of template parts. I'm going to click on templates to your homepage templates. So this might say home page this might say front page. I can say a lot of different things. I'm going to click that. And I'm going to click the edit pencil button to the right of it. And you will notice that everything that I just did is now on top of that page. And that's going to be true in a lot of your templates. I don't have multiple headers, but I'm going to just look at different templates. Well let's say that I have a blog page. That's actually I know this is named differently. Your blog page is usually found on your index page. As you can see, that's already been designed there on my index. That's also on a quick edit page. That's also on my page block as well. So when you make changes to template parts, they change everywhere that they are used on every single template. So one thing that I want you to be very aware of if you are super new, this is really important. Only can you change your templates or your template parts in these actual template parts. It is possible to accidentally change a template part in your general homepage. So here I am I'm in my homepage template. I click on my list view. You'll notice that these are in purple. This is header. And this has this double diamond shape. Memorize that shape. That means it's a template part. That means if it's used on other templates, anything you do inside of this will ripple to the other. So watch watch me remove this cover block here. I'm removing it. I don't want this on my front page. And now. Oh no, it is on. It's gone from every other page as well. So pay very, very, very close attention whenever you are working with an attempt to part and you'll know when you click on it see how that is highlighted there that's also in a light purple color. Okay, this is probably use somewhere else on your website. Be careful, which is why I recommend creating your headers and your footers down here, not like on these pages specifically so that you always remember you head out. You say I'm going to work on this not in templates, but in template parts. I also repeat this process with your footer right so I can go in here. Okay, this footer is on every single website and I'm not going to prompt you to do that now for the sake of time. But I'm going to remove this and I can do the same thing I can press my insert or button here. I can flip over to patterns, and I can say hey, there are a bunch of footers for me to choose from. So there's a simple default one that we started with. There are some in columns or this one has social media icons here. You can definitely select there. And you can add it from there. So, with this in mind. This is basically just a way to give you a template a way to start. You can also add in additional things so let's say that you wanted to add. Something that goes on a footer let's let's say I wanted to add some more navigation on my footer. There is a block called navigation, and it will list out anything that I add there so it comes with the sample page it's already on here and we can talk more about how to update your navigation. In a little bit once we actually get into the meat of creating pages. But you can also add additional links so this is what exists just out of the box with WordPress every WordPress installation usually starts with Hello World the first blog post, it's just meant to show you that this is what this looks like. It also comes with the sample page, and then these are category pages as well. And also welcome to type of website and so, for example, the website that I use to like create and give like reusable instructions like I sent to you today is adventures in WP land calm there's nothing else on it aside from that. I can press enter to add that link. And now that link appears, and that was through this plus sign button here. If you press this plus sign button and it doesn't ask you to add a link it might mean that you're in a different block. In which case you want to open up your inserter here. Now you'll notice I accidentally added two things I can either undo it. Or I can open up my navigation again this list view really helps you figure out what it is you're working with always always always use your list view I know it's tempting not to, but I can just click these three dots and remove it. If I don't want that there. So those are a couple of things you can do. So once, once you get you get that styled, you know that you've got the top of your page and the bottom. I'm just going to center this call it good just as an example, let's get to the colors of your website. So now we've got I'm going to head back out of here and let's have well, hold on. I just went way too fast. Okay. I'm going to get back to where I was, which was in footer template parts. Let's click back to our main home page because we can start to structure things on that. I'm going to press this arrow key twice, click into templates. And then I'm going to click into my home page. I make sure that I do that by clicking this edit button. I'm going to click it and fancy with colors. Now before we do that someone as if I have a hosting site do I need to keep the powered by WordPress at the bottom or can I put it some like put in something else. Nope, you are welcome to remove that. So with my current thing I can click these three dots and remove it again it's usually better to use list view. I can remove it this way. Some hosts will have something like powered by blue host or powered by so and so some of them automatically add that in usually have to like pay to upgrade to get rid of it. But other hosts just don't have that at all. So you can totally just pick that to the curve. That's fine. But let's talk about colors now. So, so far. Oh, go ahead. Will you be also like talking, will you be also showing about like the interactions we have like the parallax animation and all kind of stuff and how to do that in the WordPress. Parallel animation, do you mean parallax scrolling the parallax scrolling at the parallax calling and all. Oh, yes there is hold on I think there's a tutorial for you that's that's an advanced feature. Let me let me grab that for I think that's a double check. So, I think what you're looking for do you want the header to stick to the top or do you just want it to continue to scroll forever and ever and ever. I mean like in general, for example, if I'm using like any images, like in my website so I just wanted to have like some parallax like animation. So like how to do that in WordPress that I wanted to know. I think there may be a way to do that in the site editor, but you also may need a plugin for that that's probably beyond the scope and sequence of today. So unfortunately I just I don't think we have time to go over that, just because it is. So, I'll see if at the end if I can find some time to, to look that up. If you directly message me your email I will write it down and I will see if I can find you some resources okay. Sounds like a plan. Okay, thank you so much. Yeah, my pleasure. I just want to make sure that we're playing along. Okay. So we're playing with this bar that appears. And also what is known as our settings so these are settings, block by block that allow you to do different things. Now let's get to the overall like possess the look and feel let's design your lights and your curtains and the look and feel. So, you're going to click on this half moon icon and this is known as your global styles. This is going to allow you to style your site in one place. So rather than on every about page every contact page every home page. Rather than having to add the colors like let's say I wanted a black background instead of a white one, rather than having to do that every single page. This lets me design it once and have it automatically applied to any template that uses it. So, to get there. You should be in your global styles here. Say it's super blank. We've clicked in. You're going to click this styles panel here. Half moon icon. And then we're going to go someplace magical known as the word press style book and you find that by pressing this icon here. You're going to see the style book here and you're going to see something that looks like this text media design widgets theme. Give me a thumbs up or yes, when you're there. So one more time to do it nice and slow to get there. I click this half moon icon lights up with style but I, I need to get to be for that. So I was still in block. Okay. Okay, now I'm all the way out. No, I don't want to be in header. I don't want to be in templates parts. You're doing great. No, but if I click out of design it says changes you may may not be seeing Oh no so I just want to stay here. Okay, so now I'm on this page. I still don't see that. Have some moon. I'm going to get to style book. Okay, so I think that you are somewhere like in template parts like the. No, I'm still bad. I got out of that. Okay, have you been to this screen. Yep. Okay, did you click templates. Yeah, it shows me on the right template and blocks still. Okay, so click on templates and then home. And then click this pencil icon here. Sorry, everybody doing great. You're doing great. That's okay. That's why we, we go slow. And somebody else has the same question you do they always do. Okay, so I'm in design. So click on templates. Yep, beautiful quick templates. Okay, and home and home. Okay. And then the edit. Yes. Okay, now something you said is really important for everybody to know. This is just where we are just because you're going to be able to get back to this page a little faster and we'll see your changes faster. Okay, so this is just where we are just in template parts where you just were if I am in my header and I'm editing my header and keep in mind I can't just click on it. Oh, I can't because I just did. Sometimes when I click on it, it doesn't bring me there. If I click frantically, it might bring me there. Just know you're not alone with this. You'll also notice that this styles button is here too. That but the thing that I really want you to know is that this styles button affects every template in your site every template part, every template, etc, which is why I'm bringing you back to your homepage because if you're branded to this I want you to have it in your mind that that's where this is. And by, by the way, this was this workshop was scheduled to be two hours today if you have to jump, you will be able to find this in the second half at a later point. Otherwise let's keep going y'all. There's a lot to learn and y'all are doing so great. Okay. Man I want to run like a cohort where we do this like once a week and just like build things wouldn't that be cool. Yes. Yes. We might be able to make that happen. Anyway, so this styles icon if you click on it. Yeah, it can be really tempting theme by theme to click on this and just start making changes thinking oh this is only going to affect this template here right so I'm going to quickly make a change to my background color and I'm going to change my text color, and I'm going to change my link color to something else. Apparently my headings are not selected here we go. Something's not changing and some things will be I changed the color of my heading somewhere else. Okay, either way, you can see that some of these changes have been made and I'm going to click save. There are lots of different places to do things and try to teach you the best way that I know how but I might have done this thinking oh this just affects this right here. What happens when I go back to my main website now if I make the changes there just in that template part. I notice that my entire website has changed looks. Okay, so this button, which I'm going to click edit, and it will appear back here this button is really powerful it changes every single thing on your website and the reason for this is because most designers want consistency. So it's pretty rare that a website will have a blue page and a green page and a black page and a red page like you might see that on like kids websites like. But generally speaking your company your business has a color palette has a brand. So the idea there is you want to keep it consistent so that everything is there. So the other way that you can make sure that you know okay everything that I'm doing is everywhere else is by going to the style book here with this icon. So I'm going to click this icon here. And you're going to see a bunch of random texts. And this I mean this probably answers the question better what is the block editor. These are all of the different blocks that you can use in your site editor. There are more. If you add plugins, but for the but from right out of the box this is what WordPress is basically made of. So this text is hey, every heading that you write. So page titles or pettings within a page, every paragraph you write every list all of that is here. And you'll notice as I click, I can change them one by one. I would recommend generally speaking designing once without clicking on each individual block. And what we can do here is we can set the overall look and feel of our website. If you're using 2023, you're going to have a button here that says browse starts. If you picked a different theme, you may not have this button here. This is a relatively new feature not all block themes have it. But what this does is this allows you to quickly pick a different look and feel for your website with a few clicks of a button and you can start designing from there. So, with this in mind, you'll notice that this impacts everything that I've picked so far. I need to circle back to font still let me forget. But this impacts things from your fonts to your color choices to even sometimes your images who that one is very bright right. So I recommend that you pick one here or you can start styling, but I'm going to pick just a random one. I like this one this reminds me of books, and you can see how every single block that you write or have written on your existing website will be styled here. Going forward for the most part. So to get out of that once I picked a style or maybe you don't have the styles and that's okay. You have the ability to select your font. So the headings mean h1 h2 etc. Yes, that is correct. So this one. So typography allows you to change a lot of things so your general text. You can generally change to one thing you can change the size of it and you'll notice that these are my headings so they're not changing, but the rest of my text is. So let's say that I make all I know that my audience is like super seniors right I am writing an exercise website for people who are in assisted living so that they can keep their independence more. So I want to make that font really big right because I know they're going to be on their smartphones they need to be able to read it. You'll notice that every single block has changed here. Except for the heading block up here. So with that in mind. It is also possible to style things block by block so let's say I was an author, right, and I decide that I want to make my quote block different than all of my other blocks. I can click this here. And I can change this I can change this to a different fault. Let's see source of pro, I can make this. Anybody or I can make it super large. I also have the ability with this particular font to make it extra bold. I can make it bold and italic. I can add extra space between my letters, so that might be very hard to read but I could do it if I really wanted it to pop. But let's say that I do it let's say I go through and I style every single one of these blocks something different. I can either rebrand my website I say you know, I actually want my text to maybe not be quite so not quite so big I had back to this block you'll notice that I'm editing justice paragraph block because I clicked on it. So this is changing. But where did my quote block go, my quote block here. It's changing. Did I make a default size that shouldn't be changing interesting. However, the font shouldn't be changing either. What did I not save it okay okay what did I do here. No, oh interesting I think I discovered a bug y'all that's not supposed to be changing and it doesn't belong my live websites. Generally speaking. That won't change I wonder if that's an update. I learned things every single time. I'm not working as expected anyway. So I want you to take just a few minutes right now to not don't go block by block, but I want you to play with your colors. I wouldn't mess too much with the layout options this tends to be a more advanced thing so if you're just learning I just would leave this alone for the time being, but play with your colors. That's what it does between like all of the different blocks on your websites, just to kind of get a feel of what this will do. So just take two minutes there. And then we're going to talk about installing fonts. And maybe some, some color things colors and fonts. That's what we're going to do. Two minutes, set a timer and go. 15 seconds so start to wrap up what you're playing with. I'm not seeing within. So I picked a style but I'm not seeing how to change the colors within that style. Okay, so the way that you got there you click. No, I got it now. I've got it now. Thank you. Sometimes it just takes you asking somebody. I sometimes give up and have to ask somebody to like work for things that I have misplaced and it just took me like complaining I couldn't find it and then there it is. A magic trick. No, it happens to all of us. Okay, they get us to where we were so we set the stage with our header or footer. We're going to talk about that. We're going to talk color. Yes. Okay, so I am going to link you to some color best practices just because there is so much to learn there. But color is a really important thing for accessibility specifically. I want to look at this. This is, let's say that I was trying to be festive right I have a website I wanted to make my background red, and the font green. What do you notice about it what do you think works what doesn't work. No wrong answers here just what what do you notice. Use the link that I already sent or you can just be like, this is what I think a louder typing. The contrast between the green and the red is kind of off. It hurts the eyes. Yeah, so the contrast is that's such a great point right so the contrast is, it's kind of hard to make out it's kind of squinty even for me and I've got really good vision. So if someone has low vision, or really needs to like make their their tax like extra big to see like it kind of blurs together. So this is really difficult to read yes that is exactly the point that I'm trying to make. Also, if you want to go ahead and actually click this now green so color contrast is super important you definitely want the contrast to be as as high as possible right so it should the color contrast should be high enough for good readability but it shouldn't be so bright for people with sensitive eyes or people who may have cognitive problems so color contrast is really important. It does need to be strong but it shouldn't be as vivid as when I was just using and I probably should have put a warning on that now that I think about that. So I do apologize on it that that that did hurt someone's either will fix that going forward I just realized the other thing to know let's go back here. A lot of people will say like, pick the red icon if you like this or pick the green icon if you like that. Right. So if I am normally able to see color that's great. But if I were to look at my website and black and white. That looks almost identical how would I ever know how to see that so so being aware of color and checking out this color best practices is a really good idea when you get started. So you might take a look at your website I'm going to switch back to this screen so look away if you need to. I'm going to change this to something so it's not quite so bright I don't want to give anybody a headache I just realized I was trying to illustrate the fact that somebody couldn't read this text. But I feel like I did that poorly. So I apologize and I will do better next time I'm going to change this background. I'm changing it just in the heading. How to get back out of here. Hold on almost done. Hello is background. Okay, that's better. So something like this it is high contrast people can definitely read it. But it's not quite so glaring that it would be it would be difficult so it's just it's something to keep in mind. Now, so someone asked what about ADA guidelines I had to be very careful of this when I taught college made PowerPoints etc. Yes. So that is what I linked above. It is there this is from the accessibility handbook and it comes from design best practices. So the quick tips that I want you to take away from this are that your website should be usable and grayscale. Think about uncomfortable color combinations like bright green and neon yellow or very very high color contrast like that is something that I just did and I read it and I realized that I had screwed up. And I think that it's important to know that when when that happens if that happens that it's it's important to correct that as you see fit so this is me trying to model that as kindly as I can. So if you're using dark fonts on light backgrounds like you see here usually easier to read some people may need the reverse there are plugins that let you completely change that. And if you're using a really light font on a dark background using a larger or thicker font can help you with that. So, this this goes through a lot. Don't use color to differentiate between elements on a page. There's lots of different things here so there's a lot to know man. Every time I run one of these like getting started with wordpressings I realized just how much there is to know like as you're learning this skill like be really proud of yourselves for making it this far and sticking with it just because there is a lot to know. But the more you play with it the more you practice especially practicing on a sample side of your own, I can really take you pretty far. So, I'm going to change this green just really quick to just white. You'll notice that it's thicker okay great we use this I can see how this looks on my text on my media. Overall design it looks like my buttons are green this might be a fun place where you can change some stuff this is one where. If you change the background on the buttons and the colors and things like that it will be applied to every button that you use across your whole website. So that's a really fun one definitely takes some time to play around with this, but it is 520. So, let's go and look at the general look and feel of our website so so far we have set up our header. I'm going to real quickly because, again, I don't want to bother anybody's eyes. I realize the point that I was trying to make is when I should have. Anyway, let's head back to our main tablet so I'm going to go back to where I was and then get you back to where I need you to be as well. So we were here in the style book to get out of the style book. There is a button in the corner here. Go ahead and click that button. And then you should be looking back at your, your homepage template me a thumbs up or yes when you're here with me to change style really quick to just make it easier to see saving failed. Oh no. Okay that's that's one of the issues with the famous of timed out. Yeah, that's okay. Click around with us and play with us. Again, I think this is an issue that I've only ever seen with this instant word pressing it's one of those, those great things were like we can spin up a fast site but also sometimes it has to relax so thank you very much for your patients. So when you're here, you're going to be looking at something that looks pretty blank. If you're using the 2023 theme and that's okay. We're going to talk about structure and we're going to talk about pages. It does say, even though it doesn't. Excellent. Even better. Love when that happens. All right. So, we have our header, we have our colors. If you wanted to add fonts, which we had talked about doing. Let's head back out to your dashboard so we've been in the site editor for a little bit let's head back out to our dashboard the way I'm going to do that is by clicking that right hand corner and I thought that was going to do something different so I'm going to get back there and go through it slowly. So I'm going to click the very top left hand icon. And then I'm going to click it again and that is going to take me back to my dashboard here. I know we've structured our website a little bit we set up our header we've set up our footer. Let's add a font and we're just going to pick a couple things so we installed create block theme earlier this extends our ability to use WordPress this is not a feature that comes with WordPress right out of the box. But if I had to oh I didn't actually do it on this one. So let's see a manage theme thoughts for those of you who joined us after the fact for those of you who forgot how to install this I went to plugins at new. Great block theme, quite a setup as I hoped I would. And then I know that this is the one that I want I am both going to install it. And once it installs I'm going to activate it. Success, activate here I go. And now if I hover over appearance I now have managed theme fonts. This is the quickest the easiest the fastest way that I know of and if somebody else knows a better way, please let me know say it or put it in the chat but you can quickly add a Google font from here and this is not the best way to see this I. I'm going to click around a little bit to to find something. But you can see like different preview types and just pick something here just so that you know how to do it. And you'll notice this is some of these have more options than others. There's a button here that says select the font variants that you want to include. And what that means is that it gives you more options right. So if I just install the light one which is kind of, I'm not going to sell it I'm going to go to the very deepest darkest one so that everybody can see it is 900. I can select all of these. Or I can select one or two. I recommend. I recommend using between like probably two to six one for your headings and one for your general text, because the more of these that you install on your theme, the slower your website is going to load. And that it's not going to be a huge noticeable difference but I think I read a statistic somewhere it's something like if a website takes longer than three seconds to load, a lot of people bounce right off of it and go look somewhere in the text. So it's not a huge deal like you can definitely add some of these and remove them later. But I would only recommend adding a couple so let's add this big thick one because maybe sometimes I want to really like pack a punch. We'll do one without the italics. So I'm going to select these four because I'm going to use these in my text this seems pretty readable when I scan it. I feel like people can read pretty well. I notice things like that the D is different than the P. A little bit. Yeah, it's a little different so that's probably good. I just wanted to know about fonts and I just learned about this I'm trying really hard to not get stuck in the weeds but from the start this looks very readable. I can differentiate the characters it fits with the motif that I'm going for I'm going to click add Google fonts to your theme. And this has now been added directly to my theme. So you can definitely select another one if you want I'm going to give you a minute just select a font any font just to practice the process. I'm going to select a font for your headers and in a header is generally meant to be eye catching and readable. But it doesn't have to have the same readability as say an entire paragraph of text so it's okay to be a little bolder with your headers a little bit more fun, a little bit more stand out as I suppose. So I'm going to pick something like that and I hope you do the same now. This script font. Add this Google font to my theme. When you have added one or more fonts give me a heart icon so that I know that we are ready to go. I just want you to be able to install a font of your choice. Another person says they're ready. Excellent. I'm going to give a couple more. A couple more minutes. So this is just practice today. Second thumbs up third thumbs up 30 seconds and finish up now. So this font has been added to your theme file specifically so that means that if you switch themes, these fonts are not going to follow you. So just keep that in mind. Let's head back to our editor now. I'm going to add that by clicking on appearance editor and to any old template template part I like to work from home, because that helps me remember this is where I'm working everywhere, working on my home base. To find this you're going to head back to your global styles because again you want to apply this font everywhere. So I click my styles. I'm going to start with my geography. I'm going to start with my heading. And now if I select font, my new swoopy handwriting text is right there. So you can see this change this has changed everywhere that I have used a heading. So you can tell the difference between what is a heading and what is general text with this. What I notice is that I have fewer options here so since I only installed the one. I guess I do have a little bit more control here like I can make it medium or bold. I think I can this might not be true in every block theme, but I can make it even more italicized, but some of the additional options have been removed so just keep that in mind. So I do have a little bit more control here, but I do have a little bit more control there. And now you know how to install a month. So I recommend using about two fonts generally from the start one for your headings. I picked the swoopy what I really like handwriting fonts this one's a little difficult to read but I think it's readable enough. Let's pretend it's for my calligraphy class that I'm teaching will be able to read that I know that that's my audience it's okay. And then another one for your general text as well. And we're going to get into how to adjust text on specific pages in a minute but I'm going to select the one that I selected to start. There we go. Call that good. Give you about 15 seconds to finish up. I'm going to slow down type slow down and I'll do that. Or just go on your screen and do things up. Sketch back over here to my curtain analogy. Did the header we did the footer about this in a minute. I think this will make more sense if I keep this the other way. That's okay. So, I'm going to ignore this block next right now. We're going to realize that we have set the stage. We have set up our header. You may have set up your footer if you were real quick, we're going to for all intents and purposes pretend that we've created both those template parts they're exactly the way that we want them to. We've picked our colors. We've picked our fonts. We've thought about okay like is the contrast high enough is my font readable is it big enough. Is this appropriate for my audience. For example if I were making a doctor's website right I wouldn't want like a font that had like swoopy hearts like oh my gosh I'm your doctor heart above the eye like that. That's not the vibe we'd be going for so as long as you've got that you've got your vibe you've got your colors you've you have the general look and feel of your website your stage has been set. Now it's time to figure out hey, what is going on inside that stage. So if we look at our homepage right now. You'll notice that the only thing that's on it right now is hello world and this is for the 2023 theme if you picked a different block theme you may be seeing a lot of other things here. So this hello world is a blog post and let's analyze that really quick let's see what it is that we're even looking at so I'm going to do that by using my list few again again this is your best friend with block themes. Let's expand this to look at this a little bit. So what we have here is a is known as a query loop, and this is a fancy pants way of saying hey, I want to show blog posts on this page is 2023 theme starts off as a blog theme there is a way to change that something different. But what it does is it's using what are known as theme blocks. It's going to have a different blog say hey, I know that I don't know Linda is going to be writing lots of different blogs and every single blog is going to have a different title. It's going to have a different excerpt. It's going to have an image that's associated with it. It's going to have a different images associated with it it's going to have a different date. This is that any content that I write right now the way this is set up. A new post will appear with just these things. So what you're looking at now this is the site enter this is specifically for the structure of your website. And there's not a lot here right now what I'm going to show you what I mean by it's going to pull things through. I'm going to head out of here and you're welcome to do this along with me if you'd like, we're going to head over here back to our main dashboard, because your site editor, your site editor is structure. I am not writing almost anything on this structure I am just making it look and feel the way that I'd like because that way anything that I write posts pages content, things I need my customers to know for the most part should appear on a post or page on So let's go look at a blog really quick so it's going to show you what I'm talking about here. I'm going to click out here. So I click my top left hand icon and I click it again. Your content goes in posts and pages and this is going to take you to an editor that looks very similar, but it does different things. So go ahead and hover your mouse over posts and click add new. It's going to welcome you to the block editor. We're going to keep our fingers crossed that Leslie's choices have saved with her sample website. This will illustrate what we see here. Give me another thumbs up when you get here. One more time if you're trying to figure out how to get here. We started in our editor. This is our look and feel. We clicked the top left hand icon twice, which brought us back to our dashboard. We have our posts. Add now go back just one. Just one you got it. Posts. Got it. You can also click that button. And there's a handy dandy add new button that stays there the whole time you don't have to like to try and figure out how to hover over it. Okay, now I'm there. Beautiful. So thank you. Yeah, of course. My pleasure. I love doing stuff like this. Okay, so this is a blog post. So this is generally, if your business, for example, has a blog or maybe you want to have updating news things like, you know, kind of kind of like on Facebook, right? Like anytime your business had a thing you might want to write a bit of news for people to see that's generally how these pages are used. These pages update automatically and they will change automatically on a blog page and a set that way. So let me show you what I mean. Currently, our home page is set to show a blog page. So let's say I'm writing a news article about like, why you need to. I don't know why you need to only give your parents race, which is a true fact, because otherwise they hate you forever. So you are now looking at the page editor and it's a little bit different. The first thing to note in the page editor or post editor is that your global styles are gone. Okay. So any change I make to colors typography, text backgrounds, etc. will only apply to this page. Okay. That also means that if I make big sweeping changes to the rest of our site, they may not be applied to this one. Okay. So I'm going to show you if I decide, hey, I want the text in this box only to go from this, you know, blue and white, I'm going to say I'm going to make this text, what, and the background black. That is only going to apply here. The choices I make here are going to supersede all the choices that I made in my site editor. Okay. So if I do a big rebrand, I decide, you know, I'm tired of the pink background today, we're doing blue. This is still going to stay here. So if something is sticking on your website, it's likely that you made changes here. I highly, highly recommend not changing color or typography in the poster page editor just because it can be so sticky and it can be kind of frustrating to find out like where it is and why it's stuck there. I've had to ask people for help before when this was brand new. But I can write entire blog posts. And I'm going to use my insert are the same way that I did. But I can do all kinds of things I can add a gallery of images so I'm just going to upload some pictures real quick. Whoo. Everyone can see my birds yay. I can add a gallery here. And I can decide hey for this specific gallery I want. Oh, and you'll notice that I'm clicking around and things are changing a little fast. I have a bad habit of just trying to click to make things work. Once again, use your list few, and you can see that I can do certain things. So for example, I could change just this one image by selecting it here and saying I want this image to be black and white and nothing else is, or I could say hey, I want this whole gallery to maybe have an overlay. Oh, maybe I can't maybe I have to do it one by one. Maybe I have to do it just because I said that one. I'm not sure but there's a lot that you can do and play with here. Now I'm curious does this style of that change everything. Oh, you can get to your global styles from here today I learned okay. So I think what would happen here is if I click the styles button, and it says gallery, we're going to find out we're going to learn something real quick. This is going to create a blue background here. I wonder if that's going to apply everywhere. I'm going to save this draft and I'm going to check something and I'm just going to go back and see if that added something to my gallery and the way I'm going to do that is I'm going to head back to my site editor. So this is a new thing that I just discovered and I just I'm very confused by it I just added this blue background I want to see if it applies just on this page or everywhere. So just ask yourself do you think it's going to be just on this page or also in a gallery. I'm going to find out, save my draft my draft is saved out I go, I'm going to head to my site editor. And I'll know if this is everywhere. By heading to that style book so I'm clicking on styles style book. And I'm going to go look at my media did that add it everywhere okay it did not. Oh, I have some feedback. Okay, cool. I will give feedback later. I thought this might impact everywhere because once upon a time you used to be able to make changes on a poster page and I'm pretty sure it happened everywhere so I'm glad that they made that harder to do. That's good. Okay, back to what we were doing erase everything I just said. So we're in our pages for my posts I say this is a draft. You'll see it's there nobody could see this website if this were live. I'm going to click it. I'm going to there are several different post settings here. We're not going to go in depth about them for the sake of time I'm just going to give this a featured image so I'm going to select. I don't know a random picture of my bird this is why she's very sweet. And I am going to simply publish this page now, and you're welcome to publish this as well. So give it give give your page a featured image. And to do that. Make sure that you give your page a title. If you want you can just write a quick spirit. And then I want you to set a featured image to set a featured image you'll notice I'm in this paragraph block here. This is one of the settings that you're going to want to get familiar with to to change. If you flip over here to post. This will always tell you when this is going to go live when I press publish it'll be immediate. I could also schedule it for the future, or put it into the past. Fun options here to explore. But you want to scroll down to featured image and just select something from your website. When you're finished, click the publish button. Why is that blue. Sometimes WordPress does stuff that you don't expect. I mean, thumbs up when you're ready I'm going to go investigate something post template because I want to see. Maybe it's just a page. Okay, that's why so this has a blue overlay because this themes page template has that overlay. Okay, cool. That's why that's what I want you to notice now. It looks like people are hitting time and that is totally fine. Let's keep going. So what I want you to notice here is that what the title that I wrote here appears the featured image that I wrote here appears it's literally pulling through the content from the back of this to the front of this now. So that that's something to be aware so for thinking about our WordPress as a stage better for. We have our header or footer curtains the floor. And then everything that you write in posts or pages shines through, like shines through the center of that, just like a stage. So what I mean by that is if I head over here to design. And then templates, let's look at a page template really quick. Okay, so we have our stage or header or footer. What this means is that any post and I think this also works for pages. If I edit this and evaluate it. I'm going to open it up again, ignore my header. Why is that being just on this fascinating experiment with that. Anyway, if I look at this and I open everything up. I can see that one of the blocks of this is using is the post title blocks or whatever I name a poster page will be here. I noticed that the post content anything that I write within a post will be displayed here. And then any poster page that it has comments enabled will look like this. So that is the key difference between content and theme. Your theme is the overall look and feel of your site, your content is what gets pulled through here. So let's actually go and write a page just real quick, all together now so to get out of this again so we're looking at a page. I think that's weird about this one that I didn't set I'm not sure if it's always probably the, I know why it's in the style so the style that I selected over here. When I was browsing my styles, it's created an overlay there that's why that's happening. Okay, sometimes things will happen that you don't expect and that is normal. That is what I'm trying to say. I want to show you just how this works one more time. So I'm going to head over here. I'm going to click this again to head to my dashboard and this time, I'm going to create a page. I'm going to title this page about, and I'm going to click publish. I'd like you to do the same. And I want you to create an about page like publish. I want you to. So once that's published. Yeah, okay, so we're going to publish it we're going to make it about page. We're going to go to the contact page. And do I don't know our service page. Or just another page of your choice, or just about let's do it twice, take a time. So if one about page and one page so in order to make a new page, I'm going to head back to my dashboard again that left up the left hand icon. Add new, I'm going to publish both of these pages. And I'm going to view this really quick. So I haven't written anything on this contact page yet but you can see the header that I created, the footer that I created are there. So now I want to add contact or a contacted for a contact information let's go to our about page actually click that and you'll notice that with this page. This theme it automatically added those pages to my navigation. So let's go to our about page because I want to show you how to style within these things. So if you go to your dashboard. We already know what this is going to do is going to have that. Well, I'm going to show you, we already know that this template specifically is a page template. It's going to have the header, it's going to have a featured image I didn't set one, but it's going to post title the content and then the footer goes below it. So that's something that I put on a page, and I will transfer over to another thing. So that's your content that's the stuff that you know you want to keep. So I'm going to have two appearance or not two appearance. So much I'm going to have to buy about pages by going to pages, pages, and I'm going to click edit. Next to the about page. So you're going to notice when you click on your inserter that Lou plus sign up in the top left hand corner. You're going to notice that you still have access to patterns. So I'm going to take a look over here, and just try and find something I'm actually going to search for about and see oh it doesn't look like there's an about pattern there. So you can definitely add patterns from here maybe text. Okay, so yeah we can we can use text here. This is another place that you might look because I'm not really seeing what I'm looking for here and I'm going to send you a link to this. Wordpress.com slash patterns, not dot com wordpress.wordpress.patterns.com.com.org or different. Here's what we want. You're going to be able to find a couple more patterns here. So I'm going to search this pattern, because I want to create some really strong content I want it to look pretty but I also want it to be good. And you'll notice now I've got all of these different options right so you can select whichever one you want there are seven pages here that might work for this, but I'm going to select this nice and simple one. Actually I'm going to select this one this is not quite a simple haha. I'm going to press this copy button. I head back to my page. Right click. And paste. So now you'll notice I have an about page boom just like that with a click of a button. And now I can write my content. I can change an image here. I can update this page. So now let's see what that did to the overall look and feel of our site so that you can distinguish between the page editor and the post editor. So you'll notice I still have my header up here. It pulled the page title there. In between I have this beautiful styling. And at the bottom I have the footer that I created. So that is one way that you can make your pages really robust, and, and, and structure them in a new way. So it's basically whatever happens in between the curtains here. Now, copy paste that pattern again. Yeah, of course. Yes, I went very fast because I'm noticing we're getting close to the end. I'm going to do a cohort model of this that would be lovely. All right, to do this again. I'm going to make sure that I am doing this on a page and not the site editor. And then we're going to end with showing you switching a theme so you can see what stays and what changes. So to do that I make sure that I am either in a post or a page to get there. To word press dot org. There are a lot of different buttons here but the way that I remember to get to that is through this download and extend this patterns button. Now this is a repository that's being added to all the time in theory. It's supposed to be added into the inserter here now. So as I'm offline it's not doing it this is this is a local WordPress installation, but you may be able to see some of these but if you run into this problem like I just did, you can always head to this pattern directory and search it. So what I did was I picked a pattern. Just going to grab one randomly if I hover my mouse over it there is a beautiful copy button. All I have to do is click that button, and you can see it says copy. I'm going back to my page, so then start this underneath. And then I right click, and I press paste. And now you can see, I have this beautiful pattern. And now I can click and replace images as I see fit. It's an interesting things that was unexpected that sometimes happens. So let's pretend I don't like this. I don't want it to be here anymore I'm going to undo it baby and it's gone. So I really want to end by illustrating the difference between structure and content so I want you to picture like the way that this looks keep that in your brain, and also keep in mind like what it looks like from top to bottom here. So I want you to ask yourself what do you think is going to stay, and what's going to change when I change my thing. We're going to see if you're right. So I'm going to head over here. I'm going to head to my dashboard. I'm going to click on appearance. The thing that I installed on my other thing did not work. So I need to go and find out I'm going to find another block theme. Just real quick. Let's just try and find one with trying to find let me go back to that parent one really really really quick because I just want to make sure I really liked the parent one had a lot of interesting content on it and I want to talk about that. Here it is. Okay, so I'm installing this really really quickly. I'm going to activate it and what that's going to do is change the overall look and feel of my website. So if I head back to that page, think back to what it looked like. I click on about. What do you notice has changed. I noticed that this is now in the center. My navigation has been put into alignment up here. There's an interesting gradient at the top. This is the page that I did here. The page that I wrote this is exactly the same. So that means that the structure that I write and create on individual poster pages will be preserved. Let's look at what this looks like from the editor itself now. This is the front page of my new website right so this is a totally new theme you can see the fonts have changed the look the feel completely different. In this. In this one I'm going to open this up. See what we've got here just because I want to illustrate one final thing just a little bit of a, actually going to scroll down to here. Okay, so in this group block. This theme was designed with some media and text. So these are these are not theme box you'll notice that this is a header block this is this doesn't say title this isn't pulling a page title in. It can be really tempting to write content here. Don't write content here. If you can help it would be my suggestion. So, let's say that I am pouring my heart out here. I'm changing my beautiful Iguana from a featured image that's being pulled through from from my poster my pages I'm going to replace it with something else. Let me just give a picture of I there we go. I'm going to save this and we're going to just look at it from the front end really quickly. So I'm going to get out of here and then we're going to wrap up. And I promise some people we'd stay a little later and that's totally fine. So you can see that I've written some content here I've added a picture. I've poured my heart out here. Let's say it's time to rebrand. This isn't pulling through using theme blocks so what we want to do as much as possible. It's always possible but as much as you can. You want to use what are known as theme blocks. So what I think I would do in this case is I would probably copy and paste this whole thing and I would put it into a page template and set that as my front page. That's an advanced topic, but now I've poured my heart out here I've added pictures everything's great. Oh I want to change my theme to her false is this going to stay or go. Let's change things back. Here I am with photo breast. I am now switching back to 2023. I had back to my editor. All the work that I had done in this site editor on the content is gone. Okay, so last thing I'm going to leave you with before we kind of circle back to some of the earlier questions. Was this really work on structuring your website here in the site editor work on writing any content. Any ideas that come from your head that you want to transfer it even if the look and feel of your site changes from here and here from your posts and your pages. Jean you have a question go for it. Yes, if I wanted to make a template page for say events and have it have the same information on for every event have the name of the event, the location, the cost, the hours. I don't know who is sponsored by and then maybe a little paragraph, would I make a pattern for that, and then put it on the template so every page has that because function, the fun if you start a new page, and then have a, and you are able to pick a pattern just to pick a page you have you can pick a pattern so they can all look differently so is there a way to make that template. Look the same for every, everything do you understand what I mean. Yes, so what I think that you're saying, and this is a this is a tricky question. I think there are multiple ways to do it, they are probably pretty advanced there are a couple of ways that you can do this. So the simplest way that I could probably think about would probably be to do this using posts, and this is just WordPress out of the box. I think that is there going to be like another type of blog page or I guess you could use categories for this, perhaps, is it something that you would want to use as a as post so that you would create a new post, and you can have that same information. I think it's just. Well, right now no there isn't a blog another blog there's just there's just so if people have an event they want to want to be able to put up their information but it has to be consistent. Okay, is there ever going to be a blog, do you know, maybe, but we could say for right now there's not to make it never. Okay, cool so let's call this like events. Wow what am I doing is this a mind. Okay, I know I'm in the page page post post and post. Let me go back. I got lost. Okay, so I think in that instance, what I would do. And this is a very specific use case but I think I would go to appearance and editor. And I would work on my blog page. I would probably use a different query loop than what they're doing here you can change the way that your blogs are designed. And I think the simplest way to do that might be to in your post use a reusable block. So we added a new post. There's a very do we have a thing in this hold on. I have two different ways that I'm thinking of doing this. It's a complex thing. Well if you did a reusable block, you would just have to remember to switch it to a regular block when you finished. Yes, that's giving the, the other people something to remember. So this is a tricky topic I'm trying to think if Jonathan Bossinger just did something that's a more advanced way of doing it but I think the way that I would handle it is I would make a reusable block which is an advanced topic I added a link on how to do that. And I would just use that reusable I have so many tabs open I would use that reusable block on every poster page that I did and convert it to a regular block and then just use that like that would probably be the easiest way to do it. And the other type would be with custom post types and I'm trying to thank Jonathan Bossinger is doing that but I'm going to double check really quick. And that's going to be our last question for today. See if it's published yet. I think you might need a custom post type without code. This might this might I'm not sure because I haven't looked at it recently. This is brand new this may solve your your problem. So it may allow you to do this and give you different options. I'm not sure. Take a look at that. But what I will leave everybody with this is a great learning opportunity is, if you're like hey I don't know how to do x thing. Please head to learn.wordpress.org for specific tutorials here. I also have lesson plans this is if you want to teach it tutorials are short little videos between two and 15 minutes long usually averaging five to seven to teach you how to do things like add a sticky header or someone asked earlier about parallax scrolling which now I'm adding to what I want to learn to create a content based on this so great question I'm sorry I couldn't answer it in the moment, but you can often find things here and when you ask questions like that we do try to record them and drive our content based on those questions. So definitely use that we also have full courses so this today was a kind of a crash course on how to do this right like there was a lot to learn. So starting with your brand new to this you want to go step by step you prefer text based learning to this I would start with part one of simple site design. And then there's a part two and a part three but this will walk you through step by step, how to create a website with the site editor. So I'd start there you'll see a lot of the concepts it's laid out you can go at your own pace, highly recommend that. And of course, go to one word press and search for resource, and yeah we would be. I'm really excited to dig into some of the things that we talked about today. Okay, so that's our time today I always forget just how much content there is one going through this thank you all so much for your time I'm going to stop recording if you have a couple more questions on that we talked about earlier on. And I would be happy to answer them but first, thank you all and I'm going to stop recording.