Skip to main content

Adding Custom CSS in Unbounce to Create Professional Drop Shadows

Lesson 39 from: Creating High Converting Landing Pages

Isaac Rudansky

Adding Custom CSS in Unbounce to Create Professional Drop Shadows

Lesson 39 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

39. Adding Custom CSS in Unbounce to Create Professional Drop Shadows

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

Adding Custom CSS in Unbounce to Create Professional Drop Shadows

How do you design pants And welcome back in this lecture, I'm just going to quickly show you how to add custom CSS custom styling beyond what the kind of dragon drop click interface that unbound provides you if you want to. So just as an example I'm opening up my my console here and this is not meant as a, as a in depth tutorial and how to use this. If you just right click anywhere on the page and this is in chrome, you click inspect, look at the developer console, you can change it to html, you can mess around with CSS So say just as an example, I wanted to give this text over here a little bit of a shadow, a little bit of a blurry shadow to make it pop a little bit. Alright, I might may or may not actually go with that in the live page but just say I want to do that. So I select my text using the select tool. Right, drag over and get that text. I have my span right, this is where my text is. I can even double click in here and edit the actual html. Um what I wanted to write, get the ...

love and care. Um you you've earned, let's say. Alright, so we can actually just write that in my youth. Hit enter and see we've changed our text. Alright, so let's say I wanted to give it a little bit of a shadow. Um so I'll click on this element in the right hand side. Under styles and I'll go for a box shadow or rather a text shadow and I could just use my arrows to curse her down into tech shadow click tab. Start off with black. Um two pixels With two pixels down and let's say a 10 pixel blur. Alright. Okay. So that's a little bit too intense for me. But if I click tab I have my rule, like I just click the black and go for like you know, maybe a little bit of a of a gray, right? So something like that person, you know? Maybe like that. All right. Not not bad. Right? That's a professional professional looking. Drop shadow on my bring this. I don't want to go off to the right at all And maybe just go one pixel down. Give it a 12 pixel spread. All right. So it's given me a little bit of a pop and I could un select and see what it looks like. All right. But simple enough. Right. And I'm just gonna copy this CSS declaration. Alright just drag it and copy it onto my clipboard. Okay? Obviously if I refresh this page I'll I'm gonna lose it but let's go back into one bounce. We're gonna go back into editing the page anytime you want to edit your variant, you just select edit and we're gonna have to do a couple different things here. If we were selecting an actual element that had an I. D. Already associated with. It's just going back here. Um Say I was going to add a shadow or some sort of CSS to this div I could use unbalances class that they already gave me. Right, but I'm gonna have to create a custom class because this text, it doesn't have its own class already. So the reason why I wanted to choose this to show you also how to create a custom class for any element that will be able to apply CSS to it. So I can go over into my text over here. This is the text that I want to apply the shadow too. So actually, if you look over here, interestingly enough inbounds does give me this class that I could probably use for my for my shadow. Now, I could apply in line CSS over here. I could just add my declaration right here if I wanted to. So I could do span but it gives me a style that my color and I could just really just paste in my rule right over here and that's going to work. Um and you see that right there, right, once I go off the page, you see that I have my tech shadow in there. But there's another place you could also add CSS, which is what I wanted to show you. So I'm going to remove my tech shadow rule. Like, so right go back and close this little button over here, style sheets where you could add additional rules and more CSS you can name your style sheet. So you don't necessarily name anything now. And I'm going to call out that class that I didn't copy on my clipboard. I don't believe I did not copy that class. Let's just discard discard that for now. Go back into my source code, grab my class name which is L P L H dash 43 copy that. Close it. Open up a style sheet and just simply enter in the class, opens squiggly bracket, enter, grab my rule again and then I'm gonna close this quickly bracket. Alright, before I save this CSS code in order for it to work, you have to wrap the declaration in the style tag. So open style tag. And then we're gonna close the style tag after the entire declaration. Alright now everything should work well, so we'll save that code and then I can save the page and then I can go ahead and preview the page now, look what happened. Right, um interesting what what happened was we're getting the same exact text shadow on both of these elements. And do you remember why the reason is because instead of adding a new text block, I copied this text block over here. So that's a quick troubleshooting tip. So we can go back and just simply remove This class or just make it, you know, 4:30. All right, close save it and then refresh our preview and look at that. Right? So we changed the class so that CSS code that we put in was not affecting this. And now we have our nice little text shadow. That's how you add custom CSS inside. Un bounce. Right straightforward, simple enough. And you could, if you're good with CSS or you could grab a lot of different CSS rules online, you could add really cool things like hover effects and introduction effects and different types of interactions. You could really do anything as long as you just go ahead and use your style sheets down here now that you know how to create CSS and UN bounce. Um let's go into our mobile version of the page and make sure everything is laid out properly and republished and tested again on a mobile device. All right. I hope this was informative. And I look forward to seeing you very soon in the next lecture.

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