Bluehost AI Website Builder Tutorial 2026 - Step by Step for Beginners

In this video, I'll show you exactly how to build a website using Bluehost's AI website builder step by step, start to finish, even if you've never done this before. We'll cover everything. Setting up your account, building your site with AI, customizing it, adding pages, connecting your domain, all of it. By the end, you'll have a professional looking website live on the internet. No coding, no design skills. The AI does the heavy lifting for you. Blue Host hosting starts at just a few bucks per month. And I've got a special partner link that'll save you even more money. To get our exclusive discount, use the link on screen or click the first link in the description below. I'm Matt. Let's dive into it. When you use that link in the description below, you'll land on this page here. And if you scroll down the page to the pricing panel, you'll see right above it that the special partner only offer has already been applied. So essentially all of these prices in this pricing panel already have our discount built into them because you use the link. The biggest difference between these plans really is the number of websites they include. The starter plan gives you 10 websites, business gives you 50, and e-commerce essentials gives you 100. The e-commerce essentials plan also adds some additional commerce tools. But for our purposes today, we're building just one website, so the starter plan will work just fine. Go ahead and choose the plan you want and you'll be routed to this page here where you can pick your domain name. Now, you can do this now or I'll show you how to do this later in the video if you're not ready to set this up. So, you can click choose domain later. Next, you'll be routed to the checkout page. And the first thing you need to do is create your account. You can do this by email with a Google account, Apple account, or even GitHub. I'll use my email. Just simply enter your email and create a password. Next, you'll need to customize your add-ons. The first thing they add by default is the site lock essentials. This is a malware scanner which checks your site daily for any potential malware or issues. I recommend keeping this because it's only a few bucks per month and will help keep your site safe. Code guard is a backup service. Now, Blue Host plans do include weekly backups by default, but you can add code guard on for more frequent backups. Yoast is an SEO tool which you can always add later, so I don't recommend adding this now. On the right side at the top, you'll need to select your starter hosting term. By default, they select three years. Now, you need to choose at least 12 months in order to get a free domain with your plan. Here, you can see though 3 years gives you the best price overall. So, that's what I'll keep for my site. Next, further down this shopping cart section, you can see that they also add a professional email trial by default. They give you one month for free and then it renews for $2.99 a month after that. You may or may not need an email to go with your site, but if you do, I recommend keeping this. In my case, I don't need it, so I'll click remove. At the bottom of the shopping cart section, you can see that there's a box checked to receive special offers and educational content from Blue Host. You can leave this checked if you want. Personally, I don't want more marketing emails, so I'll uncheck that. Scrolling to the bottom on the left side, next you'll need to add your billing information. You can use a credit card, Google Pay, or PayPal. Go ahead and enter your billing information. And once you've added all your payment details, click the blue submit payment button on the right side. You'll get a confirmation page and then you'll be routed into the Blue Host dashboard. Now that your account is set up, this is where it gets fun. Let's have the AI build your website. Click WordPress admin to be routed into the onboarding flow. When it asks how would you like to start, click AI site creator. Next, you'll need to add some basic info about your site. First, add a site title. Then select your site type from the drop down. Then you'll need to describe your site. Describe what type of site this will be, who it's for. If it's for a business, describe a little bit about the business. And if you're after a certain design aesthetic, describe that here, too. For example, I'm making a website for a moving company called Maryland Movers. I wrote here that it's a professional moving company serving residential and commercial clients throughout Maryland. I described a little bit about the services that the business offers and I said, "I need a website that feels professional, trustworthy, and friendly, showcasing our services, and making it easy to request a free moving quote." Once you have all your details in, click the next button. Next, you'll be prompted to add a logo. If you have a logo already, you can click the browse file button and upload it. If you don't have one, you have two options. You can wait till later in the video where I'll show you how to swap out the file or you can create one with AI. I'll do this now. Clicking the create with AI button in the upper right. That brings us this dialogue box where you can click generate. Based on the name and description you provided for your site, Bluehost AI will generate some logo options for you. It'll give you three options to start and you can click the eye icon to preview any of them in bigger format. If you don't like any of the options, you can click the generate more button. But in my case here, I actually really like this first logo it created. So, I'll click that to select it. And then in the bottom right, click set a site logo. Once you've done that, click the X at the upper right to close out the logo selection dialogue. And then click next. Blue Host will now build your website. This can take a few minutes, so this is a good opportunity to stretch, grab a drink of water, or some coffee. Just like the logo, when it's done, you'll get three options to choose from, and you can click on any of them to preview them. When the preview opens, you can scroll through the full page to check out the design and all the images it loaded in for you. You can toggle between the other previews on the right side and scroll through those, too. Personally, I like option one the best. And when you've got your favorite picked out, go ahead and click customize with AI in the upper right. This will route you into the website editor. You may have a popup on your screen giving you some onboarding info, and you can just click through the buttons until you close that out. All right, so this is your website. Before we start changing things, let me quickly show you how this editor works. The main area here is your website itself, and you can simply click on anything to edit it. When you click on it, a floating toolbar will appear with tools and functions relevant to the selected item. You can move anything around the page by clicking and dragging the six dots that appear in that toolbar. You can undo any changes you've made by clicking this left pointing undo arrow in the upper toolbar. Or you can use command- Z on a Mac or control-z on Windows. Speaking of the top bar, this is where all your main tools live. Adding content, undoing mistakes, saving your work, but you don't need to memorize any of it right now because we'll use each one as we go. The plus button is how you add new stuff, text, images, sections, whatever you need. This little icon here with the three lines is the document overview. If you ever get lost or want to find a specific section, click here. It shows you everything on your page in a simple list. In the upper right, you have the save button. When you want to commit your changes, hit save. That's it. And then you have the settings sidebar. When you click on something, options for it will show up over here on the right. And that's where you fine-tune things. Now that you know your way around, the fastest way to start customizing is within the built-in AI chat. And you can access that by clicking this purple icon with stars in it. This is blue chat. It can help you edit your page content and layout. Things like updating text, changing buttons and colors, swapping images, adding new sections. Just tell it what you want to change or point it to a specific section and it'll handle it. For example, I can say change the hero image to some moving boxes and hit send. If you don't like the changes, you can keep chatting until it gets it right. After making updates, you can click revert all to roll back to how it was or click keep changes to accept the new version. At any point, you can click the plus button in the upper right to start a fresh chat, or click the X to close the chat. The Blue Chat AI is a great way to quickly jump start your website design. But what if you want to change things such as the overall look of your site like fonts and colors? To do that, let's access styles. Click on the half black, half white circle, and that'll open a panel on the right side. Here you can change things like typography, colors, background, shadows, and standard layouts throughout the entire site. If you click into any of these, you can quickly make changes that adjust across your entire site, not just individual sections. For typography, you'll get different font combos. And for colors, you can grab entire color palettes. At the bottom, you can also set the standard appearance for specific block types. Now, this is a bit more advanced, so I recommend only doing this after you've gotten the hang for the editor. Now, before we start editing things by hand, let me show you a tool that'll make everything easier. Remember earlier I clicked into the document overview? Well, think of it like a table of contents for your page. Instead of scrolling up and down through your actual page to find things, the document overview shows you a neat organized list of every section and element stacked in order from top to bottom. You'll see things like your header, each content section, images, text blocks, and buttons all listed out in a sidebar. It's useful for finding things quickly. If your page is long, instead of scrolling forever to try to find that one section you want to edit, you can just click on it in the list and it'll jump you right there. It's also useful for understanding your page structure. Blocks are nested inside of each other. Like a section might contain a heading, a paragraph, and a button. The document overview shows you that nesting visually with indentation, so you can see how your page is actually organized, almost like folders inside of other folders. It's also useful for moving things around. You can drag and drop items in the list to reorder sections on your page, which is often easier than trying to drag big sections around on the page itself. You can also click the outline tab to get an SEO focused overview of your site. Here you'll be able to see all the different headers and their levels throughout your page. All right, now let's get into the hands-on stuff, editing what's actually on your page. Let's start with text. Like I said before, you can click on any element to edit it. And that's true for text, too. When you click on text, you can edit it just like you're in a standard word processor. In the floating toolbar at the far left, you can change the type of text by clicking on the icon and selecting a new text type. Here, I just changed it from a paragraph to a heading, and we can change it back to a paragraph. In the center of the toolbar, you can change the text alignment from left align to center align to right aligned. And that happens within the section, not on the whole page. To bold or italicize text, select it and then click the bold or italics icons in the floating toolbar. Next, you can style your text with a sidebar. Click on the sidebar in the top bar and then click on the half black half circle to open styles. Here you can update things like font color, typography, and dimensions. As an example, let's change the color of this header. So, select the header and then click text on the right side under color. And we can change it to something from our color palette. Or you can click on the color in the top and then use this color selector to pick a specific color. I'm actually happy with the original black here, so I'll just click that and then close that out. When you're done making changes in the sidebar, you can click the X at the upper right. Now, let's edit buttons. For most buttons, you can simply click on them and then begin typing just like you would with regular text. To link the button somewhere, use the chain icon in the floating toolbar. There you can simply type for the name of another page on your site to search for it and link it. Or if you're linking to a page that's not on your website, you can simply paste in the URL in that field instead. Just like with text, you can update button styles using the sidebar. You can change things like color, background, typography, and dimensions, as well as shadows. Next, let's edit images. To replace an image, simply click on it. Then, in the floating toolbar, click replace. You can click upload to add new media from your computer, or click media library to add content that's already on your site somewhere else or uploaded to WordPress. If you don't already have images to upload to your site, I recommend checking out some free stock photo websites like Pixels or Unsplash. I've left links to both of these in the description below so you can check them out. On Pixels, you can simply search for images related to your subject. Find one you like and then download it to your computer. Then, back in the website editor, click upload and add your image. And voila, the image has been swapped out. Just like text and buttons, you can also access more style settings in the right sidebar. You can quickly change between some preset styles, add filters, and even add shadows and borders. I'm going to choose this dots BL style. I think it looks pretty good for this site. Don't forget, after you've made changes that you're happy with, click save in the upper right. So, that's how you edit what's already there. But what if you want to add something completely new? Well, that's where that block insertter, the plus button in the upper left, comes in. When you click that, you can scroll through to add text, images, buttons, videos, web forms, calendars, design elements like grids, and really anything else you want to add with embeds and custom code blocks. Everything's divided into categories between text, media, design, theme, etc. And it's really easy to actually add things. So let's say for example we want to add a paragraph here. We can simply click and drag the paragraph in and then edit just like I showed you before. Now because you signed up to edit a WordPress site with Bluehost as your host, you get access to something called Wonderblocks. Let's click that in the upper left. WonderBlocks is a Bluehost specific plugin that gives you access to pre-esigned block templates and patterns you can drop into your page. So patterns are these sections of websites that you might see pretty frequently and you can look and sort through by categories. Like let's check out features for example on the left side here. You have all sorts of different patterns around features for a product or something like that. To add it, you simply click the plus button. And now we've added this section to our page that's already pre-esigned and ready to go. You just edit it like any other element. Now, templates in Wonderblocks are full page layouts like a complete about page, contact page, or landing page with multiple sections already arranged and designed together. This is great for if you've just created a blank page and you want to jumpst start the entire page without having to design everything from scratch. The simple way to think about it is templates are whole pages and patterns are pieces of a page. Patterns are also accessible from the regular block inserter. At the very top, you can see there's this category called Wonderblocks, and all the icons are in green. So, for example, we could look at pricing table patterns, and that'll pull up this menu again where you can simply click to add your pattern. Now, before we move on, let's make sure your site looks just as good on a phone as it does on a computer. Click this little laptop icon in the top bar, and you can switch between desktop, tablet, and mobile views of your site. The good news is WordPress and Blue Host themes are already responsive, meaning your site automatically adjusts to fit smaller screens, so most of the time it just works. Just scroll through your site in the mobile view and check for anything that looks off. Text too big, images that look weird, or sections that feel cramped. Most of the time, it'll be just fine, but it's worth a quick check. When you find something that's actually off, you can click on it to edit just like you would in the regular editor. Like for example, I know that this text is black on the desktop version, but now that I'm seeing it by itself on mobile, I think it looks a little strange. So, we'll click the sidebar, go to the styles, and change text to a lighter color so it's easier to read on this green background. We can do the same thing for the button. And there we go. I recommend doing this at the very end once you're happy with how everything looks on desktop. When you're done, you can simply toggle back to the desktop view. And there we go. So far, we've been editing an existing page. But how do you add a new page? In the upper left, click the W icon and then click pages. From there, click add page. Give your new page a name. Then click create draft. That will generate a blank page. Now, with a blank page, you have three options for how to build it. You could start from scratch, adding elements one at a time from the block inserter. You could go to Wonderblocks and use a template or patterns to quickly generate all the content for your site, which you can then customize. Or you can use the AI, Blue Chat, to quickly put together a design based on your prompt. For example, for this moving company, I might ask it to create a beautiful destinations page for the moving company that showcases all the cities throughout Maryland that they service. Add a hero section at the beginning with a map on the table and people pointing at it and a call to action section at the end with a relevant background image. Let's see what happens. And after a few minutes, you can see the AI's generated a full page design for us. It's pretty basic, but it's a good start. We can go ahead and click the blue keep changes button. and then close out the AI chat. If you want to rename this page, like maybe we want to call it service areas instead of destinations, you can do this by clicking the W icon at the upper left and then in the pages menu, click the three dots next to the page name and click rename and enter your new name. Right now, this page is a draft, meaning the visitors of our website can't see it yet. To publish the page and make it live, click publish in the upper right. And now you'll notice instead of a publish button, it's changed into a save button. And if we click the W in the upper left, we can see that the page has changed from a status of draft to published. Now website visitors can view this page. If you ever want to delete this page, you can click the three dots next to the page name and then click trash. But I'm not going to do this in this case here. Let's click the page on the right side to open it again. And then let's see this page on our live site. We can click the view page button in the top toolbar. And here's our new page. Now we have a new page and it's looking great. But there's just one problem. There's no way for visitors to find it yet. Let's add this new page to our navigation menu and customize the site's header and footer. Close out of the preview and go back to the editor. On the left side, click the W icon. Back out to the main menu. Then click patterns and header. Select header. And that opens the editor for the header. If you click on the menu, a plus button appears on the right side. If you click that, you can add a new page to the menu by searching or adding it from the list. Here, my service areas page appears. So, I'll go ahead and click that. Clicking out of that, we can see how the menu will look. We can open the document overview and then expand the header, expand the row, and expand the row again to find our navigation. When we expand the navigation here, we have all the links and we can rearrange the items in our menu by dragging them around. Like let's say we want the service areas to be right after services. Now, if we close out of the document overview, here's how our menu looks. You can also add items as submen items. For example, maybe this service areas would be better as a sub item of services. So, we can click that and drag it to the right under services. And now in our menu here we have a little drop down arrow that if you click it will open and you can see service areas. Great. So now our new page is added to our menu. Visitors can find it if they click through the navigation options here. You can also update other aspects of the header. For example, if you want to swap out the logo, you can click the logo and click replace. And then just like replacing any other image, you can add a new file from your media library or upload a new one. Here you can also update your button on the right where the link goes to as well as what it says. You want to make sure that there's actually a link set. Mine doesn't have one, so I'll link it to the contact us page. Once you've added a page to your navigation menu like this, there's one other way to quickly rearrange it while you're editing the site. Back up to the left, click W icon, back out from patterns to the main menu and click navigation. And now here you can see that service areas appears in the list along with the other items. Here you can click and drag to a new location and rearrange the menu from here. I'll put it back where it was though as a sub item of services. Now let me show you how to update your footer. Updating your footer is similar to updating the header. You're going to back out to the main menu here. Click patterns. Then select footer. Then click footer in the list. And here's your footer template. Your header and your footer show up on every page of your website. So what you see here gets reused throughout the site. Just like the header, you can click the logo and swap it out. If you have social icons, you can click them individually and then add external URLs in the box that appears. I recommend if you have this copyright section at the bottom, updating it to have your actual brand or business name. We'll leave the 2026 and change it to say Maryland movers. Feel free to rearrange the elements in your footer as well. When you're done making changes, click save and then go to any page of your website to see how it looks. Here's the updated header. And if you scroll all the way down, here's the updated footer. All right, while we're out of the editor for a moment, I want to show you something important. We are currently on the main homepage of the site. This is what it looks like to visitors, except that visitors won't see this black bar at the top. This only shows up when you're logged into your WordPress admin panel. You can get back to the editor by clicking edit page or edit site, but these particular buttons don't get you access to the AI editor features that we've been using. They'll work just fine if you want to do manual edits, but if you want to use the AI chat features, let me show you how to get back to that version of the editor. If you click the W at the upper left, that'll take you to your WordPress admin panel. This is your WordPress admin panel. It's the control center for managing your whole WordPress site. It serves as the backend where all technical site management occurs. To get back to the AI editor, you'll want to click Bluehost at the top of the left side menu and then click AI editor in the upper right. To use the regular editor, you can use any other edit button on this page or throughout the WordPress admin panel. For reference, here's what the AI editor looks like. You can see it's got the little blue purple circle with the stars at the top right in the top bar. That gets you the access to the chat. And here's the regular editor. There's no chat, but pretty much all the other features are there. That's the only difference. I just wanted to point that out so you don't get confused if you would click the edit button and you're looking for the AI features and you can't find them. Remember, back to the WordPress admin panel, Blue Host on the left side, AI editor in the upper right. While we're in the dashboard, there's one more thing you should know about. Plugins. Plugins are basically apps for your website. Just like you download an app on your phone, plugins add new features to WordPress. Contact forms, online stores, SEO tools, those are all plugins. To find them, go to your dashboard and then click plugins in the left sidebar. Then click add plugin in the upper left. You'll land on the Blue Host solutions tab, which will be locked unless you pay for extra features, but there are tons of plugins on the WordPress library. You can simply click through the other tabs like popular to see them. For example, here's a contact form plugin. Or you can use the search bar in the upper right to search for specific plugins. When you find one you like, click install. Then the button will change to say activate. Click that and it's activated and ready to go on your site. Back in our plugins management page here, you can get rid of a plugin by first clicking to deactivate it, then clicking delete and okay to confirm. A couple things to keep in mind. Only install what you actually need because too many plugins can slow your site down. And when you see update notifications pop up, just click update. That's really all the maintenance there is. Bluehost has already installed a few plugins for you, which is totally fine. But whenever you want your site to do something new, this is where you'd come. All right, last thing. Right now, your site is live, but it's on a temporary Blue Host URL. Let's fix that. In our WordPress admin panel, go to the upper left and click Bluehost. Then in the upper right, click hosting panel. If it's been a while since you were on this page, you may need to log back in. And from your hosting panel, you'll go to websites on the left. And then you should see that your website is using a temporary domain. If you have a domain already from an external domain register, you can simply click connect domain and follow the prompts to connect it. If you don't have one yet, click purchase domain. Next, search for your desired domain. For my site, I'll search for the Maryland movers and hit search. And here you can see that the Maryland movers.com is available. When you find a domain you like, go ahead and click continue. And here it takes you to the checkout page where it might already have your billing information prepulated, reusing the same information you use to pay for hosting. In the upper left, they recommend an add-on, the Google Workspace for 350 a month. Adding a professional email on to your domain is a great way to make your site and email look way more professional. That said, I don't need it for this particular site, so I'll skip that. Now, you may remember from earlier in the video, I said that if you pay for at least 12 months, you get a free domain. And here you can see they've added on the Maryland movers.online as a free domain that I get in addition to the maryland movers.com. And they've included domain privacy and protection for both. All that's left to do is check out. We'll scroll down. I'll toggle off this box for special offers and content and then click submit payment. After that, you'll get a confirmation saying the order is complete and you can click to go back to your account. From there, you still need to actually connect your domain to your website. So, go back to websites on the left menu, click connect domain, and then you'll see a list of domains that are eligible to be connected to your website. I'll go ahead and select the maryland movers.com and click connect to website on the right side. This process can take a few minutes, so just be patient. When it's done, you'll get a confirmation message. And you'll see near the bottom of the page that your domain is almost ready, you need to complete the connection details to finalize the domain connection. To do this, simply click finish connection. Then on the next page that says connect your domain, scroll down and click save changes. And there we go. If we go to our domain in a new tab, there's our website live and on the internet. And if you want to see what this looks like to people publicly, not to people who are logged into WordPress, you can click the profile at the upper right and then click log out. And there it is. Now, you may notice that the domain doesn't show up in the top bar yet. And that's okay. Domain propagation can take up to 72 hours, but it usually happens much quicker. Essentially, there's a bunch of servers all over the world that need to be updated to point to this website when somebody types your domain into their address bar. And that process can take a little while. So just be patient if it doesn't show up right away. All right, nice work. You created a website with AI, customized it, and launched it live on the internet. Remember to use that partner link in the description to get the best available price for Blue Host. Thanks for watching.