Skip to main content

Making Your Landing Page Design Work Better With Custom Javascript Snippets

Lesson 40 from: Creating High Converting Landing Pages

Isaac Rudansky

Making Your Landing Page Design Work Better With Custom Javascript Snippets

Lesson 40 from: Creating High Converting Landing Pages

Isaac Rudansky

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

40. Making Your Landing Page Design Work Better With Custom Javascript Snippets

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

Making Your Landing Page Design Work Better With Custom Javascript Snippets

How do you design fans and welcome back? Of course if we're gonna be sending traffic to mobile devices, we should have a mobile optimized page and then bounced makes that really easy. So this desktop version is gonna be your version for desktops and tablets. It's not gonna be, it's not fluid. Like we said, it's not gonna be responsive grid, but we could design a specific mobile version, which is really cool because it allows us to hide certain elements and rearrange things in whatever order we want. Right? So we're gonna go over to mobile down here in the bottom. Right? That's how we toggle between desktop and mobile. If you're doing this for the first time, you might get a window that shows you a few different aspects of the mobile designer and then you just click don't show that message again. The first thing I want to select is to show mobile version two visitors. Right. If I don't have that selected the page will not be responsible and they'll get no mobile version and look over he...

re. Right? Everything is a complete mess. One thing one bounced does not do a very good job of is redesigning my page on mobile for me and everything really works the same way. Right, Dragon drop. Um and you're able to lay out your elements differently. However you want them to be laid out. You're not able to change the width of the breakpoints over here. These guidelines. But what we could do is potentially have everything just span the entire page. So we don't on mobile where we don't have a lot of margins, we can get everything to span. So one thing that's really important to remember when you're designing for mobile is that as you're moving and redesigning and re sizing elements you should hold down the command or control key to avoid moving that element on the desktop version as well. It's kind of a finicky sort of system. Sometimes it will affect the desktop element, sometimes it won't but if you do something on mobile that affects the affects that same element on desktop, you'll get a little bit, you'll get a little warning notification here pop up on the desktop button but let's just start kind of rearranging things. So I'm gonna bring my logo to the center. Right simple enough. Maybe you could make it a little bit smaller, holding down the command key the entire time center it. Again, I'm not gonna make this necessarily totally perfect right now, just for the sake of getting this done quickly. Alright, fast and easy. CPAP enrollment should be the first thing up here. Now you can change around text formatting for mobile. Right? So if I made this, if I centered this look you see that changes have affected the other view on desktop, it's going to be centered on the desk, it's gonna be centered on desktop as well so I can go back over here. Um What you could do if you really wanted to center text on desktop, you could hide this element, you can make this element invisible on mobile and duplicate it and create another and have it centered right? But we're not going to go and do that now, that might be something that I will do what you can resize things. Right? So I'm gonna have this up here, just my main call to action. Right over here we have the new york state cd path experts and obviously once it's red, that means it's outside of the guidelines. Okay, I could I could make it smaller like that. Alright, so make the text a little bit smaller um maybe give a little bit more breathability. Obviously I'm just holding down command as I move along. This picture is going to get much smaller over here, put this on the bottom and we're gonna maybe have the form above or you know? And also you can direct you can resize obviously resize the size of sections, so I'm gonna bring this section down quite a bit here. Alright, We can keep this background image for now. We can get rid of it, we'll see how it looks on mobile devices. Bring this white box in like so resize the box first and then we'll resize the elements inside the box. All right. And we can make this a little bit smaller and we have our our icons once again they're all in a box. So we have to kind of move everything off here. Everything I kind of put on top of each other there. Once again not a big deal. Um a line, make sure everything's a line, snap it into the grid. Alright, easy enough to take care of it. Easy enough to take care of these issues. I would love to see unbound to get a little bit more sophisticated with their mobile layout. But listen it is what it is, we work with it, grab my form which is all out here, bring that in, resize the blue, Resize the form. I'm just talking you through everything here. Um Just to give you a sense you could, you could speak obviously it is getting a little bit too intense, you can speed through this. I just want to give you a sense of how all this works again, if you're feeling ambitious, feel free to, you know, you could hide elements and then and duplicate them and hide them on the other on the other view. So you know that's definitely a tool that you could use if you want to. We've got to make this section bigger to give ourselves room for this nice image over here. Um We got to line up the button and line up my box again. Okay, Alright so we didn't know it didn't take too long, just a few minutes but this is looking pretty pretty good. Okay let's save that. Always double check your mobile device, your I'm sorry, always double check your desktop layout to make sure everything is in its right place and still functioning as it should be functioning now. We got to just do a couple of things here with this button and the link we set. In fact you were going to have to put in our actual domain name because you're gonna need to put in a full U. R. L. So we just go to let's see get Cpap dot com copy that and paste it in and add and it comes in with your forward slash. Alright so that's how that's gonna work. So go ahead and click save and then republish your site right? And I'm going to de select, select not to see this morning again republished. And they will be able to test to see how our buttons are working. Go back to my site. I can refresh and see how we're looking. Right? Alright so now we can go down here, hit this button and it does pop me up to the top, right? But it's not popping me up to the top smoothly. So in the very next lecture I'm gonna quickly show you how to add a very simple smooth scrolling effect. So you get a more professional feel on your landing pages as you send people back up to your main form and I will see you very soon in that next lecture

Class Materials

Bonus Materials with Purchase

Dedicated Landing Page Design Best Practices

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.

Student Work

RELATED ARTICLES

RELATED ARTICLES