so you want to create a modern-looking website for your business. But if you're trying this by yourself, it could take you a lot of time since you need to be a designer, a developer, and a copywriter at the same time. So, the end result could be very different from your expectations. And unless you want to share thousands of dollars in custom development, this is the video you want to watch because today I will show you how to build a beautiful and modern-looking website with the power of AI, with zwp, and in just a few minutes. Oh, and did I mention it's free? You don't believe me? Then I challenge you to try by following along. Hello, I'm K from the Astro team, and today I'll show you how to create a modern-looking website in no time with zwp. So, in this tutorial, we're going to build a website for the fictional brand zstorm. Zip storm is a franchise, and it's all about Bubble tea, as you can see here on screen. So, we have our homepage presenting the franchise, the bubble tea.

and you know about homepages. It's like a mix of the rest of the website that makes the user want to stay. Next, we have our concept page, and on this page, we are presenting the concept of zstorm, as the name suggests. Next, we have our menu page, where we present the different types of bubble tea creations. Next, the about page, which, as the name hints, talks about the zstorm company and what it stands for. And finally, the contact page, which, once again, as the name suggests, helps users get in touch with the zstorm company. Now, there is also a call to action in the navigation that takes the user straight to our menu page. Now, the menu page is already available here in the navigation, but the reason why we have a call to action is because it stands out. So basically, if people are just going to scan the page, the call to action button is going to stand out. Now, of course, in a real-life scenario, you could have more pages and redirect to a specific page where the user would take action, but this is just a tutorial, and

this video is going to be long enough. Now, if you go back to the homepage, as you can see, the text was created by the AI. So basically, all we have to do is just input a little description, and the AI did all the rest. So for example, here you see three paragraphs, and all of these, as well as the titles, were created by the AI. Same for this text and for actually all the text on this website. Next, Y zwp, and what is zip WP? According to an article from Forbes advisor, website creation takes approximately 10 to 14 weeks from ideation to completion, and that is spread between planning, content creation, website design, and testing and review phases. And you may think this is overkill, but actually, it's not. Because how many pages do you need, in which order, which type of content, how much content do you need, and then what about the design, what about the technology that has to be used for that website? Now, I may say, Yeah, but with WordPress, it goes faster. True, but still, you might be looking for hours, or if not,

days or weeks for the Perfect theme, and then you still haven't answered those questions: how many pages, where do you get the images, and are you a copywriter? I mean, if you are, I mean good for you, but most people are not, and we all know copyrighting is crucial for the success of your website. And this is why zwp was created, because basically with zwp, you're just going to input a little description of your business and let the AI do its magic. The number of pages, the design, even the images, and the copyrighting—good copyrighting, and that's crucial. And like I told you, you get all of these for free. Now we see later there are some other plans, premium plans, if you need more bells and whistles, but what you get with the free plan is already amazing. You get instant WordPress websites, you can generate three AI sites per month. Now you don't get permanent sites, and that's a feature for the premium plans, which means that your sites expire in 24 hours, but that's plenty of time for you to export the

website keep a copy and upload it to your own web hosting, and I will show you how to do that later in this video. Now, to achieve the creation of complete websites in just a few minutes, zwp uses several tools like WordPress, the Astra WordPress theme, as well as the Spectra visual website builder, combined with the power of AI. Now, I won't go into too much detail in this video, but if you're interested to know where zwp fits in the ecosystem of brainstorm Force products, make sure you take a look at this video appearing on screen right now. Next, signing up and creating your first website with zwp. So, first of all, you want to head to zwp.com, then you want to click on sign up for free, and here you can either sign up with email or with your Google account. I'm going to sign up with my Google account, select your accounts, and if you're not logged into your Google account, you'll be prompted to do so. Next, choose your plan, and in this case, we're going to

select the free plan, and if you need a quick reminder, you can watch this video popping up on screen as soon as you're logged in. And that's about it; you're signed up to zwp, and you're ready to build your first zwp website. And first, let's take a look at the interface. So currently, we are in the dashboard, many information here like the number of sites, the disk space available, and here we have the training and help. In case you need help, you can just visit the training center. Next, we have all Sites as well as projects because you can combine several sites into a project. So if I go to Project, I can create a new project, and then I can assign the new websites to this project. Next, I can create a blank site or build a complete site, and in the future, there will be design custom site. Now you can create a blank site if you know exactly what to do; you already have all your content. But in this tutorial, I'm going to show you the power of zwp with the build complete site feature. So

next here we see the plan we're on. We're on the free plan, and here on top, we can click on usage if you want to see the current usage of our zwp current plan. Then we have our Avatar, and if you click on our Avatar, we can access our account and manage our subscription. So let's start and create our first zwp website. So here, let's click on create new, then complete website, and we're going to choose restaurant, then click on continue. Next, let's enter the name, in this case, zstorm, and click on continue. And on this next screen, is where we're going to tell zwp all about our business. And as it says, please be as descriptive as you can. Share details such as brief about the restaurant, specialty menu, etc. In our case, it's a bubble tea place, so I got this description: Zstorm is a bubble tea franchise initially created in Miami, Florida, but now established internationally. Next, click on improve using AI and let zwp do its magic. So as you can see, out of a simple short

sentence the AI created all this description that's going to help for the rest of the website. So, next, click on continue. And here, as you can see, the AI pre-selected a keyword, which is bubble T, but it also came with other suggestions such as flavors, toppings, and so on. Now, you can add your own, and as you can see here, the AI pre-selected 20 images. Now, you can scroll, and you can deselect an image or reselect it. You can add more images, and you can just go through all the images and select the ones you think are going to fit within your websites and that can match your brand. Once you're happy with it, click on continue. And next, provide the contact information, then click on continue. And next, we're going to choose the structure for the website. Now, here it says we can find any templates that match the keyword bubble tea, but for example, if I click on restaurant, as you're going to see, it's going to come with recommended designs, and it would put the recommendations first. So, we have this design, this one, and as

you can see as I hover over the image. It just Scrolls and shows me what's inside the design, which is very convenient. Now, in this case, I'm just going to go back to clicking on bubble T, and even if there isn't any template that matches the keyword, actually like that one. So, as you can see, I'm hovering over it. You can see the content, and this is the one I want. So, I'm just going to click on it, and then click on continue, and next click on start building the website, and then sit back, relax, and enjoy the short flight. And congratulations, your website is ready, and here in the middle, you'll find your login credential. So, you may want to copy this information in a safe place. All you need to do is click on the copy button next, customizing the identity. So, you can either use your login credentials that you copied in the previous segment of this video, or you can just click on customize website if you're still on the screen. So, I'm going to click on customize website, and from here, we can

really make our website match our brand. So, first of all, where it says show the title, I'm going to untick the option. And next, I'm going to add my logo. I can either drag and drop it here on this window or click on upload a file, then click on select files. And I'm actually going to add all the files for the project in one go, so I'm just going to hold the shift key on my keyboard and click on the last file, so all files are selected. Then I click on open. All right, so all our files are uploaded. I'm going to select this one here, click on select, and there you go. Here is my logo right here. So, I'm just going to change the size, make it 160. And next, I'm going to select my color palette. So, I'm going to choose this one because it really matches the Seep Storm brand. And by the way, to make things easier, I'm using a brand guide as a reference. And if you're interested in creating a stunning logo for free and get this

brand guide for free. Make sure you take a look at this video, but of course, only once you're done with this current video. Now, at this stage, you only choose the color palette, but as I will show you later, you can actually change the colors one by one if you want to do so. So next, we have our font pair, and once again, we can change it here, or we can change it from the customizer, which I'm going to show you next. So first of all, let's click on Save, and once you save, you land on this page. And as you can see in the upper part of this window, you see the admin bar. So from here, you can click on Customize. But maybe you're not there, maybe you're on the dashboard. So let me show you. I'm going to hover over the name of the website, then click on Dashboard. Well, from here, all you have to do is go to Astra C Customize. And once in the customizer, I can either hover over elements and click on the pencil icon, or I can use the left-hand

navigation. So, for example, let me click on header builder, then side title and logo. And as you can see, I can change the logo from here. And by the way, let's scroll down and you will see at the bottom side icon. So, let me click on that, click on select side icon. Now, I can either choose from the media library or click on the upload files tab and select files or drag and drop those files here. But as you saw previously, I uploaded all the files for this project in one go. So, I'm just going to click on this image, click on select, and now this is what the users will see in the browser tabs. All right, let's go back. Now, let's click on global, and here from colors, I can actually change the color. So, this is my chosen palette. But let's say I wanted to change this color. Now, let me first copy it so I can always revert back. And let's say, oh, I wanted to change it to this color. As you can see, in just one click, it changed the colors in all of

the website. If I scroll, you can see this color has been replaced everywhere. Now, this color really doesn't match our brand, so I'm going to put it back to what it was. So, let me paste the code again, and we're back. But as you can see, it's pretty easy. This is a global palette, and once you change colors, they're going to change everywhere that color has been used. Now, right below, we have the theme color selection. So, this is going to be using our global colors that you see up here. So, I could choose a different color for the headings, for the body text. It's already preset, but you can always change it. Now, let's go back and let's take a look at typography. So, once again, here we can change everything, but first of all, let me publish to save our work. And now, for example, if you go to the headings font and click on the pencil icon, the font family is Outfit. Let's say I want to change it to Oswald. As you can see, the changes are

reflected right away, and all of our titles from H1 to H6 have changed to the new font. Now let me put it back to outfit, and once again let's click on publish to save our work. But you get the ID. You can do the same for the body font, and actually, you can even go heading type per heading type, so H1, H2, H3, and so on. You could have a different font for each one. So let's go back, and next let me click on buttons. So first of all, let me scroll back up here so you can see it. And next, I'm going to scroll down in the left panel, and when you see border radius, I'm just going to click on the icon to make everything lean together. And I'm just going to type 90. So now, as you can see, our buttons have rounded corners. So I can scroll down, so all our buttons have rounded corners. So let me scroll back up, let me show you the difference. Used to be six, so six is like this, and now we change it to 90.

now as you can see here, there's an issue in the navigation. It doesn't seem to change, and that's because the button in the navigation has its own pretty fine style. So for that, we're going to hover over the button here in the navigation, click on the pencil icon, then go to the design tab, and let's go to where we see B radius. And let's do the same operation. So click on the link icon and then type 90. And now it's going to be 90 all around. So now we have consistency for our brand. Now we're just scratching the surface here, but if you want to know everything about Astra, make sure you take a look at these videos. But once again, only once you've done watching this video, okay? And back in the customizer, as usual, let's publish our work. But as you can see, changing the identity to match your brand is super easy. Next, editing the content. So in the previous segment, we were in the customizer, so let's click here to close that window, and we're back in the

dashboard. So, there are two ways you can access the content. Either you click, for example, here on pages, all pages, and then you hover over the page you want to edit and click on edit, or you can hover over the name of your website and click on visit site, then go to the page you want to edit, and click on edit page. Now, in my case, I want to go back to the homepage, and I want to edit the homepage, so I'm going to click on edit page in the admin bar. And let's start by editing text. So, in order to edit text, well, it's super easy. You just click where you want to edit, type your text, and you're done. Yeah, as simple as that. Now, little tip. When you click inside any block, and then you look here on the right-hand side panel, you can see the name of the block, and that can really help because one might think this is just a paragraph block, for example, but no, this is an info box block from Spectra. You can recognize those blocks because they have a blue color.

compared to the vanilla blocks from WordPress, which has a black color, but I'm digressing. So, once you've just clicked, you can change your text, and let's look at some other ones. So, here once again, it's an info block. Now, this one is a heading block, and here once again, we have an info block. So, you get the ID, just change the text, and then once you're done, just click on update, and voila. Next, customizing buttons. So, we already saw in the customizer, we have a global styling for buttons, but you can also change those individually. Now, once again, here, this is an info box block, so it's not a button block, but we could add a button block. But the idea is to show you how you can actually link to a page. So, here we are on an infobox block, and here, as you can see in the general tab, I have a call to action subtab. So, from here, I can change the link. So, this is what we call a relative link. In case you don't know, there are two ways you can link to a

page either absolute link, which means the full domain like the complete address, also known as a URL, or just the relative path to that page. So, that works when you're already on the same website and you're linking to an internal page. So, you can actually use the one you prefer. Now, there are pros and cons to each, but this is beyond the scope of this video. Now, in this case, this button will lead to the about page because this name about is actually what is called the slug of the page. So, basically, when you create a page, you give it a name, and WordPress automatically is going to create a slug. If there are several words, you will see dashes between the words. So, let me put it back to how it was. And now for the text, all you need to do is just select the text here, and you can just change the text. So, you could say about or about us. You get the idea. But once again, let me put it back to how it was. So, let me click on update to save my work. Okay, now let's try with a buttons block.

so I'm going to select my info box here, and then I'm going to click on the plus sign and start typing the button. Now, the first one is the one from the vanilla core, and the second one in blue is the one from Spectra. So, I'm going to use this one, and as you can see, put it just below. So, I'm going to go to style spacing and just unlink the margin value. I'm just going to add a little bit of top margin so we can see clearly, but don't worry about this. We're going to delete this button, but it's just to show you. So, once again, I can just click here to select the text, and I'm just going to change it to Let's go. And then, with my button selected, I click on the content subtab here. I can put the link, so either relative or absolute, and I'm going to show you how to get the absolute or how to get the slug for the relative. And if you want to know how to find these links, well, from the dashboard, just click on

pages, and then if you want the relative URL, hover over the name of the page you want to link to, click on quick edit, and here is the slug. So, in this case, the slug is about, but let's say you want the absolute URL. So, I'm going to click on cancel. Then all I need to do is hover over where it says view, right-click, and either click on copy or copy link address, depending on which browser you're using. So, in my case, I'm going to click on copy link address. And after I go back to my page, I'm going to remove the pound sign and just right-click and paste. And there you go. Here is the absolute URL. But if I needed just the relative URL, well, in this case, I would use just about, and that would be good. Now to demonstrate, let me click on update. And now if I go to the front end and refresh, as you can see, we now have the let's go button. And as I click on it, it takes us to the about page. As simple as that. Now let's go back, and I'm just

going to select my button on block, click on the three dots, and just delete next. Let me update to save my work, and next let me show you how to change images. So, there are different types of images. So, here as you can see, we have an image here in the background, but we have some text on top. So, I'm going to refer to these as background images. So, for these, if you want to change those, make sure you select the block they're in. So, if you want to be sure, click on the document overview, and we see all of our containers here. And as I click on it, it goes from container to container. So, you can see that the image spans the whole width and height of this container block. So, it's a full container. So, next, I'm going to click on style, and here it is. Here's our image. So, I can click on change image, and then I can select the image I want. In this case, I'm going to pick this one, and then click on select. So, next, I'm going to click on update now.

let me go back to the front end and refresh, and there you go, our image has changed. Okay, back in the WordPress editor, I'm going to change a few things, but first, let's make sure that our container block is selected. And then, in the right panel, I'm going to scroll down, and where it says image overlay color, I'm going to change it to our third color in our color palette. And also, I'm going to go back up, click on the general tab, and then where it says minimum height, I'm going to click on VH and make this 100. Then click on update. And now, if you go back to the front end and refresh, as you can see, it's now full screen. Now, as you can see, the possibilities are endless with Spectra, but once again, this is beyond the scope of this video. But if you want to know everything about Spectra, how to get started, and also how to play with the flexbox model for one-click change of layouts, make sure you take a look at these videos. But of course, once

you're done watching this one. Okay, back in the WordPress editor. Let's take a look at the other type of images we can edit. So, this was what I refer to as a background image, but now let's scroll down, and here we have image blocks. So, as I click on it, as you can see here in the top of the right-hand side panel, it says image, so we know it's an image block. So, for this, as you can see, as soon as you click on it, you can see the image right here. So, click on change image, and just like previously, you can either select an image here from the media library or click on upload files and upload a new file. But in my case, I'm going to go back to the media library, browse my files, and actually, I'm going to select this one. So, let's click on select, and there you go. Next, I click on update, and if I go back, let me scroll. So, this is before I hit refresh. Now, let me hit refresh, and there you go. As simple as that. So, you cannot

edit content, but how do you add a new page? Let's say you wanted to add a new page to this website. So, there are two ways. You can either start from scratch, but a much easier way is to actually copy an existing page and work from there. So, for example, here, let me click on the about page, and I'm going to click on edit page. And next, in the top right corner, I'm going to click on the three dots, and all the way at the bottom, I'm going to click on copy all blocks. Next, let me click on the WordPress logo here to go back, and then I'm going to click on add a new page. Let's call it our concept. And first of all, I'm going to click on the little I here to hide the title on the page. Then I'm going to click where it says type to choose a block. I'm going to right-click and click on paste. And there you go, it copied the whole page. Next, I'm going to click on the Astra settings because just like the

rest of the pages. I want this page to have a transparent header. So, in the options, I'm going to go to advance settings, and where it says transparent header, I'm going to click on enabled. Then click on return to post, and here let's change the title so we can differentiate between the about page and this page. And as usual, we could just change the image here, so you know the drill. Now we need to go back to this icon, which is the settings icon. Let's open the document overview, select the first container, then you know the drill. Now go to style, change image, then select an image, click on select, and there you go. Then you click on update, and now if I go back to the front end and refresh, as you will see, nothing happens, and that's for a reason. We've added a new page, but now we need to tell WordPress, Hey, there's a new page, and we need to show it in the navigation. So, that brings us to our next point, editing the navigation. So, from the dashboard, you want to go to

appearance menus, and as you can see here, we see our most recent pages, and you can see the our concept page that we just created. So, let me select that one, click on add to menu, and from here, I can just reorder the pages. So, let me put it here, and let me change offerings. Let me put it here also. Now, in the final demo, we change the label. It's not going to be offering; it's going to be our menu. So, right now, I'm going to leave it as it is and click on Save menu. And now, if you go back to the front end and refresh, as you can see, the r concept page is there, and if we click on it, there you go. So, it works as intended. So, let's go back to the home page. Now, you can see we have offerings here, and I told you we want to change it to our menu. So, back in WordPress, in the appearance menus, I'm going to click on the little arrow here next to offerings, and I'm going to change it.

to our menu. Click on Save menu. And now, if I go back and refresh, as you can see, the label has changed to our menu. Now, I told you there are two ways to do this. So, the other way would have been to go back. So, let me go back to the dashboard, then pages, and here it says offering. I hover over it, click on quick edit, and I could change the label here and the slug. But the issue with this is if you change it, then you have to make sure that every place on the website where they used to link to that previous URL is changed. And if you don't, you're going to have missing links, and it's bad for SEO or search engine optimization. So, let's keep it simple here. Now, there's one more thing we need to change because here in the navigation, if you click on the explore menu button, it actually leads to the contact page, and we want to link to the our menu page. Now, earlier on, I showed you how to link to a page with relative and absolute URLs. Here it's

even easier. We're going to use the absolute URL. We don't need to go back to the dashboard. I'm just going to right-click on our menu, click on Copy Link Address or Copy depending on your browser. Then I'm going to go and click on Customize. And here I'm going to hover over the button, click on the pencil icon, and where it says Link, I'm just going to remove everything that's in that field, right-click, and paste. And here is the absolute URL. Next, I'm going to click on Publish, and let me get out of here. And now let me go back to the homepage. And now as I click on Explore Menu, great, it's linking to our menu page as you can see highlighted in the navigation. Great, now you know how to customize the identity, how to customize content, how to add a new page, and how to edit the navigation. Now using all those techniques, I'm just going to change the content to match the SI Zone brand, and voila! I just made a few tweaks. I mostly changed the images, not all of the images.

but a lot of the images, which is obviously something you would do if you're building this for a real-life scenario, because zip WP is going to do like 80-90% of the job, and then you need to make the little changes to really tailor your brand, which is what I've done. And this is what you saw at the beginning of this video when I showed you what we're going to build. This is the final product. Next, exporting your zwp website. Now, if you're on the free zwp plan, you have 24 hours to export your website. Now, when you initially created your website, you got to this screen where you had to copy your credentials. Now, from here, you want to go to plugins, add new plugin, and next, in the search plugins field, type WP Vivid. Click on install now and activate. Next, click on backup now and just wait for the plugin to do its work. Make sure you don't close this window. Awesome, it's ready. So now we can click on download and download again and

Once your download is complete, you will get a backup of the website in the form of a zip file. So, make sure you keep that file because we will need it for the next step. Next, importing your ZWP website to your own web hosting. Now, very important, before we go any further, at this point in the video, I need to stress the fact that the technique we're going to use now is going to completely destroy all the content you have on the current website. So, either you do this on a staging or development website, or make sure you make a backup of your current website. But you cannot just import a ZWP website and keep your existing content, so keep that in mind. Now that being said, once you're ready, this is the way to do it. So, here I'm in the dashboard of a fresh new install. Actually, let's go to demo, visit site, and as you can see, this is the current website. So, this is the default WordPress website, and I didn't create any of this content. It's just basically the default website that anyone would get if they

create a WordPress website. So now, let me go back to the dashboard, go to plugins, add new plugin, and like previously in the search plugins field, I'm going to type WP Vivid. Click on install now, then click on activate. Next, I'm going to click on the upload tab, and here I can either drag and drop the file here or click on select file. So I'm going to click on select file, and here I'm going to select the zip file that was previously exported. Then click on open, and then I'm just going to click on upload. Okay, and the upload has completed. In my case, it took a couple of minutes, but it really depends on your internet speed and your web hosting. So next, you want to click on restore. Once again, before you do this, make sure you're not on your actual website with all of the content, or make sure you have a backup. Once again, I can't repeat this enough, can't stress this enough. So once you're sure it's going to wipe out everything, click on restore, then click on restore once again. Yes, I'm sure, click

okay, and let the plugin do its work. All right, restore completed successfully. Click okay. So now, of course, it's logging you out. Why? Because it's the new admin user is the one from the zwp. That's why I told you you should write down those credentials safely. Now you can log back in. And if you go back to the front end, so this is what we had. And now let me refresh. And there you go. We have a sip storm website just like it was on zwp, looking beautiful and modern. So let's check a few of the pages. Our concept, then our menu, about, and contact. Okay, let's go back to home. And as you can see, it worked. We successfully exported our zwp website and imported it to our web hosting. So as you can see, with just the free version of zwp, you can create beautiful, modern-looking websites. So what's the catch? Well, there's no catch. It's free. It's going to stay free. But if you want more bells and whistles, of course, there are some premium plans, and most of what the

premium plans do they give you more room and more flexibility. For example, you get permanent websites. So instead of the websites disappearing after 24 hours, you can have a few websites that are going to stay permanent. So you can keep them there, giving you more time. So depending on the plan, you get from 5 to 20 permanent websites. You also get from 5 to 20 GB of disk space. And you also get from 10,000 to 100,000 AI credits monthly. And if you go specifically for the business plan, you also get 10 team members that can access ZWP. You get a white label domain. So for example, if you're an agency and you don't want your clients to know that you're using ZWP, you can use your own custom domain. And basically, while you're drafting the website, you can just send them those URLs. They will never know it's ZWP. You will also get the coming soon AI Warframe Builder. And I cannot talk about it more in this video, but believe me when I say this is

something you may want to use, but that's for a future video. And you also get VIP support, so if you're interested, as usual, you find a handy link in the description of this video. So, there you have it. You now know how to create a beautiful and modern-looking website with the power of AI with zwp. So now, the question is, for which type of website are you going to use zwp? Please let us know in the comments below. [Music] oh

WordPress AI Builder ZipWP - WHY IS IT SO RIDICULOUSLY EASY?

WordPress AI Builder ZipWP - WHY IS IT SO RIDICULOUSLY EASY?