Skip to main content

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

Lesson 37 from: Creating High Converting Landing Pages

Isaac Rudansky

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

Lesson 37 from: Creating High Converting Landing Pages

Isaac Rudansky

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

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

Lessons

Class Trailer

Landing Page Design Fundamentals

1

Laying the groundwork for good design

13:23
2

The Myth Of The Perfect Landing Page Conversion Rate

12:05
3

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

18:57
4

Business Models and Understanding Your Conversion Actions

06:04
5

The AIDA Sales Funnel and The Online Decision Making Process

16:48
6

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

17:26
7

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

14:10
8

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

12:44
9

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

09:05
10

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

19:25
11

Making Your Landing Page Design Memorable

12:44
12

Quiz: Landing Page Design Fundamentals

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

13

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

15:23
14

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

11:17
15

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

12:25
16

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

18:29
17

Readability and Visual Hierarchy Landing Page Design

19:50
18

Respecting Web Conventions in Landing Page Design

13:22
19

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

19:53
20

Information Architecture and Accessibility - Landing Page Design Best Practices

19:51
21

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

15:34
22

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

08:43
23

Dedicated Landing Page Design Best Practices (Part 1)

14:57
24

Dedicated Landing Page Design Best Practices (Part 2)

12:18
25

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

Principles Of Persuasion in Conversion Rate Optimization

26

Using Scarcity to Improve Conversion Rates on Your Landing Pages

09:46
27

Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages

12:07
28

Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory

18:56
29

User Scenarios and Contextual Perception in Landing Page Design

16:37
30

Quiz: Principles Of Persuasion in Conversion Rate Optimization

Building a High Converting Landing Page From Scratch

31

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

10:02
32

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

07:28
33

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

16:25
34

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

15:36
35

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

19:27
36

Discussing Landing Page Design Changes and Creating our Primary Content Section

16:17
37

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

10:42
38

Publishing Your Unbouonce Landing Page on Your Custom Domain

03:43
39

Adding Custom CSS in Unbounce to Create Professional Drop Shadows

06:03
40

Making Your Landing Page Design Work Better With Custom Javascript Snippets

08:08
41

Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines

02:30
42

Designing Your Form Confirmation Dialogue in Unbounce and Testing Your Live Form

03:30
43

Assigning A_B Testing Variants in Unbounce and Assigning Traffic Weights

12:20
44

Integrating Your Unbounce Form Submissions With Your Mailchimp Account

09:06
45

Quiz: Building a High Converting Landing Page From Scratch

Landing Page Audit in Action

46

Wester Computer Audit (Part 1)

08:28
47

Wester Computer Audit (Part 2)

09:16
48

Wester Computer Audit (Part 3)

15:19
49

Wester Computer Audit (Part 4)

13:52
50

Quiz: Landing Page Audit in Action

Conclusion

51

Conclusion

02:52

Final Quiz

52

Final Quiz

Lesson Info

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

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

RELATED ARTICLES

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

RELATED ARTICLES

Recent

Articles