Lessons

Lesson Info

Creating a Form, Action Block, and Finishing the Hero Section in Unbounce

How do you design fans and welcome back in this lecture, we're going to continue on with our hero section with our call to action. Block our form and the supporting text. Alright, so let's get to it. I want to give this action block background box a little bit of color. Alright, so let's get rid of the border again. Um And what color it's going to be. I want it to be not too in your face but with the aesthetics kind of soft. So I'm thinking about maybe pulling in this color from the hand over there. So let me just grab my post shade plug in, grab that color on the right hand side over here. We're gonna go over to my once again, you have to make sure you have the box selected. The background is gonna be a solid color right? You could do a pattern, an image of gradient, but we're gonna do a solid color. Maybe we'll mess around with a gradient. Um in a little bit we'll see how the gradient looks. You know what let's just let's see how the gradient looks. Now. Um you know, back to solid co...

lor. Keep it simple. Right? And then just paste in your color that you choose. I think that looks nice. Now, once again, if I just select the active, I click on the actual color, I could I could, you know, go ahead and select whatever color I want Um that way and or if you have the actual hex value, you can just paste it in over here and then you can also change the opacity of that box, right? So if you want to have that background signed through, um you could change the opacity but I'm going to keep it at 100% because that's what I want. I want this to be very clear. Um and I want this to be very straightforward. So I want to make this big enough to include both the form and some bullets and I'm thinking like this, you know what I'm thinking about actually taking this headline and centering it. That's what I'm thinking right now, centering this headline like so right, you just snap it snaps in with that little green line, it'll snap into the center, maybe we'll even bring this down. Just a drop, make it a little bit bigger. Bring this over to the side and I'm gonna widen this out like this. Alright, see how this looks for now. Um You could always mess around with this as we go along. Alright, cool. I'm kinda liking that. Let's add our form, right? The form is the most important next thing for us to really get into. So unbound has a nifty form block that we're just gonna click drag and drop right, super easy and we want to drop it into this box. Um Once you drop the form into the box, you automatically get the form dialog button form dialog window rather where you construct your form. All right? So you can have custom fields like text fields, but you also have these pre built ones. And in fact with this form we're gonna be able to pre build everything. We're gonna be able to build this form using all the pre built modules. I'm gonna have first name. Alright, so my labels what's gonna be actually appear in the form. I'm gonna have an I. D. The idea is important because if you want to integrate this with male chimp you export this to Excel or you have other integrations like hubspot or your crm. The idea is going to be used. Um I always select to auto generate the form label unless it's a specific instance. Or you could also hide the label from the form so there's no label at all. But we don't want to do that in this case. And first name is going to be required. So just select required. Do the same thing with last name. I want to make it required. All right, I added first name twice. So um this is good to delete a form field. Just click on the little trash icon and it gets deleted. Last name and I can move it up or down. Right? So first name, last name, email and phone number, email is not going to be required and phone number is going to be required and we want to validate the phone number as being north american. Okay? Because we're only advertising in new york. So we want to make sure. so that's just a nice way that unbalanced. Make sure, make sure that it's a valid phone number before submitting it. And last name is also gonna be required. Alright, once I have my basic forms, form fields configured and once again you always come back and changes later, you just click done and here you have your basic form now it's nice about having the form in the box because if I move this box, everything everything else gets moved with it, Anything inside a box becomes part of the box that comes inside its hierarchy. So you're able to move that around. So if I if I took the form out and I dropped it inside the hero section outside the box. Now I can move this box independent of the form but I want to have the form inside the box drop it. Okay now let's style the form a little bit. Okay, so once I have my form selected, I have all my configuration options on the right hand, on the right hand menu. I could I could choose to align the form fields left and right. Okay I want to have I'm sorry left or top. I'd like to keep it at top. I want my front to be the same front. So I'm going to open sands and I don't want them to be bold. I just want them to be regular and I want the color to be white. Okay, so just starting to style things a little bit here And the size of the text could be a little bit bigger. Let's go with 17 pixels. Right? Because this is tip typically an older demographic. So you wanna be mindful of an older demographic when it comes to font size, the field height make it a little bit bigger. Right? I like I like forms that are kind of like you know the forms should be visible. So let's go with something like this, right? Um you know 41 looks good. The spacing now looks good but I'll space them out a little bit more between this is spacing between the actual fields, right? So it's really cramped or just a little bit more spaced out easier to read. And then this is the size of the text inside the box. So we could do that at 17 um borders of the box. Right? So there's a little bit of a border which is fine because it kind of gives that illusion of a shadow. So I'll keep that border there. The corner radius is that of five. So if I just took the corner radius away, I get these square boxes. Um and I'd like to have a little bit of a corner a corner radius because that's a convention, right? People are used to having a little bit of a corner radius on the form fields. The background of the form fields could stay white. Right? Basically clean the the color of the text. You know, this is a good place to kind of, you could have a good time, you could mess around with that a little bit. So let's say he grabbed our bright blue, our main primary blue here and you know took that as the text color. That would be a fun, nice little fun thing to play around with and we're looking pretty good auto position submit button. Right? So if I? D select auto position, submit button, I can move my button around independent of my form but if I choose to auto um if I choose to auto position it snaps to where it should be in the form, which is great. Like we should, we should also submit that we should auto position the submit button. Um Okay, now let's style the form button itself. All right. If you click on the in order to style the form, but you have to actually click the form but because it gives you a whole new set of options and we're going to go with a gradient. Right? So we want to have that afforded us when we spoke about button design, give it a gradient that will make it look like an actual button. There are other ways we can do it, but for now that's fine. So let's go with a base color, let's get our primary green. I have a green color pasted onto my clipboard and that will become our base color and if I just paste that in, I have a base color and it auto generates the top and bottom colors of the gradient for me which is pretty neat. I could change that. I could I could I could make the lighter on the bottom but the lighter sir typically be on the top like the default the shadow being towards the bottom is the convention. And then I can go ahead and change my button text. What's different about button texas? If I double click I don't, nothing opens up right. It just goes to the it brings me to the button label on the right hand side. Unlike headline text and other text throughout the page button text is always set up on the right hand side. So let's say the I want to dot dot dot right. Talk to a specialist enrolling cd pap today. Um things like that. Right? So um let's talk to an enrollment expert that's too long. Speak to a cd pepto pro. Um or talk to a Cd Pep expert. Let's see how that looks. Talk to a C. D. Pap expert And then we can change the front right? So once again we wanted to stay with our open sands and this could be bold and maybe make it let's say 17 pixels and then we're gonna um make the button a little wider. Obviously right now maybe a little bit taller. So make a nice looking button over there, give it a little space. Okay great. Now obviously you see that we need to make this if we want to keep the sizing um of our blue div. We gotta make this taller. So let's bring the the hero section a little taller and let's bring the background box a little taller as well. Let's say something like that. You can move this up just a drop. We don't wanna make anything too crowded. Remember that idea of whitespace, whitespace and padding and then we don't, the form itself doesn't have to be so big. Say somewhere in this range. Okay um this looks this is looking pretty good. This is looking pretty good. Now we want to have an area for um we want to have an area for these bullet points, right, some supporting information here. And what I'm gonna do is I'm going to drag this out a little bit over our man here. Maybe move this image over a drop but here's what I'm gonna do. I'm going to bring this back over to the right and this is going to be a good um introduction to positioning elements or arranging elements. So I want the image. And this is another great reason and a great benefit of having this image as a separate as a separate image. As not part of the background image and you can see why in a second. Um Well just by moving it I was able to bring it on top of the of the blue box. Right? And have that nice professional looking overlap. Now let's add some more text. Right? So we'll have a kind of a headline, right? We always spoke about having a headline near the um inside the action block in close proximity describing kind of are supporting the conversion action that we're tracking here. So we're supporting the headline. We're supporting the conversion action. So maybe just a little bit about the CPAP program. Right? Just a few bullet points that just kind of confirm what the person already knows because remember where are these people in the funnel? This is going to be taking traffic from a PPC campaign. Most of the people are searching for Cd Path or you know, consumer directed Consumer directed Personal Assistance program. They're typing it into google and being so people typically know what this is but a few quick bullet points instead of long paragraphs of copy like we've seen on other pages just to confirm to the person that they're in the right place. So simply type that in about the Consumer directed personal assistance program and in prentice's that's CD Path. Alright, now, spell check. You don't see any squiggly lines in in um in un bounced as you would in Microsoft word or other word editing software so they have a separate um spell check, plug in. So I click on the abc and it tells me CPAP is incorrect. I could ignore that, ignore all those and finish checking and we're done. Right? Okay, fine, fantastic. Um, I can choose the editor color. Right? So if I'm writing in white text, some for some reason, I mean maybe a little bit of glitchy sort of thing and then bounce. I could just go back and click on the blue or the black, Right? Um and I can get my text back over here now this is a little bit too big in my mind. Um, for this section here, maybe we'll bring the maybe we'll bring the, you know, I don't know. Maybe it's not so bad. Right? How about we just about the consumer businesses. So we just make this bold over here. Um, how does that look? How does that look? Um it's not bad. It's not bad. We're gonna do some bullet points beneath it, but maybe a tad big, maybe a tad big. So We bring this down to say something like 22. Does that look better? Yeah, I think that looks better. All right. I mean, we could we could always we we we might style this a little differently by adding maybe creating some visual separation between the bullet points in the form, but let's just see how this kind of comes out. Right? Let's see how this plays out and maybe bring this down. Just a drop over here. I might even I want to kind of bring this out like that just a little bit more um to the side and with that we're going to edit the mask, right? So we get this, we're getting this read out of bounds warning. So I'm gonna click on edit mask, I'm gonna go up to the full height on the top, full on the right, go back full on the bottom and just cut off the left, right there. Alright, and then you click done and then I edited my mask that allows me to drag this blue into him a little bit more. Bring the form a little back over to the right and just give a little bit of breathability to these elements here, a little bit of breathability. Okay, Alright, I think that's looking pretty good. Maybe we'll add a little cool arrow here from the headline to the form to give it a little bit more visual prominence, but this is looking really nice. What do you guys think? I hope this is coming together. I think it's coming together nicely. Now we want to add some quick bullet points. Remember people don't The # one rule, right? Something we've spoken about a lot people don't read on the web. What do they do? They scan? Right, so we want to format everything here for easy scan ability. Now let's add, I like, I like the Czech Bar, like, you know, some some subtle checkboxes, I kinda like that. Um So let's go and find a checkbox that we could use and we're gonna do is we're gonna take an image, you know, drag the image first and then we can get a look at the image library. So I'm gonna go to the unbalanced public images. You can always find your own check mark, um or a bullet point image however you wanted to look. I'm just gonna do a quick search for check and look. We have a whole bunch of different options here, right? We see some nice checks. We have the rounded, we have the non rounded, we have different styles. So what do I want here? What will look nice? This is kind of nice I think, or just the plain one. let's try the circle one, see what that looks like. All right. I think that looks pretty nice. Right? Pretty pretty neat. And start start that over. Maybe we'll just go aim for three bullet points. Okay. Just three supporting and for supporting bullet information. Um, and what I want to do is create a box Actually right, I want to I want to have these inside their own box. So I could then once I create bullet text, bullet text, bullet text, it will be easier for me to move all three around as opposed to having to move everything around separately. So, I'm gonna dragon. It just just a transparent box and we're gonna use this box as a container as opposed to as opposed to a design element. So I'm gonna once again no border. Um We're gonna do a I'm sorry there's no opacity. Right? So now I just have a box. There it is. And I'm gonna drag the boundaries that I want. Let's say over here, I want the text to end over there. You can go down as far as here. All right. But what I gotta do is I gotta drag first my drag that into the box and I see that as so lined up beautifully. They're fantastic. Okay, now we have that and good. Now let's get some text going. I want to copy both of these elements instead of having to redo it. So just click command C command V. Right now I have a second one, line it up right down there. I can do this again. Command C, command V. Command C, command V. Alright then again over here. Um You could also use the, I'm pretty good. Now before I go any further, you might be wondering how am I gonna um how am I going to take people's email addresses? Who are people who might be in a great deal of emotional pain and promise them a service if this is not my company. And I don't really offer the service. And that's a good question. The answer is I have a good friend in this business, right? Um And this is actually a campaign that's going to get him leads and he does this and he's been doing this for a long time and he is very good at CPAP enrollments. That's how he makes his money. That's what makes a living. This is all totally legit aboveboard. Alright. So anyway, this looks pretty good. Right? There's a few things here that we want to work on. Um, just stylistically right. We might want to give this button a little bit more contrast. We might want to maybe potentially create some visual distinction in this section with the form. But overall we have all the key elements. We have a breathable, professional looking background image with a very important visual. I think we're conveying a very pleasant and loving aesthetic. I like the color schemes. I like the color scheme we're working with. We maybe modify this blue a little bit to make it a little bit less earthy and a little bit more blue. Um, to fit with this sort of blue in the logo. We have a, a clear call to action block. Um, we're not asking for any additional information that we don't need. We have some bullet points that are, that are quick sweet. And to the point about the Consumer directed Personal Assistance program. I like that because we want to have the non acronym version of this somewhere on the page in the above the fold. So just giving people a sense of orientation where they are. So as you could see like aside from the visual, a lot of thought is going into this. When you design a good landing page, we're thinking about the demographics of our people were thinking about the anxieties of our people were thinking about are they motivated, are they, are they under motivated to convert or are they, do they have a, you know, perceived difficulty, low perceived ability to, to convert? So all these things that we're thinking about have actually gone into everything we've done so far. And it's just the hero section, right? We're thinking about our attention ratio by not having links in the navigation bar. So this is all really well. It might look easy and it might look, hey, this is like a landing page that everything every other landing page looks like. But the copy and what we're actually writing is very specific. It's very thought out and in in fact like it's meaningful. Alright, so I think it's, it's really important stuff and I'm pretty happy with how this page is going and what I like about it is that there's a lot of different things. We can test, we can test images, we can test the headline. Um, and we're moving in a really great direction. So with that I will see you in the next lecture where we continue on building this page and we start putting together some additional sections. Looking forward to seeing you guys soon in the very next lecture