WordPress Website Design Tutorial 2026 - Step by Step

Hey there, my name is Matt and in this tutorial I'm going to show you how to design a professional WordPress website as a complete beginner. To design and customize our website, we'll be using Elementor, the most powerful page builder available for WordPress. It lets us build and customize every part of our website through an easytouse visual editor. I'm going to walk you through how to use this page builder to customize every part of your website step by step. and we won't skip anything. So, this video is truly the only one you'll need to build and design your entire website. All the tools we'll use are completely free. We'll use a free theme, only free plugins, and the free version of Elementor. So, the only cost you'll have is hosting. And I'm going to show you how to get the best hosting for WordPress for less than $3 per month. The first thing we need to do is get hosting, which is essentially renting space on a server to store your website files so it's accessible online 24/7. We'll also claim your free domain, which is your website's address on the internet. Here on the WordPress.org recommended hosting page, you can see there are only three officially recommended providers. I've tested all of these, and Hostinger consistently offers the best value. It's fast, reliable, and significantly more affordable than the others. Use the link on screen or the first link in the description to get an extra 10% off any hosting plan. You'll land on this page here. Click claim deal. Now we need to choose a hosting plan. The premium plan has everything you need to get started. But if you want daily backups of your work to prevent any sort of data loss, then I recommend upgrading to the business plan. A CDN also makes it so that your website can be loaded faster no matter where your viewers are in the world. Click choose plan for whichever plan you prefer. The next page you'll be taken to is your cart. Here you'll need to select a period for your registration. If you select at least 12 months, you'll get a free domain with your order, but for the best value, I recommend the 48-month plan. That'll save you the most money in the long run. On the right side in the order summary, you'll see that by using our link, the 10% discount has been automatically applied to the order. When everything looks good, go ahead and click continue. Next, you'll need to register your account. Enter your email and create a password or use Google to sign up. On the next page, go ahead and enter your billing address and enter your payment details to complete the checkout. You'll get this payment confirmation and you can either click the get started button or wait for the countdown to run down. Hostinger will route you into this onboarding workflow. On this first page, answer the question and then click next. For do you want to create or migrate a website? Click create a website, then click next. For how do you want to build your website, make sure to select WordPress, then click next. Now you'll need to create login details for your WordPress account. This is different than the Hostinger account credentials you just created earlier. This is what you'll use to log into your WordPress admin panel later. You'll see that my browser already prefilled this because I saved my password from earlier and it still thinks this is hosting group. But we'll actually want to create different credentials here. I recommend saving this password in a password manager like Last Pass so you never lose it. Click next when you're ready. Here when you're asked to choose how you'd like to build your site, I'll show you how to get really cool templates to jump start the design process later. Click create blank site. Now, if you purchased a plan for at least 12 months, you'll get to claim a free domain. I recommend getting a.com domain because it's widely used and super recognized. I'm making a website for a coffee shop in Portland. So, I'll search for the best coffee.com. Hostinger shows that it's available and it's free for one year. Let's go ahead and click that to select it and then click next. Next, you'll be asked to enter some personal information to register the domain. Go ahead and follow the prompts. Once you submit your information, you'll get this finishing your domain registration loading window. And then you'll be asked where your target audience is located. If you picked a plan that includes a CDN, this doesn't matter quite as much. But if you picked the premium plan, this is important. In general, I recommend picking a data center closest to your audience makes it so your website loads fastest for those people. So, I'll go ahead and scroll through the list and select United States, Arizona, cuz that's the closest to Portland, Oregon. And we'll click next. Now, Hostinger will install WordPress for you on your website. This can take a few minutes, so go ahead and grab a coffee or a drink of water while you're waiting. When it's done installing, you'll land in the WordPress admin panel. Welcome to WordPress. And before we go any further, there's a couple important steps to take before we do any design work. During the sign up process, Hostinger sent you a couple of emails. Let's go find those in our inbox. The first email Hostinger sent is one asking for you to verify your email address. open it and click the verify email button. When you land in the Hostinger H panel, that confirms that your account has been verified. Let's go ahead and close this tab out and then find the other email. Here's another email from Hostinger asking us to verify our email address to use the domain. This one's important because if you don't verify your email for your domain, Hostinger might deactivate your domain name. Go ahead and click the verify email button and you'll get a confirmation that your email has been verified. Now I'll show you two ways to access your WordPress admin panel. You can always log into Hostinger and then find your website and click WordPress admin. That's one method. I'll go ahead and close out these tabs. Now, there's one more method, and I actually prefer this one. If you open a new tab and enter your domain name in your address bar, then type slashwp-admin and navigate to that address. It'll take you to your WordPress dashboard. I'm already authenticated, so it took me right into the page. But if you're not logged in already, you'll get a login screen first. I'll close this tab out so we have just one dashboard page open. Perfect. Now that WordPress is installed and we're in the dashboard, the next step is to give our website a professional look by installing a theme and choosing a template to work from. But before we dive into that, let's clean up our dashboard. So, we're starting from a clean slate. On the left side, click dashboard and then click the X to dismiss any of these pop-ups. At the top, click the screen options drop down and then uncheck all these screen elements. Now you have a clean dashboard and you can add back any modules that you want to see in your dashboard later. Next, click plugins on the left side. This will show you a list of all the plugins that were installed by default. A plugin for WordPress is kind of like an app on your smartphone. It adds functionality to your website that you don't have already. Hostinger installs a handful of plugins by default, and some of them can interfere with some of the tools that we're going to use later. So, let's deactivate and remove anything we don't need. At the top left of the plug-in list, click the check box to select everything. Then click the bulk actions drop down above it and click deactivate. Then click apply. This will deactivate all the plugins at once. Next, check the box next to anything with the hostinger label. We'll leave light speeded cache because we'll actually use this later. We just don't want it activated right now. Back at the top, click the bulk actions drop down and then click delete and then click apply. Click okay to confirm that you want to delete these. Now that we've got WordPress all cleaned up, let's install our theme. A theme controls the overall design and structure of your website, while templates give you a professional starting point with pre-esigned pages. This will save you hours of design work. We're going to install Astra, which is one of the most popular WordPress themes. It's lightweight, fast, and works perfect with Elementor, our page builder that we're going to use. On the left side, click appearance. Then at the top, click the add theme button. Astra may pop up right away for you, but if it doesn't, go to the top right search bar and search for Astra. It should load in the first position. When you find it, click install. The button will change to activate. Go ahead and click that. You'll get this confirmation banner saying, "Thank you for choosing Astra." You can go ahead and close out of that by clicking the X at the top right. Now, we'll install the starter templates plugin, which gives us access to hundreds of professional templates and Elementor, the page builder we're going to use to customize everything. Click plugins on the left side again. Then click add plugin at the top and then search for starter templates in the search bar at the top right. The search will load and you should find this one here, starter templates by brainstorm force. Click the install now button. Then when the button changes, click activate. When it's activated, the onboarding workflow for starter templates will automatically load. Go up to the top right and click the drop down to change the editor to Elementor. If you don't see Elementor as an option available in this dropdown, let me show you how to activate it. We'll exit back to our dashboard. On the left side, click settings and then scroll to the bottom. There should be a menu item for starter templates. Make sure the disable Elementor page builder templates in starter templates option is unchecked. Then click save changes. To open starter templates again, go back to plugins and then under starter templates, click get started. And if Elementor wasn't showing up before, now in the drop down, it should appear for you. Go ahead and select it. Here you can browse through hundreds of professionally designed templates. Take your time to find one that matches your industry or style. You'll be able to customize everything later. As you scroll through, you may notice that some templates have this yellow premium tag. Premium templates cost money. All the other ones that don't have the premium tag are free to use. At the top, you can search for a template using keywords, or you can click into any of these drop downs and select a category. For my coffee shop, let's see if there's something under the restaurant category. As we scroll through, there's a bunch of premium options. As a jump start for a coffee shop, I actually really like this premium template here on the right. But let's see if we can find a free one. Here we On the left side, there's a template called coffee house. Let's click it to open it up and check it out. Here you can scroll through and check out the full design. You can even click different pages to see how they look. If you like the template you've opened, you can begin with some highle customization on the left side. For example, you can add your site logo. If you don't have one right now, that's just fine. I'll show you how to add one later. You can adjust your font pairing. Toggle through to find one you like. I actually like the default setting, so I'll keep that. And then you can toggle through and find a color palette you like. You'll notice that the buttons and even the image overlays change colors. For coffee shop, I want warm colors to represent the feeling coffee gives me. So, I'll select this yellow option. Again, you can scroll through and see how those changes look throughout the page. I like how this is looking so far. When you're happy with how everything looks for you, click continue. Next, you'll need to select the features you want to include in your site. I recommend selecting the SEO and search visibility feature because it can help your website to show up in search engines. At the bottom, you see that there will be several plugins installed automatically for us in order to use this template, including Elementor. After selecting the features you want, go ahead and click continue. It'll say, "Okay, just one last step and ask for a little bit of personal information." But you don't actually have to fill the survey out if you don't want to. Just click the check box that says, "I understand. Let's go." And then click submit and build my website. Starter templates will go ahead and spin up your website design. And again, this can take a few minutes, so this is a good chance for a coffee break. When it's done, you'll get this fun confetti animation. And then you can click to view your website. That will open a new tab where you can see your new website. Excellent. So, our template is now loaded and our website already has structure and content and you can scroll through to see how it turned out. Now, let me show you how to access the Elementor page builder. This is where the magic happens and where you'll spend most of your time customizing your site. To open the Elementor page editor, click the edit with Elementor button in the top toolbar. And here we are inside the Elementor page builder. Now, before we start customizing, it's important to understand how Elementor works. Once you grasp the basics, you'll be able to build anything you can imagine. To start, let's look at the structure panel that's open on the right side. Here, you can look at the structure of the page. If I click on this container item at the very top, you can see that this first big section of the page highlights with pink. This is the container. It contains all of the elements that are inside it, which you'll see turn pink as I hover over them. Or if I click the drop- down arrow at the right in the structure panel, we can see that there's another container inside there. And you can see that it's highlighted with gray this time. And if I click the arrow to open that here, we can see the individual elements, and we can click on them. If you want to rearrange things, you can do that from the structure panel. You can simply click and drag them to other positions, and then they'll update in the live page. There's also an eye icon on the right side of each element and container in the structure panel. You can click the eye icon to hide an element without deleting it and click the eye icon again to bring it back. This is a great way to see what it would look like to remove certain elements from the page without deleting it. In the same way that you can rearrange elements on the page using the structured panel, you can also rearrange containers on the page. Just simply click and drag them to a new location. I'll go ahead and put this one back. You can close the structure panel with the X in the top right. If at any point you want to see the structure panel again, you can click command I on Mac or controlI on Windows. So to recap that your pages are built using containers. These are boxes that hold your content. Inside these containers are elements which are the actual content pieces like text, images, and buttons. Now what if you want to add a new section to the page? Let's scroll down and find a place where we might want to add a section. If you hover over a section, a pink tab will appear on the container. You can click the plus button on it and then click plus again to select a layout for your new container. Let's choose a flexbox and choose this first option. You can move this container to a new spot on the page by clicking the six dots in the pink tab and dragging it to a new location. You can delete a container by clicking the X on the pink container tab. Now that you understand how pages are structured with containers and elements, let's actually start customizing the content on your website, we'll look at how to edit text, buttons, images, and backgrounds. Now, we'll go through the main elements you'll be working with on your website. These are the building blocks of every page. Let's start with text and headings. Text and headings are probably what you'll edit most often. Click on any text element, and you'll see three tabs on the left side, content, style, and advanced. Under content, you change what it says. Under style, you control how it looks, fonts, sizes, colors, and spacing. Let's update this header. Under the content tab, we'll click in the text box for the title and change the header to something more relevant for our brand. Maybe something like Portland's Best Coffee. You can see there's an HTML tag here that says H1. An H1 is the primary header on a page. It should appear just once and it serves to help tell search engines what the purpose of the web page is. Next, let's update our header style. We'll click the style tab and I want for this title to appear all in one line. So, we'll click the pencil next to typography. So, I'll click and drag the size slider until it shows up all in one line. You can also change the weight of the font to be thinner or thicker. Let's set this one to bold. There are additional typography parameters below, but I'm happy with how this header looks, so we'll skip that for now. If you wanted to make the text pop off the page a little bit more, you could use a text shadow. Let's click into the pencil and add a little bit of a shadow. First, we need to set a shadow color. Right now, it's set to a really, really light gray. And as I drag the slider from left to right, you can see that there's a little darkness that appears behind the text. With sliders like this, I find it's helpful to drag it back and forth until you settle in a sweet spot that looks good. Like right about here, maybe. Next, you could adjust the amount of blur the shadow has. Dragging the slider to the right makes it really blurry. Sort of thins it out. Dragging it to the left makes it more distinct and crisp. Somewhere in here looks pretty nice. Around 33 for this particular title. You can also adjust the horizontal position left to right. I'll type zero to center it as well as vertical position. And again, I'll recenter it with zero. And of course, you may want to adjust the color of your header text. You can do that by clicking the color selector next to text color. You can select a color manually with this picker here. Or you can use the color sampler tool to grab a color from somewhere else on the page. For example, maybe this wooden color. That wooden color is nice, but let's lighten it up a bit. Something like that looks pretty nice. In addition to using the content tab to update your text, you can also just click right on any text element and type within the box just like you're in a word processor. Next, let's edit buttons. Buttons are how visitors navigate your site and take action. You can change the text, add links to other pages, customize the colors, and even add hover effects to make them more interactive. Let's click on this button to get started. Just like the text edit panel, we have a content, a style, and an advanced tab. First, you can update your button type. Here you can see what different standard button types look like. The default yellow for this site looks pretty good, so we'll keep that. You can edit the text for your button by using the text field in the content tab. Let's change this to see our menu. Next, we need to make this button actually link somewhere when people click on it. To do that, we'll use the link field below. Delete anything that appears in it. And then we want to link this to our menu. So, we'll simply type menu to search the existing pages on the website for menu. And here the menu page appears. So, we'll simply click on it. And Elementor automatically pulls in the URL for the menu page. If you wanted to link to some other site on the internet, like an external page, you could simply paste in the URL to this field. You can also add icons to any button by clicking on this little circle for the icon library. This gives you access to the font awesome icon library. Now that our button says what we want and links where we want, let's style it. I'd like to bold the text in our button to make it more obvious. To do that, click the pencil icon next to typography, then change the font weight. This 600 semibold looks really nice. Now, one thing that makes buttons interesting is that they have a normal state and a hover state. Meaning, when you hover over the button, it changes its appearance somewhat. In our case, this button turns just a little bit lighter yellow. This is to give your viewers the understanding that the button is clickable. To update the way your button looks when it's being hovered over, you can switch to the hover tab, and you can update these parameters separate from the normal state. For example, we could set the hover state to be an orange color if we wanted. You can also set the transition duration or how long it takes to change to the hover state. And you can add hover animations. So maybe we want the button to grow a little bit as it's hovered over. Pretty nice. Now that we've got a good-looking, engaging, functional button, let's edit images. There are two different types of images you can edit. There are background images which sit behind your content in a container kind of like this in our hero section here. And there are also content images like these ones here. To change an image to another one, simply click on the placeholder image you want to change. And then just like for text and buttons, we have content style and advanced tabs in our left side edit image panel. To change the image, go to the choose image section, and click the choose image button that appears here. You can upload your own files, grab files from your existing media library. These are files that already exist on your website, or you can search for free images from a stock library. Let's search for an image of Espresso. I really like the look of this one here. To add an image from the stock library, simply click insert. And just like that, our image has been swapped out. Now, it's taking up quite a bit of space, so let's update our style. Go to the style tab under edit image. And here we can adjust the alignment size and all sorts of other image parameters. Let's start by adjusting the width by dragging the image width slider. Now you'll notice there's a little icon next to width that says desktop. If you click the desktop icon and change it to mobile, you can view the mobile version of the page and then adjust the width just for the mobile design. Let's switch back to desktop. We could also adjust the height of the image separately. This gets a little weird though, so I'll just undo this change by hitting command- Z on my keyboard a few times. Notice that there's actually two different types of parameters that we're adjusting when we adjust the width and height. The width is set to adjust the percentage, meaning the percentage of the page that it takes up, or in this case, the percentage of this section that it's in. PX refers to pixels, and this is a more absolute value. You can also adjust by EM, RM, and VH, but these are more advanced, so I won't be covering those today. That said, they're really worth knowing, so I recommend googling them when you have a chance. They can really level up your WordPress design abilities. All right, so we've updated a content image, but how do we update a background image like this image in our hero section? First, we need to select the container. Sometimes you can simply click the container and it's been selected. For this particular container, it's not quite so simple. So what we can do if it doesn't work and update what we are able to edit in our left side panel, you can click the six dots on the edit container tab and that will open the container edit menu. And here you have different tabs. You have layout, style and advanced. We'll update the background image under the style tab which is already selected for us. Here you can change your background type between classic, gradient, video or slideshow. Selecting one of these will change what's displayed. Right now we have an image for our background. So we can swap it out by hovering over the image and selecting choose image. Now I want to upload a file of my actual coffee shop for this hero section. So let's go to the upload files tab. Click select files. Then we'll select the image of our coffee shop. The image gets added to our media library. You can see it's selected on the left in the first position and the file name was added as our title and alt text. Now, for SEO purposes, we want to make sure that the title and alt text fields for our images are filled in with something descriptive. So, let's make the title our beautiful coffee shop. The alt text is what appears if your image can't load on the page for some reason. And there are some best practices to follow when creating alt text. To learn more about this, I recommend clicking this blue link here that says, "Learn how to describe the purpose of the image." It'll take you to this page here titled an alt decision tree. For any image that appears on your site, you can use this decision tree to decide whether or not you need alt text. And if you do, what the best thing to put for your alt text is. For example, here following the decision tree, we get down to does the image contribute meaning to the current page or context. And the best option to answer for this is yes. It's a simple graphic or photograph. So, it says, "Use a brief description of the image in a way that conveys the meaning in the alt attribute." Closing this tab. We can just say something like this. When you're done, click select. And now the beautiful image of our coffee shop has been loaded in for our hero section. Great. You now know how to customize individual elements. But to create professionallook layouts, we also need to control the spacing between elements and understand how to create different column structures. Proper spacing is what separates amateur websites from professional ones. So, let me show you how to control spacing and create custom layouts. Margin and padding both add space, but in different ways. Think of it like a picture hanging on your wall. The picture itself is your content. That's what people actually want to see. Padding is the space inside the frame. It's the matting or border area between your picture and the wooden frame. It pushes your content inward, creating breathing room within the element's border. Margin is the space outside the frame. It's the gap between your picture frame and the wall or the space between this frame and other frames next to it. It pushes the entire element outward creating distance from other elements. So, here's the key difference. Padding affects the space within an element around your content. Margin affects the space around an element between different elements. So when you add padding, you're making the inside of your box bigger. When you add margin, you're pushing your whole box away from its neighbors. So now let's check out margin and padding in action. If we look at our hero section here, there's some inconsistent spacing between our header text, our subtitle text, and our button. The space between the header text and the subtitle text is greater than the space between the subtitle and the button. So, let's see if we can create a little bit more space between these bottom two elements. To check and edit your spacing settings, first click on the element you want to update. Then go to the advanced tab here. We don't see any values for margin or padding. So, let's click on our button and see if it has any values. Again, it doesn't show anything. And this tells me that these are just the default settings. So, since we've got our button highlighted, let's create a little bit of space between it and the next element up. To do this, we want to update our margin, the space around the element, specifically the top margin, which we can adjust by going to the top margin field. Let's add 10 pixels. And you can see that that has now created a little bit of space around our button. And this is actually looking pretty nice. Let's actually maybe even take it up to 15 pixels. If we click somewhere else on the page to highlight another element or container, we can get a better look at how our margin is. I think there's still just a tad bit more space between these two elements than between these two. So, let's give our button 20 pixels of margin. And that's looking more balanced. And you can see if we hover over the button, there's this nice space that's been created around each side of the element. Now, we don't necessarily need more space to the left, right, and bottom. So, we could click this chain to unlink these values and set right, bottom, and left to zero. We only need that margin on the top. Now, let's say we didn't like how this image below is overlapping this hero section. What can we do about that? Well, first we need to figure out why it's overlapping. If we click the image, specifically this edit container, and we click through to the styles and advanced, we're not finding this image anywhere. Actually, interestingly enough, when I click this edit container, and I start to adjust the padding, let's say to like 50 pixels, we start to adjust this smaller espresso image we added earlier. That's not what we want. So, if you after clicking around, you can't seem to find where this image is. This is exactly where the structure panel comes in handy. So let's open it with command I. This is clearly a background image of some sort. We just need to figure out which container is being used as the background for. So we have this container here which is our hero. It contains a few things. And then we have this next container down which is our whole big section here. And if we check the style tab, we can see that this image is actually really cleverly constructed. It's transparent on the left side and has the image content on the right side. Then if we click to our advanced tab, we can see that this entire container actually has a negative margin of 115 pixels. So what the designers of this template did was very clever. They used a negative margin to force this container to overlap with the previous one. But again, let's say we don't like this overlap. What we can do to get the overlap to stop is simply return our top margin to zero. And now our hero is nice and separated. This will look nice as the first thing somebody sees when landing on the website. But now that we've removed 115 pixels of margin, it slid all the other content down the page. And now the about text looks a little goofy. So let's edit this container here. And you can see that there is padding of 250 pixels on top. Let's remove let's say about half of that 125 pixels. And you can see that the padding or the space within the container that is pushing the about content downwards has been reduced which makes it so that it can live a little further higher in this container. You could take it all the way down to zero as a demo and you see that the about goes right up to the top. But if we add space, it pushes that content inward to the container. There's also right side padding which is keeping the content from going all the way to the right where the image is. If we take that to zero, you see it allows the text to expand. But I actually like this spacing as it is here. Now, let's talk about multicolumn layouts. This section we've been working on right here is a great example of a multicolumn layout. If we click to open the structure panel, we can see this container we've been working on has two containers inside of it. This left one and this right one. Let's go to the bottom of the page and create our own multicolumn layout. To do this, you'll click the plus button and then select either flexbox or grid. Let's go with flexbox. And then you can select here between different column layouts. For example, a two column layout like the one we've been working on. This one has even spacing. Here's a two column layout with a small column on the left and a larger column on the right. Or here's a four column layout. There's all sorts of different layouts you can choose, but let's choose a four column layout as an example. Now, if we hit command I to open up the structure panel and take a look at this final container on the page we just created, we can see that it has automatically created four containers for us. And each of these containers are empty. So essentially columns are created by creating containers inside of other containers and then you can have them be equally spaced and equally sized or have them sized differently. I'll go ahead and delete this container. Now here's a pro tip. Instead of building layouts from scratch every time you can import pre-esigned templates or even design your own layouts as templates to reuse later. Let's import a section template from the bottom of this page. To do this, click the S icon for starter templates. And here you can see at the top we have the page template tab selected. But if you click over to blocks, you can find dozens of templates for individual sections. You can filter through them by clicking the all drop down at the top left and then click a category to filter it down. Once you filter it down and you find one you like, you can click the plus button to see it larger. And if you like the block, you can click the import block button at the top. The cool thing is Elementor will automatically apply your site's style to this new block. Now, let's say we really like the way a section on our page looks and we might want to reuse it again later. We can do this really easily by saving it as a template. For example, let's save this five image gallery as a template. The easiest way to do this is to open up the structure panel. Select the container that you want to save as a template. Rightclick it and then click save as a template. You'll be prompted to give your template a name. Name it something descriptive. In my case, five image gallery. Then we'll click save. And you'll be taken straight to a new templates tab. The template is here with our name, five image gallery, the creation date, the type, and we can click preview to see how it looks. There it is. Let's close out this tab and this popup and then click the plus to add a new section. If you click the folder icon, you'll open up the Elementor library. And under the templates tab, you can see your new template. And you can click insert and apply to add it to the page. Voila. Not only now can we add it to this page, but we can add this same template to other pages. We don't need two of these on this page, though, so I'll go ahead and delete that new container, as well as the sample section at the bottom. Whenever you're done making edits on a page, you can click the top right drop down arrow to open the save options and click save as draft if you're not quite ready to share it with everybody, but you want to have this page progress saved. Or if you're ready to share this page on your live site, you can click publish. To see how this page looks on your live site, you can click the eye icon. And there we go. Perfect. Now, instead of styling each element individually on every page, let me show you how to set up global styles that will apply across your entire website. We'll also make sure your site looks great on mobile devices. Global styles are incredibly powerful because they let you set fonts and colors once. They'll apply across your entire website automatically. We'll also make sure everything looks perfect on phones and tablets. To set global parameters, we need to go to the WordPress customizer. To do this, click customize in the top toolbar on the main WordPress preview page. Once you're in the customizer, click global in the menu on the left. And then here, sub menus appear for typography, colors, containers, and buttons. Any changes you make here will update throughout your entire site, which saves you a ton of time. We've already got the H1 on our page looking pretty good, but what if we wanted to update the way H2 headers looked throughout your entire site? To do this, we can go to typography and then in the typography window, we can see a bunch of settings. We can update the typography throughout the entire site by updating the font family, for example. I'm not a huge fan of this, though. So, we can click the arrow to revert back to the way it was. Scrolling down, you can see the base font for the body text. That's this black text in this section, for example. And the headings font, that's the bigger fonts at the top. We're using yes of one for the headings and mossat for the body. For the headings, you can also drill down and get more granular for individual heading levels. For example, H1 2 3 4 5 and six. So, if we want to update the way our H2s look throughout the site, we can click the H2 drop down. Now, you see under font family and font weight, it says inherit. Now, inherit is not a font. When you click this dropown, you'll see what I mean. Inherit shows up at the top above all the other fonts. You can manually select a font or you can inherit the font settings from your main base heading font up here. Yes, of one. So that's what we have right now when we're inheriting. Let's say we wanted to change it to something like Ariel. You can also update the H2 size. Now I'm not a huge fan of this font size change. So let's actually revert that back. And let's set our font back to inherit. Now, if you have this problem where you set it back to inherit and it doesn't actually switch back to the base font you had before, this is a common glitch. You can get around this by simply refreshing your page. Then you can see when the page refreshes, we're right back to the way our font looked before. There's a notification at the top left saying there's a more recent autosave, but we can close that out cuz this was exactly the desired outcome. We just updated the typography, but you could also update the colors, containers, and button styles throughout the website as well. I'm pretty happy with how this is looking. Now, we've been making all of our edits on a desktop view, but more than half of all web traffic comes from mobile devices, so it's crucial to ensure that our website also looks good on smaller screens. Let me show you how to do this. Exit out of the customizer by clicking the X at the top left. Then, return to the Elementor page editor by clicking edit with Elementor. When we land back in the editor, you can see that at the top of the screen, there are three icons. One for desktop, one for tablets, and one for mobile. If we click the mobile icon, you'll see the viewport for the site shrink down to a typical mobile size. And immediately, we see some problems. The header line wrapping here looks a bit clunky, and the bottom of our hero section here doesn't have enough space at the bottom of the button. Let's fix this. First, let's click on the header font, and then click into the style tab. Here at the top, you can see there's a phone icon. next to alignment. I don't think it makes too much sense to have our header text left aligned when everything else in this hero section is center aligned. So, let's go ahead and center align this header. That's looking a little better, but the line wrapping is still strange. So, let's click the pencil icon next to typography. And then next to the size setting, you can also see here that there is a mobile icon. Anytime you see these settings with the mobile icon, this means that you're making changes just for the mobile view and not for the other views. So, let's shrink this header text down until the line wraps nicely. Right about there. And if we toggle back to the desktop view, you can see that our previous design has not been impacted in any way. It looks good on desktop and it looks good on mobile. I encourage you to do this for tablet views, too. Now, let's fix the spacing issue at the bottom of our hero section. To do this, we want to update the padding of our container here. I'd like to make it so that this hero image fills the whole screen when somebody lands on this page and that we don't have any of this white about section here and there's plenty of space at the bottom of this button. To do this, we'll click this container, switch to the advanced tab, and then for padding, let's unlink the values. Then we'll add a bit of space to the bottom padding. Let's start by adding 100 pixels. And you can see that our hero section has been expanded at the bottom internally outwards. That's not quite enough space to hit the bottom of the screen. So, let's go to 125. Still not quite enough. And 150. Oh, almost there. Do 160. There we go. Now, our hero section fills the full frame on mobile. This is looking much better. And again, if you toggle back to desktop, you can see that our original design still has not been impacted. The tablet view looks great, too. When you're done making changes and you want to make this live, click publish in the top right. So your website visitors can view the page. Excellent. Your website is looking good and works on all devices. Now, let's set up the navigation and branding elements that will appear on every page. Your header, footer, and menu. Your header and footer appear on every page of your site. So, they're important for navigation and branding. Let's customize them. But before we do, let's add a brand new page to our website. Adding new pages is simple. There are two ways to add a new page to your site. One using the Elementor editor and one through the WordPress admin panel. To add a page with Elementor, click the page drop down at the top middle and then click add new page. And just like that, we have a new page that we can edit. You can name the page by clicking the page settings button in the top left. That's the button with the page and gear icon. And then under general settings and title, give the page a name. Let's call it products. Now, there's one other way to add a page, but before we do that, let's quickly save this one. Go up to the top right, click the dropown, and click save draft. Now, the other way to create and manage pages is directly within the WordPress admin panel. To get back to the WordPress admin panel, click the Elementor icon in the top left, then click exit to WordPress, then click the WordPress icon in the top left. Here in the WordPress admin panel on the left side, you can see that the pages nav item is selected. This is the view where you can manage all of your existing WordPress pages. As we hover over them, we can see buttons to perform various tasks like edit, quickedit, trash the page, view it, or edit with Elementor. Some of these pages have the edit with Elementor option enabled, and others don't. The ones that have edit with Elementor were created by Elementor and can be managed with it. The other ones you have to use the WordPress block editor, so we're going to skip working with those for now. To add a new page, click add page at the top. And just like that, we have a new page. We can give it a title. We can save the draft and even publish it right from this view. If you want to edit it with Elementor, you can click the edit with Elementor button. Let's go back to the WordPress pages. To delete a page that you've created, click the trash link under the name for the page. And just like that, the page was deleted. Now, let's return to our products page and edit it. It looks like there's already a products page that was pulled in with this template, but this is the one we just created, and you can tell because it has the Elementor tag on it. So, we can click edit with Elementor to jump right back into editing it. You can build the page from scratch by adding containers and elements one at a time by clicking the plus button here, or you can jump start the design for the entire page by clicking the S icon to open up starter templates. You saw the screen before when we imported a block template, but you can also import templates for entire pages. There are lots of different design schemes here and many different styles. The main things to look at when deciding on which template to import is not so much the style, but the content and the layout. The style will automatically adapt to the global settings that you have set for your site. So, just find a template that has the elements that you need. For example, let's look at this planet Earth template. And then for a products page, a services page could work pretty well. We can open up the page template to take a look at it. Scroll through and if it looks good, click import template. Then just like that, we have our new page populated. And we can edit the contents of the page just like we did previously. You may notice that in the upper left, the name of the page appears here, products. We don't really need this because we already have a header section pulled in from the template that we can use for our page name. So, how do we get rid of this? We'll need to use the WordPress block editor for this. But first, let's save our page as a draft. Go up to the top left, click save draft. Now, let's go to the WordPress block editor and get rid of that page title. In the top left, click the Elementor icon, then click exit to WordPress. And here in the WordPress block editor, you can't see any of the Elementor elements because those only work within the Elementor editing environment, but we can see the WordPress block editor elements. And the first one on the page is the title. So, if we click that and then click the eye icon, it hides the title. We can go to the upper right and click save. And then we can return to Elementor by clicking the edit with Elementor button. Now, our design looks much better. I'll go through and quickly customize this page using the methods I showed you before. And next, I'll fast forward through this process since we've already covered everything. All right, so we've jumped ahead in time here and I have gone through and customized this page. I've got some products loaded in as well as some images and some text and I think it's looking pretty nice. But now you notice one thing. It's not showing up in the navigation menu at the top. So, how do we fix this? To do this, we'll need to go back to the WordPress customizer. But first, let's save and publish any changes. Great. Now, a quick shortcut to get back to the customizer is to click the preview changes eye in the top toolbar. This takes us to a preview of the page on the live site. And then from here, we can click customize in the top toolbar. I'll go ahead and close out this other tab, too. Now, you should recognize this page. We were already in here before when we updated the global settings. Now, let's update the menu. go down to the page on the left side and click menus. Then click menu. From here, you can click to add items. And we're going to add in the products page we created by clicking plus. And if we click the X next to add items, you can see that the products page has been added to our navigation menu. You can reorganize the navigation menu by simply clicking and dragging pages to different locations on the left side. Or let's say you wanted to remove a page. You can click the drop down next to a page and then click remove. When you're done making changes, click publish in the top. Now the section that your menu is in here is called the header. You notice there was a logo that appeared in the center of our header before and a button that appeared at the right. And actually [clears throat] you see if I hover over it, the hover state for the button has black text. So you can see the order online button appear. We want to edit this header section to look good on our site. So let's edit the header. Then from the navigation, select header. Here we get an interface that allows us to edit the header. You can see there's the primary menu on the left side, site title and logo in the middle, and a button on the right. Let's rearrange this header. We don't really need this button since we have everything we need in the menu. So we'll click the X to remove it. Then let's drag the primary menu to the right side of the header and we'll add the site title and logo to the left side. Now let's update our site's logo. To do this, click site title and logo and then click change logo. I'll upload a logo from my files on the computer. Don't forget to make sure a title and alt text are set and then click select. You may be prompted to crop your image. In my case, I already have the cropping the way I want on the image, so I'll click skip. And if the logo doesn't show up right away for you, check the left side here. You might have this little toggle check that says different logo for retina devices. If we untoggle that, the logo appears. So, you can set different logos depending on what kind of screen your viewer's device has. Now, this logo is massive in the header, so let's shrink it down. To do that, we can grab this logo width slider and drag it to the left until it's a reasonable size that fits with our design. Something like that looks nice. You can also set site title visibility. Our site title is currently coffee house, which we want to update. If you don't have a logo, you may want to use this so that the title of the site appears in the header on desktop, tablet, and or mobile. Right now, we're not seeing it because it's white text, and that's just fine because I already have the logo, so we'll remove that. This header is looking great now, but what about the footer? The footer is what appears at the bottom of every page. This is what the footer looks like on our site. To edit the footer, it's a similar process. return back to the customizer menu and select footer. Here we get a similar interface that allows us to edit the footer. Let's go ahead and swap out this logo image. I'll click the pencil icon, click got it, and then we'll click to replace the image. And we'll replace it with our logo. Depending on the template you use, you may or may not have a logo in the footer, and you might not want to use a logo in the footer. That's up to your discretion, and you can do whatever you want. It's your design. Just like editing the header, you can move widgets around. And you can edit anything by clicking on the pencil icon next to it or clicking on the item in the interface at the bottom. For a template like mine, I recommend updating your social links to link to your actual social profiles and updating your contact information to be your business's actual contact info. And of course, when you're done, click publish to update your site. Now, there's one more thing I want to show you with the header. Let's scroll back up to the top of this page. You see how this header has a white background? Well, remember how our homepage didn't have this white background? We can click on the logo to return to the homepage, and I'll show you. Here we have our header, but it's transparent. There is no white background on this page. So, how do we get our products page to look the same as our homepage? I'll show you. Click the X in the top left to exit the customizer. Then when you're on the page you want to update the header for, click edit with Elementor. When Elementor loads, open page settings in the upper left. Then scroll to the bottom of the general settings tab. Click to expand Astra settings. Scroll to the bottom of that and you'll see a section called advanced settings. And within that there is a transparent header section. Right now this shows disabled or yours might not even show that an option is checked. To enable a transparent header for this page, click enabled. Now, unfortunately, it won't show up until you publish the page. So, let's go ahead and click preview changes, this green button here. And then we'll click publish in the upper right. And then we can refresh the page. And when the page loads again, you'll see that the header has completely disappeared. Well, that's pretty transparent if you ask me, but that's actually not how it looks on the final page. Click the I in the upper right to see the preview of the live page. And now you can see that the header appears on our hero section without that white background. We have a nice clean transparent header. All right, we're almost done. Let's wrap things up with one final step that will improve your website's performance. Before we launch, let's use a caching plugin to make your site load faster. To do this, click the WordPress icon in the upper left to return to the WordPress admin panel. Then on the left side, click the plugins item in the navigation. And you might see some new plugins here that were added in the process of setting up our site. That's okay. Remember this light speeded cache plugin we deactivated earlier? Well, go ahead and just click activate. Lightseed cache will significantly improve your website's loading speeds by caching your pages. This is important for both user experience and SEO. Just activate it and you're good to go. Okay, take a look at panel one. This is normal caching. Think of light speeded as taking a fast snapshot of your website and showing that to visitors. It's quick and gives your server a break. But look at panel 2. If you edit the real site, the cache still holds on to that old snapshot. visitors won't see your changes and neither will you, which is confusing while you're editing. So, just follow the loop in panel 3 when editing. First, disable the cache so you are working on the real thing and you can see those changes quickly. Then, make your edits. Finally, reenable caching to generate brand new fast snapshots for your visitors. All right, let's quickly recap what we've accomplished today. You've set up hosting, installed WordPress, chosen a professional template, learned how to use Elementor to customize every element, created layouts, optimized for mobile, and set up your navigation and branding. Remember, if you haven't signed up for hosting yet, use my link in the description to get that extra 10% discount. Thanks so much for watching. Now, go design something cool.