How do you design fans and welcome back. So instead of going and publishing our page first, let's just go and finish up this page real quickly. I want to add one more content, content section that kind of talks about the process of enrollment and then a big call to action and then our footer. So we'll do that really quickly right here. So again, I'm going to drag a new section. I'm gonna give it my height of, let's just say 600 pixels now to start. Um, and I'm gonna give it a little bit of a light blue background color. I had this pasted on my clipboard, very subtle, right? It's a nice subtle background color and it's kind of just a very washed out version of this blue. Just from a stylistic perspective. Let's add our box. All right. We're gonna give ourselves a transparent box with no border just to contain all our elements here. And again, we can really just get try to get the same dimensions of this box. Right? So it's 1020 by the main thing. I wanted to whip just to center the cont...

ent. So call this here. 10.20. All right. And then we can center this box. We can obviously pad all the padding and whatnot. Later let's give ourselves a headline. So I'm dragging some text now. I like I like icons. Right? We spoke about icons and and you know icons give a nice professional field. So I'm gonna give you a little tip. There's this website called flat icon dot com. Fantastic resource for free icons. Let's say I did a, you know, form and all these, anything that is just with the s the selection is all free, totally free could use, you can download it in a different color, you can you can download it in whatever color you want if it's a PNG um and you can choose a specific color. So what I did is I found a few different icons, three different icons we're gonna use in this section and I brought them into Photoshop and I just give it a little bit of my own color overlay of color grading, you'll see how that looks. So let's just drag in an image here and I'm gonna upload new images. I'm gonna take the three icons that I have. These are two. Actually I think we have one in there actually already. Yeah, there's the other one. Oh that's the wrong one. Because that's that's the these blue is what I down these blue ones are the icons I downloaded straight from flat icon but I added a little bit of a gradient and those are gonna be on my desktop over here. Alright. Open those up. Fantastic. The first one's gonna be this rectangle, right? Isn't that cool. Does not look nice. I think it looks really nice, just has that kind of a professional feel to it and I'm going to bring that to the edge of my box. I might actually want to um we're not gonna really want to keep it to the edge of the box for the sake of um padding because we don't want the text to be centered. So let's say I can always add another box in here because I want to have everything centered again. Um Alright I'm just gonna drop it in here for now, see how that looks, and then we'll send her and we'll send her everything later. Um Or rather I'll add my first, add my middle icon which is gonna be the registration process and I'll center this one first. Alright I'll center that one in the box and then this one could be aligned. Hmm Let's see here with a little bit larger. I want to edit my mask just so it's not, I don't have enough, I don't have any padding so I could align this properly in the middle. I think that's looking nice. Let's put in some headlines, Simple, simple headlines. And we could even take this H. Two and just copy it. I love I love copying when I have the opportunity to copy and just paste it right in. Um and we're gonna do something like center it right there like so we want to center this text. I want to bring the font size down a bit and is submit before. Alright I think this section is looking really nice and we might eventually add more content to this page. We'll see, we'll different do things, different things during the A. B. Test. I want to add one more section below the footer which is a call to action section that will scroll people back up to the form. Right? So it's a simple call to action again. Um drag our section, you could drag sections anywhere, drag it down here. Um This looks like about a decent size for now. Maybe bring it down just a little bit. Um And give me a background color. I want my blue. Alright, want my blue background color consistency with our styles, right? We're not using too many colors. We have a blue and green sort of theme here and grab me a headline. Once again copy and paste. Obviously have to change this, align it right? Make it white. Um Not bad. Not a bad idea. Not about tax size. And let's say something like um get the loving care you deserve kind of like a genuine sort of call to action here. Um All right, leave it there for now and then we're gonna add a button. We haven't added buttons yet. The buttons are fun. Alright, so we're dropping a button again. Buttons are all controlled in this right hand panel so we're going to do like and we'll just do all caps enroll for free today and we'll bring this out. All right, and we'll keep the corner radius that's fine. Give me that default button color that I had before. Maybe make it a little larger like that. Um I want to make sure that my we're using open sans bold to bring this up to 20 pixels in height and the size of the text. Give me a little bit more padding here. Bring this down to drop. All right. That looks really nice. Center that button with the text centered in the middle of the div here. Let's see let's see let's see. Bring this over around same same pick I want to align it here right So I'm 100 and 10 pixels away um As you can see 100 and pixels away From the edge. So we'll do 110 pixels away from the edge here as well. All right sometimes it's hard to get that exact alignment on the right hand side. But you could you could use the position The left positioning um to figure out where you want to be. So if you're gonna go over here are left position is 947 and 8 37 would be minus 110. Right? Alright so that's gonna be lined up with the margins. We have the rest of the page and I want to have a little bit remember we spoke about this. Is it clickable right afford ince's for buttons and we want to make sure we have those those afford ince's um I want to make sure that's centered. Okay it is great. Now I'm just gonna remember I told you about this little background box I made to give it some three D. So I'm just gonna copy that that dark green background box. I'm just gonna go back down to the section, paste it in um align it to the edges of my current button and just send it backwards and see that all of a sudden we've got a three D. Button. Right? How cool is that? And just bring it up and drop there. Alright. That's looking fantastic. Good love and care you deserve and roll for free today. Now we want to make sure that this click, it brings you back up to this to this top of the section. So un bounced gives you I. D. S. For every element on the page. So if I grab this um If I grab this box around my form, I'm gonna get the element I. D. Over here. The idea of the class and the Z. Index. But I think we can just bring people right back up to the top of the page. I'll grab the hero section and I'll see the element I. D. Is this Lp palm block 15. Alright. We can customize it. It used to be that you were able to customize this but either way right? And we're gonna go down to this button and we're gonna find the link right? So it's gonna go to and you are all right and we should just be able to do forward slash because that's gonna be the root domain and paste in the I. D. And then it should slide us up to that section of the page. Alright. Just gonna make sure that happens. Um And we're gonna click save. Okay? Now we can as quickly quickly at our footer section and I'm not gonna go and write the privacy policy. Now, obviously what happened to that section, where'd it go? Alright, grab another section, drop it. Um This could be something like just really that that big. Now I want to show you what the preview tool looks like. If you click on this preview button, you're gonna be opened up into a new window and you're gonna see what it looks like in a real live environment, right? I think that's looking really nice. I really think it's looking nice. We have the call to action above the fold. We're getting that nice hover effect, we've got three D. Button effect going but we're not gonna be able to see how this works until we're actually published our page on our live domain. Alright, so this button, so we're gonna we're not gonna see how that works. But overall I really like this page, right? It's it looks very clean. We've done a lot of we've put a lot of thought into our content and how we've designed our content. Um And I think it's it's definitely ready to ship, right? This could be a finished product. This could be a fantastic landing page. We're going to eventually add more content to it. We're gonna make some new variations. But in the next section or in the next video, I want to publish the page, we'll add a little bit of custom CSS and then we're gonna go and fix the mobile version with unbound. I'll show you a couple of quick tips and tricks for that. Alright, so I will see you guys very shortly in the next lecture when we go and publish our page on our custom domain. Talk to you guys soon.

Class Materials

Bonus Materials with Purchase

Dedicated Landing Page Design Best Practices

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Isaac Rudansky

Globally-recognized Google Ads and PPC expert with millions in revenue generated across 450+ businesses internationally and over 900k students worldwide.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design Web Design Design Thinking Business

Ratings and Reviews

a Creativelive Student

Great Job!! Isaac's energy is contagious, he is insightful and engaging. It is a lost of valuable content and I feel I learned so much from him in this short time. He is a reason I will end up with the subscription so I can watch this course again along side of his other courses. My only complaint was live streaming kept turning off and I missed information.

2,000+ classes ranging from fundamentals to advanced techniques.

Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce

Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce

Lesson Info

37. Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce

Lessons

Laying the groundwork for good design

The Myth Of The Perfect Landing Page Conversion Rate

The 3 Main Types of Landing Pages and How To Use Them Effectively

Business Models and Understanding Your Conversion Actions

The AIDA Sales Funnel and The Online Decision Making Process

The Awareness Stage of the Funnel ... Where It All Begins

The Interest Stage of the Funnel ... Tell Me More

The Desire Stage of the Funnel ... I Want What You Sell

The Action Stage of the Funnel ... I'm Going to Buy What You Sell

The Fogg Behavior Model and how it Applies to Good Landing Page Design

Making Your Landing Page Design Memorable

Quiz: Landing Page Design Fundamentals

The Primacy of Product and The Concept of Usability in Landing Page Design

Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks

The 5 Second Usability Test in Landing Page Design (and how you can use it now)

The Art and Science Behind Designing High-Converting Calls To Action (CTA's)

Readability and Visual Hierarchy Landing Page Design

Respecting Web Conventions in Landing Page Design

Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates

Information Architecture and Accessibility - Landing Page Design Best Practices

Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices

Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices

Dedicated Landing Page Design Best Practices (Part 1)

Dedicated Landing Page Design Best Practices (Part 2)

Quiz: Principles of Good Landing Page Design: Examples, Case Studies & Best Practices

Using Scarcity to Improve Conversion Rates on Your Landing Pages

Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages

Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory

User Scenarios and Contextual Perception in Landing Page Design

Quiz: Principles Of Persuasion in Conversion Rate Optimization

My Favorite Landing Page Builders and Getting Started With Our Unbounce Page

Getting Familiar With the Unbounce Page Builder and Adding Our Header Section

Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool

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

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

Discussing Landing Page Design Changes and Creating our Primary Content Section