How To Build A Landing Page With AI In 20 Minutes

in this tutorial I'm going to show you how to make a killer landing page just like this using AI tools such as chat gbt and mid-journey that way you can go from idea to landing page in 20 minutes and you're going to want to stick around to the very end because I show you how to use chat gbt to create the perfect email sequence for your new landing page so yeah let's go ahead and start diving in for the sake of this tutorial let's pretend that you just came up with the next billion dollar startup idea you're going to build Uber but for boat rides and you even came up with the perfect name for this new business Uber since you're going to be on the water very original now all you need to do is build your landing page and that's where I come in in order for you to create this amazing landing page you need to focus on three things your copy your background image and your logo your website copy is going to be your headline supporting text in your call to action and we want our copy to pique our audience's interest so that they have no choice but to sign up for our website we also want our background to be super eye-catching so our customer goes damn lastly we want to add a logo to a website to add that Perfect Touch of professionalism and in this tutorial I'm going to show you how to create your copy background image and Logo all using AI so let's get started building but wait real quick if you're excited about this video and can't wait to get started to build your landing page please do me a huge favor and hit that like button and if you want to see more content let's hit that subscribe Button as well all right back to the content so I went ahead and opened up chat GPT so we can get started creating the copy for our landing page and my favorite part about chat GPT is that it will do all the hard work it's just up to us to ask the right questions in the right order for to create the copy that will make our customers just say Shut Up And Take My Money and to make your life easier what I've done is all the prompts that you're about to see I've copied them and put them on a separate link that you can see down in the description below so let's go ahead and get started so here's the template that I was just talking about I wanted to walk you through it first before we filled it out and then copied it back over to chat GPT so right out the gate you'll notice that we're telling it to ignore all previous instructions and to pretend that it is a marketing professional with years of experience designing landing pages and that it's also just received a contract to validate a new business idea the reason we do that is because chat gbt performs best when you give it some sort of role to play and additional context besides just telling it to hey validate this business idea next you'll notice in the middle of the screen that I've left some blanks for things for us to fill out and we'll do that in just a second but at the end of the screen you'll notice that I tell chat gb2 to create the body for a landing page to test out our new business idea and using the business idea below we want to generate a catchy tagline a two sentence short sales pitch and then a call to actions and finally we want to see five variations of this the reason I asked for those three things is because that's what's going to be the copy on our landing page and the reason I ask for five different variations is because I just wanted us to get inspired by different responses that chat GPT gives us back all right so let's go ahead and start filling it out first off we know the name of our app is going to be Uber and then when it comes to the description we know that Uber is just like uber but it's for boat ride when it comes to our customers we go to Target young adults who don't own a boat but want to go boating with their friends these young adults are interested in partying tubing and skiing so they don't have to worry about the logistics of driving and they're most importantly focus on having fun next we have to work on our goal and since the Uber app isn't ready yet the goal the landing page is to encourage users to join the Early Access list so they can be notified when the app goes live and when it comes to the brand for Uber we just want people to be happy excited have no worries and feel warm because it's the summertime now we're back in chat gbt world so I'm going to go ahead and paste in the prompt that we just worked on creating press enter and then we're going to wait for it to create all the different new landing page variations okay chat GPT just finished creating our landing page variations and I'm a big fan of landing page one which says get your party on the Water started with Uber and it talks about how you can enjoy tubing skiing and partying on the water and I also really like page three I just like the headline and everything so what we'll do is we'll tell it to create new variations using landing page one and three and we're just going to keep mixing matching until we find something perfect so we're going to wait for these new variations to load and we'll hop back in all right Chad gbt just finished creating the new variations and I have to say landing page number seven is amazing I think it's gonna be the perfect copy for our landing page so all we have to do next is hop over to Mid Journey where we're going to create the background image and the logo for our website so let's go ahead and head over there welcome to Mid journey.com and before we start getting creating our own pictures I just want to show you how other users are using mid journey to create their own Art here's just a few example in the Community Showcase section you can see some of these pictures are just unreal looking so we're going to be using the same tool to create some of our own landing page and logos and if this is your first time using mid Journey you'll have to hit the sign in button down below and it'll ask you to sign in with Discord now I'm not going to walk you through the entire process but just know it's very simple and once you do sign in what you'll need to do is head over to Discord once you log into Discord this is what the mid Journey server looks like and if you're not familiar with this tool let me just show you a quick overview of how it works over here on the left hand side we have the Newbie rooms which are shared between all of our users in this case you can go in here and create images up to 25 for free actually but you have to worry about scrolling around and worrying about other people making their pictures so it's a little cumbersome to use so what I actually do is pay the ten dollars a month to get direct access to Mid Journey where you can do your own DMS and you can actually scroll through your history and it's a lot less complicated and a lot less cluttered so this is where we're going to be creating our background images and logos and if you're like me I don't have an artistic bone in my body so I have to steel I mean I mean gather inspiration from others and here's actually how I do it I head over to this AI tuts page which is short for tutorials and I'll actually have a link for this down in the description below but they provide example prompts to make beautiful web designs that look just like this and what's great is below each landing page they have the prompt that generated the picture so let's go ahead and copy this picture and head back over to Mid journey and if you've never used my journey before to generate a picture you have to type in forward slash imagine and then paste The Prompt that you want to use in our case we don't want to create a flight discount service we want to create a boat rental service so this usually takes mid Journey up to a minute to make so I'm going to pause the video real fast and come back once it creates the picture alright so midday just finished creating the different landing pages for our boat rental service and I'm not a really big fan of any of these so what we'll do is we'll recreate it this time but instead we're going to change a few details so let's copy our prompt from last time we do imagine paste on our old prompt and then this time I'm going to say luxury yacht so we can get some cooler looking bow codes and we'll regenerate that once again this will take a few seconds to create all right it just finished creating these and once again these are starting to look nicer but I want these to be more colorful and catch the eye so we're going to try it one more time but we're going to actually use a different prompt this time we're going to paste in this prompt that I've already copied from just a few minutes ago and let's try creating this one all right these landing pages are exactly what we've been looking for these colors are bright the boats look awesome I want to sign up for whatever these guys are selling so what we're going to do is keep generating different variations of these landing pages by clicking this regenerate button but before we do that I want to tell you how to update your settings to generate better looking pictures so what you'll do is type in forward slash settings and you want to make sure that you've set your things to highest quality you want to set your style to very high fast mode and regular upscale and then once we find an image that we like I'll show you how we can upscale it to be 4K resolution so we can actually put it on our website alright so I'm going to keep generating pictures and I'll let you know once I find one okay so it took about four more tries but mid Journey end up creating these variations of landing pages and I think these are all awesome more specifically I'll love the third option down here and it's going to be super easy to crop out this background so what we have to do next is upscale our third option so option one two three and I've already upscoded it for you so what you can see right here is we have a huge picture of that landing page but what you'll notice is if you go to like paste this to a background or something I think it's only like maybe a thousand pixels wide and that's not going to cut it for a background so what we have to do to up the resolution once again is hit this beta upscale redo button which generates almost like a 2K width picture which will look great for most background images so what will happen is you come down here and then you can see the most high resolution version of this picture so I'm going to click it open in browser so you get the full picture and this just looks awesome so what we're going to do next right click it save this image locally so we can move on to creating our logo when it comes to our logo I just want to focus on three things first I want it to be simple two I want it to be easy to crop so we can put it anywhere on our website and third I want it to match the same color scheme as the rest of our landing page background so let's hop back over to Mid journey and create this logo to create logo we have to do the same thing where we type in Imagine and then we're going to say logo of minimal yacht and then we're also going to say that we want it to be flat UI I think that's Place let's go ahead and create that picture so mid Journey just got back creating our first batch of logos and I'm pretty impressed with what they made so far most of the designs are simple and they'd be very easy to crop in the circle background however going back to our initial design they don't match the same color scheme so what I'm going to keep doing is creating different variations of our logo until we get lucky and then I'll show you what we end up with so it took a few more tries but I'm super happy with this bottom left logo right here so we're gonna do the same process that we just did a few minutes ago where we upscale the image by pressing u3 then we end up with this logo and then once again we're going to press our upscale redo to create that super high resolution logo and what I love about this logo is the fact that it has the same color scheme as our boat we're pretty darn close Blues oranges and what's great is that it's going to be super easy to crop if we just do a circle crop and yeah that's why I love it so I'm going to save it and then what we're going to do is hop over to our website builder so we can start making our landing page so before we dive into the building our landing page I just want you know that I tried out five different landing page Builders to figure out which one's best showcase all the AI images that we just generated so here's a list of the five competitors I tried out convertkit MailChimp activecampaign musins and card.com out of all of those different contenders card.co was by far the best and the main reason why is because most of the other landing page Builders did not give you the flexibility to Showcase all the beautiful AI art that we just generated half the time you just had to use their pre-built templates and they honestly just were not that impressive so we're going to hop over to car.co and I'm going to show you why it's so awesome all right so over here on the car.co website I'll put a link down in the description below but the main thing that I wanted to point out is that they specialize in making simple free and fully responsive one-page websites and that's exactly what we want to do we want to make a one-page website for our landing page that has that beautiful picture in the background and a nice form for people to fill in and join our email list and because I already have an account I'm going to go ahead and sign in and hop over to the website builder so we can get started creating our landing page once you log in and head over to the website builder you'll be able to see all the beautiful templates that they have set up for us to use the only gotcha is we actually don't want to use any of these templates we want to use the templates found in the form section the reason we want to do that is because we want to be able to gather and collect our users email addresses and as you can see these templates look just as great the one that I'm a biggest fan of is this one over here the reason I like it is because it really allows it to show off a background image and it has a simple form what's great about card.co is we can replace this video though with our AI art and really showcase the pictures that we've made so let's head back to the website builder we're going to say we want to select this image and then now I'm going to show you how to start placing in all the different AI art and copy that we made earlier to make building our landing page easier I've actually pulled up chat gbt to the side so we can just start copying and pasting over one of the big things that I've noticed though is whenever I copy and paste our tagline into our website it's actually way too long so what I've done is ask chat gbt to regenerate our tagline for option number seven and it came up with this option right here so I'm going to go ahead and paste that option in right here and when I do that and paste in the new tagline it fits a lot better and I'm actually going to go ahead and bold it by adding these two asterisks before and after it now that looks awesome so let's go ahead and move on to copying over our sales pitch right here click this text paste it in here add an extra line so we can actually add our call to action in as well alright this looks great so what we're going to focus on next is adding an additional form field so we can actually ask for people's names in addition to their emails all right that looks great and then lastly what we're going to do is come down here and update our thank you field and to do that all you have to do is come down here and say please generate a thank you message once people sign up this might take a few seconds that looks awesome so we're going to go ahead and do is copy this message over here to our website once again click here paste it in here all right great so now we can focus on adding in the background image and our logo and just as a quick side note we actually need to crop and resize our images before we can put them on our landing page so let's go ahead and do that real fast since I have a Photoshop license we're going to use it to crop and resize our images you can do the same thing with canva but I'm just going to use this tool since I already have it and I'm familiar with it so the easiest way to crop a background picture out is to just select this button over here and just drag a rectangle over the background image that we'd like to use on the back of our landing page fantastic now what you'll need to do is hit the image and then crop button great once that's done you need to actually save the image and the best way to do that so we can resize it is to hit the save for web button and now we can re-save the image as a lower quality image and the reason we want to do that is because the card.co website will only allow us to upload pictures that are below two megabytes so I'm going to go ahead and save this to our desktop all right and Replacements are since already had one there great now let's go ahead and get started on our logo and the easiest way that I found to crop out a circle logo is to actually first draw a circle over the portion of the picture that we want to take so I'm going to create a circle that's about 850 pixels wide I'm going to drag this circle over our logo and then what we're going to do next is use some photoshop magic to draw a mask and what this mask is going to do is basically say hey only show a portion of the picture that's behind this circle that I just made so let me show you all we have to do is drag our background above our Ellipsis and then what we have to do is on our ellipses go ahead and say create clipping mask and as you can see this just copied out the part of the picture that was behind our mask only other thing that I'm going to do is use our smart wand tool in Photoshop to get rid of this some of this gray background water and make it more white that looks great okay now same thing that we did earlier we're going to say image trim and we're going to get rid of all the transparent pixels so our logo is the proper size great now what I'm going to do is export this picture so we can add it to our website I'm just going to call it logo PNG we'll go ahead and save it all right great so now that we made all our pictures let's head back over to card.co and finish creating our landing page so we've hopped backed over to card.co so let's go ahead and add our background image the easiest way to do that is just to click on the background what we're going to want to do is change it from a style of video to image what we're going to do next is upload the background image that we just created so I'm going to go ahead and click it and as you can see now it's asking us to crop the picture we want to use the entire picture I'm going to go ahead and press accept and this will add it to our background now I think it's a little too high so what I'm going to do is change the position to bottom and then I'm also going to change the size to default I think this makes a picture look best and I also like it how we see the little boats on the bottom all right so I'm going to go ahead and press done and this is already coming together this looks awesome and now what we're going to do do is change this block of text over here to be our logo the easiest way to do that is to click the text we're going to press the trash can button next since we don't want it then we're going to say add and we want to add an image we want this image to be all the way at the top of our website right here next we're going to upload our logo that we just created press open once again we want to use the entire background press accept this looks great now what we need to do is just resize our image and the easiest way to do that is to click this paint brush up in the top left and then it'll ask you what's the width and height you want to use so I'm just going to keep shrinking it so it looks just like a nice little logo so we can see what it is but nothing crazy now we're going to go ahead and save all of our changes so we can test out our website to see how it looks so I'm going to do is hit this publish this cite button let's call this Uber since this is the Uber app and then we're going to publish it to card.co URL once again we're going to call this Uber then it's going to check to make sure that this name is available it is available and then oh we have description as well we can call it Uber Uber for the water fantastic now we get to publish it and this might take a second but once it finishes publishing we can actually head over to our new link and visit our site so let's go and try it out so this is looking awesome the only thing that I want to change is reduce this margin up top because there's just a lot of excess white space for no reason and next what we'll do is hook up our getting notified wait list let's hop back over to our landing page editor real fast now that we're back in our landing page editor I'm going to go ahead and hit the component that we want to shrink and the field that we want to change is this spacing down here at the bottom what this will do is shrink the excess space between all the elements and I think around a 1.25 is a great size so let's go ahead and do it one more time and check it out just to make sure that we're happy with our changes this will take a few more seconds to publish the changes we'll visit our site once again and it's a lot less white space I think that's pretty acceptable so let's go ahead and actually look at it in a mobile view as well real fast so we can see if we're big fans of that let's just say we have the iPhone 12. okay so we found a quick little bug we don't like the way that these pictures show up at top so let's head back over to our landing page editor and fix that and then we'll finally hook up the email campaign part of the landing page to fix the background all we have to do is click on the background image and we want to change the size from default to fill and once we do that it'll make it to it works on mobile platforms next let's go ahead and get started on filling out this form so I'm going to click on it and then there's a few different things that we're going to do first I want to change it to where it goes up and down in a column instead of a row and we do that by hitting the paintbrush and then changing the layout to column I think this looks a lot better now if we head back to the form field It'll ask us how we want to sign up users this is important because car.co is made strictly for building landing pages and not sending out emails so we'll actually need to hook up our landing page builder to an email providing Services you can see that it's offering options like MailChimp or convertkit and we'll actually use convertkit for this tutorial just because they offer a free plan and I've had the best luck with them so far A little below this you'll see that they're asking for an API key and a form ID let's head over to convertkit real fast and grab this information so we're currently looking at the convertkit dash word if you haven't already logged in and made your own account you're going to want to do that first however once you're on this dashboard there's two things that you need to do create a form and we need to copy your API keys to create a form what we'll need to do is hit this grow button in the top left and we'll create a new landing page or form what's crazy about this is we actually aren't ever going to show this form anywhere we just need to have a form ID to start collecting users so we're going to want to create a new form and it doesn't matter what we click because it'll never show up to anybody so I'm just going to click clear just because it's the most straightforward one and when the page finish is loading what we want to do is hit the settings button up here and then go down to the incentive tab since we're just building this we're testing right now I'm going to uncheck this box right here basically the reason they add that is because to add a double opt-in and basically just protects your email address from people from just signing up random users that will never actually have intention of using your website so we're just going to uncheck it right now for testing purposes next we're going to hit save and the last step we need to do over here is hit this publish button once we do that what we want to do is go over to the WordPress Tab and copy this form ID once we copy the form ID we're going to head back over over to our car.co website paste it in over here and next what we need to do is go find our API key to do that we need to head back over to convertkit and the first thing I'm going to do over here is actually change our name back to the Uber form so when we get new subscribers we'll know where they came from publish this change real fast and then save it excuse me and then what we're going to do next to grab our API key I'm going to click our account in the top right and then hit settings once we do that you have to scroll down to the very bottom left and click this Advanced Link now when you do this you're going to see your API key in the center of the screen I've blocked mine out for privacy purposes but you'll be able to click this copy button on the far right and then head back over to your landing page builder paste in your API key press done and now we get to save our changes and publish them and then we get to try out our form alright so let's go ahead and launch it real fast now let's just put in our name for example use case brand Hancock Brandon at Brandon hancock dot IO all right let's test joining our landing page uh oh looks like it's work and we even get our thank you message that we generated so let's head back over to convertkit real fast to see if it worked so I'm going to refresh the page and then we should see that a new subscriber just joined and as you can see Brandon Hancock the one I just made was added and if we go inside and look around a little bit you can see when I click on forms that Brandon just signed up for the Uber form fantastic you just finished creating your landing page using AI tools like mid-journey enchant gbt now here comes the bonus part where I show you how to make the perfect email for your landing page using chat gbt so let's dive back in and finish this up to make the process easier for creating our email sequence I've pulled up convertkit on the left and then chat gbt on the right now once both these pages are up I'm going to go ahead and go to our send section within convertkit and then click sequences now we're going to create a new sequence for our new app Uber I'm going to click Text only and now that this is pulled up I'm going to go ahead and name it our our Uber you know sequence all right and now we have this pulled up what I'm going to do is paste in a prompt that I created from chat GPT and this prompt will be in the description below now I'm just going to read to you real fast so you understand what's going on here's what it says I just finished creating a landing page from using the previous prompts above now I'd like to create an email sequence that people receive once they subscribe to our email list for each of the emails below create the subject line in the body of the email using the following information and then I break into three separate emails email one I want to be a thank you email email two I want to be a reminder to say that we're working hard on our app and then email three I want to let them know that we're excited to launch our app and they get a special discount since they were an early access user so I'm going to go ahead and create these prompts and once chat TBT finishes making these emails I'm going to go ahead and paste them back over here and convertkit all right so we just finished creating them so let's go ahead and start copying and pasting all right email number one we're gonna say welcome to the Uber's Early Access list that's actually a perfect email so let's come over here and paste it and then what I'm gonna do next is copy in the body right here come in here and and paste it okay now all we need to do is actually change the first name variable because convertkit will actually look for a special tag to use for a person's first name so all you have to do is hit this app bar and then search for a person's first name that works great now that will actually work fantastic now what we're going to do is send our first email after zero days that is the way to send an email immediately now we want to scroll down to the bottom of the page to add our next email once again we're going to just keep copying from chat gbt all right paste it in here get ready to set sail with Uber that's awesome once again keep pasting our prompts in paste you're gonna be a pro this by the end because once again when you get rid of our name and then copy in our subscriber first name we'll just say we want to send this three dates after they get the first email and then finally we're going to add another email which is our last one to say that our app is ready so we're going to paste this in once again we'll just do another three days or two or three days something like that and then come down here copy the body of our email for the very last time paste it in change out the name to be the fancy element that convertkit needs put this on the next line okay fantastic that looks great it even came up with a promo code that's awesome chat gbt is just the coolest so once we're done doing all this we're going to click publish this should take a second and if we go back to the top list we should see that our email sequence has been made and then when this finally opens we have to do two more things on our email sequence first we need to publish our first two emails we meant to do that earlier and I forgot do it for this one as well and then if you scroll down to the bottom now you'll see that all of our emails don't have the word draft if it shows the word draft that means your email has not been published and your new subscribers won't receive it okay cool so now let's head back to the top because what we have to do next is ADD our email sequence to be triggered when a user subscribes to our landing page form to do that what you're going to do is click the menu button in the top right then click automate and then you're going to go down to visual automations in our case we're going to make a new automation we're going to create Ours from scratch and then when that loads we get to create the starting point for our visual automation so we're first going to rename this to our Uber email sequence great and then now well now we're going to start building and we're going to say we want to trigger this form and email sequence when someone joins the Uber form now we're going to add an event in our case the event is going to be an email sequence more specifically we want to start the Uber email sequence now we're going to say add action okay so just to recap when someone signs up to the Uber form they're going to be sent to our email sequence and if you click inside of this email sequence you can see that we're going to send the first email immediately then we're going to wait three days to send them the second email and then finally we're going to send them their Early Access promo code fantastic so we're going to go ahead and make this go live now what we get to do is go try it out so we're going to head back over to our landing page and try this one more time okay so we're back over on our landing page and before I came over here I actually deleted my subscription to our landing page so this will register as a new event so once again I'm going to go ahead and sign up using my email from earlier fantastic Namaste get notified and then we should see the thank you email here in a second great so I'm gonna head back over to convertkit and refresh the page and it should show yep a new subscriber was added and if I click on my name what you'll see here is when I go to automations and I might have to refresh it a few times so it took a few seconds but it finally finished adding us to the Uber email sequence and in fact if I head over to my Google account you can actually see that we received our first email and it'll continue going down our drip campaign until it finishes sending the rest of the email sequence so congrats not only have you made a landing page but you've also made a landing page email sequence all right that's a wrap I hope you enjoyed the video and I hope you enjoy making your new landing page and trying out these new AI tools if you enjoyed the video please hit that like button that really helps out the channel and if you want to see more content just like this also be sure to hit that subscribe button I also have a ton of other great tutorials on this channel so be sure to check those out as well

Channel: Brandon Hancock

Views: 9,839

Keywords: landing page tutorial, ai website design, chat gpt, landing pages, how to create a landing page, landing page, how to make a landing page for free, how to build a landing page, ai art, ai landing page, how to create landing page, how to make a landing page, landing page design, ai web design, landing pages that convert, web design, website design ai, ai web design tutorial, artificial intelligence, convertkit landing page, convertkit tutorial, carrd.co tutorial, carrd.co

Id: f1UiLoyMseM

Length: 25min 25sec (1525 seconds)

Published: Tue Mar 07 2023