Big Idea

The argument in one line.

Claude is a design generator, not a layout editor -- generate the site once with the right prompt, then import it into WordPress where you have real controls instead of prompting your way into a worse result.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A small business owner or freelancer who wants a professional multi-page website without paying a designer or fighting with drag-and-drop from scratch.
Someone who tried AI website building and ended up with 45 prompts and a site that looks worse than when they started.
A WordPress user already comfortable with Elementor who wants to understand how Claude can accelerate the design phase.
A beginner setting up their first domain who wants step-by-step coverage of every hosting and WordPress setup decision.

SKIP IF…

You need a highly custom web application -- this workflow produces a marketing/brochure site, not a dynamic app.
You are already proficient with Elementor and just want the MCP integration piece -- the Hostinger and WordPress basics will be too basic.

TL;DR

The full version, fast.

The mistake most people make is using Claude as an iterative layout editor, prompting dozens of times to fix spacing until the site looks worse. The correct flow: use Claude once to generate a complete 5-page HTML site from a structured prompt with SEO keywords, then import it into WordPress via the NovaMira MCP plugin and Elementor. Before importing, disable Elementor Atomic Editor, enable the Flexbox Container, and install Node.js. After import, expect to manually publish the XPro header/footer from draft and fix a handful of Flexbox wrap settings -- but the result is a fully customizable live site in under an hour.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:29

01 · The old way vs. the AI way

Hook reframes Claude as a design generator not an editor. Introduces the core mistake: prompting 45+ times until the site looks worse.

01:29 – 03:15

02 · Download Claude Desktop + 3-step plan

Desktop download required for MCP -- browser version does not work. Overview of the three phases: generate, host, import.

03:15 – 06:30

03 · The exact prompt

Evernote prompt template: business name, service, customers, goal, SEO keywords, 5 pages, design requirements. Keywords prevent generic filler.

06:30 – 09:30

04 · Generating the site + first look

Runs prompt using Opus 4.7 Adaptive. Browser preview looks solid. Debug/polish prompt cleans remaining issues.

09:30 – 15:30

05 · Step 2: Hosting setup

Hostinger walkthrough: Business plan for NVMe + 50-site limit, 12-month for free domain, Darrel10 coupon, account and domain registration.

15:30 – 19:00

06 · WordPress + plugin stack

Installs Astra theme, then Elementor, WPForms, XPro Theme Builder, NovaMira. Each plugin role explained.

19:00 – 23:00

07 · Critical Elementor settings + Node.js

Disable Atomic Editor, enable Flexbox Container, save. Install Node.js to prevent silent failures when Claude generates React components.

23:00 – 25:09

08 · Connecting WordPress to Claude (MCP)

NovaMira generates a JSON config snippet. Paste into Claude Desktop config file using Save not Save As. Restart Claude. Verify MCP active.

25:09 – 28:00

09 · Import prompt + conversion

3-part import prompt: create navigation, convert HTML to native Elementor elements, XPro for header/footer, WPForms for contact. 12-minute wait.

28:00 – 31:00

10 · Reviewing import results

Site built but header/footer missing, some wrap issues. Claude acknowledges errors and can self-correct.

31:00 – 34:49

11 · Fixing header/footer + Flexbox bugs + final site

XPro templates were drafts -- publish and set display to Entire Website. Fix Flexbox wrap in Elementor. Final review of live Wilson Estate site.

Atomic Insights

Lines worth screenshotting.

Prompting Claude 45 times to fix layout details produces a worse site -- generate once with a complete prompt, then use a real editor.
Claude Desktop is required for MCP; the browser version cannot connect to WordPress so the whole workflow fails without the download.
NovaMira teaches Claude which Elementor elements to use via MCP -- without it, Claude fills the page with raw HTML widgets that break the builder.
Disabling Elementor Atomic Editor before import forces Claude to use Flexbox containers instead of a deprecated developer-only layout system.
Inserting 5-10 SEO keywords into the generation prompt prevents Claude from filling the site with generic filler copy you would spend hours replacing.
Node.js must be installed before export; Claude occasionally builds site components in React and without Node.js the export fails without a clear error.
XPro header and footer templates land as drafts after import -- you must open each in Elementor, publish, and set display to Entire Website yourself.
The most common visual bug after import is elements stacking vertically when they should sit in a row -- fix it by setting the Flexbox container Wrap to No Wrap.
AI-generated Unsplash images are pulled from URLs not stored in the media library -- replace them with owned assets before launch.
The Hostinger Business plan is the minimum for this workflow: NVMe storage and 50-site limit versus the Premium plan with slower SSD and a 3-site cap.

Takeaway

Claude builds the design; WordPress owns the edit.

WHAT TO LEARN

The value of Claude in a website workflow is not iterative layout tweaking -- it is generating a complete, keyword-loaded design in one shot that you then hand to a real CMS.

01The old way vs. the AI way

Iterating on layout inside Claude is the wrong mental model -- treat it as a one-shot design generator, not a persistent editor.
The framing shift from AI builds my site to AI designs and WordPress edits is what separates a usable result from an expensive dead end.

03The exact prompt

A structured prompt with business name, audience, goal, and SEO keywords produces business-specific copy without a follow-up editing pass.
Specifying all five pages and their content blocks in the initial prompt prevents Claude from generating a single-page design you have to rebuild.

06WordPress + plugin stack

A minimal five-plugin stack covers every piece of the import workflow without the theme customizer conflicts that break AI-generated designs.
XPro replaces the need for Elementor Pro for custom headers and footers, keeping the total cost at zero beyond hosting.

07Critical Elementor settings + Node.js

Two specific Elementor settings must change before every import: Atomic Editor off and Flexbox Container on.
Node.js is a silent dependency -- the failure it prevents does not surface a clear error message, making it easy to overlook.

08Connecting WordPress to Claude (MCP)

The MCP config is a JSON snippet pasted into the Claude Desktop config file -- using Save As instead of Save creates a duplicate and loads the old config on restart.
Once connected, Claude reads and writes the WordPress database directly, which is what enables the 12-minute automated import.

10Fixing header/footer + Flexbox bugs + final site

AI-generated WordPress builds consistently produce two manual follow-up steps: publishing XPro header/footer drafts and removing Flexbox wrap from misaligned containers.
Knowing these two fixes in advance turns a confusing post-import state into a 5-minute cleanup task.

Glossary

Terms worth knowing.

MCP (Model Context Protocol): A protocol that lets Claude Desktop connect to external tools and services. NovaMira uses MCP to give Claude direct write access to a WordPress installation.
NovaMira: A free WordPress plugin that bridges Claude Desktop to WordPress via MCP and also feeds Claude a knowledge base of Elementor elements to improve import quality.
Elementor: A visual drag-and-drop page builder for WordPress. The free version is used as the editing layer after the AI-generated design is imported.
Atomic Editor: An experimental Elementor feature for developers using atomic design patterns. Leaving it enabled causes Claude to generate incompatible layouts and must be disabled before import.
Flexbox Container: Elementor modern layout engine based on CSS Flexbox. Enabling it ensures Claude uses current layout methods instead of the older Intersections system that Elementor has deprecated.
XPro: A free Elementor add-on that enables custom header and footer templates, which Claude uses to build site-wide navigation and footer via Elementor rather than the theme customizer.
Astra: A lightweight WordPress theme that provides a minimal canvas for Elementor. Recommended because heavy themes with their own customizers cause errors during the AI import process.

Resources

Things they pointed at.

01:25toolClaude Desktop ↗

09:15productHostinger ↗

10:30toolNovaMira plugin ↗

20:00toolNode.js ↗

01:56linkEvernote prompt template ↗

16:00toolAstra theme

16:10toolElementor

16:42toolWPForms

17:05toolXPro Theme Builder

Quotables

Lines you could clip.

00:50

“After 45 prompts, the website somehow looks worse than when they started.”

Lands the core problem in one memorable line→ TikTok hook↗ Tweet quote

01:09

“The correct way to use Claude is to create the design, then import that design into WordPress so you can actually customize it properly.”

Single-sentence thesis -- standalone without setup→ IG reel cold open↗ Tweet quote

29:16

“Now I see the real problem. It can self correct.”

Captures agentic debugging in plain language→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

story

00:00Now normally, building a website means picking a theme, fighting with layouts, dragging sections around for six hours, and spending countless hours optimizing your website for mobile devices. But we are in 2026 now, so we're gonna AI do it for us. What is up, guys?

00:14My name is Daryl. And in this video, I'll be showing you how to use Cloud AI to create stunning AI websites. And here's where most people mess up with AI.

00:21They build an AI website, and they just keep prompting over and over again. Make the button bigger. Move this section down.

00:27Change the spacing. Fix the mobile version. And after 45 prompts, the website somehow looks worse than when they started.

00:33The correct way to use Claude is to create the design, then import that design into WordPress so you can actually customize it properly. Because once inside WordPress, you're not stuck guessing with prompts anymore. With WordPress, you'll be able to change everything on your AI website with a free page builder.

00:47You can adjust the text, change the images, adjust the colors, resize the buttons, and fully customize your AI websites. I mean, this is the future of building websites.

00:56AI can help you create faster, better looking websites, and WordPress gives you the control of your AI design. Now we're gonna set up your AI website in three simple steps. In step one, we'll download Claude and create a modern AI website with just a few simple prompts.

01:09In step two, we'll set up WordPress. And in step three, we'll import your AI design, and you're all ready to go. Okay.

01:15So let's get started. Let's first head over to Claude AI, and I'll leave a link to Claude in the video description. So the first thing that we'll do is head over to claud.com/download, and we'll download the desktop version.

01:25Now we need the desktop version in order to connect an MCP to our WordPress website, so make sure that you use the actual desktop version. Uh, the browser version will not work, so make sure you download this and install onto your computer. Once you install it and open it up, let's go ahead and open up Claud for the desktop.

01:40Alright. So once you have the desktop version, now we can actually go ahead and prompt the websites. Now I've actually prepared a prompt for all of you party people in the video description.

01:48You can go ahead and access that Evernote. So this is the actual Evernote. Now I have spent about two days AB testing everything, and we have narrowed it down to this specific prompt.

01:59Now, of course, you can adjust this. So for example, we are gonna create a five page website for your business. We're going to incorporate your business name, talk about what you do, the customers you serve, and the main goal of your websites.

02:13We are also gonna insert keywords. So for example, if you're a real estate agent in Las Vegas, you wanna put real estate services in Las Vegas, Las Vegas realtor. If you are a dog groomer in Nashville, Tennessee, then you're gonna put dog grooming services Nashville, dog grooming services Nashville, something like that.

02:31Right? And then we're going to build out the actual website with this specific prompt. Now, again, I'm just we're just scratching the surface here.

02:38I'll show you how to customize and improve the design as we go. But let's go ahead and copy this prompt. So here, we're gonna take this simple prompt.

02:46Okay. And then I'll go ahead and copy this. And then we're gonna head over to the Claude, and we're just gonna paste this in, and we're gonna update it just a little bit.

02:55Okay? So design a complete five page website for my business using HTML. Make it look modern, clean, and professional, and give it a unique design, and make sure the design beats my competitors.

03:05Now you are more than welcome add a little bit more design emphasis. So if you want it to look like the award style websites or if you want to give a split screen effect or if you want it to have a checkered effect on the home page, just go ahead and type it in here.

03:18I left this spot open because I understand people watching this might wanna add like unique design to their site. So make sure to add it here if you want to. If not, no problem.

03:26We can keep going. So, uh, here, we're gonna put a business name. Now for this specific example, I am gonna pretend I am a real estate agent in Las Vegas.

03:34Okay? So I am a realtor, and I wanna create an AI website geared for my customers. So my business is called Wilson Estates.

03:43And then main goal of the websites, obviously, I wanna get leads, book calls, and maybe even showcase some work. Okay? And then here we have SEO keywords.

03:51Now the reason why I recommend to put this in now is because if you don't, it's just gonna give you a bunch of generic crap all over your AI websites. But if you do this, it's going to really understand like who you are and it's going to fill out everything with AI and make it more appropriate.

04:06So by doing this, you're not just gonna have a bunch of random filler words all over your website and you gotta spend like, you know, a day correcting it. Right? So make sure that you insert specific keywords.

04:15So let me give you an example. Of course, you can add in as many keywords as you want. So you can add in probably up to, like, 10.

04:21Don't, like, go too much into it. Just give a general idea of what you're about. And here, I'll hold shift and press enter twice.

04:29And here we go. So we have build these pages. We have the home, the about, the services, listing, and the contact.

04:34You are more than welcome to add in more pages if you want. So you can add in like a my team section or a my portfolio page. Just go ahead and update the actual prompt in order to create those pages.

04:44And below that, you can see that we have the next is the design. So modern and clean design. Now in this specific case, I let AI decide what is the best colors and fonts to go with for my specific business.

04:54Now, you are more than welcome to say we are using a blue color scheme. We are using a gold color scheme. Any kind of color scheme, you can just go ahead and add it right here if you want.

05:03You can also add in your fonts. So if you wanna use Poppins bold fonts, you can just go ahead and delete this. But I want a blue and brown and white websites with Poppins bold fonts and Leidl or something like that.

05:13But in this specific case, I'm just gonna let AI make the best decision for my websites. And then here, all links and buttons work. I want images to be added to my websites, and I want it SEO ready.

05:24So, uh, this is the prompt that we're gonna use, and all we gotta do is just go ahead and run this prompt and generate the websites. So here, I'll go ahead and make sure that I select the best model. Now, if you are using the free version of, uh, Claude, I believe it is Sonitz or Haiku.

05:39Uh, you can use any model, but in my specific case, I'm using Opus, and I wanna use adaptive thinking. You can use the free version of Claude. So you can do all this in the free version, but in my specific case, I'm already a paying customer.

05:50So I'm just, you know, I'm just gonna use a Hopis. Right? So I'll go ahead and run this prompt, and let's see what we get.

05:56Okay. So now Claude is designing our website, and this process might take about three to five minutes. Alright.

06:01So here is my AI websites. Honestly, this looks really good. There are some things that we gotta fix.

06:07For example, I don't have any images. So we gotta fix that. Now let's go ahead and scroll up here, and let's just take a look at this through Google Chrome.

06:14So let's open up Google Chrome, and wow. Oh, this looks great.

06:19Yeah. Look at this. The images are showing here.

06:21So, obviously, the images are showing. Maybe they're not showing through Claude, but as you can tell, we have a really nice looking website. I mean, this is amazing.

06:29Right? We have a header and footer. Let's take a look at our about page.

06:33This looks great. Wow. This is actually better than I thought.

06:36You know? Like, jeez. So here we go.

06:38Great design. I like this little, like, thing it has going on. We're changing the text there.

06:43The I'm sorry. The color. That looks really nice.

06:45We have our listings here. We have a built in a built in filterable portfolio gallery.

06:52Really nice. And, uh, here we have schedule a call. Great looking contact form.

06:57Wow. I love it. Okay.

06:58So, obviously, we got a great looking website. Okay? Now the images are working here.

07:02So maybe, like, when you're building it through the cloud desktop, maybe they don't show because it has to load through the application, but we know that the images are working. And I like what they've done here, you know, talk to Daryl. And here you can see that they're basing the text off what we entered in the prompt.

07:16So born and raised in Las Vegas, straight talk, no sales talk, marketing that sells, no sales pitch, no pressure. You know? I love the word they're using, you know, like like I'm an innocent guy or something.

07:28You know? It's like, I'm not that nice. You know?

07:29So let's go ahead and jump back to Claude. I definitely recommend you to debug the website and polish it. Now, me personally, this site looks really good.

07:38The images are working well, but I'm still gonna ask Claude to debug this and just make sure everything is working. Uh, we can also go ahead and change things like the text, text, but I do recommend to do that through WordPress. So if you start changing the text right here with the prompt, it's gonna take you a long time, and it's much faster and easier doing it with the page builder.

07:56But I do want to polish this up. Now here's the next prompt I'll enter. Now this is something just to clean it up.

08:02So if there are something wrong, like, example, if, uh, this right here, for example, is not working, just ask it to polish up the website, fix up any errors, and then, you know, it should self correct. Polish up the website.

08:13Go throughout the website and look for any design inconsistencies and fix them. Make sure all links are working and debug the website for any issues.

08:21And on the mobile menu, the button text is not displaying. So let's go ahead and run this prompt. And after waiting about five minutes, it now debug the entire website for us.

08:30Now here, I'll minimize this in mobile preview and take a look at our menu, and then you'll see the button now works just fine. And here is a website on a live browser. So you can see we have our beautiful landing page.

08:41Here we have the, uh, you know, it's like an upsell section. We have our real estate services in Las Vegas with these great images. And scrolling down, we have testimonials.

08:51We have some more upsells, and then we have a call to action in our footer here at the bottom. So overall, I'm really happy with how this website looks. So let's go ahead now and push this AI websites to a live domain.

09:02Okay. So we have our AI website up and running. Now let's go to step two.

09:06So let's import this on a live domain. Now you can use several web hosts out there. The one I recommend, hands down, is Hostinger.

09:12They make things like idiot proof to to put a domain on the Internet. So in the video description, there is a link to Hostinger and a discount code, and I'll walk you through how to set up WordPress on your AI website. Okay.

09:23So now we're gonna install WordPress. So to do that, we're gonna use Hostinger. Now the good thing about Hostinger is they are a very reputable company with a thirty day money back guarantee for any reason whatsoever.

09:32So if it doesn't work out for you, no problem. You can always get your money back. Now once you get here, you'll click on start now, and you'll be greeted with three different plans.

09:40The premium, the business, and the cloud startup. Now I definitely recommend to go with the business plan. The main reason why is because you can host up to 50 websites on this hosting package, and you get access to NVMe storage, which is much faster than typical SSD.

09:55The premium, you can only host three websites, and you get SSD storage, is drastically slower than NVMe storage. And cloud startup, I think that's for people who have a lot of websites. You're not there just yet.

10:06So so if you're brand new to AI, you just wanna get your feet wet, go with the business plan. You cannot go wrong with this plan. So under the business plan, I'll click on choose plan.

10:14Next is the cart page, and here you can select the period of your web hosting package. Now the longer you sign up for it, the bigger the discount you'll receive. So forty eight months gives you the biggest discount, and honestly, four years of hosting for $200 is actually quite affordable.

10:27But if you're brand new to making websites and you just can't afford that, I definitely recommend to go with a twelve month package. This will qualify you for a free domain name, and it only costs you about $50 a year. On top of that, we have a coupon code that'll work for any of the packages at hostinger.com.

10:42So on the right side, you'll see this have a coupon code. If I click on this, you'll see we can enter something in. So I'll put in Darrell 10, and this coupon code will give you an additional 10% off any of the packages at Hostinger no matter how long you sign up for.

10:55So here, I'll click on apply. Then you'll see that we save an additional 10% off the hosting package. So next, let's go ahead and click on continue.

11:02On the next page, you'll go ahead and make an account with Hostinger. After you enter in your email address and password, you'll then click on register. On the next page, you'll enter in your billing address like your first name, your last name, your country, your phone number, and your Social Security number.

11:15I'm just kidding. No social. It's a joke.

11:17So I'll go ahead and fill this out. And the final step is to submit a payment. So here you can enter in your credit card information.

11:23You can also pay with PayPal and Google Pay. On the right side, you'll see this is the total, and we have our coupon code applied. So I'll enter in my credit card information.

11:31Once you enter in your information, you'll then click on submit payment. Congrats. We're gonna start our new websites.

11:36Alright. Alright. Now we have web hosting.

11:39Now Hostinger is gonna ask us a few basic questions, like who is this website for? Here, I'll click on myself or for my business, and then click on next. On the next page, you'll click on create a website, and then click on next.

11:51On the next page, it'll ask you to create login details for your WordPress account. So make sure to write this down. Here, I'll put in my email address, and then I'll put in my password, and then I'll click on next.

12:00On the next page, you'll then enter in your free domain name. So right here under domain name, I'll type in oriontutorial.com, see if this is available, and it is available.

12:10Alright. So I'll select my free domain and then click on next. On the next page, you'll enter in your owner details.

12:15Now this is important if you ever wanna transfer your domain name or even sell it later. So I'll fill out my owner details. I'll scroll to the bottom, and then click on register.

12:24Okay. So now it's registering our domain name. On the next page, you'll enter in where your target audience is located.

12:30Now this doesn't really matter too much, but you do wanna select the location where you're primarily doing business. So for the country, I'm gonna select United States. Here we have Arizona.

12:40I just came back from Arizona. I was there for about a week. I have a lot of family in Phoenix and Tucson.

12:44So I'll select Arizona, and then click on next. Now, it's installing WordPress. Now, this process might take a few minutes, and they have a really cool game here we can play while we're waiting for WordPress to install.

12:56How about that? Oh, I lost. Next, it'll ask us a few more questions.

12:59Now, this page may change in the future. Hosting or typically changes their setup process a lot, but I just wanna click on go to WordPress here at the bottom. So I'll click on go to WordPress.

13:09And voila, we are now logged into our WordPress websites. Now if you wanna see your website right now, here at the top left, I'll click on visit sites, and this is our new website. It is using a temporary domain name because it's pending verification.

13:21So let's go back to the dashboard. Now before we go on any further, we need to verify our hosting or account along with our domain. As you see here at the top, we're using a temporary domain name, and that's because we need to verify our domain.

13:32So go ahead and check your email, the one that you signed up for with Hostinger, and you're gonna see two emails. You'll see one to verify your Hostinger accounts and also one to verify your domain name. So here, I'll click on these emails, and then I'll click on verify email.

13:46Okay. Cool. So now it brings us to our hosting or dashboard.

13:49Now let's go back and check our email again, and I'll click on the other email to verify our domain. And then I'll just click on verify email.

13:58Cool. Now our email is verified. Now it's very important that you verify your email because if you don't verify it within thirty days, they're gonna refund you and then close your account.

14:06So make sure that you do verify your email. Next, let me show you how to log in to your live website so you can start building your Now there's two ways on how to do this.

14:13The first way is you can actually just type in your domain name. So the one that you purchased. So mine was oriontutorial.com.

14:20Then you'll just type in -wp-admin, and this will bring you to the login screen. So here, I'll enter that.

14:27And then here you can see that we're brought to our login screen. Now this is gonna be the login credentials that you use when you sign up with WordPress. So here I'll enter in my email address.

14:35I'll click on the remember me box, and then I'll click on login. So now we're using our live domain that we purchased from Hostinger. So if I go to visit sites, you're gonna see our website is now live on the Internet.

14:46Now let's say, for example, you forgot your password or you don't know your WordPress credentials, no problem. You can always log in through Hostinger. I'll go over to our Hostinger accounts.

14:55If I go to websites and go to all websites, you're gonna see that your website's right here under your business package. You'll then just click on WP admin, and here you can log in directly to your WordPress website without entering any credentials.

15:08And there we go. So now we are logged in directly to our website using the Hostinger hPanel. Alright.

15:13Congratulations on setting WordPress. Really simple. Right?

15:15Hostinger makes things like stupid proof as you can tell. Now in this next section, I'm gonna walk you through how to, uh, install a few plugins, and this is gonna smooth out the process of importing your AI websites. So we're going to install a free page builder, a contact form plugin, and also a header and footer builder so that Claude can easily import this onto our websites.

15:33So with that said, let's just jump back to the video. Okay. So now that we have our WordPress website set up, we're now going to install a few plugins and a WordPress theme.

15:40So the first thing I wanna do is go over here to appearance and click on themes. Now there are several themes that you can install on your WordPress website, but after AB split testing many of these themes, the best one to go with is Astra. So go ahead and install the Astra theme.

15:54So here, I'll click on install, and then click on activate. And that's it.

16:00That's all we gotta do. Now pretty simple. Here, I'll close this banner.

16:03So now that we installed our WordPress theme, now let's install a few plugins. So let's go over here to plugins and click on add plu in. Now the first one is Elementor.

16:11Obviously, this is the page builder, and we're going to convert our entire design for this specific page builder. So here, I'll type in Elementor. And here is the page builder that we're going to install.

16:21So click on install now, and then click on activate. Okay. Cool.

16:25Now they may prompt you with the wizard. So for first time users, they're gonna prompt you with, like, with a big setup wizard. Just go ahead and click skip, skip, skip, skip, and just try to get out of it.

16:34Right? And, uh, once you actually install Elementor, you'll see it's installed onto your, uh, website. Now the next thing we're going to install is a contact form.

16:43So under search plugins, we're gonna type in WP forms, and we're going to install this plugin here. So click on install now, and then we'll click on activate.

17:06Okay. And this is the one we're going to install right here. It is X Pro theme builder for Elementor free.

17:12So go ahead and click on install now, and then click on activate. Now it's gonna also prompt you to install the X Pro Elementor add ons.

17:19Go ahead and also install this. So install. Okay.

17:23And then I'll activate the plugin. Alright. Cool.

17:26Now let me go ahead and explain to you why we're installing the X Pro plugin. Now the X Pro plugin allows you to build a custom header and footer with the Elementor page builder. So when we build out our website, I want Elementor to make this part.

17:38I don't want the theme to. Now you can actually bypass this by buying the Elementor Pro version, but I realize many people don't wanna buy the Pro version just to make a custom header and footer when you can do it for free. Also, when importing your AI website with Claude, you're gonna run into a lot of errors when it tries to do it to the theme customizer.

17:56I have used five different themes, and, uh, it doesn't work well with theme customizers. So for that reason, we're gonna use these plugins, and we're gonna have Elementor make it for us. It's gonna make it much more smoother.

18:06You're gonna get a lot less errors. Now the last plugin that we're going to install is not available in the WordPress repository. Now this plugin will essentially bridge the gap.

18:14So it'll connect WordPress with Clod. So it connects them together and it imports the websites. And here is the website you'll need to go to.

18:21Now it is a free website. It's free plugin. It does not cost you anything whatsoever.

18:25You can upgrade, but what this does here is that this connects your website with Claude, and it also teaches the AI about Elementor to make sure you have a really smooth transition. So here, I'll go ahead and click on download ZIP, and we're now going to upload that plugin.

18:40So here we go. Add plugin. Upload plugin.

18:44Choose the file. Okay. And then under the downloads, here we go.

18:50Here we have NovaMira. So this is the plug in. Just go ahead and open that, and click on install now.

18:59Alright. Cool. Then I'll click on activate plugin.

19:01So these are all the plugins that we need in order to start the import process. Now there's one last thing that we need to do, and that's adjusting the Elementor options. So before we import the website, we need to make some tweaks in the Elementor settings.

19:14So going to Elementor under the settings over here, the first thing I wanna do is I wanna disable the Atomic Editor. Now this is relatively a new experimental tool that they've introduced.

19:25Essentially, it's for developers. Now if you do like to use the atomic elements in your developer, you can leave this on, and the AI will understand how to use them. But in this case, for most people, I wanna deactivate it.

19:35So here, I'll click on deactivates. Click on I've read and understood, and deactivate the atomic editor. Okay.

19:42Now, also, the next thing I wanna do is go over here to features, and I wanna turn one option on. So going to features, scrolling down, you're gonna see this option for container. Now Cloud will actually utilize Elementor's old widgets called intersections.

19:56That is a depreciated way of building your websites. And today, we use the flex box. So for the container, you wanna make sure that you select active.

20:04By selecting the container, you're gonna force Claude to use the Flexbox and not the intersections, which is a depreciated method of building websites. So make sure that you select container active, and then scroll to the bottom and click on save changes.

20:18Now just to make sure that the WordPress process works perfectly, I do recommend to install Node. Js. Now sometimes when using Cloud, it's gonna build bits and parts of your website in React and not HTML.

20:28And if that ever happens, you're gonna get a failure notice when you try to export the website. So by having Node. Js on your system, it'll basically guarantee that your website can be exported to a live domain.

20:38Also, you're using Cloud Code, you'll probably need this as well because this displays JavaScript in local devices. So if you do use Cloud Code, you're gonna need this anyways. So, uh, once you get to this website, I'll leave it in the description.

20:49You'll just click on get Node. Js, and then just install onto your computer. Now this is really simple to install.

20:55You just click okay. Okay. Yes.

20:57Yes. Yes. And you'll be good.

20:58So I'll go ahead and just walk you through the installation process. And then all you gotta do is just install it. So here, I'll click on continue, continue, agree, install, and then here, I'll put in my password.

21:12And it's installing, and that's it. So that's all it takes.

21:15So, yeah, sometimes, Claude will actually build your projects, your website in React. And if you have Node. Js, it'll smooth out the transition process.

21:22So let's go back to WordPress. And that's it. That's all we need to do now from WordPress.

21:27Now before we go back to Claude, we need connect WordPress with Claude. So let's do that. Over here, you'll see Novamira.

21:33You'll click on configuration. And here, they're gonna give us an option to turn on AI abilities for this sites. I'll check that box and click on save settings.

21:42I'll click on okay. Alright. Next, we're going to generate an application password.

21:48So here, generate application password. Okay.

21:51Now if you scroll down, they're gonna have this prompt right here that says connect your clients. Now I've been using this plugin for a while, and this typically doesn't work well with Claude. So we're just going to make sure that we do it directly through Claude.

22:02Now here at the bottom, you're gonna see this option that says need the JSON configuration. Go ahead and click on this link, and then you're gonna see Claude desktop.

22:11Here, click on Claude desktop. And you're gonna see all this code. Don't worry.

22:15Don't panic. We're just gonna copy and paste it into, uh, Claude. So here, I'll click on copy.

22:21And now, we're gonna jump back to Okay. So going back to Claude, we need to go to these settings. So let's go over here to the, uh, let's go ahead and close this.

22:29Alright. And here at the bottom, you're gonna see your profile. You'll click on your profile and click on settings.

22:37Next, you'll click on developer. You're gonna see right here, edit config. Click on edit config.

22:45Okay. Now it's gonna automatically open up the Claude folder, and you're gonna see a file called Claude desktop config. If you're on PC, it'll just say clod desktop config, but if you're on Mac, it'll say clod desktop config JSON.

22:58This works for both OSs. Trust me. I made a whole video on this.

23:02It works just fine for both OSs. All you're gonna do is double click on this file. Okay?

23:07Now if you are on a PC, it probably opened up with Notepad. That's perfectly fine. Uh, this is just an editing program, so you can use anything to edit this, but you're gonna delete everything.

23:16So here, I'm just going to go ahead and delete all this. Alright. Make sure nothing is there, and all you're gonna do paste in that code.

23:23So here, control v, and done. So it should look just like that. And then you're gonna go to file and then save, whatever you're saving, but make sure you select save.

23:32Do not click save as. If you click save as, this will create a duplicate file. And when you open up Claude, it's going to reload the old script.

23:41So make sure that you just select save. Okay? And all we gotta do now is just close this.

23:47Okay. So I close everything, and we're gonna go back to Claude now, and we're also gonna close Claude. So you're gonna see right here, nothing is here.

23:55When we reopen it, it's going to then appear that the website's connected. So let's go ahead and right click, quits.

24:02Okay. You guys can see, uh, I'm just on my desktop chilling. Now let's reopen Claude.

24:07So I'll go ahead and open up Claude again. Okay. So Claude just reopened now.

24:11And if I go back over here and click on settings and click on developer, you're now gonna see this right here.

24:18So we can see the MCP is running. So it is now officially connected to our WordPress websites. Now going back to Claude, I'm gonna go back to the project that we were working on.

24:27Okay. So the first thing I'll do is open up the sidebar, and here is the actual websites. So the next thing we need to do is we need to convert this for WordPress.

24:35Now we're gonna convert this for the Elementor page builder. So right now, it's using HTML, but I want it to utilize the Elementor page builder and utilize the elements.

24:43So we're gonna that. Now going back to the Evernote link that I gave you all earlier, this is in the video description. So I showed you all how to prompt the actual website, but now we're going to import it.

24:54So now we're going to actually import this for WordPress. Now what I'm gonna do here is I'm gonna copy all this. Okay?

25:01And then we're gonna head back to Claude. Okay. Now I'm gonna go ahead and close all this.

25:04I don't really need all this open here, so I'm gonna go ahead and close this sidebar as well. And I'm gonna paste this message in here. Okay.

25:11So the first thing I wanna do is I wanna create a new menu for the pages created for this design. Make sure also to set the home page. I want you to take this design and convert it for the Elementor page builder for WordPress.

25:21Make sure to use the native Elementor elements and not HTML widgets. For those people who have tried to do this before, if you don't instruct Claude to utilize the elements, it's gonna just give you all these random blocks of HTML. It's gonna it's gonna be terrible.

25:34So make sure that you do use this same prompt. We have installed the NovaMirror plugin to help you understand how to use the Elementor elements better. Now NovaMirror not only connects your website, but it also teaches Claude about the elements to help it utilize the elements on your websites.

25:49Now the next prompt is for X Pro. Next, use X Pro to create the header and footer. This plugin allows you to build a custom header and footer with Elementor.

25:58Make sure to save the header and footer template in the X Pro library so I can customize them later. Now, I had had some issues with X Pro. Um, sometimes, it'll actually make it in the database, and it won't put it in the actual templates.

26:09It will still create the header for you, but it doesn't put it exactly where I want. And if that replicates, then you'll see what I'm talking Now the last step is use WP forms as the contact form for the contact page. Now one important thing here is at the bottom.

26:23You want to insert your URL for your new domain. So mine was, uh, Wilson Vegas. Right?

26:27Let's go ahead and double check. Okay. So my domain is wilsonvegas.com.

26:31I'm actually surprised nobody took that domain. So I got lucky, I guess. You know?

26:34So let's go back to Claude. Now make sure that you put HTTPS. The reason why is if you put www.com, you know, the problem is it might install into the wrong directory.

26:45So you wanna make sure that you put HTTPS so it installs the actual website onto your SSL. So once you enter in this prompts, uh, I think we're ready to go. Let's now run this prompt.

26:55So now what Claude's gonna do here is gonna take our bare bone HTML website, and it's gonna convert it for the Elementor page builder for WordPress. Now one thing also on your very first attempt, it's going to ask you for permission. So make sure that you do click always allow.

27:09Now Claude also acknowledged that NovaMirror is installed with full access, this is good because now they can understand our website better. They also want to execute more abilities, so just make sure that you select always allow. Now, note here.

27:22Now, in this specific case of using this prompt, it actually said, you know what? Uh, which one should we pick? All I did was instruct it to do the same instructions, and I just added, have the NovaMirror plug in help you.

27:34And after that, it's like, oh, wait. Yeah. I understand the plug in helps us.

27:37So sometimes Cloud doesn't understand that NovaMirror can teach the AI how to use the elements. So if that ever happens to you, just go ahead and repeat the actual prompt and just tell it to use a NovaMirror plug in to help you.

27:49Uh, this only happened to me probably once out of 10 times using this prompt. So it may happen to some people, but, uh, I realize when prompting, some people may get different results from one another. Alright.

28:00And after waiting about I'd say waited about a solid twelve minutes, it now finished the websites. So you're gonna see that, uh, it actually built it through the native Elementor elements. Uh, you'll see that, uh, you know, it was working on it.

28:13And then it gave me some heads up saying, hey. Some parts didn't really work out too much. You might wanna touch it up and fix it.

28:18But let's just take a look here and see what they have done. And here we go. So we got our AI websites.

28:25Now it's not perfect, but, uh, we're gonna make some tweaks and we're gonna make this look amazing. Now our header's missing, and that's a very common problem, and I'll walk you through how to fix that. Now scrolling down, you'll see that, uh, there's some minor things that we need to do.

28:37Now what I noticed about Claude is Claude doesn't know how to properly wrap elements, and it's literally one option in the flex box setting, and I'll show you how to fix it in just a bit. Here, you'll see that this section looks good except for this part.

28:49No problem. Scrolling down. Same issue is that we just need to take off the wrap.

28:55And scrolling down here, you can see that the, uh, content is down here, and that's because we just need to adjust the flex box. And here we have a call to action, and we have no footer at the bottom. No problem.

29:06So, uh, let's go ahead and first address some of the issues such as the header and the footer. Now let's go over here to X Pro, and you're gonna see that we have the footer, and then we also have a header.

29:17Now what this plugin does is it allows us to design our custom header and footer, uh, right, you know, right from the front end. So for the header, I'll click on the pencil icon. And it's not displaying, but, uh, I think here it's set to draft.

29:32I think that's why. So first, let's click on Elementor, and let's just see what it built us. Okay.

29:37So you can see that it did build the header. Right? And we need to publish this.

29:41So I'll click on publish. Now, again, this might not happen for you. Uh, sometimes, it doesn't apply it.

29:46Sometimes, uh, it may put it as draft. It really depends on the AI, but we can see that it is working. We just need to apply it to the website.

29:54So we did publish it. Uh, let's go back to our website, and let's just refresh the page here and see if this is working. And it's still not working.

30:02No problem. We can have Claude fix it for us. Now let's actually see if the footer's working.

30:06So over here, we have the footer, and I also wanna click on the pencil icon for the footer. And same thing.

30:13So we can see display on. I wanna put entire websites, and then I will click on updates.

30:20Okay. And let's just go ahead and see if this works out for us. So I'll refresh the page.

30:25And, no, it did not work. So now let's just instruct Claude to fix this for us. This may happen to you, so no problem.

30:31We'll go back to Claude. So I'm just gonna ask you to fix this for me. So the header and footer are not displaying on the website with the X Pro plugin.

30:37Can you debug the footer and header and make sure they display? And also make sure the templates are available in the library. So here, I'll run this prompt.

30:45Alright. So when I run that prompt, you can see that Claude understands the errors and it can self correct. So it says, now I see the real problem.

30:52It doesn't post because of post meta or whatever. They go through here, they find the bug, and they can fix things. That's the beauty of using Claude.

30:59Let's go ahead and go back to our website. And now, I can refresh the page here. So let's just hope this works.

31:05Ah, there it is. There is our header. Beautiful.

31:08Beautiful. Let's go down here to our footer. Alright.

31:12Our footer as well. We just gotta make a quick fix, but no problem. Now, let me explain to you how, uh, Claude works with Elementor.

31:20So I'll go ahead and turn on the Elementor page builder. Now, first thing I wanna do is I wanna adjust this. So notice here how this is way too you know, it's it's close to the bottom and there's like no there's all this space up here.

31:30So we can utilize the flex box. So here, I'm gonna select center. And what that does is that realigns it so it's not so like down.

31:38It moves it up as you can tell. Now on the right side, there's several things that we can do here. We can either replace this image.

31:45We can put one right here in the back of the flex box. So let's do that. So what I can do is I went to unsplash.com, and I wanna upload this as my background.

31:53So this is like a quick hack. So you can actually apply this to the entire background. So over here, image, I'll upload this file I got from unsplash.

32:02Now also one thing to note is these, uh, images on your website, they are not stored in your library. So they're being pulled from a URL. So you'll probably have to update your images, but, you know, that's gonna be the case for most of them.

32:14Uh, I'm gonna go ahead now and get rid of this image, and I will then go ahead and maybe just adjust this to, like, cover. So over here, I'll just put cover.

32:25Alright. And it looks like that. And then, obviously, this one, I can either delete it or I can use it later.

32:30But in this case, I can just maybe delete it. And the next thing I can do here is scrolling down, you're gonna see this a lot, and that's just because they have wrap on. So all I gotta do is click on the flex box and then just select no wrap.

32:42So you may come across elements that have that on, and you can just take it off. Scrolling down, you'll see the section looks great. And if I click on the elements, you're gonna see it's actually using the Elementor elements.

32:53Yeah. This looks good. You know, everything looks good.

32:56Scrolling down. You're gonna see that we have that same problem here. So, essentially, I'm just gonna put no wrap.

33:01Alright. So no wrap. And here we have our columns.

33:05And the same thing down here as well. We probably just need to take off the wrap section, and it'll look just like that. So it looks really clean, really nice.

33:13And this part here as well, so this is obviously wrapping it. So just going to take off the wrap, and it looks just like that. Scrolling down, we have our footer here.

33:23And I think also the footer has that same wrapping problem, so we can go ahead and fix that as well. So you're just gonna go throughout your website and make any changes you want. It looks like in my specific case, it looks like it's utilizing all the buttons.

33:35I haven't found an HTML widget yet. I think we probably can find one. Usually, does make them oh, there it is.

33:40There's one. Okay. So, yeah, it might do this sometimes where if Cloud doesn't know how to actually implement the elements, it's just gonna create its own HTML widget, and it's just gonna place the code to replicate that same design.

33:52So, uh, yeah, you'll just probably go ahead and delete these and then just put a testimonial one or a profile just to update that and fix that. So so I think for this one, we could put, like, testimonial. Right?

34:03Testimonial. And then, obviously, you'll just go ahead and rebuild this to replicate this exact design. And then for this section, I just want to use the flex box, and I want to make sure it looks like that.

34:13So I just don't want it to wrap all the way, and I'll click on publish. So as you can see, you can easily utilize a website using Cloud AI. Now I'll go ahead and leave this website in the video description just in case you guys wanna check it out.

34:25But as of right now, we've made an AI website. Congrats. Alright, party people.

34:28Well, congrats on your AI websites. Now I'll be having more follow-up tutorials about how to use Clod. There are other several ways on how to integrate Clod, but I felt like this one was the most optimal and quickest for people to set up their AI websites.

34:40Do you have any questions for me about Quad or WordPress or whatever? Just let me know in the comments below. Until then, I will see all of you party people in the next video.

34:48Take care.

The Hook

The bait, then the rug-pull.

The parenthetical in the title is doing real work. Every AI website tutorial promises to cut hours of effort -- this one reconfigures the workflow: Claude generates the design once, and WordPress takes it from there.

Frameworks