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

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.

Adding Custom CSS in Unbounce to Create Professional Drop Shadows

Adding Custom CSS in Unbounce to Create Professional Drop Shadows

Lesson Info

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

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

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

Publishing Your Unbouonce Landing Page on Your Custom Domain