 Hi, welcome everyone. I'm Mark Andrew with the WordPress training team. I'm here today with my co-host Wes, who will be shepherding us through this. It should be fun and hopefully informative. Feel free to ask any questions throughout, put them in the chat. Wes will be monitoring that. I'll check in periodically and I'm going to save some time at the end to go over everything. What I'm going to do today and hope to get across are some real basic building blocks and showing how mobile is almost exactly the same as your desktop experience. If you've experienced that. And if we can, I'm just going to start sharing my screen. We're going to jump right in. This is being recorded. It will be uploaded later to WordPress.TV. We have slides for the presentation because I'm on mobile. I won't be able to share them with you like we would normally do. But those links will be in the chat here and that will also be in the video upload later. So you can follow along and dive back in after. So I'm just going to start sharing my screen and we'll begin. So I am just on a regular Android phone and what you're seeing is my home screen. And I just wanted to show you what is absolutely necessary to build a website, a WordPress website for your mobile phone. And that is the browser in the bottom right here, Chrome. That's it. That's all you need. But to show you my entire stack, exactly what I use and what I suggest. We have these four other apps up top here. The first thing you need is a place to keep track of everything. So I'm going to use Workflow for me. And as you see, I'm in my online workshop presentation and we are right here at our talk. And this is just an outlining app. There's nothing special. There's no project management software. Literally just pen and paper will do the same. The other thing we're going to get into today is the Jetpack app, which looks the same as the WordPress mobile app currently. And when we pull it up, you'll see a list of websites. And today we're going to be working on mobile. And we're going to be adding some media from here. Okay. Next to that is simple note. So this is a part of the WordPress family. This is what I use to publish all my blog posts. I'm going to click on unleash. And again, this is a very simple note taking app. And here is the one I'm working on for WordPress. And once I got ready to publish, I would click three dots. I would click share. I click WordPress posts. And there you go. And lastly, for those of you who might be into coding or coming from more development background or want to get into that, I just want to highlight this. You can do that as well from your mobile phone. You can set up an entire development environment. And I use a code. I'll pull this up very quickly for you to see. That is a theme dot Jason. So this is a theme I'm working on. And this is a code editor just like you would have on desktop. So everything you can do now from a desktop is possible from a mobile phone. And in some instances, I feel even easier. So let's dive right into it. I have a nine step process. So let's find out what we need to get started. Minimum a domain name. I need hosting. I need website backups. I want my website to be secure. So an anti spam plugin. And the most common and what almost every WordPress site has and will come preinstalled with is a kismet. Which is vital for, especially if you have a blog or comments or a community that you're building and people are interacting. Lastly, a place to keep track of everything. And that is where we are. So let's go to step one. What's the best practices for setting up? What do I need to keep in mind? So this is a basic timeframe. So as you see today, we're going to have this entire thing up. And at least the good structure, some good bones built in. Before this hour was done. But to finish it all and to put all of my, you know, to have it say and express exactly what I want might take some time, even for those of us who've worked with it for a while. So a good frame of reference is about four weeks. Look at a month or so and take your time. Second login security. You should always use two factor logins. You should use it for everything, but especially for your website. If you're having someone help you with it, or you run into an issue, never share your login. Make a new user. Okay. It's in the settings and the admin panel under users. And then this point right here, I'd like to get across. If you take nothing else from this, please take this. Your website is already almost perfect. WordPress itself has been worked on for 20 years coming up in two more weeks by some of the smartest people on the planet that do this. So they've thought about accessibility. They've thought about how it's impacting a power, the environment. They've thought about optimizing your images. They've thought about being found by search engines, by Google. They thought about making it fast. So people get the content they need, or those who don't have as strong as signals or live in other parts of the world where the devices might be a little bit older, can still access what you're trying to show. If you take it. Let's pull back out. So step two, we're going to identify our goals. The goal of my website is to create a WordPress website with a community that will have its theme available for download when completed. So this is session one. And within two or three, we'll see how it goes. We'll work together and we'll get that done. Think about who you're trying to speak to. I'm trying to speak to good humans interested in attaining the things they value by using WordPress. So I'm trying to speak to you, everyone listening. This is a very good place to get started, right? So if I have no frame of reference, where do I go? Look at a website similar to your own or in the same field, or even just a website that you like the aesthetics of. So I found one called full site editing. That has to do with WordPress. And if I take a look, I'll see that this looks completely accessible. It looks like the point of this website is to get the information across when you check the menu. Let's see if we can do that. Great. I'm going to go back. I've done that. Let's go on to step three. Now that we know what we want to express, what we want to give out, what we're doing, and we know who we're talking to. Let's determine what pages we need to make that conversion happen. For our site today, we're just going to use a welcome page, a blog page, a contact page. And a privacy policy. And I'd just like to highlight all your WordPress websites come with this and draft. They'll have a draft privacy policy. I would suggest publishing it. And not only that going through it, it will both save you legally. It is both best practice. And it will also help you determine. Exactly the information your website is taking in and what you're comfortable with and where your security is. Okay. I'm going to pull back. And I'm just going to stop briefly. Wes, are there any questions so far? I know I've been going quickly, but as I said, I want to just give you the building blocks. All the links will be in the slides. And then shortly we'll, we're going to dive right into the website building. So no questions at this stage. So yeah, it sounds. Like we've got a foundation to build from. So please go ahead and show us. Awesome. Thank you. So we're going to go to step four. All right. So we know we want to build something. Now we need something to build it with. Right. We need our paint. We need our brushes. So. We're going to do a color palette. And I myself am not very good at this. So. As far as knowing the technical colors and what they mean. So I'm going to pull up coolers. Link. Or. In the slides. I'm going to start the generator. And I'm going to click generate. And as soon as I see a color, I like. Like this one. I will lock it. And I'll keep doing it. And as soon as I see another one, I will lock it. And that is it. And then I will copy the color. And I'll come back and I will save it later. A lot of times you'll be, you'll have, might already have a logo or working with someone who has logos, but maybe not a color palette. So what I would do then is I would. Pull up Adobe. Color. And we're going to click on image. And I'm going to click on image. And I'm going to click on image. And I'm going to click on image. And we're going to click on image. And I've already created a logo for this website we're doing today, mobile lonely. So I'm going to tap here. And upload it. And as you see, I have a color palette pulled from everywhere. And for us, I want the background of our site to match this logo. So I'm going to make sure. It is up. And here. And copy. So I have my color palette. Second thing we usually look at it would be the fonts. So how do I find a good font? I'm going to pull up Google. I'm on Google fonts. I'm going to type categories. On select. And I'm going to leave display. And as it sounds display is usually used for headings, you know, or to give it that extra flavor that your site wants. And I would scroll. And find when I liked. Comfort. That sounds great. So I would save that. And just put the name down. Next. I grab all my images. I'm going to use from my site. I want to make sure I've named them correctly before I've uploaded them. And I also want to make sure they're as small as possible because this is the single biggest offender. The images and videos of slow website speeds. And a lot of times the issues you run into. So I have an image. I want to compress it. I pull up squish. I tap. Pick my image. I'm going to go with that logo I made. And if you'll see down at the bottom, the original image is 67 kilobits almost 68. And if I compress, I'm down to 15. And I'm going to go with that. And I'm going to go with this bar right here. We'll show me the difference. Before and after. And that looks great to me. So I'm going to download the image. And that's it. I would do that for each of my images here. Written content. So exactly as this page you're looking at is laid out. It's how I would lay out my website. And I'm going to go with that. And I'm going to go with that. And I'm going to do an essay. As writing. Headline headers and headlines and then paragraphs. And then just continuing that down the page. If you do that with your pages, it will one make it easy to. Navigate. And two search engines will be able to. Scan it better because it's laid out in a way they can understand. So I'm going to go with that. And I'm going to go with that. And I'm going to go with that. So I'm going to go with that. And I'm going to go with the header. One, two, three. With information below those. Those using screen readers will love you. So I'm going to pull back out. And we've got everything we need to get started. So let's do it. I've got my hosting. I installed WordPress. We'll go to a new tab screen. I'm going to zoom out so you can see where our frame of reference. If anyone hasn't been on mobile before. And you see the main navigation and all the settings are on the left. I'm going to zoom back in. Mobile view. Hamburger menu. And we are here at our settings. So the first thing we want to do now that we're here. Is install our plugins. I've already installed the plugins I've determined from the pages I've needed. And the work we did before. And I'm going to install one more to show you how it's done. I go to plugins. I'm going to add new. I'm going to search for it in the directory. And we are looking for. Create block theme. This is what's going to give us our fonts later. And this is made by WordPress. So. This is recommended. And we're going to activate. Okay. And as you'll see here. There's a very few plugins. And I'll zoom back out just to make that point clear. And the only reason there's Gutenberg today that plug in there is just to show you what's coming in WordPress 6.2, which will be out shortly. So really, and we're going to get rid of the create block theme plugin. So we only have two jetpack and a kismet will be lapsed. So we've got our plugins installed. Next we want to set our permalinks. So I'm going to go back to my main menu. Go to settings and go to permalinks. As you see here, the permalink structure, we have plain day and name, month and name, post name. Most websites will go with post name. There's a lot of good info on learn WordPress. And in the documentation, if you want to dive deeper into this, but basically your two options would be having the date. Or just having a plain post name. Meaning if I wrote a blog post called called WordPress mobile design, it would be my website WordPress mobile design. And day and name and month and name appends the date. So if what you're publishing is time sensitive, pick one of these. For most people, most of the time, go post name. And then we save. I'm going to jump back. Next, we want to add blank pages. So we're going to put in the pages that we're working on and we determined we wanted welcome blog and contact and privacy policy is already there. So I'm going to hit the plus button at the top here. I'm going to click page, tap on the title. And we're going to call this welcome. This will be our homepage. And I'm going to tap on publish. I'm going to click add new page right next to view page here in the middle. I'm going to add blog and click publish. And that third page we wanted. Oh yeah, contact. So I'm going to add new page again and click contact. Publish and we're done. So I'm going to go back to the main menu here. And I'm going to look at all my pages. And as you see, we have our blog contact, the privacy policy, as I said, which is in draft form, the sample page, which comes with every WordPress installed and the welcome. So we don't need that sample page. I'm going to hit trash. And we're left with these four. Pull back out to my design. Next, we're going to change our general settings. I'm going to go to my menu, go to settings, go to general. And I'm going to change my site title. Mobile lonely. If I had a tagline, like this cool site, I could put it in here and then we'll click save. And again, all of these settings, everything that's in here on learn WordPress, we dive deep into all of them. We have courses, tutorials and online workshops. I will answer questions for you at the end. So let's see what our next step is. We want to go to the reading setting. I'll jump back. So I'm in settings on the tab admin. Reading. Now that we've created the pages and we've set our permalinks. So that way, when we add pages or posts, we don't have to change anything in the future. We're going to make a static page for our homepage. We're going to select welcome. We're going to pick our blog page. I'm going to change the instead of a full text, I'm going to change the excerpt, although your theme might override this just FYI. And we're going to save go back. Next, we have at our media. And this is where that mobile app is going to come in really handy. I love this. So I'm going to pull back out. And I want to pull back up my jetpack. And this would work again, does the exact same way with your WordPress app. So the first thing I want is my site logo. And as you see, it says my WordPress site. And it has the logo right there. And it's blank. So I'm going to tap on that. I'm going to add the icon. And we're going to take that image that we compressed. That looks good. And we're going to add it. So now I have an icon. It will show up in the site logo as well. They're interchangeable, but there are toggles. And I'll show you that later. I'm going to scroll over to media. And now I'm going to start adding my images. I'm going to click the plus button at the top, right? I'm going to choose from my device today. I'm going to select my image. I want to point out here, if you see the paint brushes at the top with little one and the green, I'm going to click on that. That gives you a lot of options for cropping, rotation, et cetera. But I like the image the way it is. So I'm just going to click on the check mark. And I've added it to my WordPress site. So I'm going to pull back out. Go back to the mobile browser. Check my media library. And there you go. And I'm going to pause right there for a minute and check back in with Wes. Do we have any questions, Wes, so far? Yes. So John has asked, is there a way to have a local server to do development on phone, like the app? Yes. So before you answer, I mentioned with one of my, with one of my posts that I use, I've got a staging website for development. But then I also, I use local on my desktop for, for development work. And then John answered, he's got local on Linux and Windows, but not Android. So yeah, I was, yeah, we were wondering. So there was a local server to do development on phone. Yes. So yes and no, the answer is yes. And John, you might be a perfect person for this. If you want to contact me later or any of us in the training team or core, I can put you in touch, but I'll do this very quickly. So that editor I showed you a code, if you pull it up, I'm going to click my menu. And I'm going to go to the console. So literally this is an ID on the phone running Python, JavaScript, Ruby on rail, all of it. React. I'm going to do it because I'm not that much of a developer. I'm learning more, but I use it for theming, but you absolutely can. And if you want to help out the community by exploring that with us, that would be fantastic. Okay. Okay. He said, we'll try that. Sounds good. Thanks. Is that it with? Yes, that's it. Thank you. Sorry, just one question. The way I understood the question, maybe I misunderstood the question. So local. So there's no, so there's no app for local on your phone. To just make a practice with. Right, but you have. You can run a local development environment, but your actual install local WP, you can't just add that as a zip and run it and set it up that I know of. Gotcha. And then one more question. Sure. Do you know of any other tested alternative for iPhone? You mentioned a code. Any tested alternative for iPhone. Or maybe you don't know. I'm off the top of my head. I don't. But I could definitely look into that. And we could put that in the. The message notes for the zoom chat. Great. Thanks. You can continue. Awesome. Great questions. And thank you, Wes. Cool. So let's just review quickly. We have our hosting. We have our website. We have WordPress installed. We put in our plugins. We adjusted our formal links. We added our blank pages. We adjusted the general settings, which is our site title. We adjusted the reading settings. To display our homepage. I didn't go over discouraged search engine. So let's just jump there real quick. And I'll touch on that because that's come up a few times. Which is this. So in those settings, when you click on reading. And you're just starting out your website. You'll see this checkbox right here at the top. It says search engine visibility. So if I click it as I'm building. Theoretically, it would discourage search edges from indexing in the site, which means Google. Trying to put up your pages before you have everything in place. But this doesn't always happen. But you can try. So to begin your site. We could do that. For myself, I usually, I don't touch that setting just because it takes Google or the other search engines so long anyways. By the time they get there, the site is built. We added our media. We use jetpack app to upload them. We compressed them. We made sure the titles when we uploaded them were correct. But they were descriptive. So now we're going to add our fonts. So I'm going to go back to my dashboard here. Pull up the side. And now if I go under appearance, because we installed create block theme, you'll see manage theme fonts. I'm going to click on that. And you can add a local font as you see in the top right there. This shows me what's installed already. But I'm going to add that font that we searched for earlier on Google fonts. And so right, I'm going to click add Google font. And I believe it was comforter that we, I thought I liked. So I'm going to scroll and look for this. And here it is. Click on comforter. Now this has given me the options of weights that it comes in. And I'm going to take them all. Because with fonts, it's not how many fonts your website has. It's not how many variations it has. It's how many shows up on the same page. So when that page goes to load, if you have. 10 sites saved here on the back end, but only one font on the front end, it's only one font. That has to be rendered. So I'm going to save all these for future use and add them to my And there we go. So now if I pull back out. And I manage theme fonts. We'll see I have a whole new family right here. And I'm going to pull back out one second right here to desktop again just to give you a better frame reference of what we're at and what this looks like. So I can even pull down and see what fonts are available. What they look like. So my fonts are installed, my media is installed. I've set all my settings. So now let's add our color palette. So I know I have those colors from earlier that we saved when we pick the colors. Right here. And that's what I wanted from my background color. I'm going to go back down to mobile view. I'm going to click our menu. And we're going to go to editor. I'm going to edit my page. I'm going to click on the three dots on the top right. And I'm going to zoom out again. Just to give you a frame of reference. So this is where we are on desktop. This is what that side panel look like on desktop. So just keep that in mind. The only, this is the only major difference currently, but this is being improved upon every release is the screens that you see here. So just keep in mind there might be some things that we're not quite seeing if you're on mobile. So if you don't see something you can zoom out. Or what I do is just turn my phone. And go to landscape. That will work as well. I have my colors. I open my menu by hitting the three dots at the top right. Click on styles. And this is another instance where I have to pull out in order to change it, but if I click on the colors, you'll see what's there currently. It shows me a palette up at the top. And it shows me what is currently set for my background, text, links, headings and buttons. So I'm using the default 2023 theme, which I love and honestly, I start most of my website builds for others with this. And I'm going to zoom back out for you to be able to see this better. So I know I want my website to have this pinkish color for the background. So a solid color background. So I'm going to look under in the styles. And I'm going to browse styles and see if there's something already in there. That's close. And these look pretty good. So once I'm here, I'm going to click this little eye looking at me. I like you. Which will bring up. As you see here on the left, this is every element of your website in the style book. So as I make changes on the right, it will show up there on the left. And sorry about that. Internet must have pushed it back out. So I'll just show you. And see. These are all just variations of the default theme. So thinking of exactly if someone had already done, did the steps that we're going through now, this is the end result. And these were all done by really smart people, really good people in the WordPress project. We spent a lot of time and effort making these look great. So for myself, let's see what we like. I'm actually going to start with pitch. I'm going to start with this as my base. Okay. And I'm going to zoom back down. Which might pull that color off for us. As I said, this is an issue with mobile. So I'm showing you where the menu is. But the way you would do it is the exact same. I'd click the three dot menu. I'd click styles. I'm going to go to my styles. I'm going to pick pitch. And now I'm going to save. You see that tells me that that this is going, this custom style is going globally. So this is going to affect my entire site. I save it. I'm going to exit back out. And look at our site. And this is where we're at. So I blog, my contact page, my welcome page are there. And I've changed it to a darker theme. Okay. Now I'm on this homepage. So instead of in the admin settings where we went to the editor, I'm going to click the paintbrush up at the top left. Back right in my editor screen. For the site editor. Close out of that menu. I'm going to go back to my styles. So three dots on the top right. Back to styles. And now I'm going to set my colors. We'll go landscape here for this. I think it'll be easier for you to see. So here's my current color palette. I'm going to click on the 17 colors. And you'll see my theme. So pitch gave me these colors. That's where these five colors right here are the salmon, the black, the gray. And these default color palette. This comes with it. This is that every word press install. And I can create my own here too. But I'm going to change the theme because I want this. And I'm going to show details. I'm going to click on base. Because as I said, I want this background to be the same color as my logo. Scroll up. We'll get rid of that. And we'll paste in. The text code we had. An extra hash, it shouldn't be there. And we click save. I'm going to pull it back over here. So we have the color there, but now as you see, the text is very, very wrong. So let's go back to our colors. And styles. And now when I pull up colors. Instead of going to the palette, I'm just going to change the elements. So as you see my background, because I set that as the base color in my palette here. Change the background there. So every one of these colors, depending on the theme you're using. The first, second, third, fourth, fifth, and we'll be named different primary secondary. Some might be called contrast. Some might be called background. Will affect all of the elements of your site. And the way to find out how it affects it is to change the colors and then view the site. Using that storybook is the best way. So let's change our texts. And I'm going to just choose this dark color here. And for my links. I'm just going to keep it simple here as well for today. And same thing for my buttons. Let's actually we'll throw a blue in. And there's the background color is at the bottom. Pull it back. So now as you see, it shows that my elements have the background that I set, the text color I set, the links. And I could also change the heading colors if I wanted to. I could change them globally. Which is all the elements. Or I could do it one by one. H ones. H twos. I'm going to clear. And go back because I don't want to change them. So we will click save. And we're going to pull back out. And let's check it from the front. So I have all of my building blocks in place. I have the pages that I want in place. I have my color palette in place. I have all my media uploaded. We've added our colors. So. Next we're going to go for. We're going to add our fonts. And I'll pause right here and check with West. If there's any questions because we're going to add our fonts, which will take just about literally 60 seconds. And we're going to add some page content quick. And then we're going to open it up for questions. Yeah, no. So just a comment. Miga said having a code, I would go and add the colors directly on theme.json. And I just said, yeah, if you are confident using theme.json, you can do so much there. But there was a question about themes and free themes. Okay. I just thought it's important for us to highlight this. So somebody asked, is it true generic free themes are less secure? And I just reminded the person that all themes in the theme directory are three. So maybe you just want to shed some light on that. Sure. Yes. Everything on WordPress.org is free. There is no paywalls to any of the information. There's no paywalls to these workshops. None of the themes cost any money. You might have plugins there. You might have free versions and then maybe upsells that aren't part of WordPress, but the themes themselves, what's in the directory, these are free. They're free to download. The ones that when you search for a theme, let's do that. Let's add a new theme. I'll show you quickly. So when I pull up this to add new themes and I look for, let's say the latest themes. Every one of these themes has been vetted by people working on WordPress. They're vetting it for accessibility. They're vetting it for security and just, you know, best practices. So there is a checklist. There's overview of all of these things. What comes after that? So if there's theme developers that might have pro packages, that's a completely separate thing, but everything that I have from here, like I like Xeno, I can pull it up. There's a free theme. And if I want to check the details on any of these themes, I can go to the theme directory and do so. I can see the reviews and the ratings as well. And finally, I'll just say, I'll go back to the theme that we have, which is the default 2023 theme. The entire intent, the entire purpose of this theme is literally to give you that starting point. WordPress itself as I hope I'm getting across somewhat at least today by the ease with which we changed the settings, the ease with which we added the pages, the ease with which we changed the colors and added fonts, is a page builder. It's already built to make your website. That's what the software does. This is what it's about. And I'm going to finish up here. So let's do the fonts. And I'm going to add some page content and I'll show you how easy that is. I'm going to go back to my settings. Last part of the building blocks. Back to silence. So we added our fonts with the create block theme and I picked out that comforter. So I'm going to click on typography. And I'm going to change my headings under typography in the middle, it says font default. And if I click on that, you'll see all of my installed fonts. So I'm going to pick my comforter for the headings. And I'm going to click save. So we've put all the blocks in. So now let's add some content. Okay. So we have header Twitter in our page content. Let's start with a header. I'm going to add a site logo and we're going to change our menu and navigation to places. Most people start and you should. So again, I am in my site editor. I'm going to click on mobile only at the top. And I'm going to click in until I get to the navigation part. I'm going to click three dots at the top and I'm going to remove site title. Now I can notice by the icon of the rose right below my site icon above. That this is the block we're in, but I can pull this up as well to check. And if you see there at the bottom, it says remove row by hitting the three dot menu. So I'm in the row. I'm going to just add back what we took out. We took out the site title and I'm replacing it with the left. And as you can see, it's right here. But if it wasn't, I would click on search. I'd look for what it was. I was trying to find. And we put it. So we're going to add our site. So as you see, we have the icon at the top left, which we put in through the jetpack app. So for our site logo, I'm going to tap. Going to select. There we go. And I'm going to use these arrows at the top. I'm going to click the left arrow. To move it over in my room. And let me click save. And I'll pull up to desktop real quick to show you where we're at. Again, for a frame of reference. If I pull up list view right here. You see we're working on the header. And if I zoom in here. Now you can see. Right. So that's where we're working on here. So we're working on this. And list view is one of those things that I'm looking forward to when the update comes to mobile, because as of now, as you can see that my options at the top are to add a block with the blue. Plus. To check what. Template what page I'm working on by clicking the arrow here. We're going into settings here. Again, a workaround for this once again. And we can get to our list view. I've got everything in place. Now I'm going to work on the menu. I'm just going to tap into that three times, pull up my menu. And this is the first time editing it. So this isn't a navigation menu yet. It's a page list. It's a list of all your pages. But once I click edit. I'm going to turn this into an admin. I'm going to click into my contact page. And then I'm going to click the right arrow at the top left to move it down. And we'll click into our welcome. And move it up. And I'm actually, I'm going to make this match our theme colors. So we're going to go into the settings. I'm going to click over to the right here. So I didn't go up to the navigation block. I didn't select the parent block. That's why the option wasn't there. So we go back to settings. Now we can change our color. And I'm going to change the submanual overlay background to our theme color. I'm going to change the submanual overlay text to our text. We're going to save. Now let's go back to our site. And then obviously there's a lot of blank in the middle, but that's looking very good. Let me check where, where I would be, which is I've worked through my fonts. I've added my header. I've added my site logo and my menu navigation. So I would do the same thing with my footer. And the exact same manner. And I won't go through the entire thing because it's the exact same process, except on the footer. So I would go to my site editor. And I'd scroll back to navigation. And I'd scroll back to my template parts. Click my template parts. And I find my footer. Click on my footer. And now we would edit. I had mentioned that search bar looked pretty good in that website that when I did my research so much my own. So let's look for that. And you see right here, I can just add that. And we'll click save. And we'll go back to our site. Much better. All right. Our time is getting short, at least in session one, so I'm going to be following up as I said in diving much deeper into this, but let's finish off with some page content. So I'm going to use some patterns for my contact page. I'm on my site. I'm going to go to my contact page. And I can edit by clicking the pencil at the top right. Or I'm going to zoom go back. I can go to my dashboard. I can go to pages. And we can edit from here. By clicking on contact. So now I want to add some content. And we're going to do that by clicking the blue plus at the top left. Clicking on patterns. And as you see here, we have a whole big selection to choose from. So we are going to put a really cool header here. I like this one. So this might be my internet kicking out. So it gave me an error, so I'm going to copy the post text. So that copied everything that was on that page to my clipboard. So I didn't lose anything. And then I'm just going to go back. I want to go back to my contact page. And I'm just going to paste. I'm going to go to my settings. I want to change that text color. Make that black. Make the links black. And I'm going to exit out. There we go. So I have that really cool header. And lastly, I'm just going to make sure that the page that we're working on by clicking page. If you see template. I'm going to click on page. So we've adjusted our templates. We adjusted the header and the footer in the site editor. And now that I'm adding content to the page, I can pick from those templates and pick from those adjustments. So I'm going to choose blank. Which means no header, no footer. The only content will be what I put here. So as you see, this is what we have here for now. I'm going to select parent block. And let's just put in one more after it. So give us a little bit more content, something to look at. And let's go with. About a call to action. And for our contact page. Kick me out again. I would do the exact same thing. And just paste it in. And then adjust the settings again for the colors. Over here. So let's update that. And come back up. So it's showing two headers because it didn't save my blank page is what I'm guessing. So let me see if I can adjust that real quick by pulling the page back up. Yep. So it didn't take that page template. So I'm going to click on page again. And go back to blank. And we'll just update that. And now we'll do the page. Perfect. So not a very good looking page with the colors currently, but as you can see, if we go back to our homepage. And we click on our menu. And we go to our contact page. And we zoom back out. So there's about four minutes left from this hour. And within that time. We put together an entire WordPress site from our folks. Obviously there's a lot more work to do with the content. But if you have the content. It's a matter of minutes. And. I'll show you that. In action. Before we end today. What I'm going to do is I'm going to go to the WordPress. Pattern directory. I'm going to go to the block pattern directory. And as you see here, these are all community supported. I'm going to go to the page. And submit it. And I'm going to find something that I like. So I'm looking for an about page. And I would scroll and find one I liked. Already found. I'm going to click copy pattern. I like the looks. I'm going to go back to my website. I'm going to edit my page. I'm going to paste. And click update. So that's how quickly that page went from there was absolutely easy to a pretty great looking. About us page. And 10 seconds. And if we zoom back out. We'll see what it looks like on desktop. And we're at the top of the hour. So for session one, we're going to stop it there. And I'm just going to review very quickly. What we went over. We figured out what we needed to get started, which wasn't much a domain name and hosting, keeping our website secure. A place to keep track of everything. We identified best practices, which is your WordPress website is pretty much perfect. It has issues when things get added. Work with what's there and you will be happy both today and for years to come. We identified our goals, what we wanted to give out and who we wanted to speak to. We picked our pages. We brought all of our content together, which were our colors and the media and the words we needed. And then our design and build. The actual design, as you saw, it did not take much time at all. We went through every single process of changing our links, adding our pages and changing our palettes, our fonts, our headers, our footers, and we even added an entire page. What would fall from there is we would test to make sure everything worked. Then we'd launch it and tell everyone about it. And then we would make sure that we maintained it by keeping everything updated.