Elementor MCP is FINALLY Here — Build WordPress Websites With AI

0:00 This entire WordPress website was created with the new Elementor MCP and also this one here. I simply entered a prompt and it generated this amazing websites. We have unique designs, images with animations and the whole package. Plus, it looks good on all devices. I've been using the Elementor MCP all day and you would be really surprised on the kinds of websites you can make. They really push the limits of web design. And here's the important part. This isn't a screenshot and it isn't a bunch of code pasted into an HTML widget. Codex built this using real elementor containers headings buttons images and even the widgets. I can still open Elementor and visually edit everything myself. And if I don't like the results, I can create another version or start over with a completely different design. What is up party people? My name is

0:45 Daryl, and in this video, I'll be showing you how to set up the new Elementor MCP so you can build amazing looking WordPress websites. First, we'll get started by getting web hosting. Install WordPress and Elementor. We'll then download codecs and then connect it to our WordPress website using the new Elementor MCP and then we'll generate a website from a single prompt. I'll also explain the difference between Elementor's MCP and Nova and also other MCPs because they sound similar but they do provide different types of access. So by the end of this video you'll have a complete WordPress website that was built with the new Elementor MCP. Now before I begin let me quickly explain how everything works together. First we have WordPress. WordPress manages and hosts our website's content. Next we have Elementor. Elementor is the visual page builder we'll use to create the actual design. And then we have Codex.

1:31 Codex is the AI agent that understands our instructions and performs the work. Finally, we have the Elementor MCP. The MCP creates the connection between Codeex and our WordPress websites. Codex is the brain. MCP is the bridge and Elementor is the building system. Once everything is connected, we can describe a website in normal language and let Codex build it directly inside Elementor. Now, if you already have web hosting and WordPress set up, go ahead and skip ahead and check out the website I made. I have timestamps in the video description. But if you're new to WordPress, let's install WordPress onto a web host. And I do recommend Hostinger. They're fast, they're reliable, and also they're really affordable. Now, once Hosting is ready, we can install WordPress and then access our WordPress dashboard. And then from there, we can install Elementor and integrate the new MCP. So, this is hostinger.com. And I'll put a link to

2:17 Hostinger in the video description. The first thing you'll do when you get to this page, you'll click on get started. It'll then scroll down and then here you can select the plan. Now, in all my videos, I definitely recommend the unlimited plan. This allows you to host unlimited websites and you get access to NVME storage, which is much faster than typical SSD. You'll also get an automatic 10% off any of these hosting packages if you use our link in the video description. So, for this video, I recommend selecting the unlimited plan. So, go ahead and click on choose plan for the unlimited plan. Next is the cart page. On the left side, you can select a period of how long you want to sign up for web hosting. I recommend signing up for at least 12 months. This will qualify you for a free domain and the coupon code will give you an additional discount. I don't recommend 1 month because you'll have to pay extra for your domain and you also don't get the

3:03 discount. If you use our link in the description, you'll see a coupon code automatically applied. And you can always use our coupon code daryl 10 and this will give you 10% off any of the hosting packages at hostinger.com, even the VPS or the agent hosting. After you select your period, you'll then click on continue. On this page, you'll go ahead and fill out your billing details. You can then choose to pay with credit card or PayPal, and then you'll check out and purchase your hosting package. After you sign up with hosting, it'll then prompt you to create a website. Go ahead and click on create a website. It'll then ask you which platform you want to build with. Go ahead and select WordPress. Now, one thing to note, this page changes a lot. So, if you don't see the exact setup I see, don't worry about it. Hostinger changes this quite often. Just go ahead and find WordPress and install it. After you select WordPress, it'll

3:49 prompt you to make your WordPress login credentials. These are important because you'll need these in order to log into WordPress. So, make sure that you write this down. After you enter in your WordPress credentials, go ahead and click on the option build from scratch. Next, it may prompt you to register your domain. Go ahead and fill out your information and register your domain. This is important if you ever want to sell or transfer your domain. On the next page, it may prompt you to select a location. Go ahead and select the location closest to you or where you're doing business. In my specific case, I'm going to select Arizona. And then once I select my area, I'll then click on next. Now, Hostinger is installing WordPress onto your domain. And this process just might take like 20 seconds. And just like that, WordPress is now installed onto our new websites. Now, there's a few things we have to do. The very first thing that we have to do is verify your email and also verify our domain. So, go

4:36 ahead and check your email. In the email that you use to sign up for, you're going to see two emails from Hostinger. One verifying your account and the other to verify your domain. You need to click on both links. So right here, I'll click on verify your email address and then click on confirm email. Okay, great. So now we verified our hosting account. Now let's go back and verify our domain. So going back to my email right here, I will now click on the verify your email address and then I'll verify the email. Perfect. Now we verified our domain. So click on continue to home. Next, let me show you how to log into your new website. So, if we go back to our current website, you might notice here that we're using a temporary domain. Let me show you how to log in to your real websites. The first thing that you'll want to do is enter in your domain name. So, here I'll put in daryli.com.

5:22 And then you'll see that we have this website here where nothing's on it. Now, we just need to log in. So, at the end of your domain, go ahead and type in-wp-admin and then press enter. It'll now take you to a WordPress login screen. And here you'll enter in your credentials. If you forgot your credentials, don't worry. I'll show you a second method on how to log into your WordPress websites. So, right here, I'll go ahead and fill out my email address and my password. After you enter in your credentials, you'll then click on login. And boom, we are now logged into WordPress using our new custom domain. Now, if you forgot your password or if you didn't write it down, no problem. We can log in through the Hostinger H panel. Let's go back over here to Hostinger. And over here, you'll see websites. And under the website right here, if you click on WP-admin,

6:07 this will log you directly into your WordPress dashboard. So go ahead and click on WP admin. Now, since this is a new installation of WordPress, it's recommending the actual onboarding process, but we can just skip this. So here at the bottom, I'll click on go to WordPress admin. And voila, we are right back to WordPress, and we're logged in. Now that WordPress is installed, we'll add Elementor and an Elementor compatible theme. The theme provides the website's foundation, while Elemener lets us visually design every page. We'll then install Elemener's MCP and connect it directly to Codeex. This connection allows Codex to build and edit real Elementor pages, upload images, add custom CSS, and manage parts of WordPress that we authorize. Once everything is connected, we can describe the website we want and let Codex begin building it. So, now that we have WordPress installed, let's go over here

6:54 to the plugins and click on installed plugins. Now, real quick, when you install Hostinger, they do install a bunch of plugins on your website. And I do recommend to disable all these plugins because the notices are going to get really annoying. So, I do recommend to disable all these plugins. So, here we'll click on the plugins. We'll click on deactivates. Click on apply. And then we'll delete the plugins. So, I'll go ahead and select all the plugins and then select deletes. Click on apply and okay. Next, let me show you how to download Elementor and also how to get the MPC access. So, up here, I'll click on add plugin and under search plugins, we're going to type in Elementor. Elementor is the page builder that's going to build everything out on our WordPress website using the AI. So, once you see the Elemener page

7:41 builder right here, you'll click on install now and then we'll click on activate. Now, it may prompt you with a setup wizard and I just want to go ahead and skip all this. to do that up here. I'm just going to remove all this and just relog back into WordPress. And there we go. So, we just skip the entire onboarding process. Now, let's go ahead and adjust the WordPress theme. So, over here under appearance, let's click on themes. Now, when using the Elementor AI, the WordPress theme really doesn't matter too much. You can really pick between any of these WordPress themes, but I do recommend to pick a WordPress theme that allows you to adjust your header and footer of your websites. So, over here under search themes, let's type in Solace. So here is the WordPress theme I recommend. Solus allows you to custom build a header and footer of your websites while the AI can build all the content inside your

8:27 websites. So when you see the Solus theme, go ahead and click on install and then you'll click on activate. Now you can also install the starter companion plugin. So over here just click on install starter templates. Okay, perfect. So now that we have solace theme installed, now let's head over to Elementor and turn on the MCP. So once you activate Solace, let's go over here to Elementor. And before we go to the MCP, let's go over and click on settings. Now, one thing I should mention over here, let's click on the atomic editor. Now, the Solace theme automatically disables atomic editor by default. Personally, I don't think it's ready yet for live production websites. If you do want to use the atomic editor, you can always try a different theme like the Hello Elementor theme or Astra, but for now, Solace disables it automatically. Now, the next thing we're going to check is the features tab. Then, we'll scroll down and you're going

9:12 to see an option called container. Now, sometimes the AI might actually still use the old intersections, believe it or not, and I want to prevent that. So, I want to make sure the container is active. So, here I'll make sure this is active and then click on save changes. Now, on the left side, you're going to see an option right here under submissions called Elemener MCP. Let's click on this tab. And the first thing I want to do is enable MCP access. Now, you can connect your favorite AI agent. You can connect cloud code, cloud desktop, codeex, and also cursor. However, out of all these agents as of right now making this video, I do believe Codex is the strongest. The new Astro model for Codex not only provides really good websites, but it makes really nice images. If you haven't tried Codex yet, it's really simple and I'll walk you through how to set it up. Next, let's download Codex. This is available through the ChateBT desktop application.

9:59 I'll leave the official download link below this video. Now, you can try Codex using a free Chatbt account. However, the free plan does not include the new Astro model, which is crazy good. Now, for this exact workflow, you'll need at least the ChachiBebt Plus plan. At the time of this recording, the Plus plan costs about $20. Plus gives you access to the new Astro model and also gives you built-in image generation features. This is one of the main reasons why we're using codecs. There is a pro plan with much higher usage limits, but most beginners don't need it. I recommend starting with Plus. And just remember, you can cancel your subscription at any time. So, this is Codeex, also referred to as Chat TBT. Now, in the new Astro version, this model can make amazing looking websites like I showed you all earlier. So, when you get to this page, just go ahead and click on a download.

10:45 So, now you'll go ahead and go through the installation process. And once you're done, I'll meet you in Codeex. Now, once you sign in and make an account, it'll take you to the desktop application. Now, real quick, right here, you'll see that I have my previous work. So, here I'll go ahead and open up this website. And this website was also made with Codeex. And here you'll see that we have this coffee pouring. And I have another video showing you how to make this. And I'll link that video in the video description just in case you want to check it out. Now, you might be asking me, why are you not using Claude? Well, both Codex and Claude can connect to WordPress through MCPS. And I use both of them. However, for this tutorial, I'm using Codex because I think it provides a much better website building experience out of the box. And the new Astra version is actually crazy good. Codeex out of the box can build you a responsive website. With Cloud Code, image generation normally requires

11:31 a separate tool or process. You might have to find your own images, download them, or you might have to incorporate Higsfield and pay another subscription just for images. I've also found that Codex is more reliable when it comes to responsive design. Cloud can create really excellent websites, but sometimes its first attempt doesn't look right on tablet or mobile device. In my testing, Codex usually produces a more responsive website on the very first attempt. That doesn't mean Claude is bad. It's extremely powerful for WordPress development and custom coding. I simply think Codeex is easier for beginners. It's also more reliable for responsive websites and it's just more of the complete package because of the image generation capabilities. So once you install Codex and go through the registration process, it'll bring you to this desktop app right here. Now the first thing I want to talk about is the actual pricing. Now Codex is completely

12:18 free. However, the Astra version is actually in the pro plan. So let me go and explain how this works. Let's go over here to the settings and then I'll click on usage and billing and then under the plan I'll click on view plans. Now you can use the Elementor MCP with the free version of Chat GBT. However, if you want access to the most advanced models such as Astra, you'll need to upgrade to at least the plus plan. The plus plan also has advanced image creation, deep research, and it'll just give you better results in the free version. I'd recommend to just try out the plus plan just for one month. Build your website, see how it works, and then just go from there. You can always cancel at any time. I'm currently on the plus plan, so I'm going to use Astra for this video. So, after you select the plan that works best for you, let's hop back over to WordPress and then integrate Codex with WordPress. So,

13:04 Codex is installed and ready to go, but it still cannot access our WordPress website. To give it access, we need something called an MCP. An MCP stands for a model context protocol, but you don't need to memorize that. The easiest way to understand MCP is to think of it as a bridge between an AI agent and another application. Now, a lot of you probably have heard of Novamira. Elementor's MCP and Novameir both connect an AI agent to WordPress, but they provide different types of access. Elemen's MCP gives codec structured tools for creating and managing Elementor pages. Nova Mirror provides broader developer level access to WordPress. It can work with PHP files, the WordPress database, plugins, themes, and other parts of the website. The simple explanation is this. The Elementor MCP is giving Codeex a toolbox filled with Elementor and WordPress

13:50 tools. Novamira is closer to giving Codeex the keys to the entire workshop. However, I would personally say the Elemener MCP does build better websites than AI than Novamera. For a beginner who primarily wants to build editable Elementor pages, the Elementor MCP is a simpler place to start. Now that you understand what the connection does, we can install Elementor MCP and connect it to Codeex. Once the connection is added, Codex will be able to discover WordPress and Elementor tools available on our website. So going back to our website, I now want to integrate Codeex with our Elementor websites. So right here, I'll click on Codeex and then click on generate setup prompt. Now the first thing I want to do is just go ahead and copy this and let's head back over to Codeex. Now under the search box, I now

14:35 want to ask Codeex to connect WordPress with Codeex. So here I typed in I want to connect Codex with the Elementor MCP. And here's the prompt. And then I just pasted that prompt below it. After entering that prompt, and I'll just click on send. It may ask you for permissions. So, right here, I'll just go ahead and select allow for this conversation. Next, it'll ask you to quit and reopen Codeex to load the connection. So, let's reopen Codeex. So, after reopening Codeex, and I'll ask it if it's connected. Perfect. Now, the website is fully connected. Now, we can ask the AI to build a website directly here from Codeex. So, let's do it. The connection is ready, but we still need to tell Codex what to build. A weak prompt says something like this. Make me a nice website that forces Codeex to guess the business, audience, page structure, colors, and also the images.

15:22 A strong prompt works like a complete website brief. It explains what the business does and who the website's for. And the AI is great at writing prompts. The prompt is one of the most important parts of this workflow. The clearer the instructions, the less time and money you'll waste fixing the results. And in this section, we're going to have the AI do it for us. Now, there is an art to this. So, whatever you want to build, go ahead and type it in. But don't enter it just yet. You always want to ask AI to generate a prompt for your specific prompt. I want to build a highly creative, unique split screen effect for my real estate business website. Create a strong converting page. I want images to shift in and animate as I scroll down the page. I want this to be award style and highly creative. Awards is a website where really high-end and creative websites showcase their websites. I mainly want to use a gradient green,

16:07 blue, and white with luxury style fonts and buttons. And now here's a very important part. However, do not use CSS classes for text, buttons, and backgrounds. I need to be able to customize all parts of the website. However, you may only use CSS classes for images. CSS classes is a way for codecs to organize the actual fonts and everything, but Elementor already has its own library. Plus, if CSS classes are enabled on text, buttons, or backgrounds, you cannot edit them. So, I do not recommend to use CSS classes on all elements. However, you may use CSS classes for images. If you impose CSS classes on images, you can get those really beautiful designs that I showed you all earlier. So, let me explain CSS classes. I want to be able to edit every single part of the website, including text, background, and buttons. However,

16:54 when it comes to really fancy things like images, I don't mind codeex adding CSS to the images because I can't really customize them anyways. So, for example, here you can see that as I scroll, the images shift and I want that really beautiful design. And that is all done with CSS classes. So I do want it to apply to images but not every single element on the websites. This will make more sense a little bit later. Lastly, I want to generate a prompt for this. Now this is imperative. So basically what I want to do now is I want the AI to actually create an enhanced version of this specific prompt. So if we just enter this in, it's not going to be that good. But if we have AI enhance it, it's going to be much better. Now right here, I'll select chatbt6 Astra. And I want to go ultra baby. We're going to go all the

17:40 way to the top and after we select ultra, I'll now go ahead and run this prompt. Now, after we have this prompt, we're just going to copy and paste it. So, up here, I'll click on copy code and then we'll go ahead and paste this in the prompt section. So, here I put, I want you to build this website on my domain, daryai.com, using the Elementor MCP. And then right here, I'll rightclick and click on paste. And I'll paste in that prompt. Next, right here, I just want to make sure that uh we'll always approve this. So, here I want to put full access here. I'll click on confirm. And then over here, I want to make sure Astra is the max we can possibly go. I want to see what the thing can really do. So, after we enter this in, let's go ahead now and run this prompt. Now, it may ask you information about the actual websites. In this case,

18:26 it's asking me the agency name. Now, for this specific example, I'm just going to go ahead and skip all this and allow it to add placeholders and just demo content. So here I'll click on skip. Next, it may ask you to turn on the atomic editor. In this specific case, I don't want to use the atomic editor. So I'll just go ahead and skip on that. And then here I'm instructing it not to use the atomic editor and just use standard elementary widgets and containers. So I'll go ahead now and run this prompt. Next, it may ask you to connect to the internet. So right here, I'll click on always allow. This process can range from anywhere between 5 minutes all the way to maybe 20 minutes just depending on how complex your website is. And after waiting about 12 minutes and spending a lot of credits, we now have this design. Now the design looks amazing. You know, for an element

19:12 website, this looks fantastic. But here's the beauty of it. When I scroll down, we now have these beautiful scroll animations. The images shift and also these other images rotate. It's really hard to believe that Elementor actually built this. Here we have this really nice green gradient section with more information about our sites. Here we have some just general upsells. And then scrolling down we have our footer here at the bottom. So overall this is a fantastic looking website. Now before we get a little bit more creative like adjusting the header and adding more pages, let's now take a look at this through WordPress. So let's go back to our WordPress dashboard. And just like that, we now have this beautiful WordPress website. I love the design. So here on the right side we have this really big image uh a split screen effect. And then here we have our text. Below that, we have our button with this

19:58 hover effect. Scrolling down, we have these uh three little I guess sections here. Next, we have this text on the top and then text on the right side. And as the user scrolls down, we have this beautiful shift between images. I love this, you know. Uh so the thing is you you can't do this with native elements or elements. However, once you incorporate the CSS into images, it can pretty much do anything that you want. Scrolling down, we have this upsell section right here. We have an image and some text. And then we finish it off with a really clean footer here at the bottom with the contact form. So, let's click on this back to top and let's see exactly how they built this. So, in order to turn on the page builder for your website here at the top, you click on edit with Elementor and this will turn on the page builder. So, now we're logged into the page builder and then

20:44 from here we can edit the websites. Now, if you never used Elementor before, it's really simple. All you need to do is just go ahead and maybe just click on an elements and then you can just adjust the text right here by just typing in what you want. So, for example, I'll put a new collection and then you'll see the text changes. The style tab also allows you to change the actual topography and the color. And then the advanced tab allows you to change things like margin and padding. Now, if you want to add an element to your actual website, it's really simple. You'll just go ahead and take one of these elements and then just drag and drop it. And when you see that pink line right there, that's where the element now displays. So here you'll see that we have the button. And over here under style, if I want to change the actual color here, you can see we can just change the background color to something like black. And there you go.

21:30 And of course, you can drag and drop these pretty much anywhere you want onto the page. You can also rightclick and duplicates and also rightclick and delete. Rightclick and also delete. Now here we'll go ahead and take a look at these elements. And what we're specifically looking for is to make sure that we're not using any HTML or custom CSS. In this case right here, when I clicked on the actual text, you'll see this bracket, you know, this bracket BR. This is a very common thing that AI does and also some web designers do. This essentially forces the text to go to the next line. Now, here under style, we can go ahead and design and, you know, customize all of the font and everything. So, I just want to make sure that it's not using CSS. So here you can see that we can adjust this to pretty much any color, any style that we want.

22:16 Here we have this button with this really cool unique hover effect. And scrolling down, this part right here, it is using custom CSS. Now, if you want to change the image for this specific section, which is this image right here, all you have to do would just be to click on the image and then to change it. Now, this is a special circumstance because I'm specifically using CSS for the image. But if you want to just swap that image for your own, all you would have to do here is just go ahead and upload a file and then have it access in your media library. Okay. Now, once we activate the page builder, you'll see that the change will reflect right here. And scrolling down, if you want to adjust the text, we can see all of the text right here is working properly. Perfect. Everything looks good. Okay. Fantastic. You may

23:02 have noticed that Codex has assigned CSS classes to certain elements or elements and this is how it likes to builds and I'm not a big fan of it. In order to prevent the AI from using CSS classes, just instruct it not to. That's all. When the AI uses CSS classes, these elements become uneditable, and that's not what we want. And now we have this section here. Now, this section might look a little different than our current uh website over here. You'll see this looks a little bit more slim. However, it is actually utilizing these boxes to create these borders right here. So, here you'll see that it has these boxes and it is utilizing that to create those borders. So, that's why this looks a little bit larger, but essentially once we actually close the builder, it'll look identical to this style right here. So, it does make things, I would say, in not the most professional manner. It's a

23:48 little awkward, but you know what? The overall result works just fine. And of course, if you want to design anything right here, you can just go ahead and type it in. And there you go. Scrolling down here, we have this section here, which looks perfect. Here we have this image, text, text, text, and everything looks good. And here you can see that this is a short code. Now, the Codeex AI actually installed a plugin right here called Contact Form 7. And that's another beauty about using AI with WordPress. It can manually go ahead and install plugins directly onto your WordPress from the WordPress repository. Now, from here on out, you can fully design and customize the website using codecs. Now, if you want to create more pages, if you wanted to create a new header and footer, or if you just wanted to completely redesign everything, you

24:33 can instruct the chatbt Astro right here and it will automatically reflect on your live website. And there's also one thing I want to point out that codeex makes websites very responsive. So, here is the view on a tablet device. So when users come to your website on a tablet, this is going to be their experience. And overall, it looks amazing. Uh next, let's take a look at mobile. So next, let's take a look at mobile view. And here is our preview on a mobile view. And honestly, this looks great. Uh you can see that the CSS stops when it goes to mobile devices. And that's because you generally don't want, you know, a lot of CSS on mobile. You can instruct the codeex to add the CSS on mobile. But for mobile preview, it's just kind of not necessary because it takes a lot of

25:19 scrolling and it gets really inconvenient. But you can always add the CSS for mobile devices by just instructing codeex. Now, for example, if you wanted to create more pages for you or if you want to create a mega menu, you can instruct codeex to do everything right here. In this case, I'm asking it to create an about us page, a contact page carrying the same design. And also, I don't want them to use CSS classes on new designs. This is one thing I found that the AI likes to do that I don't like it to do, but it does it anyways. So, I'm just basically saying don't add CSS classes because if they do, then I can't edit them. Also, I do want a mega menu. So, here also add a small mega menu. And then I'll run this prompt and see what happens. Now, after running that prompt, uh nothing changed here on the

26:04 websites, but that's because the actual pages are actually not applied to the menu. So, in order to apply the pages to your menu that you create with AI, over here under appearance, you'll click on menus. And I don't even have a main menu. I could have instructed Codeex to make one, but it looks like they didn't, and that's okay. So, I'll just put main menu here. I'll create a menu. And then I'll go to view all. And then over here, I'll just go ahead and add our pages. Click on add menu. Here we go. I think we're missing the actual uh homepage here. I think uh Oh, this is the homepage. Okay, there is a homepage. All right. So, I guess I'll just change this to like home or something. About as contact. I'll make this the primary menu. And then I'll click on save menu. Now, you might have noticed here that the menu doesn't display. And that's because this is actually using Elementor

26:51 Elements and it's not really using a proper header and footer builder. Now, there's two options and I'll show you both, but then I'll recommend the official way. So, here I'll go ahead and turn on edit with Elementor and I'll turn on the page builder. Now, Solless does have a specific nav menu element. So if you type in menu right here and you take the nav menu, we can actually drag and drop this and this uses the element elements. Now here you can see you can select the main menu, right? And then for the style you can go ahead and adjust the text color to black. And then there you go. We have our menu right here. And then we can just go ahead and delete these cuz these are no longer appropriate. Now these will actually link to every single page. But the problem is that if you click on one of these pages, it's going to revert back to the old menu because this is just a temporary menu for the homepage. So to

27:38 give you an example here, you'll see that we can actually click on the about us page. If you want to use that menu on every specific page, you'll need to go ahead and apply it to every single page. But real quick, let's just take a look at this about us page. And as you can see, this looks really, really good. I do like it. Here is the actual contact us page as well. And then voila, we have this beautiful contact page. And I mean, I love the designs. Really, really good. I mean, Codex does a really good job of making websites. Now, also here we have this explore. I did type in earlier about a mega menu. And it looks like they just added it right here with this section. So, that's pretty cool. You know, I I do like that we've now gone from a blank WordPress installation to a complete Elementor website built with Codeex. Make sure you test out

28:23 everything on your website and make sure everything's working properly. After that, hit publish and you're good. Now, if you want to create a custom header and footer on your website, you'll need to do that with the Solace theme customizer. So, up here, you'll click on customize. Now, this is the Solace header and footer builder. And right here, I'll click on header builder. And here, I'll click on manage site builder. And now, it brings us to the solite builder. And then from here, we can build out a custom header using Elementor. So, here I'll click on build now. And then I'll just go ahead and select entire websites. And then I'll click on save and add template. And then from here you can build out a custom header with solids. So for example, you can go ahead and click on the plus and then just make like a section here where you add a nav menu and then there's your menu, right? And then of course you can design the colors right here like the

29:10 background. So for example, here we can adjust the background color and then you can visually create a menu and it'll apply on all pages of your websites. However, there is a really cool alternative. You can also just grab this one and save it and then add this one instead. Let me show you what I'm talking about. Right here under the six dots, I'll rightclick and then I'll go over here and I'll click on save as template. Let's say, for example, they made a really cool menu for you. And you want to use that on other parts of the websites. Here I'll put main menu and then click on save. And then I'll simply click on the folder right here and then go to templates. And then here is the main menu. And I'll just insert it. And then here is our new menu. Really cool. Right now, I do want to fix this a little bit. So here I'll add a site logo. And then I will get rid of that. I

29:58 do like this section, but you know what? It's just too big. So I'm just going to get rid of it. And then there you go. This is going to be our new header for the entire website. So over here, I'll click on publish. And now you'll see that we have this beautiful header here on our websites. And if we click on other pages, you'll also notice that the menu carries across the entire websites. So here we have the about us page. And then lastly, we have this contact us page, which looks really nice. So that's how you can make an element website using the new Codex Astro version. Now, every single video I say this AI is getting better and better and better. And if you're still designing websites from scratch, like using like Figma, you know, doing it from scratch, that is a very outdated model. Like this model is just so much more efficient. You can create websites much faster. If you're

30:43 going to ask me which one would I use, Claude or Codeex? I think right now I'm leading to Codex. The problem with Codeex is that it's just too damn expensive. Like during this video, I actually burned my budget like maybe twice. So yeah, I did maximize my use of Codeex, but at the same time, I think it's a little bit too expensive. Also, if you do want to learn more about Elementor, I have a complete Elementor tutorial in the video description that you can go ahead and check out. Also, if your contact form is not working, that is totally normal. I have a video in the description that I'll walk you through how to set up an SMTP completely for free. So, I hope you all enjoyed this video. Let me know if you have any questions. My name is Daryl Wilson and I will see all of you party people later. Take care.