The Ultimate Beginner’s Guide to WordPress (2026)

Hey, my name is Dan and this is the ultimate beginner's guide to WordPress. By following this guide, you'll have your own professional website live on the internet, even if you've never built one before. Most people who want a WordPress website never end up making one. Not because it's hard, but because the moment they start looking into it, they have a dozen decisions that they don't know how to make. Which hosting, which theme, which page builder? It's a lot to think through. That's exactly why I made this video. I won't assume that you have any prior website knowledge. We're not going to write a single line of code. By the end of this video, you'll have a fully working WordPress website that looks professional and runs on your own custom domain. I'll go over everything step by step. We'll set up your hosting and get a free domain. Then, we'll install WordPress the right way. We'll get access to hundreds of professionally designed templates that are fully customizable and mobile friendly. And then we'll customize everything using a visual drag and drop page builder so that you can make your site look exactly the way you want. The only thing we'll pay for is hosting and I'll show you how to get that for just a few dollars a month. Everything else, the theme, the plugins, the templates, they're all free. So, let's get started. There's one really important thing you need to know first. There are actually two versions of WordPress and picking the wrong one can be a very costly mistake. If you search for WordPress, you'll see two websites up to the top. WordPress.com and WordPress.org. They sound the same, but they work very differently. WordPress.com is a paid service. They run everything for you. The problem is to unlock the things that you'll actually want, like free themes and the right plugins, you have to pay for one of their higher plans. That ends up being a lot more expensive per month. WordPress.org is different. It's the free open-source version of WordPress that you set up and control yourself. You get full access to every theme, every plugin, and full control over your design. We'll set that up in the next step. In this video, we're using WordPress.org. You'll get the same powerful software, but at a fraction of the cost. To use the free version of WordPress, we need a place online to store all of our website files. That's what hosting does. Hosting is just renting space on a server. That server runs 24/7, so your website is always online and people can visit it from anywhere in the world. Without hosting, your website has nowhere to live. For hosting, we're going to use Hostinger. It's officially recommended on the WordPress.org website. It's affordable, beginnerfriendly, and it makes installing WordPress really easy. So, that's the host that I recommend. Now, let's get your hosting set up. To save the most money on your hosting, visit the link on screen or click the first link in the description down below. That's our exclusive partner link and it gives you an extra 10% off any hosting or plan. Once you click that link, you'll join me on this page here. To get started, click start now. That will scroll you down to the available plans. I recommend going with the business plan. It gives you the best performance, lets you create up to 50 websites, includes a free domain for the first year, and gives you 50 GB of storage. It's also the most popular plan, so it's what most people end up going with. If you're on a tighter budget, the premium plan also works fine to get started. I'll continue with the business plan and click choose plan. Once you've chosen your plan, you'll pick your billing period. The longer billing period that you pay for upront, the cheaper it is per month. The 48-month plan is the best long-term value, but if you don't want to commit to that long, the 12-month plan is still a great deal, and it includes the free domain. You might not yet know what you want your domain to be. That's okay. No worries. I'll show you how to choose this later. And for this tutorial, I'll skip adding hosting or reach for now. If you're doing a lot of email marketing, it might be worth a look. But otherwise, scroll back up, make sure your exclusive coupon code is applied, and then click continue. Next, enter your email address and create a password to register your account. Then click register. Then enter your billing address. Click continue. Then enter your payment information. And when you're ready, click submit payment. You'll see a countdown and you'll be brought to the onboarding page. To save some time, we're going to skip this for now. Click the Hostinger logo at the top of the page and that will take you straight to your dashboard. Click it and then confirm by clicking leave. The last thing that we need to do to finish the hosting step is to verify our email. Open your inbox in a new tab. Find the email from Hostinger with subject line verify your email address. Then scroll down and click confirm email. That'll bring you right back to your dashboard. And now your hosting is officially set up. I'll refresh this tab. Our email verification reminder has disappeared and we can go ahead and close these other two tabs for now. Now we need to get a domain. That's just the name of your website like medexmedia.com. In your hosting or dashboard, click claim domain. You can pick anything here that you want as long as it's still available. I recommend keeping it short, easy to remember, and then sticking with a do if you can. So, type in the name that you want. Click check availability, and if it's still available, click claim domain. Next, you'll see this screen and you may be asked to enter some contact details to register your domain. If so, go ahead and enter them. Then, click continue. I'll scroll down and I'll skip this launch offer for now. That will bring you to this page here. The last step is to verify your email one more time. This time we need to do it for the domain. Open your inbox. Find the email that looks like this. Verify your email address to use your domain. Open it. Scroll down and click verify. Doing that now is good so that you don't forget. And once you've verified, you can close these tabs. And your domain is now active. With our hosting and domain ready, it's time to install WordPress. Hostinger handles the whole process for us, which makes this really easy. If you're still here under your domain overview, you can click get started right here. Or if you've clicked away from this page, you can also get there by clicking websites, all websites, and next to your plan, there should be a setup button that will take you to the same spot. Now to resume the onboarding we started earlier, we can say that this website is for myself or my business. And here you want to click create a new site. This screen and this onboarding can be slightly different depending on when you watch this video. For now, I'll click skip personalization. And when you get to a screen like this, you want to find and then choose WordPress. Click next. Here we can select the domain name that we set up earlier and then click next. Then we need to choose a server location. Pick the location closest to where most of your visitors will be coming from. That'll give you the fastest loading speed. And if you're not sure, the default option is usually just fine. Once you've selected a location, click next to continue. Here you'll create the login details for your WordPress website. This is the email and password that you use to log in and manage your website from now on. So set a strong password and write it down. At the bottom of the screen, you may see two options. Create website with AI will have hosting generate a site using artificial intelligence. But for this tutorial, we want full control over how our site looks. And I'll teach you everything you need to know. So click build from scratch instead. Then WordPress will start to install. And if you set a high score on this miniame, feel free to drop it down below in the comments. After a few minutes, WordPress will finish installing and you'll be brought automatically to your WordPress dashboard. This is the back end of your website. The first page you'll see is the Hostinger landing page. This is just Hostinger's own setup helper with shortcuts to their tools. We won't use any of that in this video, so on the left side, click dashboard to get to the main WordPress dashboard. You'll see some banners at the top of the screen, and feel free to dismiss them to clean up this page. If you want to hide more of these tiles under screen options, you can check them off one by one. This menu on the left is how you'll navigate to everything you'll need, including the section we're going to next, which is themes. To get there, under appearance, click themes. A theme controls how your website looks. Things like the fonts, the colors, and the overall layout. The default theme that comes installed is pretty limited, so we're going to replace it with a much better one called Astra. Astra is one of the most popular free themes for WordPress. It's fast. It works with everything we're going to use in this video, and it gives us access to hundreds of free website templates that we'll use to design our site. On this page, click add theme at the top. Then, navigate to the search bar in the top right and search for Astra. When you see it, hover over it and then click install. Once it's installed, click activate. And now Astra is the active theme for your website. With your theme installed, the next step is to address plugins. Plugins are like apps for your website. They add new features to what WordPress can already do. On the left side, click plugins. I'm going to hide the Astra banner at the top. And you'll see that Hostinger already has installed a few plugins for us. We don't need most of them and they can slow your website down. So, let's clean these up first. Select all of the plugins except for the light speeded cache. I'll do this by clicking the check all button and unchecking light speeded cache. We're keeping that one because it makes your website faster. Then go to bulk actions, choose deactivate, and click apply. Then select them again. Uncheck lightseed cache. Go to bulk actions and click delete. And then apply once more. Here you can confirm. Now let's install the plugin we actually need. It's called starter templates. And it's what gives us access to hundreds of professionally designed website templates. In the top left, click add plugin and then search for starter templates. When you see it, click install now and then click activate. Here, click build with templates. Now, we need to select our page builder. If you don't see Elementor here as an option, let me show you the quick and easy fix. Click back and then click exit to dashboard. On the left hand side, hover over settings and select general. Then scroll all the way to the bottom of the page and you'll see a section labeled starter templates. If this disable option is checked, uncheck it so that it looks like mine here and then click save changes. Now you can return to plugins, find starter templates, and click get started again. Choose build with templates. And now Elementor will show. Once you see it, click it to continue. Elementor is the most popular page builder for WordPress. It's free. It has a simple drag and drop interface and it makes designing your website really easy without writing any code. Starter templates lets you build and edit pages using simple drag and drop tools. It gives you many readymade designs to choose from and we'll use one that's totally free. Now we'll choose our template. We already chose our theme earlier when we installed Astra. The theme is the foundation. It controls how your website looks, including colors, fonts, and the layout. A template is different. It only controls the layout of one page, like a homepage, an about page, or a contact page. Starting with a template means you don't have to build your website from scratch. It'll save you a lot of time, and your site will look more professional, even if you've never designed a website before. To find a template, you can browse by the categories here, or you can type in what kind of website you want to build in the search bar. For example, if you want to build a restaurant site, just type restaurant. If you want a portfolio, type portfolio. Some templates are marked as premium, which means they cost money, but there are plenty of free ones to choose from. Scroll through them, find one that you like, and if you click on any template, you'll get a preview of what it looks like, and you can navigate through the pages of the site. Once you have one that you like, you can customize a few things over here on the left before we start building. You can upload your site logo, change the font style, and pick a color palette. If you're not sure yet, you can skip these and change them later. But when you're ready, click continue. On the next step, the default selections here are okay, and you can continue again. And then here, you can skip and start building. Your website will take a few minutes to build. Once it's done, click view your website and that will open it in a new tab. Now that we have a starting point, let's make the site your own. We'll use Elementor to show you how to change anything you see on this page. There are two ways to open the page builder. The first way is to go to your live website, and as long as you're logged into WordPress, you'll see a bar at the top, and inside that bar, you'll see the edit with Elementor button. The other way is to go to your dashboard and you can do that by right-clicking on the WordPress logo and opening in a new tab. From the dashboard, you can go to pages and then on any page you can click edit with Elementor here. For now, I'll close this tab and I'll close our starter templates tab and I'll select edit with Elementor right here in the banner. Before we start editing, let's look at how a page is built. Every page is made up of containers and inside those containers are the elements that make up your content. Things like text, images, and buttons. This structure panel on the right side of the screen will show you how your page is laid out at a high level. If you click on the container, you'll see it highlighted with the magenta outline on the page. And if you open the container like I've done here, you'll reveal the elements inside. You can reorder elements right from the container view by clicking and dragging them. and you can hide them by clicking the visibility icon. I'll drag the button back under the heading where it was. If you ever want to close the structure panel, press command I on Mac or controlI on Windows to bring it back. Now, let's look at how to edit the most common elements on your page, starting with text. To edit text, just click on any text on the page and start typing. I can select the text and enter my own. You can also change it in the left panel directly. When you select any element, you'll see three tabs on the left, content, style, and advanced. The style tab is where you change how it looks. If you open typography here, you can change the font size. You can change the weight. And you have all types of settings down below. If you close this, you can change the text color here. It's currently set to white. And this is where you can access your global colors. So you'll see all the colors that are included in your theme and currently being used. If you ever make a change that you don't like, maybe you try a text color that you don't want to go with, you can always click Z to undo, or you can click this history button to visit a list of your changes. Here you can find whichever one you want to revert to and start from there. Editing images works the same way. Let's scroll down and find an image that we want to edit. Click on it and then over on the left you can click choose image. You can upload your own image here. You can select one from the media library. You can search the free stock images, but in this case I'll go back to upload files and click select files to choose my own. I'll select the image that I want to upload and I'll open it. Once it uploads, I'll click select in the style tab. With the image selected, you can resize the image with the width and height. You can round the corners with the border radius down below. I like a more squared off look, so I can set these to zero. And this button ensures that all of your corners have the same radius. And you can add a subtle box shadow here as well. You get full control over how that looks. And if you don't like it, you can set it back to the default here. I'll take a moment and update my other two images. Buttons are also easy to change. Simply click the button and change the text in the panel on the left. In the link field, you can click in the field and add a URL, or you can link a page. We have a services page on this template, and we can call this something else later, but that's what I'll link to for now. In the style tab, you'll have options to change the look of the button. You can change the text color. If you open typography, you have a whole bunch of other options like we saw with earlier text editing. For example, I'll change the weight to something more bold and legible. And if you close typography, you can add a border radius on the button here. Increasing it will round the corners and decreasing it will square the button off. If you want the button to stand out, you can add a box shadow here. You can change the color, but I like the flatter look without one. So, I can reset this to default. And you can also control how the button looks using the padding down below. Padding will control the spacing. And you can make the button thicker. You can match top and bottom. Or you could lock these values all together. But I'll unlink these and keep the left and right wider. Buttons also have a hover tab in the style section. This is how you change how the button looks when someone moves their mouse over it. The effect here is subtle to begin with, but you can customize it however you'd like using all of these settings. You can also customize the background of any container. Click the container handle here. Go to the style tab and find the background section. The default background type is classic. This lets you add a solid color or upload an image. To add a new image, click here just like we've done before. I'll upload a new one. Select it and down below the image selector, you can control its position, whether it scrolls with the page or stays fixed, and how the image fills the container. Changing the position is especially useful if you need to center the image a little bit differently so that you can see your text better. If you scroll down in the settings, you can also find a section for background overlay. Choosing a cover overlay that sits over top of your image is a good way to make your text stand out more from the background. Here you can adjust the opacity. And you can see that the 4 that was enabled by default already helped my text stand out nicely. If you don't want to use just a plain image in the background section, there are other styles that you can use, including gradients, a video background, or a slideshow. If you want something unique for your site, it might be worth exploring the video or the slideshow options, but we'll stick with the classic image for now. To add a new element to the page, click the add element button up in the top left. If you scroll down, you'll see all the basic widgets, headings, images, text, video, and more. You can drag whatever you want onto the page wherever you want it, and the magenta bar will show you where it will drop. Once you've added the element to your page, you can edit it like you would any other element. For example, I'll change the text color here. To delete any of the elements on your pages, right click on them and then click delete. You can also delete an entire container by hovering over one and then clicking the X in the container handle. And again, if you make a change that you don't like, you can hittrl z to undo it. And then this container will show back on your page. Spacing between elements is one of the most important parts of design. There are a few different ways to control spacing in Elementor. The first two are margin and padding. They both control space, but they work slightly differently. Padding is the space inside a container between the container's edge and the content inside. Margin is the space outside a container, between the container and whatever's next to it. You can find both of these in the advanced tab of any element. If you want to change either, you'll find them in the layout tab. And you can change the values to whatever you'd like. You can also control space with a spacer element. I'll click to add an element. I'll scroll down the spacer. And you can drag it wherever you'd like. This is a blank vertical space, and you can resize it using the slider on the left. Spacers are the easiest way to push two elements apart without changing the values of margin or padding. I'll remove this one here for now. And for making changes to entire sections, you can use the minimum height setting in the layout tab of a container. So I'll click on this container handle and I'll come over to layout. And adding to the minimum height would increase the size of this container. If you ever want to build a new section from scratch, you can add a new container by clicking the plus icon between two existing containers. So if I scroll down, hover over this container, the plus will add a container above. Then you can click this plus icon and you'll be given two layout options, flexbox and grid. Flexbox is best for simple row or column layouts and it adapts well across different screen sizes. Grid is best for more complex two-dimensional layouts like product grids or photo galleries. For most use cases, flexbox is the right choice. Once you choose flexbox, you can further decide your structure by clicking add. We can find new widgets and drag them into our new flex box. To remove the container, click the X like we've done before. When adding an entirely new section, you don't necessarily have to build it with widgets and elements. You can click plus and here, click starter templates. You'll see some of the pages we saw earlier, but if you choose the blocks tab, you'll find partially built sections of website pages. If you scroll down, instead of building the flex box with two columns, you could find a block that's already pre-built. If you can't import it, click this button to sync the template library. Once the sync finishes and you import the block to your site, you can edit this section like you've done before, swapping out the images, the headings, the text, and changing the buttons. So far, we've been making changes to individual elements. But you can also change the look of your whole website at once. Click the Elementor logo in the top left, then go to site settings. This is where your global styles live. Under global colors, you can update your site's main color palette. Any element that uses these colors will change automatically if you change them. If you select a new color, make sure to click save changes. Under global fonts, you can do something similar. I'll discard my color changes and open global fonts. Here you can make changes to the different system fonts. If you have a look that you know you want to go for, changing the global system fonts and colors can save you a lot of time compared to changing them on many individual elements. It also keeps your site looking consistent. And there's a few other things that are important to show you as well. Scrolling back up under this drop down, you can select the page that you would like to work on. Make sure to save and you'll be brought to the contact page to edit in the same way that we've edited the homepage. Most people will see your site on a phone, so it's important to make sure it looks good there, too. At the top of the screen, you can switch between desktop, tablet, and mobile portrait. Many of the templates that you'll choose are designed to work well on all three, but it's worth taking some time to optimize for your mobile site so that it looks good for those mobile viewers. And any changes you make on mobile will only apply to the mobile view. So if we bump this text, this change will apply to mobile view only. Whenever you want to save your work and make your changes visible on your live website, click publish in the top right. Before I show you how to add a new page to your website, I'll take some time to update the content of my example website here using everything that we've learned so far. Now, let's look at how to add new pages to your website. Your template will give you a few pages to start, but most websites will need more over time. The easiest way to add one is to go to your live site. In the top right, click the arrow drop down, then view page. Then, in the WordPress admin bar at the top, hover over new and then select page. Give your page a name and then click publish on the right. To start designing the page, click edit with Elementor. From here, you can build the page from scratch by dragging in elements like we did before, or you can save time by importing a pre-made design. To import a pre-made design, click the starter templates icon in the Elementor panel. You have two options here. You can import a full page from any template or you can import a single block like we've seen before. This is a great way to mix and match parts from different templates to build a page that feels custom to you. Whether you decide to go with a block or a page, search for something, find what you like, and click import template. Then you can edit all the elements like we've done before. Scrolling back to the top, if you would like to hide this page title, click the page settings button here and toggle the hide title radio button. That will turn that off and on. Once your page is imported and you've made your changes to it, you'll want to add it to your navigation menu so visitors can find it. First, publish the page. Then, view your page and click customize at the top of your live site. Then click menus and then main menu. Click add items at the bottom and then select the new page that you just created. To reorder it in the menu, you can just click and drag it here. Under this menu, you can change the navigation label if you'd like. While I'm here, I'll do that for my services page. Once you've made all your menu changes, click publish, and you'll see those take effect. We just added our new page to the menu which sits inside the header. The header and footer show on every page of your website. The header is the bar at the top with your logo and menu and the footer is the section at the bottom. These aren't edited in Elementor. If you're still in this view, you can simply click back here and once again then you can access your header and footer. If you've closed this tab already, simply view any page and use the customize button to return once again. I'll select my homepage so we can view that header and then I'll click header. This will open up the header settings where you can change everything that shows up in the bar at the top of your site. You can see the elements in this list here. And you can also see how they're laid out down below. For example, if I drag site title and logo to the center, you'll see that change reflected here. Obviously, we don't want to keep that change, but you can remove certain elements by just clicking the X here to remove them. For instance, I'm not sure if I want to display this phone number in my header. I can click the X here to remove it completely. Or on the left hand side, if I enter the button settings, I can also toggle the visibility. I could turn it off for desktop and tablet and mobile. And now, if I ever want to reenable it in the future, I can toggle these back on. Then I'll click the back button here. I like my menu and the main thing we want to change is the site title and logo. Click here to enter the settings. Depending on your template, you might see a warning here. Mine says the logo is set in the transparent header section. Click below to customize it. You can see that this logo uses a black outline and the one we have in our header is clearly white. So for this template, we will need to customize the transparent header. You can click this link to go directly there. Or if you go back, that lives down here under the header section we just entered. So if you ever get lost, the transparent header still lives under all the header settings. Now this looks a lot more like what we need to change. To swap in your logo, click change image, then upload your file, select it, and I have a placeholder E logo for my brand name explore. Choose the image and you'll see that update in the header. When you're happy with all of your header changes, click publish. Your footer works the exact same way as the header. Click back and back again. And you'll find the footer in the customize menu. You can rearrange them in the grid down below. And you can update the individual items here. For instance, I want the copyright to say something different. And I'll add my brand name here. I don't necessarily want to repeat my menu. So I can remove this element and drag this logo to the left. We'll need to change this as well. So return to the prior menu and then click this HTML 1. Here we'll need to add media. And for this particular template, we'll need the darker version of my logo. Click here to upload files. Then select a file. I'll use my alternative logo, open it, and insert it into the post. From there, I can clean up what was in here before, and you may need to resize what you've entered. Your changes will update live in the footer, and that will help you appropriately size everything. Finally, this looks better left aligned in my opinion, so I'll make that change. And when everything looks the way you want, click publish to see your changes. In addition to the header and footer, one last thing I want to show you in the customization menu is the site identity. Here you can select the site icon and that will be the icon that's shown as the favicon on your browser. Click upload files if you have a specific file for this. In my case, I'll use the white version of my logo. Then I'll click select. In the top right, you'll see a preview. And depending on your file, you may want to crop in slightly. When you're ready, click crop image. You should see that icon reflected immediately. And when you're satisfied, click publish. To get a look at your final site, I'll close this tab. And from any Elementor page, I'll click view page. To view your site without the WordPress admin bar, simply log out. Then type in your URL. I'll delete this part. And search. And that's it. You now have a fully working WordPress website live on the internet. If you haven't signed up for hosting yet, remember to use the first link in the description to get an extra 10% off your hosting with Hostinger. Good luck with your new site and thanks for watching.