Lessons

Lesson Info

Discussing Landing Page Design Changes and Creating our Primary Content Section

How do you design fans and welcome back and before you guys get too excited about how this hero section doesn't look exactly the same as it did when we left off at the end of the previous lecture. Well, you're right. I did make a couple of executive decisions while we were away. Just a safe time. I had a few different thoughts on the hero section and I'm gonna describe them to you real quick. one thing is that this is a fluid process, right? Um as you could see, I wasn't thinking, I wasn't like over analyzing or overthinking every element as I placed it. It was done with thought it was done with strategy. But from a design perspective, things could always shift as you kind of sleep on it, which I did and you get some new ideas. You come back to it with a fresh pair of eyes. You get some feedback from your wife who's quite critical um sometimes, but anyway, made a few changes. One is I wanted to give separation to the form to that action block. Alright. I wanted to be kind of visually d...

istinctive away from even this supporting text if you remember before. It was all that same blue color. I also popped the blue color a little bit more to give a little bit of that happier feel. Um I think we mentioned maybe doing that at the end of last lecture. Give it I give it that same blue that we put in our little logo. I also wanted to have space for a description. Kind of a headline in the action block. That something we spoke about in the course. That's something that's important, especially for a demographic. Um that's coming to the site that has that sense of urgency that really just wants to be very simple. No questions. This is the form, right? Enrolling CPAP and CPAP here. Very straightforward. One of our CPAP experts will call you back shortly to guide you through the next steps. Once again, we're gonna support you were going to guide you step by step, expectations. What's gonna happen after submitting the form? Um I created, I made the form a little bit wider in the fields, right? I took the spacing up from I think we had it like down here in the 43 up to 48, I changed the button style a little bit, I gave it a flat green and I put a little bit, I put a little box behind it and if I move that box around you'll see it's just a plain un bounced box and I just dropped that in behind the button and now it's up again and I'll just click um send backward and send backward and send backward again. Alright, and I can move it down with my arrow key if I can't grab it with my mouse, give it a little bit of shadow. Um I didn't like the way the gradient green, nothing, not that I had anything against the gradient, I just didn't think it was looking good on top of that blue. Just visually I gave this background a little bit of a nice, a nice white background. Obviously let the, let the text be readable. Um and I changed this headline right before we had the fastest and easiest way to enroll in the new york state CPAP program. I thought that was just too wordy, right? Um so this is a great example of rewriting your headlines and sub headlines with half the words fast and easy CPAp enrollment. I don't think I really lost anything. Most of the people coming are from new york state anyway and whether or not they know it's specifically to new york state. That doesn't really matter right. As long as we don't say that as long as you don't give any indication that we're not gonna be able to service you. Um then I think that's fine, but but just to be safe, I put that in a little sub header over here we are. The new york state CB not S CPAP CPAP experts. Okay, so nice to help Helen. But I think I'm really, I'm really happy with this change with the headline, right? Because we took a headline. That was pretty good. Enroll in the new york state the fastest and easiest way to enroll in the new york state CPAp program. Pretty good headline, but we made it even shorter, Even more succinct fast and easy CPAP enrollment. I really don't think we lost any value there. Um so I think the hero section is coming along nicely and I like the white space on the left because that gives a little bit of it gives it gives a nice rhythm to this section. You have the image down here on the left, you have some white space to see that background pattern and then you kind of, the eye starts here at this big headline. Right? And once again remember this idea we spoke about with your text size. Remember this idea we spoke about with your text size being visually distinctive also the font size. So we have you know, H1 which is clearly larger than anything else. I want you to read that first and then I want you to kind of come into the I want your eye to kind of go into the form called to action blocks you immediately, you immediately know where and how to convert. When you decide to convert. There should be no question about where and how to convert. And I think it just looks pleasant, it looks pleasing. So let's carry on continuing along with our page design. So I want to have you know, your typical, you know, two column layout to create some supporting information. So I thought in my mind I will have the first section, B again reiterating what is CPAP and how does it work? And then another section saying kind of why enroll with us today. What how does get CPAp work? Alright, so let's go ahead and add a new section. So I'm gonna take my section block and just drop it all right. Now the inbounds ui is a little bit annoying here. Let's say I want to scroll down and added. It kind of goes off the screen. Um So you could change the height Of this section just by typing in a pixel value. So I'll just try to start off with 620 pixels for this section and then I'll be able to scroll down and I'll see my section a little bit more padding. So I like that. I want my background color to be the default white and I don't want it to stretch. So leave it at that. Now we're gonna use boxes. Right boxes. Is the key to centering elements within those boxes. It's a great tool. So for my to kind of contain, you could kind of view it if you're familiar with html. It's kind of like a div right? Your box is gonna be like a div and then you could have dibs inside of dibs and all that good stuff. So I just have a plain box with no border here. And I'm gonna want to let's say I want to give it some padding. So I'm gonna start it off, let's say 100 and if you look at look over here at this position label. Right, so 70 as I go along to 80. So let's say 100 and 100 and 10 pixels out um over there and here we go with the with right. So I want to take off 100 and 10 pixels to make it center. So we'll do let's say 10 20 right? 11 30 minus 1, 10 is 20 grab it, grab it, grab it. Alright, so we're going to take this down to 20. Alright. And this is now should be centered. If I move it, if I click on the box, I'll see the green center and this is why I'm having it so I can center all my my content here and drop it down, give it some padding at the top. You know, maybe 90 pixels. You can always look at the right position from the top 90 pixels. I think 90 pixels is usually a nice level of breathability from the hero section. We'll maybe move it down a little bit more. But this is a nice this is the part of this is the utility of having the box. Right? So I'll show you, let's say I just move it up here. I don't I don't give myself padding now. Let me bring in my headline here. And what I think I'm gonna do is just copy this and instead of having to bring in a new text and change the font every time, it's always good to copy elements and drag that into my box. I'm gonna make this box taller as we go along, I'm going to line this up all the way with the right of the box because I already patted the box from the edge of the page, I'm gonna line it to the top as well, bring this out and let's click into here and I copied some text onto my clipboard here already just to make things simpler and my color is I want to grab this blue, I want my headlines for the rest of the patient to be this blue. So I have that on my clipboard and I'll go to more, you know, it'd be nice if we could save colors and then bounce and I'm gonna do my hashtag paste my hex value tab out and click Ok, Alright, nice. So we have what the CPAp and how does it work? Fantastic. Close that out and we're gonna add text and this is the text size. I want to take up this normal, I could just grab, I could drag in a new text box, I was really doing it, you know, kind of like the right way lined up against the side of this inner box. Remember I don't want it out here, I want it inside this box, give it a little padding under the headline and I have some text saved on my clipboard for this. Alright, so I have mine, what does CPAP and how does it work? Just a basic blur. But this is how long you want your paragraphs to be. And then obviously we talked about the importance of bullet points. Um so you don't need to hire a home health aide who's a stranger. So we could maybe do some bolding here. Medicaid covers 100% of the cost. So let's say I'll bold 100% of the cost and pays her a directly make that bold, right? You can feel safe and secure With the care of a loved one. So safe and secure could be bold. Um and little changes. You don't need to hire a home health aide as a stranger about strangers. I don't care for you the same way loved ones do and bold the same way loved ones do, right? Because these are some of the buzzwords that people are looking for now periods at the end of bullet points is kind of a controversial topic but just either gonna have periods or you're not gonna have periods. All right. So I'm kind of, I'm feeling pretty happy about this text that we want to add some nice imagery here. Okay, so I have a couple images that I downloaded from one splash on splash is a fantastic website. Uh for finding really high quality free images. Um super, super cool. You know what? I actually wanted to have an inner box for the text so I could center it but I don't think that's gonna be an issue because we'll be able to just center this one box here, let's go ahead and drag in an image. I don't want to create that. You know, we we showed examples of this, this sort of idea this to calm land. So here I have a new york, nice new york state um rather new york city backdrop, throw that in here. Line up to the top and right. And if you're seeing the utility of this box, right, if I didn't have this inner box, I'd kind of be trying to match it up with the right padding that, you know, on top. But this makes it really easy, just follow the guy, let it snap into place. And I sometimes like to do this sort of double image, it gives a little bit of a professional instead of just having this one image here. Once in a while, I'll add a nice little nifty design trick and it's super easy to do an un bounce. You could do it in with html and CSS as well, which I've done before. But here's a nice trick, kind of overlapping two images. So we have the background which is kind of new york related. Then we have the humanistic sort of background over here and you could just kind of layer them on just you could you could mess around with a different way you want to place them, you could put something even up here and cover more of the image. You're just right, You're indicating the city back there and you're getting that point across. You could you could mess around with a mask, right? I can edit my mask and I can zoom in. I could zoom in. I could even bring this back out again. Say like that and bring the city skyline a little higher to get that city skyline something like that. You know, it all works. It's all good stuff. Right? And you know, be like that. Bring that back in. Make it a little bit smaller. I don't have to worry about this is kind of your design aesthetic shining through it could all work however you want it to look right. So it's all good. I'm pretty happy with that. Maybe bring it in a little bit more and up. Let's say something like that. All right. I think that looks nice. And I could bring this let's say here. Uh huh. And now I could center this in the center of my of my overall section by just finding that. Finding those crosshairs. Alright, so I found those crosshairs. Let's see how I think I'm a little have a little bit too much padding at the top. So I might be able to even bring this up. Let's say yeah, we don't need to be more than 100. Let's say we're at 100 and five pixels from the top and I can bring this down. All right, and I can just make sure that I'm also I want to be 105 pixels from bottom, but I want to just actually center it. So 170, Um I think that looks pretty good. Right? Nice amount of breathability. Now, let's simply go ahead and add another section. Right? Similar idea. We could we could continue on if you want to if you if you want to not change the background um and just keep it white. You could and in fact maybe that's not a bad idea just for the sake of simplicity. I'm just thinking from a design perspective, you don't wanna add too many different background colors and I don't like it when there's all these different stripes in the background. So let's go ahead and just double the size of this um this section here. Right? So our heights 5 23. Let's make that 10 46. Alright, simple enough. I'm gonna simply duplicate this outer box. Right? So now I don't have to duplicate all these different elements because I was smart enough. We were smart enough to create this outer box. I'm gonna bring this down. Yes, we want to be at 5:24. Um Just to give ourselves some consistency in our design and then I'm simply going to move these things around. So I'm gonna take this just drag it over here for now, take this, drag it out of the way for now, take my image and drag it this way for now, take this and drag it this way for now bring this back up into the box and you see like this is this is great. You can't do things like this when you're working in a tool like wet flow or wordpress templates, things like that. Right. Things are much, much more difficult to rearrange exactly how you want them. All right now, let's just swap out our image is just going to delete this one. Delete this one. I got a couple more images here. Once again, our image is not like I spent all day finding these images. I just think they're nice. They work right? Here's a bedroom scene, bedroom scenes work because this is what we're dealing with and they don't have to pay if you want it to be like super is consistent, right? This is 3 88 by 2 20. You don't have to make it 3 80 by 2 20 maybe I'll make it the same with just about right, really doesn't have to be the same. And then my other one, if in fact, if you do it nicely, a little bit of a kind of changing up the design, makes it look even more professional. Oftentimes you don't wanna do, you do want consistency in your design, right? You don't want surprises. You don't want things to look off, You have to, you'll develop an eye for that sort of thing and here's a grandpa and grandson doing normal things together, Right? That's kind of the, the emotional appeal here. What's the size of this guy? 254? Um and here we are at four and I could take that in obviously myself. I wanted to, that's looking pretty good. That's looking pretty good. Maybe I want to get the bed a little bit more. So I edit my mask. Um I will make sure I'm not cutting anything off and I'll zoom in a little bit here. Right, zoom in, get that bed in there and get that bed in there zoom in a little bit more. Get that bed. Get the bed. Alright, nice, nice, nice. And the bed is coming through. I'm liking that. So once we publish this page and we start putting it, maybe we could use a little bit of custom CSS right, some styling to give this a little box shadow. You can't add any box shadows here, unfortunately. Right inside unbound, but we could get a little bit crafty and potentially add some of our own box shadows. All right. So we're looking pretty good in terms of height, but that's a nice content, a content section we've put together. Um you can obviously play around with your own designs. Maybe we'll go in and it will add a little icon here just for the sake of a little bit of professionalism, but overall, I'm happy I'm looking, I'm liking where this is going now. What I wanna do is really not spend too much longer creating the rest of this page because you guys kind of get a sense of how this stuff works. Well, quickly finish the page and we will integrate our forms with with male chimp and we'll look at how to generate C. SVS, set up some A. B testing and we'll be off to the races. So I will see you guys very shortly in the next lecture.