WordPress Tutorial for Beginners | Build a Website Step-by-Step with AI
Hey everyone, Kevin here. Today we'll learn how to build your very own website using WordPress, powered by AI. WordPress has always been a great way to create a website, and now with AI, it's easier than ever. You don't need any coding skills, you just describe what you want, and the AI handles the rest. We'll start by using WordPress AI to generate a website,
then we'll customize it to match your vision, and at the end we'll publish it. Follow along, and by the end of this video, you'll have your very own website up and running. Let's dive in. First, you need to choose a web host for your website. A web host is a service that stores all of your website's files and makes them accessible to visitors all over the internet. Now,
with thousands of web hosts out there, it could be really tough to decide which one to go with. The official WordPress.org website recommends three different hosting providers. Pressable, Bluehost, and Hostinger. Any of these will give you a great experience, but for this video, we'll be using Hostinger, and if you'd like to follow along, I also highly recommend them. I've personally used Hostinger to host websites in the past, and I've been very happy with their service, which is why I partnered with them on this video. Here's what I like the most about them. First off, they're very
affordable. They have high performance with fast loading speeds, and it's also really user-friendly with their built-in AI-powered tools. They make building a WordPress website incredibly easy, even if you're just a beginner. To get started, head to the address right down below that you see on the screen, and that'll bring you to Hostinger. On this page, they offer a variety of different plans. I recommend the Business Plan, and here's why. With the Business Plan,
you get access to their AI-powered tools like the AI Website Builder and the AI Content Creator, and these will make it so much easier to build your website, and we'll be using them throughout this video. Also, at just $3.99 per month, it's really a fantastic deal. Once you've selected your plan, you can choose how long you would like it for. I would go with 48 months. That gives the best value. If you would rather have a shorter term, go with at least 12 months, because that
way you also get a free domain name. Now, before checking out, make sure to click on Coupon Code, and then enter in my name, Kevin Stratvert. That'll give you an additional 10% off, making it even more affordable. All right, let's now get started building our website. Once you sign up with Hostinger, you'll land here on the main dashboard. Right here, I see that I
have the Business Web Hosting Plan, and with this, you can host up to 100 websites, which is pretty incredible. To add a new website, right over here, let's click on this button that says Manage. On this screen, I can see that I already have a few different websites hosted with Hostinger, but if you have a new account, this screen will be blank. I'd like to add a new website, and right up on top, I see this button that says Add Website. Let's click on this. In this menu,
we have a few different options. Up on top, we have WordPress. Then, we also have the Hostinger Website Builder, and then there are also a few other options as well. WordPress, right up on top, offers the most customization and flexibility, while the Hostinger Website Builder is a simple AI-powered drag and drop tool. If you're a beginner and you want the easiest way to get started, the AI Website Builder is a great choice. But if you need more advanced features, plugins, and full control, then WordPress is the way to go. For this video, we'll be using WordPress,
so let's click on this option. Now, WordPress will begin installing. Sit tight for just a moment while it sets everything up. On this screen, enter in your credentials, and then down below, let's click on Next. Next, we get to choose how we want to build our website. Right over here,
we can use AI. To the right of that, we can also use pre-made templates, and down below, you can also create a blank site where you have to build up everything yourself. Since we chose the business plan, we get access to the AI Website Builder, which honestly makes building a website incredibly easy. Let's go with this option. I'll select this, and in the bottom right, let's click on Next. Now, it's time to choose a domain
name for your website. This is the address that visitors type into their browser to access your website. Right up on top, you could type in the domain name. If you signed up with Hostinger, you can pick your free domain name right here. I'd like to build out a website for the Kevin Cookie Company Factory Tours, so I'll type in this name, and this shows me all the different domain names that are available for this name. Right up on top,
I see KevinCookieCompanyFactoryTours.com, which I already own. However, I also have all of these other extensions. Traditionally, .com has been very popular, but the one downside is that many domains are not available since it's been around for so long. Now, you could also consider alternatives like .io, .tech, .shop. Right down here, we have .online. Now, chances are, with these domain names, you will find the name that you're looking for. .online is one of the newest and also most popular new domain name extensions. It's a solid alternative to .com if you're not finding the name that you would like. Now, right up on top,
I'll choose this domain name, which I already own. If you don't want to choose your domain name just yet, maybe you prefer building your website out first. Right down below, you can also use a temporary domain. On this next screen, you can choose the primary data center to host all of your website files. In general, you want to choose a location that's
closest to where all of your customers will be. At the Kevin Cookie Company, we drive most of our sales on the west coast of the United States. So, over here, I'll select Arizona as the primary data center. This way, the page will load the fastest for all of these customers. The data doesn't have to travel as far. Once you make your selection, in the bottom right-hand corner, let's now install WordPress. On this screen, we can start building
our website using AI. But for the AI to be able to help us, we first have to give it some direction and also guidance. Right up on top, let's type in the brand name. For my website, it's called the Kevin Cookie Company Factory Tours. To the right of that, we have a drop-down list, and you can select the website type. I'm building it for business. I'll select business and services.
Then, down below, you can describe your website. What type of design, colors, images, what pages do you want on your website? With all these different AI tools, the more descriptive you are, typically, the better the results will be. I'll type in a description of what I'm looking for. Then, let's click on create. Wow! Check this out. Our website is now fully generated using AI. Right here at the top, I see that it inserted our brand name. Over on the right-hand side, you can
see all of our different navigation links. And check this out. It even builds out all of these different pages. Here, I see the about us page. Let's go back to the homepage. Right over here, I see the primary call to action to book a tour. Over on the right-hand side, I see all sorts of different cookie imagery on the page. And for the most part, the text is on point. Of course,
I will need to come in and make a few tweaks. As an example, here it says welcome to Kevin's. We never refer to ourselves as just Kevin's. We always go by Kevin Cookie Company. All in all, though, this is a fantastic starting point. If you'd like to try again with AI, down below, you can click on create again. And then you could go in and you could refine your prompt. One thing
to be aware of, though, when you create again, it'll delete everything that you see here. If you're happy with the design and you'd simply like to refine it further, right down here, you could click on confirm and edit, and then we'll start customizing the site using WordPress. Let's click on this. This drops us into the WordPress editor, where we can now make edits and also modifications to our website. Right here in the center of the screen, there's a prompt. Let's click on get started. Right up on top, let's click on continue. This page is composed of many different blocks. So, what is a block? Well, it's a piece of content. As an example, when I hover
over this text here, this is a text block. When I hover over the image, this is an image block, and here we even have a button block. So why is it called a block? Well, here, when I hover over any of these blocks, you notice there's a block that appears around it. Blocks make it really easy to add and move content around your page without needing to know anything about coding. To edit any of the blocks on the page, it's really intuitive. You simply click on the block. Here,
I clicked on a text block that says welcome to Kevin's. I don't think I'm all that fond of that text, so let's modify it. Here, I'll highlight this text and let me enter in something different, the world's best cookies. Now who says, well, throughout my life, I've tried lots of cookies
and personally, I think Kevin Cookie Company has the best cookies. One thing you might have noticed is when I clicked into this block, I also get this overlay with all of these different controls. Because I selected a text block, I get all sorts of different text controls. As an example,
I could click on this icon, and I could change the alignment. I can make it bold, italics, I can insert a link, and when I click on this menu, I get even more controls all related to text. Now, if I click on, let's say an image block, I get a similar overlay, but all of these controls are specific to images. I don't know if I like this chocolate chip cookie picture right up at the top. I think it would make more sense to insert a logo. So,
let's try replacing this image. I'll click on replace. In this menu, let's click on upload. Right here, I’ll select the logo for the Kevin Cookie Company Factory Tours. This image is massive. Let's click on the image, and when I do that, here I see the block. I also get these handles that I can use to adjust the size of this image block. I'll pull this in, so it's a little bit smaller. Now, I don't know if I like this alignment where it's left aligned. Right up on top, using these controls, I can click on this icon and here I can center align the image. I think that looks a lot better. Behind the logo, I don't know if this beige background is
really doing it for me. This feels like the color equivalent of a polite nod in a conversation, and I'd like to change it. Now, when I hover over, you'll notice that I have all sorts of other blocks behind these blocks. Right over here, this entire stripe of beige is also a block. I'll click on this. So you can have blocks live within blocks. Now you might be wondering, well, how do you know what all the different blocks are that are on the page? In the top left-hand corner, we can click on this icon to open up the document overview. And here we see all the different blocks on the page. Here I have a group, and this beige background is the background
of that group. I can expand it and here we have a grid, and when I hover over grid, you'll see that it also highlights where the grid block is on the page. And let's expand this. Then we have a stack, and within the stack, we have this text, we have a paragraph and we have a button. Over here, I also have a group that only contains the image. So, you can have blocks within other blocks. I want to change the background of this group, so to make sure that I select that block, I’ll select the group block right up here, and if we look on the page, you'll see that that group is selected. Now that I've selected this block, all the way over on the right-hand side,
we have a pane that shows me all of the properties for this block. If you don't see this pane, you can click on this icon and that'll hide the pane. And if I click on the icon again, that'll show the pane. I want to change the background of this block. So, to do that, I’ll click on this icon
that brings me into the styles. And here I see that beige color, but I think it might make more sense to just add a background image. So right over here, I'll click on add background image and let's upload an image. I'll click on this. I'll select this image with a boat going through a chocolate factory with a dark overlay. I'll select that. This now adds the image to the header of the page, but you don't actually see the boat going down the chocolate river. I want that to be the focal point. So still with this group selected over on the right-hand side in the properties,
I can click on the background image. And here I have different controls. I could adjust the focal point. So let me drag this down, so the boat is in focus, let's go maybe right at about there. That way you could see the river and you could also see the boat. Now that I'm done making that change,
I'll click out of that. I love this new image, but unfortunately, we can no longer read any of this text. Just like we modified the background image for this block, we can also modify the text color for these. I'll click into the text. Then over on the right-hand side in the block pane, here we could adjust the text colors. I'll click on this and let's apply a light color. Let's select this other block and here too, let's also apply a light color. And lastly,
let's select the button over on the right-hand side. Let's click into styles and here too, we could also adjust the different properties. Let's click on background and let's go with maybe this reddish background for the book now button. Over here, I could try different options. Actually, I think I like the gray. Let's go with that. I'll click out and now we could read the text against
this new background image. I like the way that looks. Looking at this page, it feels like there are a lot of headings on the left-hand side. We say delicious cookie tours and then the world's best cookies. I think it would be good to vary the position. It's also very easy to move blocks around your page. I want to move this text block over to the right-hand side and this paragraph
block over to the left-hand side. So how do we do that? When I click into this text block here I get this overlay and we have these six dots. When I press and hold on this, this allows me to drag this block to a new position. I'll press and hold on this and I can drag it over to this other
column. I'll place it right there. But now I have this heading and this text both in this column. So let me select this text block and over here, I'll click on these six dots, and I can now drag it over to the leftmost column. I'll place it there. So now I can alternate. I have a heading on the left, a heading on the right. I feel like that has a better balance on the page. Along with clicking into a block to drag it, you could also drag it using the list view over on the left-hand side.
For example, I could pull this column on top or here I could pull this column below and that way I can also shift the position. So, you have a few different ways to do that. Let's now close out of the document overview by clicking on this icon up above. Up to this point, we've been looking at how you can modify existing blocks. You can also add entirely new blocks. As an example, here when I hover over the page, you'll notice that this plus icon appears, and this allows you to add a new block. And when I click on this, I can select the type of block that I would like to add. Also in the top left-hand corner, I can also click on the plus icon right here. And this also opens up all
the different types of blocks that I can insert. You can insert all types of different blocks. For example, there's a variety of different text blocks. You could insert a paragraph, a heading, and here with the business plan, we could even insert an AI content created block. If we scroll down a little bit more, we have media blocks. So, these are things like images or maybe you want to insert a video file. If we scroll down a little bit more, here we have different design blocks.
So, you can insert buttons or columns or groups and you have more. If we go down a little bit more, here we have widgets. So maybe you want to show a calendar. Maybe you want to show comments from posts or maybe you just want to show all of your latest posts. You have that option here. If
we scroll down a little bit more, we have themes like you could insert a logo, a site title, and these will be reused across different pages on your site. As an example, here we have navigation. I have my navigation on the top of the site. If you change your navigation once, it'll update all of the associated pages. Here, I'll scroll down more. You can even embed all sorts of different content into blocks. One of my favorites, you could even embed a YouTube video on your page. And if we scroll down a little bit more, you'll see even more types of content that you can embed on your page. Let's close out of this view by clicking on the X icon in the top left-hand corner. Then let's scroll all the way down the page, and here I have a testimonial from a family
that took one of our tours. I would like to add an image of the family, so I'd like to include a new block. I'll go down here. And when I click into this block in the bottom right-hand corner, I see this plus icon. The plus icon always indicates that you can insert a new block.
I'll click on this. And here I get a view of all the different blocks. Here I see some of the most popular ones. I'd like to insert an image, so I'll click on this. On the left-hand side, I'll click on upload to upload an image. Right here, I see an image of the family. I'll click on this and then let's click on open. This now inserts the image of the family, and I don't know if these two are sisters or if one of them is the mom. Let me know what you think in the comments. Let's make a few quick tweaks. I'll click on this image and let's first off adjust the size. I'll click on the
handles and there we can make it smaller. I think it would also be a nice touch if we added some rounded edges. I'll click on the image. In the top right-hand corner, let's open up the properties. Here I see the blocks properties. Let's click into styles, and over here, I can click on rounded and that'll apply rounded edges. But I think that's a little too rounded, so if I scroll down, I could also adjust the radius. Let's add a slight rounded edge. I like that. And here we can click out and
that adds a really nice touch. Let's also move this image so it sits alongside the text. I'll click on the drag handle and over here, I'll put it right alongside the text. Look at that. Happy visitors. And then we have that nice testimonial. Hopefully you're starting to get a solid grasp of
how to work with blocks in WordPress. Blocks are essential for building pages and posts, giving you flexibility and control over your content. Now you can continue refining your page, but let's actually switch gears and let's explore how to add a new page to your website using the AI content creator. In the top right-hand corner, let's save the page by clicking on this button. To
get to the main WordPress interface, in the top left-hand corner, let's click on the WordPress logo. This opens up the navigation. Let's click on back and let's click on back again. This brings us to the main WordPress dashboard. If you've used WordPress before, this likely looks very familiar. If you haven't used it before, it's very intuitive to use. To get back to where we just were, over
on the left-hand side, let's hover over appearance and then click into the editor. Within the editor, right here, we could click into pages and then we could jump right back to the homepage. That way, you can continue making edits to your site, but I actually want to add another page. So again, let's click on the back button and the back button once more. To add a new page to the website, on the left-hand side, let's click into pages. Within pages, you can see all the different pages that are part of our website. We've spent most of our time on the homepage, but we also have an
about page, a contact page. We even have a privacy policy and we have a page with information about tours. To add a new page to your website, up on top, let's click on new page. This drops us into the editor where we could pull together our new page and you should recognize this. This is exactly the same as the interface that we were working in for the homepage. Right up on top, we can type in a title for this page. I want it to be FAQ. Now, I mentioned we would use AI to help us pull together the content of this page. Right here, we can insert a new block and
like we saw earlier, we can click on this plus icon, we could click on this plus icon or one of my favorite shortcuts, you could simply enter the forward slash key and here too, you could also insert different blocks onto your page. The third option is the AI content creator. I'd like to use AI to help pull together this page. Let's click on this. I can now prompt the AI to help me write this article. Right up on top, I could enter in the main topic. I want it to be an FAQ for the Kevin Cookie Company tours and I want it to be able to answer some of the most common questions that customers have. I think that looks good for the description. Down below, I could select the tone of voice. Formal doesn't work so well for a cookie company. I think maybe friendly would work better. Over here, content length, I think short makes sense and I could also have it add images
inside my content. I think that's a good idea. Now that I've set all of these different configuration options, let's click on create content. This has now generated a page. Now, of course, this image doesn't match our cookie factory, so I'd probably replace it. But instead of inserting an image, I could simply leverage what's already here. And if I look down below, it answers some of the most common questions. Here too, I'll have to go through and adjust things like the pricing and also the open hours, but the text overall is really solid and I could easily use this and then just refine it and also tweak it. Down at the bottom, let's click on use this content. Up in
the top right-hand corner, let's now publish this page. To get back to the main WordPress dashboard, in the top left-hand corner, let's click on the WordPress icon. Now that we've added a new page, we need to add it to the site navigation. On the left-hand side menu, let's go down to appearance and let's jump back into the editor. Right up on top, let's click into the navigation. Here, I can see all the different pages that are part of the navigation and in the top right-hand corner, you can see all the different pages. I want to add my FAQ to the navigation. Let's click on these three dots and then I have the option to edit. This drops me into the block editor and here I can
edit all the different items up above. I'll click here and I see a plus icon. I'll click on that, and this pulls up a list of all the different pages that are part of my WordPress site and right up on top, I see the FAQ. I'll add that. Now I have my FAQ included. I don't want it to be at the very end. I'd prefer contact there. So over here with FAQ selected, I can click on this icon to shift the position. Let's put it right between about and contact. I think this looks great. In the top right-hand corner, let's click on save. Then in the top left-hand corner, let's go back to WordPress and let's click on it again. In this video, we used AI to pull together the
initial site and also to add additional content, but maybe you'd prefer to try a theme with your website. Over on the left-hand side, let's hover over appearance and then click into themes. Within themes, you can see that the current active theme is the Hostinger AI theme. That's the one that we've been using. However, there are also many other options. Here you can see a few of them. You can also add even more themes. I'll click on add new theme and here we see hundreds and hundreds of different themes that you can choose from. Chances are if you have a specific vision in mind for your website, you'll find a theme that matches it. Before we wrap up,
let's take a look at a few additional settings. Over on the left-hand side, we have users and with this, you can add additional users to work with you on your website. We also have settings and when I click into this, you have all sorts of different settings. One that I like configuring for every website, you could choose a site icon and this appears on the browser tab for your website. In the top left-hand corner, we also have an option for Hostinger and when I click on onboarding, you'll find all sorts of different resources that'll help you continue to develop your Hostinger website. Here you can see a sampling of different videos that'll help
you take your site to the next level. Let's now have a quick look at how the website turned out. Look at that. This website looks beautiful. Right up on top, we have our header, we have all of our navigation links, we have our text, the background image, the logo and when I scroll down, I have all sorts of different cookie pictures. They look so delicious. And just like that, we've built a fully functional website using WordPress and AI. Now, all that's left to do is add your content and tweak the design and resist the urge to change the theme 57 times before publishing. Trust me, I've been there. Please consider subscribing and happy website building.
2025-03-28 09:50
