Bluehost WordPress Tutorial 2026 - COMPLETE Beginner’s Guide

Hey, my name is Dan and in this tutorial, I'll show you how to easily set up your WordPress website using Blue Host. This is a complete step-by-step guide designed to be as beginner friendly and as thorough as possible. We'll start by signing up with Blue Host and securing the best available price for your WordPress hosting. Next, I'll guide you through setting up your domain and installing WordPress. Then, I'll show you how to get free access to hundreds of professionally designed website templates that are fully customizable and mobile friendly. You'll learn how to easily customize these templates using Elementor, the most popular visual page builder for WordPress. Everything we use in this video is free except for the hosting with Blue Host. But if you use the special link at the bottom of the screen, you'll get an exclusive discount on your hosting plan. That link will always get you the best deal that we have at the time. You'll also find that same link if you scroll down to the top of the video description. This is a better deal than what you'll find on Blue Host's homepage. So, make sure you're seeing that exclusive discount. Let's select the hosting plan and domain. Now, to claim your exclusive discount and take advantage of a free domain, click get started. Now, here you'll see the Blue Host plans. Everything in this tutorial works with the starter plan. So, I'll click choose plan. Now, it's time to choose your domain name. Try to keep it short, memorable, and most importantly, it needs to be available. I'll type in BHWP tutorial 3, short for Bluehost WordPress tutorial. You can also change your top level domain here, but I recommend sticking with the.com. And I like to add domain privacy and protection to avoid any junk mail, but I'll show you how to remove that later if you change your mind. Now, click search for domain. On this page, you can create your account and confirm your plan details. So, the first thing I'll do is come over here on the left and enter an email. And I'll choose a password. Then, under the recommended add-ons, I'm going to remove SiteLock Essentials. You may want to explore these options, but I'll proceed without any add-ons. Then, back over on the right, you can click the download under starter hosting. If you're on a budget, you can choose the one-year plan, but choosing the 3-year plan will lock in this low rate. This is our free domain for a year. And here is where you can remove that domain and privacy protection if you want to go without that. When you're happy with your plan details, scroll down to billing information. Enter your details over here on the left and then click submit payment. Now that we have set up our hosting and we have our domain, it's time to install WordPress. And just like that, after submitting payment, Bluehost will automatically install WordPress for you and you'll land in the Blue Host dashboard. You can log into WordPress using the button here, but let me show you how to get there manually just in case you close this pop-up window. By default, you'll land on this hosting tab. Navigate up here and click on websites. Here you should see the domain that you just chose. And to launch WordPress, click WordPress admin. And here you've officially arrived at the WordPress admin dashboard, the back end of your new website. This is where you'll come to make changes to your website, publish pages, or install tools. Before we start designing, let's quickly clean up the dashboard and remove any clutter. On the lefth hand menu, click dashboard under the Blue Host section. We can dismiss this banner up at the top. And then you can click on screen options in the top right here. You can uncheck everything. And you can always turn these on later if you'd like. Then you can collapse the screen options panel. Next, to remove some of these notifications, go to the plugins tab. We'll come back to plugins later, but for now, let's clean up a few that we don't need. I'll select creative mail and this monster's insights jetpack optin monster and if you scroll down Yoast SEO then scroll back up and click the drop down under bulk actions then click deactivate and apply. If you want to remove these plugins for good we can select them again. Creative Mail, Monster Insights, Jetpack, Optin Monster, and Yoast. And again, we can click bulk actions. And this time, delete, then apply and confirm. All right, much cleaner. The next important thing you have to do is install your theme. The theme will give your website the basic structure and allow you to access free website templates using a plugin. A theme controls the colors, fonts, and layouts of your site. In this video, we'll use a popular free theme called Astra. It works great with Elementor and the templates that we'll use in a moment. From your dashboard, hover over appearance and click themes. Then scroll down and click add theme. In the top right, search for Astra. Then hover over it and click install. Once it's done installing, click activate. Now, I'm going to show you how to get access to hundreds of free website templates that are fully customizable using a plugin. A plugin works like an app for your website. They add new features just like apps do on your phone. On the left hand side, click plugins. Then up top, click add plugin. Find the search bar over on the right and search for starter templates. When you see this one, click install now. Once it's done installing, click activate. If this guide pops up for Astra in the top right, click exit guided setup. Go back to plugins and find your starter templates plugin. Then click get started. Here you want to click build with templates. And now you need to select a page builder. If you don't see Elementor here as a page builder option, let me show you the quick and easy fix. If you don't see it, click back, then click exit to dashboard. On the left hand side, hover over settings and click general. Then scroll all the way to the bottom of this page and you'll see a section labeled starter templates. If the option disable Elementor page builder templates is checked, uncheck it so that it looks like mine. Then click save changes. Now you can return to plugins, find starter templates, and click get started once more. Then you can choose build with templates, and you should see Elementor here. Once you see it, click Elementor to continue. Starter templates lets you build and edit pages using simple drag and drop tools. It gives you many ready-made designs to choose from, and we'll use one that's totally free. And now we need to choose our template. Templates are different from themes, which we already chose earlier when we install an Astra. That theme controls the overall look of the entire website, including colors, fonts, and the layout for all pages. A template, however, only controls the layout of one specific page, such as a homepage, about page, or a contact page. You can browse the templates by category here. And you'll see that the templates that are paid are marked as premium, but there are plenty of free ones to start with, and using a template will both save us lots of time and will get us started with professional look. If you click on any of these templates, you'll get a preview of how it would look and you can even navigate through the pages here to go back and choose something else. You can just click the X. I'm going to use this template called Planet Earth as it's a good one to learn the Elementor page builder and it's flexible to use for different industries. Once we select a template, you can start by customizing your website with a site logo and you can change font pairings if you'd like. Below that, we can experiment with new color palettes. But for now, I'm going to stick with the defaults and we can click continue. In this feature selection step, I'll click skip this step. If you see this insufficient memory limit, you can choose to skip and continue here as well. And then finally, on this screen, you don't actually need to fill out your information here, but you will need to check this box to acknowledge that you are overwriting your site settings and adding new content. Once checked, click submit and build my website. This will take a minute or two, but once it's complete, you can click here to view your website. If we scroll down here, we can see the rest of our homepage. And we can navigate to other pages in our menu bar to take a look. For example, this is the about page and this is the services page. Let's see what these pages look like from within our WordPress dashboard. Go to our website name in our WordPress admin bar. Then we can rightclick and open our dashboard in a new tab. For now, I'll close Elementor, starter templates, and my email inbox. Now, back to the dashboard that we just opened. From the dashboard, let's go to pages in the lefth hand menu. And here we can see our pages listed out. Now that our site is built and our theme, plugin, and template are all taken care of, let's customize our website using the Elementor page builder. There are a few ways that we can get to the page builder. From this pages view, we can simply click edit with Elementor on the page that we want to edit. I'll commandclick this hyperlink to open the homepage in a new tab. So, that's the first way, but let's close this for now. And I'll show you the other way. From within pages, let's go to our visit site link again and commandclick this to open this in a new tab. And once our homepage is open, we can click edit with Elementor right here in the WP admin bar. I'll close our services page from earlier. To start customizing, let's first understand how our website pages are structured. Every page on our website is built using containers. And inside of these containers are elements. I'll close this panel. This floating structure panel on the right shows us how our containers and elements are arranged on the page. On the homepage, we have four main containers. If we click on them within the structure pane, it will center the container I've clicked and the container will be shown with this magenta outline. If I open this main container, we see another one outlined in gray here. And then within this container, we can see we have four items, a spacer, two headings, and then a button. Sometimes it's helpful to close the structure pane, but if you ever want to bring it back, command or control and I will toggle it on and off. Or if I close this and I right click on any element and I come down to structure, that will bring it back as well. To move a container, we can see this magenta outline. If we hover over the container, we can grab the container handle and then we can move it to a different location. Just like in other applications, if we want to undo that move, we can hit command Z. I'm going to close the structure pane. To add a new container, let's hover over an existing container and then click the plus icon to add a new one. Let's click plus once more here and let's select flexbox for now. I can explain the difference between flexbox and grid later. I'll choose this two column structure. And now we can add some elements. So, if we go over here to the left and we click add element that will bring us back to our widgets and I can simply drag a new heading in here. I could then add a new paragraph with the text editor widget. That magenta bar shows me where it's going to drop. And we could also add a button. And when you're dragging elements around, you'll see this magenta bar that indicates where the widget is going to be placed. For instance, you can see how this changes the location when we drag and move our button. To delete elements, we can rightclick and select delete. I'll delete the text. If you select an element and we pull open the structure panel again, we can delete that element from here. And then we'll see this container in the structure panel as well. We could delete this. Or if we hover over this entire container, we can click the X to delete the entire container. If you ever make changes that you would like to undo, Elementor keeps a history of actions that we can revert. To access that history, click on the Elementor logo in the top left, then history. If we click our container removed action, it's going to undo our container removal. Then we can skip back to the latest version in time by selecting the latest action. And if we ever want to preview our page, we can collapse the Elementor panel with this handle right here. Or we can click the eye icon to preview changes. Then we can close our preview changes tab and reopen our Elementor panel. We can visit our actual site by clicking this drop down arrow and view page. That brings us to our actual site which for now is on this temporary domain. But let's close this and continue customizing. Now that we understand containers and elements, let's look at how to customize text as it will be a popular element on our website. Click on the preview of our heading currently titled earth. And notice that will open our edit heading options. Within these options, we see that we have three tabs, content, style, and advanced. Under the content tab, we can change our title from Earth to WordPress. We can also do that directly by clicking and editing the preview. Underneath title is where we could add a link if we want to. And we have the option to change the HTML tag here as well. Now, under the style tab, we have many more options to control the visual look of our heading. We can align it left, right, justified, back to center. If you open the edit menu for typography, you're going to find many of your typical font settings. We can change the font size here. We can change the font weight, say semi- bold. Right now, this heading has been transformed to uppercase. We could change the style between normal, italic, oblique. I'll keep it normal. And then we also have text decoration. We're going to look at line height, letter spacing, and word spacing more closely in a minute. But if we close this typography section, you can access some less often used settings like text stroke, text shadow, and blend mode from within the style tab. And finally, one that you might use quite often, text color. If you click on the color picker here, it will give you access to the hex code color. So you can pick any color that you want and preview the change in real time. Or if you close this and click on the globe, then you'll have access to all the colors that are part of this theme. This feature is helpful in keeping your elements looking as though they belong with everything else on your website. So we could change this back to theme alternate brand. Under hover, you can change the behavior of this color as if the heading were a link. If we scroll down to this text editor element under the about us heading and we return to the style tab, let's revisit the typography settings to look at some of our spacing options. If I scroll down here, you can see how line height, letter spacing and word spacing affect the look of the text. If we click this circular arrow icon here, the text editor styling will return to the defaults. In the advanced tab, we have many more options for spacing and alignment, but we'll cover this a bit later. For now, let's explore the other element types. We can edit the button text just like regular text elements, but we can also customize the buttons themselves. Let's scroll up to the button that we have at the top of our homepage. Let's actually delete this one and start from scratch. So, if we rightclick, we can delete. And then from our elements panel, we can drag and drop a new button in. Let's start to edit our button. In the content tab, I'm going to leave the type as default, but I'll change the text here just as we've done before with other text elements. And I'll say get WordPress. And then buttons generally help our visitors to navigate between pages of our website. So here under link, I want this button to take visitors to our contact page. If you start typing contact and remove this, our contact page will show up here and we can select it. Now you can see the URL filled in here. You can add an icon along your button text as well. So we can either upload an icon or if you click on the icon library, there are already a few from Font Awesome that we can look at. If we click on the Font Awesome brands library and search for WordPress, we actually have a few. So, let's click on this and insert. And back over here, we can change the icon position. And we can change the spacing in relation to the text if we'd like. Think I like it on the right. Now, under style, let's make a few changes to the look of the button. I'm first going to center the position. If I open the typography settings, I can select a new font. I can increase the size. Something like 25 looks good to me. And I can bold the text, maybe decrease the letter spacing to my liking. And if I scroll up and close the typography pane, I like the button text color of white here, but we can change the color of the actual button. We could pick a hex color like we've looked at before, or we can select something from our theme. And I might go with accent. Under box shadow, we have some options that we can use to make our buttons stand out. If I wanted this subtle, we could dial in the spread of the shadow so that it barely reaches past the edge of our button. You also have control over the blur here. And under color, we can even lower the opacity of that shadow. So, I'll close the color picker and the box shadow options. Border radius is how you can round off the sharp corners. So, if you take it to the extreme, you can make pretty round buttons here. I'm going to go with something like five for a much more subtle effect. And these values can be linked or unlin with this button here. And under padding, you have even more control over the shape of the button. Let's unlink these values by clicking on the chain. And I think something like 15 pixels on top and bottom and 25 on right and left might look nice. Finally, if we select hover up here, we have full control as to how the button will look in the hover state as well. So, let's enable the box shadow. If you remember, we just lightened the shadow of the normal state. So, these default values for the box shadow in the hover state will make the button grow darker. Let's try that. We can also change the button hover color. So, let's click globe. Let's choose accent, but then edit this to be just a shade darker. That way when we hover, this accent color gets darker as well. And this looks good to me, but you can change the transition duration here too if you want this to take longer. And you can even add a hover animation. There's lots of these to choose from. Now, let's take a look at how to change images. Another common element. There are two types of images here at the top of our page. We have a background image and it takes up the full space of this container. And then if we scroll down, these images are image elements. First, let's change these image elements. When we click on the image, we'll see our three familiar settings tabs. Under content, if we hover over this image, we can click choose image. That will bring us to our media library. From here, we could choose one of these images that's included in our template. These images have been used on our site already. If we click search images, these are copyright free images that we could use. Or we can go back to upload and we could upload our own. I'll select a file and I'll upload it to bring it into my media library. Then I'll click select and add it to my site. I can then repeat that process to fill out the other placeholder images in this container on my site. If we click on one of our newly uploaded images, we can go to the style tab up here and we can make changes to how these look. I can change the size with the width and height adjustments. I might make this 90% here. We can add some rounder borders. I think 10 looks good. And we can enable a subtle box shadow like we did with our button. You can adjust the sliders or enter values directly. After experimenting, I think something like this looks good. And because I want these images to appear consistent within this container, I'll take some time to make the same set of changes to these other two images. Similar to these image elements, we also have control over how the container backgrounds work. So, I've scrolled up to the top of the page. Let's select this container by clicking on the container handle. And under the style tab, the background type is set to classic. So, we could make this just a simple color, but let's change the image by clicking on the image and choosing a new one. I'll upload something here again and select a file. Select again once that image uploads. And once that is changed, we can scroll down to see some important settings here. Position is especially important in cases like this. By default, the image will be positioned to center center, but I kind of want some breathing room here between these elements and the background mountains in my image. So, this is a little tricky to visualize, but I know that the aspect ratio of my image is taller than this container. So, if I change my position to top center, I get a little bit more of that room that I wanted around these elements. An attachment set to scroll is what I like. If we scroll through our web page, we can see that the image looks like it is pinned with the other elements that we have here in front of it. If we change this to fixed, the image stays in place as we scroll and the container acts as almost like a moving window to look into the pinned image in the back that stays stationary. Setting the display size to cover is usually your best bet. But if I were to set this to contain, sometimes doing this is helpful to understand what your aspect ratio looks like. I'm going to change attachment back to scroll and stick with cover for display size. Background overlay is another useful setting that we have here. And I like to use this to either brighten or darken my background image. So if we come here and choose black as our background color and we manipulate the opacity using the slider, we can achieve any desired look that we like. For this website though, I think using white and adjusting the opacity will help us increase the contrast and this looks a little bit better to my eye. Elements like these headings and the button stands out better. If we go back up to background, there are other background types in addition to classic which support images. Gradient allows us to choose two colors and adjust our look using the location slider for each color and the angle slider. We can see those here. Let's choose a color here. And you can see how color one interacts with color two. And we can use location of color one and color two along with the angle to create this look. You can also add a video background using any YouTube video that you upload. For demonstration purposes, I've found a video of some mountains and so I'm going to paste this link in here. I know the timestamps in seconds that I've searched ahead of time. So I'll enter those here. Then when I paste my link, it's going to go right to the section of this video that I've selected given these timestamps. If you do decide to go with the video background, this background fallback image is important just in case the video doesn't load. Also, in this case, we probably would want to increase the opacity of our white layer here because this doesn't have the best contrast. If I bring this closer to 50, we can see our words in the headings and the button much better. Finally, if we scroll up, we can change this background type to a slideshow. Here, you can select several images to add a gallery. I'm going to select a few that are already here and create new gallery. Insert. I'm going to close this warning for demonstration purposes, but we can keep these as an infinite loop. To better show this for demonstration, we could shorten the duration here so that these images change out faster. We can also adjust the transition effect and duration if you'd like, but for now, I really prefer the classic background type, so we'll stick with this. Now that we've seen how to edit all of our main element types, let's learn how to control the spacing between them. To start, let's go to the page drop down up here in the top bar, and then we can select our about page. Click save and leave if prompted. Margin and padding are two of the tools that we have to control spacing. Let's scroll down on our about page until we get to this container, and we'll see how it works. Let's click the handle here, and then open up the advanced tab. And here you can see our controls for margin and padding. And if these both control spacing, how do margin and padding differ? Looking at this illustration, if you imagine that each of our content elements has a border, then padding is the spacing inside between our content border and margin is the spacing outside or around the border. So if we look at our own example here, we already have some top and bottom padding. If I set this top padding to zero and then hold down the arrow key to increase it in real time, you can see what's happening here. If we try something similar with the margin and I hold down this arrow key, you can see that the space increases but not in the image area. I can set these back to zero. And you can also unlink these as well. So we can increase just the top margin as opposed to around all sides. Often adding padding or adding margin might look the same. That's because there's no visible border. So, let's take our button for an example. I'll click on it and I will unlink our padding values. If we increase margin on the top or increase padding on the top, our buttons still moving in the same direction and nothing too distinct is happening when we change one or the other. I'll set these back. And there's another way that we can add spacing, and that's with a spacer widget. So, let's click add element up here at the top. Let's find the spacer right here. And I'll drag that in above our button. [clears throat] When we select our spacer, this slider will show. And this is just another way that we can increase space. I'm going to remove this for now. There's one last way we can control spacing. And if we go to the very top of our page and we click on our container handle in the layout tab, you'll notice this minimum height slider. It's currently set to 600, but adjusting this slider will add or remove spacing easily from the top and bottom of this section. We'll keep this at 600 for now. So now we know how to space our elements in containers. But how do we control the layout from within a container? To show how we do this, let's recreate a three column layout from our homepage on our about page here. To remind ourselves how that looked like, let's click on this arrow and then view page. Let's go home and scroll down. And this three column layout is what we want to recreate. Back on our about page, under this one column container and above this two column layout, let's click the plus, then the plus again. And we have the choice between flexbox and grid. The grid layouts are more complex. They allow for two-dimensional layouts, best used for product listings, galleries, and intricate designs, but we'll choose flexbox here. Flexboxes are best for simple row or column layouts, and they look best on different screen sizes. Let's choose the first simple structure and that will create our first container. Under the layout tab of this container, let's make sure that full width is selected under content width. Then let's add another container to go inside of this original container by clicking add element and dragging the container inside. This will be the first of three, so we need to resize it to fit. Making sure that the content width is set to full width. Let's change the width value to 33.33. Now that we have our first, we can duplicate this to save time. So, let's rightclick, duplicate up here, or we can use command D on a Mac or control D on Windows to do the same thing. And as you can see, our containers have been arranged in a vertical fashion. To change this into the column layout that we want, let's click the handle of the main container and then change the direction over here to row horizontal. If we justify the content in the center, we can make sure that they're centered. With our three columns now set up, we can continue to add some content. I'll click add element up top, and I'm going to drag an image into this first column. Then I'll add in a heading underneath the picture. And then I'll add the text editor underneath that. Normally, you would want to add different content in these three elements than what we already have elsewhere on our site. But because we're trying to replicate our homepage, I'll add the content that matches. And now this matches the content from our homepage. If we scroll down, we can see that this heading style isn't the exact same as this heading style. One thing that we could do is open the settings for this heading. We could come to style typography and we could transform this heading to be uppercase. Or if we click on this heading and then rightclick, copy, we can come to our new heading, rightclick, paste style. Next, if we wanted to fill out this same structure of the container in these two other columns, it will be faster to duplicate what we already have here than to drag and drop the elements into these empty containers from scratch. So, let's rightclick and delete these two empty containers on the right. Then, if we select our first container, we can rightclick and duplicate and command D to do it once more. After duplicating the containers to create consistency across the containers, filling in our content then is much faster. One more thing we could do here is add some padding within our container to give ourselves room at the top. Let's click the container handle and then on the advanced tab, unlink the padding values and let's try 50 pixels here at the top. Understanding these content layouts and spacing will allow you to build anything from scratch. But blocks and templates will save you lots of time by making the design work easier. So, let's see how to do that. Let's click the plus icon above the container that we just created. And instead of the plus here, this time, let's click on the starter templates icon. Here, we don't want to import a full page just yet, but instead we want to import part of one called a block. Let's click this. And I could search for what I wanted. Or if I scroll down, I might want to grab this one. After clicking it, I'll import the block. And you can see that here. Let's add another, but this time we can add a page. You can see the template that we're using here. But let's look at hope. Click this and home. We can look at what we have here. and then import this template. And I can close this. And obviously, it doesn't make sense to import a whole page here. So, as I go through and review, I can delete the containers that I don't need. So, maybe I only need this client testimonial from that full page template. And I can make sure to remove everything else. So, this is what we just imported as a block. And this we imported as a page, though we didn't keep much of the page at all. Next, let's take a look at how to change the default fonts and colors on our website. Not just the colors and fonts on the individual element level, but across the entire website. We need to do this at the WordPress level as a whole. So, let's save our draft, then preview our website. In the WordPress admin bar, let's select customize. Then, let's look at our global settings. And we can start with typography. At the top, we have some presets that you can try and you can revert them if you don't like them. So, we might look at this one. And you can see how these are changing, but I might revert. Below you can make changes to both the body font and the headings font within the base font and all the heading type fonts within the heading font. So if I click this pencil, you can make changes to any of these here. And you can change the global colors in a similar way. So let's click back a menu up here and click colors. Like the typography, we have several global palettes to choose from. I could look at two or three or dark. As I cycle through these, you can see there's not much changing, at least in this area of our website, because it's heavily image paste. I'll stick with the default, but we can also change all of these individual colors as well. Below these theme colors, you can change the site background color, but I like to keep this as white. If we scroll back up and go back once again, we have similar options for buttons as well. So, this is going to be a great place to make the changes to all of your buttons if there's a specific style that you don't want to have to duplicate over and over again on all the individual elements themselves. When you're happy, you can click publish to apply all of your changes. We can now close these settings and navigate back to our homepage. Visually and structurally, we've covered most of what you need to customize your site, but there are still a few more topics to understand to truly get your website ready for prime time. One of the most important is making sure that your website is optimized for mobile viewing because much of the web traffic these days is coming from phones and tablets. Let's click edit with Elementor and then in this top let's click tablet. If we scroll through the homepage, this actually looks pretty fine to me as far as tablet viewing is concerned. So next let's click the phone icon to see how this looks like on mobile as well. And it's not terrible, but specifically in this top portion the elements look cramped. Click on the heading, then click style, and let's edit the typography. Any setting that shows the mobile icon indicates that what we are about to change will only affect mobile. Let's make this font heading 40. And we'll make the font for the heading below, maybe something like 20. Now, if we click the desktop under this style bar and we check the typography for the heading, it's still at a size of 90, just where we've left it. Similarly, we go back to mobile, we can click on this button, and under advanced, knowing that this will only apply to mobile, we could increase this padding to give ourselves some room. You can also hide entire sections based on device type. So let's scroll down to our about us container here. Select the container handle. Then go to advanced and scroll down again to find the responsive drop down here. If you toggle hide on mobile portrait, it's going to gray this section out. And this won't be shown on mobile. But if we were to come back to desktop, that about us section is still here. It's worth taking the time to walk through your site in mobile view to make any of the necessary adjustments. Now, inevitably, as your website grows, you'll need to be able to add brand new pages. Let me show you how to do that. Let's go back to desktop and in this Elementor menu bar, let's click the drop down, then click add new page. Let's save and leave. That's going to populate this new page. And if we click the gear here for page settings, we can change the title of this new page to projects, we can see that the title up here is designated as a draft. So anytime that we want to make this page public, we can click publish. Now, we could start with starter templates here like we've done before to add page or block templates. But we can also copy containers that we have from our other pages as another quick way to stand up a new page. Let's click preview changes to open up a preview. and we can go to a page that we'd like to copy a container from. So if we go to services, let's just copy this top portion. Click edit with Elementor here. Then focus this container by clicking the container handle. I'll rightclick to copy this. Now if we head back to our new projects page, rightclick and paste to add that same section. And we'll edit this heading. We want this to say projects. And let's publish again. If we click our preview, we can see that this top header is not transparent like on our other pages. To fix this, let's click edit page. I'll close this. We can then navigate to the Astra settings here and then scroll down to advanced settings under transparent header. Click enabled, close this window, then hit save. Then if we view this page, we can see that the header is now fixed. But one thing that we notice is that our new page projects is not yet in the navigation menu here at the top. To add this page to the menu, we need to go back to our WordPress dashboard. So let's click on the WordPress logo in the top left here. Then we can go to appearance and menus. Under the most recent pages, we can click projects, then add to menu. If we scroll down over here, we can see that that's been added. We can drag this up to order it. We can indent it to create a submen, but let's drag it out for the moment. And when we're happy, click save menu. To see that that page has been added, let's open our website by commandclicking the link up here in the WP admin bar. Headed over to this new tab. We can see that our projects page is now edited next to our services page. If we come back to settings, let's scroll down and move our projects into a tabbed sub item menu. Let's save again. Come back to our tab. Refresh. And now projects is located here in a drop down under services. Removing any of these links in the menu is easy as well. So back to WordPress here, open any of these drop downs. And once opened, you would remove and you could save to take this out of the menu al together. I'm going to move projects back here and save. So now that we know how to change this menu, let's look at how to customize the rest of the header to change things like the logo and menu colors. Coming back to our website tab, from here we can click customize. Then we can click header builder. To change the logo, click site title and logo either here or here. Then on change logo, we can select a file to upload. So I'll choose one here. Once uploaded, select it once more. My logo fits nicely in the recommended crop. So I'll crop image. And if your logo doesn't change on this preview, it's likely because you're using a retina or high pixel density display. So you can upload a higher resolution version of your logo here. But for now, I'm just going to use this one logo for all devices. And when I toggle that switch, you can see my logo has now populated. We can resize our logo with this slider here. And this looks about right to me. If we scroll down, we can also upload a site icon, also known as a favicon. I'll click that. Then I'll select site icon and I'll upload one more file. Your logo might look nice in a small size for this, but I have a separate file for this specifically. I'll select it and I'll skip cropping here. And once that's uploaded, you can see that it has taken effect in the tab. Our preview enlarged is right here. Now, if we go back and we select the header builder, we do have the option to reposition things like the site logo and the primary menu. So, I could drag this to the center and you can see how that changes. You can drag it up or down a row, but I don't like how that looks. So, I'll leave this here. To change these menu colors, let's scroll down and click transparent header and then the design tab. Then, if we scroll down under menu color, we can change the text link colors between normal and hover active states. I like the text color as black, but I'm going to make this color match my logo tone. I've copied that hex and I'll add it here. Now the active menu item is going to match the color of my logo. To save these changes, let's click publish. If we scroll down here, we can edit this website footer here at the bottom in a similar way to how we've just edited our header. So let's click X here, back to customize, and down to footer builder. That will focus the footer. And you can see that we have a similar layout here. Let's open this copyright and we're going to fix the year value. So over here instead of 2022, I'll remove this. I'll type a left bracket and current_year and close with a right bracket. And now that's a variable that populates the current year. Now that that's fixed, let's change our logo to match the header. I'll click this pen icon. I'll say got it here. I'll click replace on the logo and then I'll open media library. I'll select my logo like I've done before. Click select then to access the footer menu options again. We can click back and click footer menu here or we can click it right here as well. We have options to change these pages to inline which is what is shown now or stack. I like inline. And you can arrange this how you'd like. To save our changes, let's click publish. And then we can close the customizer. And once we're happy with our website, we can activate the Lightseed Cache plugin, which will make our website faster. Let's go back to WordPress by clicking the logo here. Then let's go to plugins, add plugin, search for light speeded cache, li and then find this plugin and click install now. Once it's done installing, we can click activate. We can see it here in our plugins list. We can deactivate it in the future when working on our site, but for now, our website performance will be improved. Now you know how to use the Astra theme when designing your WordPress website. If you haven't been following along already, remember to use our special offer link in the description to get a discount on hosting with Blue Host.