How To Create Landing Pages In Webflow at Scale

hey what is up everyone thank you for all your tweets and likes and your interest in the landing page engine concept that i recently put into place and so there's a few caveats and requirements first you need to be using webflow for this tutorial you don't need to be an expert webflow user but you may need to be slightly familiar with the interface and you also don't need to be a professional designer you know webflow is very user friendly in terms of drag and drop you can also clone ui elements from other projects directly into yours and so we're going to be talking about that today and also this had a really specific use case for me but you can use it for many many different things so my specific use case was i really wanted to scale up our google ads account and we were using single keyword ad groups which is a best practice right and for each ad in that ad group i needed a landing page so that the copy on the landing page matched the copy of the ad which matches the keyword so google ads people will understand what i'm talking about if you're not familiar with this concept there are a few videos online i really recommend conversion excel as a place to learn that's where i learned everything i know about google ads but that's kind of an aside so this concept will actually allow you to create any kind of landing page at scale it involves building a landing page template it involves building a cms collection and it involves importing a csv so it's really only three steps that you need and can create you know tons of pages in a very short amount of time so we're gonna start i'm logged into my webflow account this is my resume cv type of page you do need an account that allows you to have a cms collection so there's caveat one so we're going to start by clicking over into the cms panel and we're going to create a new collection and there are some starter templates and you could probably just start with a blog post one if you wanted to but we're gonna build ours from scratch since it's fairly specific there's also a limit on the amount of fields that you can have in a collection which is 30 and you don't need 30 to build a really simple landing page so first we need to give it a name i'm going to call it landing pages surprise so plural version landing pages you can edit that singular version landing page you can change that as well you can also change the collection url so i just keep a simple lp you know so it'll be your url slash lp slash the actual slug of the page that you're creating all right so what we need is an h1 right so the help text this is the largest copy at the top of your page aka the headline you can make it multiple line you can make it single line it really doesn't matter the control of how that looks is going to be on the template page you may also need some more text and you know we're going to keep this really simple for the purpose of this tutorial multiple line text and we just want it to be it's called intro text now you can also build images into this as well and then in csv all you need is the url of the image that's the the level up if you want so for example when i did this at my day job i had an intro video that was right beside the h1 and i was able to just take my wistia or youtube url and include it in the csv and every time it updated the landing page it changed out the video to the corresponding one so if you want to level this concept up you can do stuff like that but we're going to keep this like really simple right i'm only going to include these couple of fields so let's do let's add one more field though we want the cta to just be a button right so let's call it cta button here and the cta and we're going to make that single line because a cta should be short on a button and then what we're going to do is add a link we're going to call it cta file this is the url for your offer so we're just going to put a bunch of urls in csv and it's going to populate this so just to review the fields that we have for each cms item what you can think is anytime you add a cms item you're going to be adding a landing page that have these fields so the name of the landing page the slug which happens automatically the h1 at the top the intro text the cta button and the file that you're linking to i'll set create collection you uh can add five items as a sample if you want to do that you're just gonna have to delete everything so i really don't want to do that but what we can do is use this link that says create a new landing page and then you could start typing in so even if you didn't want to do a csv import you could scale this really easy easily right so offer one this is great you need it seriously you need to try this cta right now you know you can drag a file here or you can browse for a file if you're going to do a csv upload you already need a url now the reason i wanted to do that is because i need some data to design the page around so the next step is designing the template so you're going to go to pages and as you can see landing pages template was already created this is why you want to start with what you need on the page first create the cms and then webflow will create the template for you so all you have to do is click this it's a blank page so you have a blank slate here and so what you're going to be doing is let's see i need first i need my nav i already have that saved i'm going to put that back up at the top there the next thing that i need is my footer i'm just going to drag that down so you can see the structure of the page now is just you know the nav in the footer i need to put something in the middle and so just for the basics of this i'm not going to go through an expert level design class but thinking about the things that we need on the page that we added we added a heading all right that's my h1 you can give it any css classes that you want change it all around i also added some intro text and i also added a cta button and we have cta text which comes from also the cms collection so first we need to tell webflow that we wanted to get this heading from the landing pages collection then we sell it the field so i want this to be the h1 so there's the sample data i entered earlier i'm going to repeat this process we're going to tie this to the intro text and on the button we're going to tie the url from landing pages in which we don't have any fields at the moment but we're still gonna do that anyway and we need to get the text from landing pages as well so cta button which is plain text so there you can see it loaded my try it now as well this is also where you can start playing around with design as well so i already have some button classes created um you know you really want to work out the design of this again but this is just a demo so now you have your template and you have a collection and so how do you how do you get all of the landing pages that you need so let's just publish this for a second i can go to my landing pages cms collection there's my offer it's been published i can actually see it if i want to tab here great so really basic right well how can we really scale this up and turn it into an engine for advertising or anything else that you need a bunch of landing pages quickly for well webflow will allow you to import a csv to populate any cms collection which is insane so if you're moving to webflow from another system you can export a csv of your blog post import them into here but here's a real cool way to use it in an alternate way and so in your csv in your header rows you want to name them to the corresponding cms fields right and so we're going to keep this really simple i'm going to create five landing pages and i already uploaded a file i already have the url and i just actually want to use that same one for demonstration purposes so let's see here one too many got it now the name is what you want your keyword to be right i teach marketing and so i want to say newsletters for marketers or ads for marketers etc tutorials so we're just going to do that and say webflow for marketers those are the keywords that i would be buying on ads or you know any any way you want to make sense of it this is going to end up being your slug so just remember that so your h1 looking for newsletters and then obviously i'm really just going to do this looking for ads for marketers oh god okay looking for ads looking for tutorials looking for a webflow got it there's my headline for each page now i'm intro text i got it here for you download below i'm going to make that the same for all of them cta button i'm going to vary this right now so i miscounted we're actually going to be making four web pages anyway so i'm going to save my csv then all i need to do is import drag my file or upload it either one confirm you have a header row everything is mapped here and then we're going to say map to existing field here and we're going to map to the cta url so remember our csv had a url in each one and so now we're going to import the landing pages right we've mapped all of our fields here's the preview and then all i have to do is hit import for landing pages webflow is going to process the csv however many rows that you have on there it's then going to stage all of your pages for publishing so all you need to do is publish your site you now have all of these landing pages published each one has its own url which you can just copy here right so as an example here's the webflow from marketers page here's my newsletters for marketers page just copy and show you another url so look newsletters from marketers the copy all matches the cta matches the intro text matches and so with this system you can really build out a ton of pages at scale one thing to be cautious of is be really thoughtful about the design of the template page because once you start creating landing pages at scale you're going to want to make sure that it's a really flexible design and can accept a bunch of different text but yeah hopefully you found this helpful once again my name is jordan my twitter is at dj forge i have a website which is a newsletter for marketers i just send quick tips every week it's forgematic.com as you can see i also have my resume and coaching available at hirejordan.com and yeah if you have any webflow tips or need help with webflow yourself just let me know i'm happy to happy to help

Channel: Forgematic: Marketing For Everyone

Views: 944

Keywords: landing page, web design, webflow landing page, webflow landing page tutorial, responsive web design, webflow for beginners, webflow tutorial for beginners, Webflow tutorials

Id: 7OAc13Gm9_s

Length: 12min 28sec (748 seconds)

Published: Wed May 05 2021