Adding Custom CSS in Unbounce to Create Professional Drop Shadows
Isaac Rudansky
Lesson Info
39. Adding Custom CSS in Unbounce to Create Professional Drop Shadows
Lessons
Laying the groundwork for good design
13:23 2The Myth Of The Perfect Landing Page Conversion Rate
12:05 3The 3 Main Types of Landing Pages and How To Use Them Effectively
18:57 4Business Models and Understanding Your Conversion Actions
06:04 5The AIDA Sales Funnel and The Online Decision Making Process
16:48 6The Awareness Stage of the Funnel ... Where It All Begins
17:26 7The Interest Stage of the Funnel ... Tell Me More
14:10The Desire Stage of the Funnel ... I Want What You Sell
12:44 9The Action Stage of the Funnel ... I'm Going to Buy What You Sell
09:05 10The Fogg Behavior Model and how it Applies to Good Landing Page Design
19:25 11Making Your Landing Page Design Memorable
12:44 12Quiz: Landing Page Design Fundamentals
13The Primacy of Product and The Concept of Usability in Landing Page Design
15:23 14Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks
11:17 15The 5 Second Usability Test in Landing Page Design (and how you can use it now)
12:25 16The Art and Science Behind Designing High-Converting Calls To Action (CTA's)
18:29 17Readability and Visual Hierarchy Landing Page Design
19:50 18Respecting Web Conventions in Landing Page Design
13:22 19Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates
19:53 20Information Architecture and Accessibility - Landing Page Design Best Practices
19:51 21Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices
15:34 22Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices
08:43 23Dedicated Landing Page Design Best Practices (Part 1)
14:57 24Dedicated Landing Page Design Best Practices (Part 2)
12:18 25Quiz: Principles of Good Landing Page Design: Examples, Case Studies & Best Practices
26Using Scarcity to Improve Conversion Rates on Your Landing Pages
09:46 27Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages
12:07 28Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory
18:56 29User Scenarios and Contextual Perception in Landing Page Design
16:37 30Quiz: Principles Of Persuasion in Conversion Rate Optimization
31My Favorite Landing Page Builders and Getting Started With Our Unbounce Page
10:02 32Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
07:28 33Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool
16:25 34Working With Background Imagery in Landing Pages and Developing Our Hero Section
15:36 35Creating a Form, Action Block, and Finishing the Hero Section in Unbounce
19:27 36Discussing Landing Page Design Changes and Creating our Primary Content Section
16:17 37Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce
10:42 38Publishing Your Unbouonce Landing Page on Your Custom Domain
03:43 39Adding Custom CSS in Unbounce to Create Professional Drop Shadows
06:03 40Making Your Landing Page Design Work Better With Custom Javascript Snippets
08:08 41Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines
02:30 42Designing Your Form Confirmation Dialogue in Unbounce and Testing Your Live Form
03:30 43Assigning A_B Testing Variants in Unbounce and Assigning Traffic Weights
12:20 44Integrating Your Unbounce Form Submissions With Your Mailchimp Account
09:06 45Quiz: Building a High Converting Landing Page From Scratch
46Wester Computer Audit (Part 1)
08:28 47Wester Computer Audit (Part 2)
09:16 48Wester Computer Audit (Part 3)
15:19 49Wester Computer Audit (Part 4)
13:52 50Quiz: Landing Page Audit in Action
51Conclusion
02:52 52Final 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
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 Classes
UX Design