Design and lay out your landing page and website

- Now, for some people, a view-only page is not enough. So to build trust, you need a landing page to capture leads. And now, let's go further. This is exciting. You can design a $10,000 website in minutes with no code and AI. Up until now, building a website would require a designer, developers, and integration to make all your tools work together. The process could take weeks or months, but right now, with no-code tools and AI, we can do it in minutes. This is because of Relume who released their AI tool after years of creating toolkits for Webflow. Let's visit Relume. So we log into Relume, and we're now at their app page. We're going to start a new project over here on the right top. It says welcome to site builder, has a very helpful video that we don't need 'cause I'm going to walk you through, and we'll start building. I'm going to zoom in a little bit, so you can see this a little better. Now, we're going to start with site map, and this is pretty impressive. So it's just asking us what's this site map about? What's your company about? So I have a little description ready, and we're going to paste that in. We're a brand storytelling agency that helps clients grow by telling the right story at the right time with videos, design, marketing, and sales content. Okay, now, how many pages? Let's say five to 10. They do have language options. We're going to stick with English for now and generate site map. I'm going to move this to the center, so you can watch what's happening. I'm actually going to bring it down in size, so you can watch the whole thing. It just created an entire site map based on a few lines of what the company's about. So now, you have the site map, which is the different layout of your pages and how they'd all be connected. Save your homepage, about us, services, portfolio, blog, and then subpages. You have video production, design, all this from that one-sentence prompt that I entered. This is very impressive. So this is typically where your developers and designers would start. So let's zoom in on the homepage, and see what it developed for us. So you start off with the nav bar, hero section, feature list section. Now, if you click on any of these sections, you can move them around to suit your choice. Feature list, I actually wouldn't start with features. I'd probably want testimonials. That would be better right underneath. Or maybe a little bit of your first call to action. Perhaps, that goes right under the hero section, so people that want to jump right into having a call with you or downloading your lead magnet, they can do that quickly. So you can change, you can move, you can adjust for every one of these sections. Now, what we're going to do is move over to the wireframe. Now, this shows each of the pages, so we can actually see the text that it created for us for the brand storytelling company right here. We can go in, we can ask AI, we can do a rewrite. Let's do with that. Let's, you know, let's make it shorter. Empowering brands with compelling stories. Like it. Replace. There we go. Subtext, the same thing works. You have different options with buttons and start to scroll through. Transforming brands through compelling stories. There's our call to action. Client testimonials. By the way, having stars under each one of the testimonials is actually more appealing to people's eye and their sensibility, so they click on those and they appreciate those more than without the stars, the four and five stars. So you can develop each page with AI, but we are not done yet. What's really incredible is, now, you can actually share. Let's say you have collaborators, your developer, other editors that want to work on this. They can do, you know, anybody with a link can work on it. They can comment and they can edit. But more powerful, you can export this straight into Figma. So having a Figma designer on staff or as an outsourcer is hard to find. They certainly can be on the pricier side because this is a high skill, but you're actually coming to them with a design already baked in, already with a site map and a wireframe. The other thing that's extremely powerful is you can export to Webflow, straight into a web platform like a WordPress, like a Framer, et cetera. You can actually export and if you have your accounts linked, it'll work right in and build the website. You have the choice to export. You can also download as an Excel, export to text, export to CSV. Let's choose this. So I did a download of CSV, so now you can see what each area is actually saying. You can work on the text, correct the text, make it more SEO friendly, make it more human eye friendly. But this also can be sent directly to your developer. A lot of times, if you have a more technical product, when people are working in Framer or WordPress, there typically isn't a spelling catch. So if you have words that are very technical, you can hand them and they can just literally go and copy and paste. So it's exactly the words and the phrases that you want. So this is truly one of the coolest and most advanced of these platforms that I've seen for web developers, for agencies, and clients themselves. One of the things I want you to know is in the handout, because I teach and consult on how to tell great stories on your websites and your videos and in your speeches, I have a template for you to follow, which I'll show you now. Now, this is one of your handouts. Since I teach and consult on how to tell a great story in videos and speeches and websites, I'm giving you a template to follow. So what you can do with your top area, that's the hero section. I want you to think about your CTA, your call to action. Start with the end in mind. What's the one thing you want the prospect, the customer, the consumer to do on this page? Everything's going to focus on getting them to complete that action. Then, you move down to your headline. What's your promise? What's the solution? What's the pain that you solve? So you have a main headline and possibly a sub-headline in smaller text. Then, you can expand the gap. Start to let people that are watching feel a little bit more about the pain and how you can solve that problem. So each of these steps that you follow right down here will help you lay out an even better looking page as you're telling a story as you go down the page. So Rip Media Group is my company, that's why it's called the Rip Recipe, but please look for this in your handouts. So please let me know how Relume works for you in doing site maps, designs, and handoffs to your web developer or directly into your websites. And also, would love to hear about the Rip Recipe and see it on your websites as well if it works for you. Please let me know.