CSSmatic Tutorial: Add Shadows to Clickfunnels in 30 Seconds

[Music] Guys welcome back to another video today I want to talk about how to add custom Shadows to your funnel Elements could be an image could be a Button it could be a box a certain area Of your funnel where you want to add a Shadow to it basically just lift it up From the background So that we’re telling people like Because this is closer focus on this First and so That said let’s dive into click funnels I’m here on my test page And a couple of things to understand Here Is we’re given the css code to click Funnels I believe click funnels i’ve actually Talked to the the ceo Click funnels and they’re working on Integrating this to the dashboard so you Can click here And add the shadows to it but for now We’re just gonna use this simple code It’s not complicated i’ll show you where To get this It’s just open bracket then we have this Box code And then close bracket and so what we’re Going to do is just pick the id Element so for example if we want this Css Um sorry if we want this image we’re

Just going to copy this The id css id we’re going to add it Before the open bracket Right there and so now we’re lifting This up i don’t like the shadow it’s too Dark in my opinion so we’re gonna lower That a little bit here Too but what i want to do really is Going to So that’s more subtle but i want to go To this page Cssmatic.com and i want to put this to 0 play around with this maybe something Like That spread Maybe -12 blur it out a little bit Just like that and then i want the Shadow color to be Black but opacity to go down so i want This Nice something like that 30. So 0.3 box color so you could test it Here okay What would it look like if it’s wide Okay so maybe even less than Than 30 15. so we’re gonna try with this And we’re gonna copy that code and add It in here Into this bracket so i’m just gonna mark All of that Boom and there we go i i like that Now instead of this let’s say we want to Have this white box right here I don’t want to have the entire row see

If i put this to white you can see that It’s gonna um highlight the entire Background and so i’m just i’m just Gonna go into columns And scroll down until i see that it’s Marking that specific Place so i’m gonna go down down Right there so i want this one first Column and I’m actually gonna add spacing to it as Well to make it A little bit better um That is good and i’m gonna Maybe even put it no i like white Background there Um i could do 10 pixels right there Just similar to the image and then no Border I’m just gonna grab the css id Pretty long but uh custom css I’m gonna delete it from the image Because i want people to focus on the Box And i want them to focus on the text Within the box so this Design is just visually communicating What the text is saying the copy is Always just as important as The design so now i like this and Um i’m actually going to try and move The box a little bit to the left Here so you can see that it it you know It would cover more here Sort of lifting out from that side just

To see what that would look like as well So we would go horizontal just a little Bit Minus let’s put in minus 15 Maybe minus 10 is enough minus 10 Vertical my um 50 not minus 15. So there we go actually a little bit Now like this um spread So yeah so let’s try to do a little bit More spread Zero and then opacity to 10 Instead there we go and so let’s see What this would look like If i go in here i wouldn’t do this on Like a button Because at that point i want it to be Straight under The image or the button sorry but here i Like this because now we’re lifting it Up And we’re taking away the focus from This to this And sort of pointing it towards this Design a little bit it’s almost like You’re You get the point so anyways that’s a Simple way To do this again i don’t have to put the Code i guess i could put the code if you Want to use this one Uh i’ll put it in the description but That’s super simple And then you can just go to cssmatic.com I’m not affiliated with them

I’m just using it because it’s super Simple i can choose here the background Colors and everything like that I’m sorry not that but the box color Yeah super simple to use Oh one more thing to add to this let’s Say that we have a background That is blue for example we could then Um have a tint of that blue to the Background As well and now we copy the code that Also looks super sick so Anyways i know clickfunnels working on a Simpler solution but I mean this one is like what 10 seconds 30 seconds max so super simple if you Want more Videos like this make sure you smash the Like button so that i can see that you Know these videos help you And inspire me to create more videos and If you want the advanced Full course that teaches you the css the Design the copy the funnel strategy how To get clients if you want to build Funnels for other people you find those At fulltimefunneldesigner.com As well as my coaching that comes with It every single week when you’re in the Course we jump on zoom calls as a group As a community it’s super it’s super Amazing it’s a lot of fun because We get to work with you and i see your Funnel and i tell you what to change and

All that That’s it for this video i’ll see in the Next one

Ace The Funnel Builder
Curated by

Namaste~ My name is Ace and I found these contents SUPA~ Valuable! I apologize for the quality of the transcript... (In case you are curious I used YT EVO plugin to automatically pull these amazing contents) Enjoy!

Get Lifetime Access To Our Entire Library Of Funnel And Design Templates

For A Low One-Time Price – All Your Marketing Sorted, Forever!