 Hi, welcome everyone. My name is Mark Andrew. I'm part of the WordPress training team. I'm here today with my co-host Wes. We're going to take a deeper dive into making a website from a mobile device. We're going to be working mostly in the mobile browser today and we'll jump into the WordPress app itself a little bit. Feel free to ask any questions. Please post them. I'll check in periodically. We'll take a few pauses throughout and Wes will be monitoring the chat as well. All thoughts are welcome other than questions. So if you see something you think I could do better or just a different way of doing something, feel free to throw that in as well. I'm here to learn just as much as everyone else, I hope. We are going to go keep it a little looser today. The first part one of this mobile site. Online workshop, which the link will be in the chat. We had a pretty tight structure and we put all the building blocks in place of our website so we know the foundation is solid. So today we're going to explore further by creating a homepage and a contact page and a portfolio page and we're going to do it in a few different ways on each one. And I will step through fairly quickly, but that quickness I think will also illustrate how easy it can be if you trust in what is there and learn how to use it, which is why we're all here. So start here. I'm going to start sharing my screen now. And as a reminder, I am on mobile phone so this is why I'm teaching this workshop so you won't be seeing my face in the video anymore. Due to screen size. And here we go. Okay, so on my mobile phone, I have my workspace which we set up in part one, which has all the steps that we needed to walk through. And we determine what our website pages were, which was a welcome a blog a contact portfolio and the privacy policy. So today we are going to jump into designing and building and everything you see up here at the top from admin down to plugins to adding pages was covered in workshop one. So let's dive into our page content. And this is what we're going to go over today. We're going to use a theme pattern. So a pattern directly from the theme that we have installed to make our own page. And then we'll recreate that ourselves. Just by putting the blocks. Then we're going to use a pattern from the pattern directory for our contact slash about page. We're going to use just the editor itself. So just we're going to pull up our portfolio page and use just the editor and the blocks and put them in one at a time ourselves. We're going to speak on saving your patterns so you can reuse them. And then we're going to jump to the app for some changes. Any questions before I begin. Is. Okay. So we're going to pull up our website and we are starting with a blank slate. So we have the building blocks we put in place we put our fonts in we picked our color palette. I'm going to pull up the site editor to show. We're going to click on templates. And we're going to click on page. So as you see here in our template sidebar. This controls the look of all the pages that we assigned to these templates. So our 404 page will have a 404 template assigned to it. And if we want to change that, we would do that here. Zoom back out. So for us, we're going to go with our page. And we're just going to zoom in here. And the page as the name denotes would could would be the template for any page on your site that you didn't assign to a different template. So I usually jump to here when I want to check out my styles. And we're going to go to typography. And just see what we put in real quick. For our headings we changed our font. And we changed the appearance to make it bold. And we also did that for our color palette, which gives us the site we have now without the content. So we're on our homepage. I'm going to start right here. There's two ways you can approach this and one is to edit the page directly. And I can do that from my homepage itself. Clicking the pencil icon at the top. Or I can go to pages, my homepage and edit. The other method and what we're going to do today so we can explore those templates. A little more. We're going to go to the site editor by clicking edit site. I'll zoom back in. And we're going to go to our templates. And we're going to go ahead and zoom out so we can go to manage all templates. Now we have this option here, which is add new. So I'm going to add a new template. And I'm going to select my front page. Because I want my front page to be completely different than any other page on my website. I want the header to be different the footer. I want this just to be its own thing. I'll pick a front page template. And you see now it's in the list below. So we'll go to our template. And it's going to give me the option to start with something that the feet the theme itself is offering me, or I can start blank. And I'm going to start blank. And the first option we're going to use is a theme pattern. The theme I have installed this frost. I'm on my front page template that I just created. And I'm going to add a pattern. So if I go to featured, and actually I'm going to zoom back out so you can see again, we started blank. I click the plus button at the top left or you could click the plus button next to choose a block. I went to my featured pattern. This is going to drop down everything that this theme is providing. So when you see the patterns here, just be aware this is not from extra plugins. This is not from extra code. This is what the theme that you're installing when you're using just the default core WordPress and a block theme is giving you so this is what the theme author put together. Whether their own bunch of blocks they thought worked really well, and they put a bunch of time and effort into this. So I like to start here. So for our homepage. We are going to go right here. And I'm just going to select by tapping. And if I collapse the sidebar, our blank page. I'm going to add it. All right, so we need to refresh. So I can do the mobile. And there we go. So that took even with the explanation two minutes. And our homepage went from absolutely blank to this. I thought I've come across or feedback I've gotten from many often is that they don't necessarily trust what gets put there. And they feel that a lot more design has to go in to make it professional. So for comparison, I'd like to show you quickly another website that has the same color palette as the one we just created. Which is this right here called pressable full disclosure. This is my hosting company. This is not a plug for them. I'm just using the aesthetics from this website. So if we zoom in, what we'll see here is an H1 powerful WordPress hosting. We'll see a sticky nav. So the menu at the top here stays as I scroll. We have two buttons below that. An image. This is a group block with a column block inside. Another image and more headings. So we'll zoom back out. You see this really neat way they're this blue. In the center is with the borders that have a radius on them at the top left and the bottom right. So let us go back to our website. And let me close out the other pages here. And we are going to mimic that. But you see how close that is almost to start. So again, what what we have with WordPress itself when you install it and you start using the patterns that it gives you or exploring patterns yourself and learn the blocks and the underlying what's making these as we pull up the site editor. It'll be much easier to show you. I know that was quick though. I'm not trying to help you have you fall along. I just want to illustrate this point by going here. So all this content here. We pull up our sidebar is really three groups. We have a header that contains more. We have a group in the middle. It contains our post content. And we have a footer at the bottom. So we're going to go back to our site, and we're going to make our homepage. Look, almost exactly like this homepage. Very quickly. So I'm going to edit my page by clicking the pencil icon at the top. And again, I should have explained this up front. Zoomed out view. I'm using more here so everyone can see what's going on because mobile currently a lot of the menus and sidebars will be hidden for space considerations obviously. So we're going to take our welcome. So this would have been our homepage. We're going to start again. We're going to throw our paradigm in. We're going to go to featured. We're going to pick that homepage pattern. And then we're going to pull up our list view to see what's actually here. So we have three groups of blocks together. And if we see on this site that there's spacing in between these blocks. We're going to do the same here. So I have my first group selected. I'm going to dive in further and see what's there for blocks. So no groups in that one that's by itself. I'm going to go to the more settings. And with my group selected, I'm going to click on the right, which will give me all of my padding and margin options. And if we zoom in here, we can see that there's no space. If we see the top margin is set to zero at the top. So I'm just going to take that out. And I'm going to do the same for the padding. I'm going to take that out. And I want to give it some space between that and the block below it. So let's zoom back out and see where we're at. And I'm actually going to go to highlight view. So spotlight mode. So you can see exactly what block we're working on. And I'm going to go to top toolbar to get that out of the way. And we'll drop it back down. So this is the block we're working on right now up at the top. So I took the margin and the padding out. So now it's to the default group level. And I'm going to change this by clicking the icon at the top from full width to wide width. So this is going to give us that space on the sides. Now I'm going to jump back over here. I'm going to click on for my styles again here. And we are going to add a shadow by clicking shadow. And that looks pretty good. Except it has square borders or sharp corners, I should say. And if we see here, we have this rounded look. So I'm going to jump back over to here. And we'll zoom in. And I'm going to go down to my radius. And I'm going to click on to the right here. Which will give me the option for all four corners. So if I adjust my radius here. With that engaged. And let's say we make it 100. That's going to shift every corner here. And give it a curve. So that's not the look I want. So we are going to undo that. And we are going to make our top left corner. We'll give it 40 pixels. We are going to leave this sharp. Bottom left top right. And then the bottom right. We'll give it that 40 as well. Now if we pull that back up. We see our block here. Has that one corner. And once we get the padding, we're going to update. And then we're going to go to the left corner. I'm going to pull up the sidebar. So I need to get rid of the pattern and the margin here as well. And I'll do this easily here. Just by going to dimensions. Clicking on the kebab. And you see here, this is padding, spacing, margin and height. And there's an option to reset all. So instead of going through each setting one by one, I just want to start with default. And if we go to the main block, you'll see it has all the padding around it. And if we preview it in mobile view. And shrink down. We'll see that this block right here. Looks like that block. Right there. And we'll update. And I'm going to jump back to my homepage. So that was. One way of putting in my homepage just by using. The theme. Pattern that came with it. And as you saw, I could easily adjust it. To go to desktop view. We'll take it off of spotlight mode. So we could see. To easily adjust it. To mimic another site. And we are going to. So a theme pattern for the homepage. Now we're going to use a pattern from the theme directory for our contact page. So if this was my own homepage, obviously I would just. Continue with the editing. And I would put my own content in. And I would update. I would click save. And in a matter of minutes, you would have a professional looking. Home page. So we're going to explore this option. On our contact page. Right now by going to. All pages. And I'm going to pause here and check in with West for questions. I know that was a lot of info and I jumped around a lot, especially with the screen zooming in and out. But I'm trying to. Toe the line between giving you as much. View of exactly what's going on and where we are in the editor. While showing you what I actually do on the mobile side without zooming in. Can you hear me? Yes. So we haven't had any specific questions. I just mentioned that I also use dimensions. A lot these days to. You know, to meet my design needs. So I think it was, it was great seeing how you, how you use those in literally like five minutes to achieve what you wanted to achieve. Thank you. And thank you for the feedback. Yeah, so yeah, we're going to explain that or explore that excuse me a little more right now. And I just want to. I'm going to jump back to the beginning of my presentation for myself, which was the main points. I wanted to share, which was. Everything is a block. As you see, if you think of it as Legos. And. You're basically giving everything. A big group hug, right? So a group block. A big group hug that keeps everything inside. And then when you think of those blocks that you have those Legos that you have as a pattern. Everything is just a collection of blocks put together. And different orders. But the types of blocks we use, you'll see are almost. Universal in design. So let's take a look at that. And let me illustrate that really quick with our contact page. So let's pretend. This is our contact page. So what I see here is I went through before as an H1. I see buttons and image. If we dive down here. This is a media and text block media on the left text on the right. This is a media and text block. So. What the pattern is, is basically just saving these blocks. So it's easier to put in in the future. But. Let's just put those in right now. So I want a heading. So I'm going to go. Shortcut. We'll just do hashtag. Which will give me an H1. And. We'll say. Mimicking. Other. Sight. And I'm going to. Click on my H1 at the top, the menu. And I'm going to align that center. Now I'm going to zoom in. Real quick here. And I'm going to go to my typography right here size. And we're going to make this. We'll go 60. And bigger. Okay. And we jump back over and see what we have. So we have an H1. We have a paragraph and we have buttons. So there's our H1. I'm going to hit the return key. And let's call. This is my. Groovy paragraph. And we'll center align that as well. Below that I can just tap. And I can tap right here to choose a block. So another shortcut is the Ford slash. Which will give me a list. And as I start, start typing, and I believe I wanted buttons. Which I don't see. So we'll go buttons. And click on buttons. And we have another. Groovy button. And we're going to select our parent block, which is these. The buttons, because if we pull up our sidebar here, we'll see. That the single button. Pull that. Gives us the options to change the link in the text here, but the button blocks, the buttons block itself gives us the option for multiple buttons there. So that's where I want to be working. And if we check on our pressable on our other website, we'll see the buttons are center aligned. So let us put in our second button by clicking the plus, and we'll say. Seating. And we're going to go to our styles over here. And we're going to make that an outline. By clicking on outline. And now I'm going to jump back up to my buttons and center align them. By clicking alignment here. And then center. And I want the buttons to go. Horizontal. And I don't want them to wrap multiple lines. So I'm going to take that off. So now I have an H1, a paragraph, two buttons, one outlined. Exactly like that. Right. Image underneath block. Group block. Media. So always work from the list view. So you know where you're at. Make sure you're at the right spot. So I'm at the buttons block. And after this, I'm going to insert after. And we're just going to put our median text button on here. Block, I apologize. So we have our median left text on right. And for our image, we're going to go from our image library. And since the 6.2 release, you'll see we have the options for open versus well as their pexels. And if you had your Google photos, if you connected your accounts, that would be there as well. So we're going to go to our media library. We're going to pick one of our cool WordPress photos we have. I like this one. And we're going to hit the bottom right select button here. And insert. And then on the right. We would put in our groovy content. And we would have an image. We would have this. So they have media on left text on right. And then they have it reversed. So I'm going to make sure I'm on my median text block. Click the cabal menu. And I'm going to duplicate. So I have the same thing here. We zoom in. And if you see at the top menu. All I have to do is change. The side. By clicking there. So now I have a media on left in a media on right. And we've just mimicked what they've had here. And I would click update. When I was done. And we would have the other site. Back up to desktop. So for this, for our contact page, we're going to use a pattern again. We're just going to get it from a different place. And what I like to do is when I find patterns, I really like. When I am. Building my web pages. And I have my patterns here. For my content collection. You'll see I have. Patterns that I want to put there. So this is what it looks like in the code side of your website. When, if you switch to code editor mode, and I can show you that in one second. And the pattern that we got. Came from here. Which is word press.org. Slash patterns. And what I did is. I typed in the search. And I typed for an about. And then I found this really cool pattern that I liked. From some pot. Or viral. And then I clicked the copy pattern button. And if I share this, you'll see this is what it looks like. It's that same code that we just saw. But if I go back to my website. And I will show you the code side. So if we jump into. Right here in the editor, we can go to the code editor. This is where your code is living. So. We paste what we got from that about page. And we exit the code editor by clicking is it code editor. And let's preview that. And just as a heads up. So this desktop view, even though in it is. Is shrunk. Because it's a mobile device. I'm going to give you the actual view, which is a landscape. So I'm going to tilt my screen just for one second. Because this is what it would actually look like. On a desktop and we'll tilt back. I'm going to go back to my original page. Let's close out the other views. For simplicity sake. And we'll pull my preview box back up. And now if we open our sidebar. We'll see we have a group. And then what was put in there. But if you notice once again. Paragraph column group. Images. Headers. The building blocks again are so similar that once you start seeing the patterns as I hope I showed you in this demonstration. It's very easy to recreate this for yourself. So for us. We are actually going to call that good. I would obviously I would change. The text that was here, I would add my own images. But that is how quickly you could have a full fledged page that you could either call good. Start with as a template. Or again just using these patterns, pulling it up. The list view and seeing what they're made of. If I zoom into the column block. How did they, how did they put this together. These. I can see exactly right there. It's just a column block. I just added a paragraph. And I added an image and an image and I just repeated. So I'm going to pause right there and check in once again for any questions. No questions at the moment, but happy for folks to type a question while, while you pause and wait. Awesome. Yeah. While you're doing that, I'm going to show you. I'm going to do the exact same thing. And five seconds without the code part. So we're, we're on our contact page. And I wanted to add a pattern below this. So I would pull up my pattern. I copied my pattern. And right from here. I'm just going to click paste. That's it. The exact same page. All the same content. And we'll update. And we'll visit our site. And we're going to go to the last page for today, which is our portfolio page. So I'm on the back end of my website. I'm going to go to pages and all pages. And we see we don't have a portfolio page. So we are going to create one. So I can either click add new on pages, or I can click the plus icon at the top of any screen. Which will give me an option. So for our last page, we're going to go to the last page. And it will give me an option. So for our last page, we're going to create it from scratch, which is beginning with the title. And I'm just going to publish that real quick so I can jump up to desktop view so we can see. So now we have a portfolio page and. The first thing I'm going to do is I'm going to see if someone already put a good amount of effort and work into helping me out. So I'm going to go to patterns. And if we see here, I do have portfolio. So these again are provided by the theme. Featured text testimonials. And default 2023 theme that is installed word with WordPress has its own patterns. They look different than these, but it has its own patterns for headers for foot. So I'm going to look under portfolio. And I see we have just one very basic design. So I actually, I don't like that, not for my portfolio page. We're going to start from scratch. And since I absolutely want scratch, I'm going to change the template for this page. By going over to our settings for our page. And if you see the template here, it says page. I want to start blank. So blank means exactly that. There's no header. There's no putter. There's nothing here that's being pulled from the templates we set up earlier. Over here in our template part. So now I'm on the page and I'm using that blank template from the template section. And for our portfolio. I'm going to pull from my blog posts. So first thing I'm going to do is I'm going to put a group here. So I'm going to put a group here. I'm going to put a group here to give everything a big hug and keep it inside. Because I want to adjust that spacing in that padding on the outside of the group from the side of my screen. So we're going to start right here. And now I'm going to throw in a query loop. And we're going to start blank. Even though it's blank, you see, it gives me title and date. It gives me multiple options. And if we zoom into the top, since this is a portfolio page, I want the images to be the highlight. I want a grid view. So I'm going to switch that. By clicking on the grid at the top. And I want it to show. 20 of my photos. So we're going to put 20 in there. And now I'm going to. Pull up my list view so we know we're working again. And I want to go to my query loop. And for our columns. Let's go. With four. So we will have four columns going across. And all our other settings will leave for now. This would obviously it. We can adjust when. If we have our most recent photos, our favorite photos, if we wanted to do it. Anyway, we wanted. If we had photos that we wanted to stick to the top, like any other blog posts for our portfolio. Or I guess our portfolio could be anything. I was assuming for photography. But so we'll zoom back out. And we'll update. And let us preview our portfolio page. And you'll see there's not much there because we have no content. So I'm going to zoom in for this one. And we're going to jump. To a plugin we touched on in the first workshop. And I'm going to show you how to use it very quickly, which is called Faker press. So at the bottom of my screen here, I have Faker press already installed. And I'm going to go to posts. So this is a free plugin, the wordpress repository. And all this just puts in content. Up for your site. While you're designing. Right. So it puts in blog posts. It puts in comments or anything that you tell it to it has a ton of settings that you can mess with. I just use it. Like this. So for our posts. We want a 20 in there for my portfolio page. We already have one post on the site, which is hello world. So I'm going to add 19 more. That's it. And I'm going to generate. And as soon as you're done, you go to the settings on Faker press. And I'll show you that right now. There's a one click button. And it takes all the content away. You uninstall the plugin and nothing is left. So while that's generating. Let's go to the settings and I'll show you. So we could go to Faker press. And we go to settings. There's this just one. I love this. The cold never bothered me anyway. Let it go. And then everything is gone. Let me jump back to my site. Okay. Actually, let me go through the pages. Because we did not throw the menu up on that homepage yet. And let me go to my portfolio page. Now, if we zoom out. Well, that looks a lot different. Okay. And if we preview it in a new tab. We have this. All right. I'm going to zoom in here. I want to get a good amount of time in for some questions. I'm going to zoom over here real quick to another theme that was just released by a really good human named Andrews Noren. This is in the theme repository completely free. This is a great place to start for learning about all the things we're talking about today. But if we go to the demo. And look at that. So that's his portfolio or by. Three. Let's go back to our site. We have almost the same thing. So actually, let's just finish up by making ours look like that real quick. So I'll go back to my actual edit page. And we'll close off the rest to make. So I. Apologies for that intranets. So I made a brand new page called portfolio. I changed. The template to blank. That blank template I made. Through the site editor. I added a group block and just threw in a query loop. And I adjusted how many posts were there. How many showed up. So now I'm going to zoom into this query loop. And we'll see I have post template. So this is what's controlling. Each one of my blogs posts this. Image date. Title. And since it's my portfolio. I don't want the title. I don't want the date. I do want the featured image. Okay. And now if I go back up to my query loop. And I zoom back out. And I update. View my page. I have a portfolio page. And the reason I made it blank. I took the header out. You're saying, where's the navigation? So let's go back. We're going to edit the page. And we'll finish up with our custom header and footer. We're going to go to our list view as always. And we see we have our group block here. So I want to put a header. And before that, so we'll insert before. And I'm going to click the plus button. And for patterns, you'll see we have headers already listed. We're going to go in here. We're going to put in a custom dark black pattern. Right here. And I need to adjust the settings on that. The margin in the padding. And we'll click group. So we have our header. We have our portfolio. And so we want after that, our footer. So insert after this time on the search right from here. By typing in footer. So not giving me the option. Might be my Wi-Fi and or using mobile. So I'm going to go from here and we'll pick footers. And we'll see how we have a bunch more options. And I'm going to match that dark background at the top. And I just want a nice simple one that tells them to reach out to me. So I'm going to click on let's connect. Close that. And actually, you know what? I want this header to be sticky like that. Hosting site we saw earlier. So let me show you one more thing. I'm going to. Make sure I'm on that group header block. And I'm going to open up the settings on the right. I'm going to go to my styles here. And we're going to give it a shadow. I'm going to zoom in. I'm going to give it a radius. Zoom back out. And under my settings here, I'm going to go to position. I'm going to make that sticky. And one thing to keep in mind is. My internet is a little wonky today. Sorry about that folks. Why I have to keep refreshing. So let me just fix this real quick by going to our group block here. And you see it's on full width, which is why there's no. Margins to the left or to the right. So now we're going to zoom that back in. So now we have our margins. But our text is a little too. Close to the sides. So I'll go to my styles. And we're going to go to my roadblock here. And I'm going to give it a little extra padding. By clicking the padding over. That's a little too much. So I'm going to go. Adjust that myself. And I'm going to, if I click on. The icon right here next to padding extra small. You'll see it tells me exactly how many pixels that is. So I want half and I'm just going to change that to 10. And let's do the same thing real quick for our footer. So if we see here, I'm on my footer block. On the group. I changed my width to wide width. I come to my settings to the side for that group block. I go to the style part. I give it a radius. And we update. So now we have a sticky header. With navigation. We have portfolio. With a custom footer. And obviously, you know, we take more than. The four minutes I just took there to adjust padding margins and settings. And. If we go to landscape. We'll see we have the desktop. And I'm going to stop there because we have about six minutes left and hopefully there, hopefully there's more questions and or I can jump in. I'm going to stop there. I'm going to stop there. Or show anyone anything go over anything at the time. But we've gone over. Making a homepage. A contact page and a portfolio page. And let me jump back to home because that looks nicer. All using patterns. Which are all just a collection of blocks. Put together in an order that someone else predetermined. And then we'll just go ahead and put it in. Get in there mess around my favorite way to do it. I'll show this for last. This is my favorite way to test things out. Let's just go to, let's just add a new post. And just play around. And just call it a test post. You don't have to worry about anything you're doing, you know, add some blocks, see what, see what's here. Here's some text things. I throw those in. I'm going to go to the internet work. And you get the idea. So any questions? Um, excuse me. There was, um. There was a bit of a discussion, um, about the template, the blank template. Um, and maybe. Just clarify that as well. Cause we know we usually add the, the header and the footer template parts to our, our templates. But just to clarify for a reason, you added your header. Um, and your footer. To your page. Your portfolio page is because you use the blank template and the bank template that doesn't have anything in it. So just for folks who, who maybe were confused. Um, we're wondering about that. Um, so that's why. You added it to your page and not your template. Yes, exactly. Yeah. And I did. Apologies. I went through that very quickly there at the end. So if we go. We zoom in so we can all see this for this. If we go to our pages and we check out our portfolio page. Um, even though it says portfolio here, because we have the blank template. That is just telling me what page I'm on. So really this is what's going to show on the website. Nothing above. The content itself. So if I change that template, because we have a blank. That took away the header and the footer. And if I go back to default. And now I update. And we view our page. We'll see we now have two. Headers. So what using that blank template is, is, is a way to make. A really good use cases landing pages. For things to change often, right? Things you only need to use one time that one event. So I have this one thing coming up. I don't want the menu up here that, that sells other things. I don't want, um, you know, my Facebook link in the background, or I just want a sales funnel. So I would create a new page. I would call my page sales funnel. I would make it. A blank page. And I would publish it. Now, if we view this page. You'll see it literally is blank. Like this is what that's pulling for you. So if I. Now I'm on my sales funnel page and all as I want is one banner, one image that sends someone somewhere. So let's call it a cover. Sorry about that. Let's call it a cover block. Let's make that full with. Let's select our photo. We have the pelicans coming in this weekend. And we know that. Pelicans are awesome. So we just, that's all we just want to let everybody know pelicans are awesome. We go to our styles for our. We make the text white. That looks pretty rad. Now we update. Now we view our page. And you could adjust that. So that whole thing took up the entire page with no white space. So the blank template. Where to use template parts and why you wouldn't. That's great. Thank you. That helped fill it in some more West. Yeah. Absolutely. Thank you. Well, thank you. That was awesome. And thanks everyone for joining today. Yeah.