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.