Creating a Landing Page with Email Capture In SquareSpace | Kara Ferreira | Skillshare

Creating a Landing Page with Email Capture In SquareSpace

Kara Ferreira, Websites for Creatives & Coaches

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (21m)
    • 1. Introduction - Cover Page in SS 7.1

      1:51
    • 2. Adding a New Page for Your Cover/Landing Page

      0:48
    • 3. How to Style Your Cover Page & Add the Newsletter Form

      7:11
    • 4. Altering Form Fields (1)

      1:39
    • 5. Adding Code to Hide the Header & Footer

      1:51
    • 6. Setting Up Your Lead Magnet Delivery In MailChimp

      4:11
    • 7. How to Connect MailChimp to Your Newsletter Form in SquareSpace

      1:18
    • 8. Making Your Cover Page Live

      1:29
    • 9. Conclusion

      0:21

About This Class

A landing page helps you to collect email addresses or drive website visitors to a specific action. You may want to use landing pages or "cover pages" during launches, or when you are just starting your business. If you do not yet have the time to launch a full website, but want to create something that will look nice and capture email addresses for you, here is your guide to creating a cover page in SquareSpace 7.1! 

You will need a SquareSpace account (newly signed up is fine) and a MailChimp account. Ideally, you should already have a freebie PDF or other file designed to deliver to people once they sign up for your email list. 

If you're ready to create a landing page without paying for software like LeadPages, lets dive in!

Transcripts

1. Introduction - Cover Page in SS 7.1: all right. So today we have sort of a short mini course about squarespace and how to create a cover page and squarespace 7.1. If you have a spare space site and you want to have a cover page and you've noticed if you use old squarespace 7.0, that the cover page feature is gone. This is how you serve. Replicate that in squarespace and put one. This is especially important to this course. If you are somebody who is interested in getting up a website, just a landing page to capture emails. If you're starting a business, want to get things started? Don't want to invest in a full website build, but just wanna capture emails from the get go. And you don't want to invest in a piece of software like lead pages. Then this is definitely for you. So leave pages costs about $30 a month and really, the purposes I mean, they add other features. But their core functionality was just so that you could get a website up. Um, so one page and capture emails. The problem is, lead pages cost $30 a month. This way, I'll show you how to do it in squarespace, so you'll pay your regular squarespace fee, which, for the personal plans about $12 a month, you'll pay that. But the bonus thing is that you're going to be starting your roads that account. So you're paying for something that you will eventually be building out completely anyway. And your lead man delivery can be done in Belgian for a completely no cost to you. So I'm gonna show you how to create a landing page. Um, style it. Make sure that it's, you know, looking nice that the head of veterans showing in squarespace 7.1 This is actually what psionic smaller. What I will be creating throughout the course you'll see here at some single scroll. Well, she had a change of styling of all this, but, um, basically, the entire idea is just a very simple header and footer hidden cover page that you can capture emails to get your business up and running without building up a full of sight. So, diving next module, it'll get started on how to do this. All right, 2. Adding a New Page for Your Cover/Landing Page: Okay, so I'm here with my sort of demo content from the template. None of that's important, because all we're trying to do is get up a landing page, Someone go ahead and do is add a new page. I must know the blank page. If you'd like, you can choose layouts, but I would actually suggest blank page. We're just creating a very simple design here. So a blank page for S CEO and Google purposes. It's best to name this either with your business name, your own name, something that would be recognizable in a Google search. Results will call. This care is coaching business. All right, so we have the new page. I'm going to show you in the next section how we're going to style this. 3. How to Style Your Cover Page & Add the Newsletter Form: No. Okay, so now we have our page here, right now, Like you'll see your site title here. Not demo site. You'll have a menu that's not cleaned up. We're gonna go ahead and start with just designing out this landing page by going to edit add page content. I'm interested in very simple by just going with this 1st 1 here. Wait for it. Try that again. There. Go sometimes in swear space, you might have to try something more than once. I mean, if you keep on having to do it, that's not how it's should be working. But occasionally, I find this a little extreme. Like to hit the bike place. I'm ahead and changes background if you want to keep it feel free. Um, between the background. Getting this image upload when it from. Thanks. Um, all right. I'm gonna have an art school to choose his painting One. That's all right. So that's there. So now we're gonna introduce sort of your website or business. I'm gonna say Cara's art coaching, and then I'm coming soon. You might have a bit of help or text, if you like a bit about what's gonna be here just make sure that it's not too much. But again, you're gonna want this really to be all on one page. So to do this, I'm gonna hit a little control I And then I'm gonna believe the button. And instead, I'm going to add a newsletter. Block's gonna do that by going to this little teardrop. I'm gonna find the newsletter Black, which is down here. I'm gonna delete the title sound. Need that to be there and said I'm gonna just leave the cell for text. So I'm gonna say sign up for news about my lunch and to receive my 15 page art medium guide . Now, you should make sure that you have an opt in gift that you know and believe in. Um, make sure it's a good, catchy title that people will definitely want. I'm not sure if the medium guide counts, is that but, um, make sure that yours is 15 page heartbreaking bed. Famine hit, require name field. It's always been hard. Um, all right, so then sign up here. It's good to have language. It's more committal. Yes, please. Stronger language. All right, apply. All right. So now that we have been running. We have sort of a page that we like decently. You want to style it further, We can go ahead and go to save here. Now, here's the interesting happened out of two sections. So if this happens to you, just come in here and I don't believe this. Top one three move. It's not all here. All right, Done. Save. Okay, present. All right. So I'm to go out of here. We go back to home design fonts, so here I can change the fonts. Um, earned Adobe squarespace 7.1 has tried to make it very easy and taking out the guest work of design. So they've created nice parents. These are Sarah and Sarah. If you could do all sands or if you prefer, I might so just click on it, it will change. You can see what it looks like. Do not like Poppins there, so you can see what looks like. And if you want to do mix, that's an option as well. And you can also go into advanced. So to get there again, you're gonna hit. So say we start with that pairing. Click on. It was a lucky I kind of get you to advanced. And that's where you can customize things further. So family active protest. I don't want it to be that Fats and Go 500 being a tiny bit slow Let it catch up, associate Got dinner there. So I go back back from headings paragraph. I want my paragraph thought to be different. I do browse all fonts in here. I'm gonna do well. See, that's different. Save so you can play around, find funds that you like Play the parents. Um, it's not a bad idea to have some of this more set up for you so that people know what to expect from your branding. From the very beginning, I'm gonna change the font size a little bit myself and the way you must do that by adjusting these sliders. See, I mean that a lot bigger. You know what? That things in a custom 1.3. All right, so it's fine. All right. So Save. And the other thing is, if you don't like the colors, so say that button. If you don't want that button to be that color, go back to Zain. Have you fresh? They don't have to wasn't refresh to get the the image to show up in the background again, um, changes, but in color, it's that you gotta colors. It's doing that based on the color palette. So again to create coherent design, not to make you think too much. Squarespace 7.1 has sort of made these design packs. If I want to at it the color palette. I can come here. I can see the different one. So you see the turn, the button blue. If you don't mind that one if I don't leave it. But you could change that. He's a designer color palettes. If you want it even different, you can go to advanced custom colors. Okay, so tell you, customize that look and feel. Soon I will see that we have successfully created it's there a single page with an Upton gift. The problem will be Amy still have as many you that we haven't formed again and this foot or something to show you how to take care of that with code in the next section 4. Altering Form Fields (1): All right, so just to give this a little extra pop, I'm gonna show you how to customise these form. Feels a little bit of CSS code. So to do that, you want to be in design, The move myself out of the way here. Good. A custom. CSS. This is the code we're gonna grab here, so I'll leave this up for a moment so you can look at it. This is just to identify what we're doing that's actually gonna modify anything, but we're doing dot newsletter. Hyphen form, hyphen, field hyphen element open bracket background. Colon white space exploration important. Then we have border top, border left border. Right. Order bottom in the close bracket. Copy that. Put that in here. You'll see this keeps the white form field. We could also it's running on your background. You could do none. It doesn't work for mine. So you could do none. I'm gonna do white. You could do a different color. I'm gonna do blue on the bottom. You could even go ahead. You can use, like, the word for the color. Or you can also, um, he's a hex code. Better. But I'm gonna go ahead and add a bit onto all actually saying We'll see that it's boxer and all of them some to go ahead and it save. I like that look, but that's just one way you can play around with this code toe. Alter the form fields. It's save. There we go. 5. Adding Code to Hide the Header & Footer: All right, so now we have this page set up. But again, this is up top. This is that bottom, and we don't want to bother with that yet. So what we're gonna do to make sure that doesn't show is to come in here and have at it, and we're going to add code. So you taken code here? This will come up, and then I'm gonna grab a code from here. So here will see its style in between the triangles dot header comma, hashtag footer, hyphen sections. And then in these little guys display Colin None exclamation point. Important in the end style tag. I do have sort of a teaser block post for the skull share course on my website. And that is that Well, wonderful dot com slash e cover page, squarespace. So if you want to copy and paste the code from there, you can go there. Otherwise, you can type it out because you saw it all here. Let me go back to the site with that in here. Apply. You'll automatically see the header and footer are gone, so I'm gonna have done save. All right, So now that's all set up What we have left to Dio is to hook this up to mail chimp and make sure melt if is set up correctly and then to publish the site so head into the next section at a little dive into that. 6. Setting Up Your Lead Magnet Delivery In MailChimp: Okay, so now we are in your mail. Chimp dashboard. I actually use Convert Kit in my business now, but I have kept this old Meltem goings on the free plan, and that way I can use it for demonstrations. If there are some limitations in the free version, obviously they want you to upgrade. I will just start this with sort of a disclaimer that if you get to a point where you're outgrowing the free version of mail chimp, I do not recommend upgrading. I do recommend transferring to either convert kit or active campaign because you'll get more for your money. Um, so far, I haven't been impressed with the paid version of Meltem. I also think it's as intuitive as the other ones. But if you're looking to run a lean business and you're just starting out than the free version is totally adequate, the one thing you should know is that you only get one audience is like your one email list in the free version, so that's where all your contacts will end. Up. We want to do now is make sure that when they end up on your list that they're going to get there. Um, free gift. So what we're gonna do is go to campaigns were automate, so you can get there from either one we're gonna go to automate, I guess, to be easy, you know, we're gonna say Welcome to subscribers. Single welcome email. And this is the list they're gonna go to. You can't do it on boarding. Siris in the free plans were just doing a single email. I'll do another course on how toe sort of game. The system if you want to stay lean and sent multiple emails automated, um, are fairly automated, um, in another course. But for this, this is what it looks like. Gives us a subject you can edit that if you would like Teoh. This is what you really want to edit to. Here is the content. So at a design here, you gonna upload your logo. So we're gonna replace, um, if yours isn't in here like mine. You describe upload file, you can select it from your computer, but this is what I need. So his insert, um, here, this is what's on his emerged tag. So this is, um, saying will say hi, comma. First name, period But if there is no first name, they're just going to say hi. So what can leave that? I'm gonna get rid of it. Hi. First name the comma here. So here you can have your message. Whatever you want to add in. He also want to be sure toe at these so that they have your corrupt you RL's down here. But the big thing here is one ad or gets we're gonna dio I looked at a button for the call to actions What I do here, you know, talk about whatever. Introduce yourselves. Intro intro intro. Of course, down you can grab your free. I'd love even close at a button if you want. Change the style of the button, you can change the color and everything here, see content. So this is where we're gonna add a file. So we're gonna say, download guide riddle into a file. So tell us toe upload the file minds, actually, right here. If you it wasn't here, you would You would find your file. But mine's here. Insert saving close. So now if you've updated your logo, your copy your butt in and your links now you're good too. send it. So you go see, even continue, and then start sending start now. And now anyone who gets on your list will start receiving your gift. Um, and that's how we set up the Mel chip. Opt in it. Now, in the next section will show you how to connect it to your website. 7. How to Connect MailChimp to Your Newsletter Form in SquareSpace: All right, So now that we've set up the BM, the list and the gift delivery and mail chimp, we want to make sure that this form is connected here. So again, we're gonna come into our landing page, hit at it, and we're gonna edit this and we're going to go is to storage. And here, So melt mailing list and squarespace campaigns we wanted to do mail chip. So I have another service, Milton. Okay, that will need to subscribe to that. So it's gonna ask you to log into your mail chimp, so enter your credentials. Now he is like a list. There's only one of you have the free plan and will hit play. So now this is all connected so long as we buy the right plan when we go to publish. But there you have it. That is how to connect the male chip to your newsletter in Squarespace In the next section will wrap it all up by publishing the website and make me alive 8. Making Your Cover Page Live: Okay, So if you already have an established squarespace website and just want to create the cover page, all you to do to make this live is to come here to your page settings and then to set this page as the home page. So that means it will be alive if you're just starting your website and you still have this thing at the bottom, but we need to do to make it, you know, official is to subscribe and to put our plan, um, which I'm not gonna do because I don't need this plan. But you'll hear reflect your plan, and the last thing you need to do is connect your domain. Once you've purchased you to come here to home settings domains and either use the main you own. If you signed up for one at purchase or get a domain, most likely you'll be able to see the one that you purchased right in here. If you've just done this one website set up, If not, you'll be able to import from his Dominion. You own because of domain is included in your purchase of the plan. All right, so once you've set this as your home page and you've paid for your with squarespace plan and have to do domain. Then you're all set and ready to go. All right, so now you have your cover page. I customized No header, no footer And your all that art class. 9. Conclusion: right. So there you have it. Just checking in to see everything went. Hopefully it everything was fine. If you did run into problems, have issues. Feel free to email me at KERA at Well, wonderful dot com I can't promise to get back to you right away, but I will get back to you. So hopefully now you do have your beautiful squarespace landing page, and you can start collecting those emails and getting that business. All right. Good luck.