Lessons

Lesson Info

Working With Background Imagery in Landing Pages and Developing Our Hero Section

how do you design fans and welcome back in this lecture, we're going to continue on an unbounded building, our hero section. So the idea here is really to get this very joyful, um caring sort of emotional aesthetic come through the page and in the hero section, graphical elements, visual elements, imagery are really, really important. Of course the headline, the call to action block, but I spent some time thinking about how the visuals should work. So if I show you in Photoshop real quick here, um I pulled a little background image of a backyard because the idea is to feel at home. Right? So what we're a CPAP is a service from Medicaid that allows you to care for elderly relatives, neighbors, family members, friends at home. So this is a kind of a homey sort of feel. Um, I just put a made it a little bit wider than the original images and I used a blur to get blurred. So it's gonna be the background. I then found this image here. Um, online, I thought this was a nice image of a couple,...

but it has this, this sort of background to it. This is already cropped of it, but this is a cropped version of the picture, but I spent some time in Photoshop cutting the man and woman out of their background. Um, I think I did a pretty good job and this is what that looks like, right? And I exported both of these images separately. So we'll have this image will be a separate image saved. I actually already uploaded those images into the unbound image library so they're ready to go but I think it's gonna look really nice and really professional. And one of the things that I saw in this industry looking at some other people's landing pages is that there was a really weak usage of appropriate visual and professional looking graphics. I think this is gonna look fantastic. So we're gonna drag in a new section. Right? So I want to have a section right beneath our nav. So I just take the section and I drag it and drop it beautiful defaults to white. Now I want to add a background image to the section. So remember we spoke about this properties panel over here. So this is everything that I could do inside this section here, right? So I can change the background image by clicking that. I'm sorry, I can change the background color. Um by dragging around there I can make it opaque. I could have it stretched If I open up advance, I could have a stretch. But remember we want to go for a clean boxed look. So I'm not gonna have anything stretching. Um Okay, but let's say I want to have a background image. So simply under the solid color dropdown menu, we're gonna select image. We're not gonna have a video, anything like that. If you wanted to do video, you could do all different things and I have this stock photo with my modifications of the blur and the white. I'm gonna choose that and there you go. Right I could I could drag the size that can always still modify the size of the actual section. So let's have it something like this for now and we'll play around with it of course as we go along. Um Now we're gonna add our second image and now the nice thing about the way we set this up as it as it not being just one background image. Now that we have two separate images, we're going to be able to move the main graphic which is the couple around and modify the size of that without touching this nice background. Um backyard the image. So let's go ahead and take the image block and drag it. Just drag it anywhere you want it to be. I can drag this up in the menu, I can drag it down here into this section. It doesn't really matter as long as you're dropping it into any section, we can always move it around later. So if I accidentally dropped the image in here and then I chose my image, right? I could just bring it down into this section and as you're gonna drop it into a section you'll see it gets you get this little checkerboard background to indicate where you are. I drop it, I could resize it move it and say into the corner where we want to want to place it eventually make it a little bit bigger. Um Okay, now what's really cool about this is first of all I think it looks great, right? It looks pretty cool, I think it matches nicely with the background even though this wasn't their original background. Then we did a good job cutting out the hair and I think it looks pretty natural. Um So like I said, if we wanted to move this around at any given time and do some A B testing right, and maybe put the form on the left or put this in the center and put some bullet points over here. We could do lots of cool stuff by having this as a separate layer altogether. Okay, so that's pretty cool. Now say I feel that this is not light enough, right? Say I feel the background is coming in a little bit too strong, I want to make it a little bit wider, I want to have a little bit of an overlay, so what can I do? It's pretty, pretty easy, Right? Unbalanced makes that easy. So I want to click on the section and here's my background panel. Okay, now I can add an overlay and underlay. So say I have my overlay chose to white and I just bring up the opacity, right, so 100% opacity is straight white and as I bring it down a little bit it gets a little bit, you know, More transparent and let's say I want to bring this up to just 15. Okay, so I really want the background image to not remember we spoke about so much in this course about the background images, not conflicting with text, but we want to just have an a an indication um of the backyard of a sunny sort of scene of greenery things that evoke positive emotion. Just an indication. It doesn't have to be in your face, I have to be clear. Okay um over here I could change the position of the background image, right? But we're gonna keep it at center and you can mess around with all these different types of things, right? We could have a corner radius on the image, right? If you wanted to make it more like a circle around the edges, we're not gonna do anything like that. Um So you have a bunch of different options here. Alright, so now what we want to do is add our headline. Okay, and as you go along, feel free to like mess around with different sizes. So let's say, I say, hey, this looks a little bit, maybe make the logo a little bit smaller center that again, give it a little bit more padding, maybe bring that up a little bit, you know, you can always mess around, I do a lot when I'm designing an un bouncer web flow, I do a lot of that sort of thing. Right? So I might be dragging this snapping that down there, you know, it's all fluid. The nice thing about unbound is that it's not built or one of the nice things about on bounce is that it's not built on a responsive grid, which it really allows you to drag and drop, right. So you have that tablet and desktop layout which are going to be the same and then you have your mobile layout over here, which is gonna be totally different and we're gonna get to the mobile layout later. Um but it's not a responsive grid, there is a separate mobile site but it's not a fluid grid like you see with Wordpress templates where you don't have that ability to really drag and drop wherever you want. Something. Right? So that's one of the really cool thing about really cool things about inbounds. Let's go ahead and take care of our header, um drag the text element and just drop it okay and drop it anywhere you want you double click the text to open up the editor, it's not edited inside it's inside the container itself. It's edited inside this panel down here. We have all your different text options. Alright, so first I'm just gonna write the text before formatting it. Um and the headline that I thought of to start was um the fastest and easiest way too in a role and in the new york ST cd path program now, why is this headline good. This headline is good because as I started thinking about our personas and I started thinking about the types of people that we want to attract. It's people that are going to be going through this funnel very quickly. More importantly, it's people who have a low level of ability, but a high level of motivation. If we go back and you think about that BJ fogg behavior model, right? When we talked about facilitators, what type of trigger do we need? We have if you remember that that um the line that slope down as you got harder and less motivated and different types of people or different types of visitors have different types of problems. In our case, we have people who feel that this is a complicated program that it takes a lot that, you know, you need to have a lot of qualifications to qualify for the cd pad program. It's gonna take a long time to actually happen. They're gonna be asked a lot of difficult questions that they might not have the answers to. But those are all things that fall under lack of ability. People have a perceived lack of ability to get it done, but they're very motivated. This is the type of Medicaid program that only almost sounds too good to be true. You could be the daughter or the relative of a loved one and you can get paid to take, you know, to take care of them. And they also get the joy of having instead of having, you know some home health aide come to their home, who cares, who's a stranger, Somebody in their own family could take care of them. So there's a high level of ability but very high perceived difficulty. So what might the the copy the headlines should be really focusing on that trigger. Right. The facilitator, this is easy, this is simple, the fastest and easiest way to enroll in the new york city state cd path program. You know, we're gonna guide you step by step. We have you we have you taken care of. Alright, so that's the type of thing we really want to um sort of give over now this is gonna be our H one. So I'm just gonna select all and formatted as heading one. Alright. And this is the default heading one from one bounce. Um I don't like it. Right, we want to mess around with our fonts a little bit. Okay, so we take the heading one and we can change the font size to something like what does droid sans look like? I mean obviously we're gonna have to select all first and here's droid sands, we could think about, you know um bounce, doesn't have the largest library of funds but they have all the kind of major ones that you're probably gonna want to use. Um they give you a good selection, right? So I like open sands is a good one in general. I also like pt sands. Remember we always talk about sand Saref is better. Um let's go with open sands for Nazi. Really clean, easy to read sort of font and let's bring up our size a little bit too. Something like 36 If you want to get a little advanced. So you wanted your fund to be 34 these are some of the shortcomings of um there are some shortcomings oven bounced. Right? So let's say I wanted a 34 point font size. I can't just enter that in. You have to actually go into the CSS this source. So I just click on source over here. I could go and find my font size declaration and change that to 34 I might want to change my line height as well. Um you could do all the different types of things here. So I Click against source and my font is now 34. Okay, it won't show up over here because it's not one of the defaults, but either way right now, if I click out, I could start dragging this diff so let's say I wanted this to be just two lines, the easiest and fastest way to enroll in the new york state Cpap program. I say we drop that in over here just for now and say I want to change, I want to use my blue, right? I want to use my blue from over here for the headline to see how that looks. So I have a little nifty browser plug in here called post shade for google. It's actually for Mac. I could just grab that blue, I should really have it written down somewhere and I could select all and go to more colors under the color picker type in my hashtag these are all some of these and click enter. These are all, some of the things that that one bounced really doesn't make it that easy. They could make it easier for you to do. Um, but hey, you know, we're not complaining now talking about contrast in the headline, Right? So I don't find this to be that enough contrast. So there's two things we could do. We could either go back to a black sort of color or I could go and maybe make this background white a little bit more opaque. Right? So let's see if we bring this opacity up Just a bit too, something like that, let's say 250. We're looking better there, Right? We're definitely looking better. But then we're kind of losing, we're starting to lose, right? We're starting to lose that background image a little bit, but it's, it's not bad. It's not bad. We definitely don't necessarily, we definitely don't have to have this headline in blue either. So I'm actually gonna bring this back down to 15 here. Um, and I'm gonna bring this back to black. So I just select all again and I click on automatic, which is our default. Okay, so I like that the fastest easy way to enroll in new york state CPAP program. Now we have to think about a couple other things in this area. Right? We want to have our our call to action or action block where there's an actual form and we might want to have an area for a sub header or some supporting information. Alright. So depending on how we lay this out, you know, So we could maybe potentially move this down a little bit. I'm just thinking as we go along here, the best way we could potentially have this span, we could potentially have this headline span. Right? And we could just make this a little bit the text here a little bit smaller. Say were to do something like um 28. Okay. And brought that down here um and then we could have a sub headline and we can have our form, right? I'm not saying I'm not feeling that so much. Right? I'm feeling this, I'm feeling this a little bit bigger Back to 36 And a 45 point line height. I'm feeling this being a two. I'm feeling it like that kind of being clear. Right? This is a very clear sort of thing. And I'm feeling about I'm feeling our form being right in here with a couple of bullet points attached to the form itself. Right? So I'm thinking about that um let's just quickly create our div container where we're gonna put our form and then we'll take it from there. So um say I want to create a white background or even the ability to have any background behind my form behind the bullet points. Really easy. Okay, you're going to use that with a box, all the type of things background, anything that's going to be, have a specific background is gonna be a box and I'll show you how boxes working. The first thing you do is just drag the box in there and then resize it how you want to resize. So let's say we want it to be resized like so All right. Um something like that. Now one thing I want to tell you is that you see this little gray line around the box. Every box you get has a default border. So the border property, once again, this properties panel takes on all the different components of whatever element you have selected. So now we have all the options for a box. I wanna start off with no border. Okay. And now I have a clean white box and we'll add a shadow to it, but we'll see how things go along as we create our call to action. So just like as I'm doing this, I'm thinking, okay, now I can make this a little bit bigger. Um I can make this a little bit wider. This a little bit taller and maybe we'll have this span. Um or maybe, you know what, Maybe we'll have this go narrower and taller or something like that. Have this even potentially go three lines and this image be a little bit smaller, Right? Something like so. Right. Maybe something like this is gonna work for us. But as you see, we're kind of getting things together here, We've created our hero section. We got our graphical images looking good. I think we have a nice background image. We're starting to develop our call to action container. And in the next lecture we'll go ahead and develop our form, developed the button for the form, developed some of the supporting bullet point information and we're gonna finish off our hero section. Um And after that we'll actually go and publish the page. We'll test it, we'll preview it. Um and then we're gonna continue to build it. So thanks for watching. I hope you're enjoying this process and I look forward to seeing you soon in the very next lecture.