Elementor Wordpress Tutorial For Beginners 2026 (Step-by-Step)

I'm going to show you how to make a WordPress website using Elementor, a popular and easy tole learn drag and drop WordPress website builder. Even if you have no experience in building and designing websites, by the end of this video, you're going to have a finished website, and you'll know how to manage it yourself, and keep it running at a low cost. I'll walk you step by step through the process of setting up hosting for your website, installing WordPress, and then learning how to use the Elementor page builder to design your custom website. At the end, we'll even connect your custom domain. To get started, sign up for Elementor using the first link below in the video description. Right now, you can get 75% off of your first year by using that link, but it'll always give you the best deal that we currently have at the time. Website hosting allows us to rent space on a server to store our website files. That way, our website will be live 24/7. To see the plans that Elementor has for WordPress hosting, let's first click see plans. Elementor is a page builder and page builders allow us to set up our website without any coding. Instead, we will create our website with easy to use drag and drop widgets. Elementor's plans include hosting and their page builders, and they work nicely together. Everything that I show you in this video can be created with the core builder. We can always upgrade later if we need to. So, under the light plan, click buy now. Next, we're going to sign up and create an account for Elementor. create my account. Then we can enter our billing information. After that, we can enter our payment method. And once entered, click pay now. You may receive this AI starter offer, but just scroll down and select start creating your website. After that, you'll land on the Elementor onboarding flow, but I'll walk you through everything you need. So, we can save some time by skipping this and clicking the X in the top right hand corner. Here we see the Elementor dashboard and we have a notification that we need to verify our email. This is important for finishing our sign up and hosting. So, let's open our email inbox in a new tab. Find the email from Elementor with the subject, please confirm your email address. Open that and then click confirm your email. You can return to your dashboard by clicking go to my Elementor here. Refreshing your original Elementor dashboard is going to bring you to that same place here on the websites tab. So, I'll close this additional tab. Now that we have Elementor as our hosting plan, we can begin the process of installing WordPress. Click create a hosted website in the top right. Then select use this subscription under the plan that we just created. Because we're starting from scratch, let's select create new site. At the end of this video, I'll show you how to give your website a custom domain. The custom domain is just the name of your website, and we already have a free one included with our plan. It's easy to set up, but it can take some time to process. So, let's continue with our WordPress setup for now and click skip and use temporary domain. Elementor then tells us our site is ready. Let's click complete your site setup. Now, you may land on this access restricted page here. If you do, no worries. For my testing, it's a small glitch in Elementor's process. Simply open a new tab and sign back into Elementor. You should see this page and then you're back on track. I'm going to move this tab over and close our error. Let's hover over our Elementor hosted website and click on open WP dashboard. WordPress has been installed and we're now logged into the WordPress admin dashboard. This is the back end of our website and we'll visit this often as we are customizing our website. Before we start using the Elementor page builder, there are a few things that we should clean up within the WordPress dashboard to start completely from scratch. Let's do that now. I'm going to close this and dismiss this. Under the screen options menu, let's uncheck all of these screen elements. Now, our dashboard looks nice and clean. Next, if we visit posts, all posts, we can hover over our hello world post and click trash. Then from the trash bin, we can delete this post permanently. We can do the same thing in pages, all pages. And if we hover over sample homepage, more options, click trash, then visit the trash. And similarly, we can delete this page permanently. Now that we've cleaned up some things that we don't need, let's go to settings in the lefth hand menu to change a few important things in there. In general settings, we see our site title and tagline. If we look in our WordPress admin bar, we can see our site title here as well. Let's change both of these to things specific to your website. I'll add Dan's simple WordPress tutorial and let's learn Elementor and WordPress. Scroll down and click save changes. Now, our site title has changed in the menu bar up here. Commandclick on Mac or control-click on Windows will open our site in a new tab. And to see our site title and tagline changes take effect. Let's close this for now. Back in settings under the discussion tab here, let's disable allow people to submit comments on new posts. This will help limit the amount of spam comments. So, we can scroll down and save changes. Now that we've taken care of those cleanup items, we're ready to install our theme and our plugin so that we can begin using the Elementor page builder with WordPress. In the lefth hand menu, let's go to appearance, themes. A theme is like the design template for your website. It controls how your site looks, including colors, fonts, layouts, and styles. Hello Elementor is our current active theme, but we'll switch that out for one of the most popular free themes, Astra. Click add new theme. Then search themes for Astra. Then click on install. And once it's done installing, click activate. If we click on theme details for our Hello Elementor theme, we can delete this one. Now that our new theme is installed, we can install our starter templates plugin. In our menu, click plugins. Plugins are extensions that can be installed on your WordPress website. Each plugin lets you add new features to your WordPress website, similar to apps for your smartphone. The starter templates plugin will give us access to hundreds of free templates that will make designing our website easier. Click add plugin, then search plugins for starter templates. Let's click install now. And once it's done installing, activate. To start off, let's build with templates. And let's select Elementor here as our page builder as it will allow for simple drag and drop website building. I'll say maybe later here. Now we need to choose a template. Templates are different from themes which we already chose earlier when we installed 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, plug-in, 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, itallic, 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 button 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 a 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 and 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. 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 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 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're 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 Astro 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. 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. I 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 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 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. We have one last thing to do, and that's to connect our free custom domain that we got when we signed up for Elementor. Let's do that now. To do this, let's navigate back to Elementor. I'll go up to my tab and close everything else. Then from anywhere within WordPress, let's go to the hosting tab, hosting, and go to website overview. Take me there. Within our website overview, we can see that we still need to connect the domain. The item is listed in our launch your site checklist. And if we go to the domains tab, that will show us the temporary domain that we have been using and indicate that we can still redeem our free domain here. Let's click redeem. Ideally, if it's available, you want to get a com domain. It's also good to have your website be relatively short and memorable. Here, you can search for your potential domain. I'll say danslett as in tutorial.com. Then click continue. That will bring us to Elementor's partner called Hover. And here you can see that the website that we've chosen is available because it's included for the first year with our Elementor plan. Free is the price. And we can add this to cart. Once added, I'll click this item. We're going to use my.com domain, but you may see that you get a freeonline domain added as well. Just click okay. In the shopping cart, you have some additional options, but I just want to proceed without adding anything additional. Scroll down and click secure checkout. In the first step, provide your information to create an account with Hover. Next, read and agree to the terms of service. Then click continue. In step two, fill out your registration information. In step three, you'll need to fill out your billing information. even though our total for today is zero. Finally, you can confirm and submit your order. After ordering, I'll select my.com domain to connect to Elementor. While on this page, depending on the use case for the website, you might want to turn autorenewal off. I'll turn this off for now. You're also going to receive a verification email from Hover. Let's open our email inbox and search for an email from Hover with the subject line starting verification required. Once we open that, you'll need to find the verification link here and we can click it. And here you just want to verify your contact information. Scroll down and click verify information. Now we can close this tab. Let's close our email inbox. And here in Hover, we can check progress. Now that our domain is connected, let's go back to Elementor to finish. Back in Elementor, they recognize that we've connected our new custom domain. It may or may not be available right away, but here we can copy our domain, go to a new tab, and paste it in. This is the type of page you may see before everything is completely set up. Let's close this for now. Say got it. And while these records are updated, you can come back to this domains tab to check the DNS status anytime. My records are still being updated, so I'll have to wait a little bit longer. But at this point, you shouldn't need to take any other action to ensure that your custom domain is set up properly. After my records are done updating, I'll come back to this screen to show you what it looks like once complete. In the meantime, we can always go to our temporary domain, copy this and see the current state of our website. I'll close this tab and I'll come back here when my records have been updated. If you are having issues, let me show you how to check your DNS records in Hover. First, click check DNS status. Then click open the guide for help. That will instruct us to sign into Hover. So, let's do that now in a new tab. I'll go to my account, then to control panel. Here we can see our domains and I'll select my.com domain. Then from this page, select the DNS tab. Let's go back to the guide in Elementor and click next to see the next steps. Here we see instructions to add both the CNAME and A type records. If we go back to hover, we can verify that these two records exist. If not, we could add them. And now let's remove the two other records added by hover by clicking the X, then confirming with delete. Now let's return to the guide in Elementor. And we can click done. The DNS status may still need some time to update, but if we copy our domain and paste it into our search bar, my temporary domain redirected to my custom domain within a few minutes of making these changes. If you have any questions about Elementor, drop them down below and I'll see you in the next video.