Custom Drop Shadow - ClickFunnels Tutorial [CSS Tricks 2020]

hey guys today I'm gonna be showing you how to add a drop shadow set up a bit fancier than the one that's already provided in the clickfunnels editor why would you want this well I don't know it shouldn't take too long there is a website that I like to use and this is called new morphism i/o a new morphism is by a guy named Adam Gable a guy below sorry if I butchered your name if you like his stuff you should go click on this bottom right buy me a coffee and then go support sky so you created this website where you can pre create what the shadow is gonna look like before you implement which is which is really nice for you know visual designers like like myself you see here that this is where the lights are being cast from so you could change that from left to right from the bottom bottom right and then over here you could change the size of the shape and this is not gonna really bother us for now I don't think we're gonna be touching that it's gonna change radius probably not gonna be using radius but it's good to know that it's there distance that's the distance of the shadow from the specific dip box and then we have the intensity so if we want a strong shadow it gives us a strong shadow and it gives us a blur so if we want a sharp shadow like this shadows like this are popular in some apps I've seen it around it might become a new trend in 2020 but what we're more used to is this blur with kind of like the distance like that the intensity this is a page that would be implementing today in the editor it's not gonna take too long actually because you're just creating the shadows in new morphism and we're going to just be applying two div I came to this design because I was putting together some courses on my website in Palo eight and there were a few things that I wanted to do that I couldn't achieve with the already existing clickfunnels features the first thing that I was noticing is not being able to attain a shadow that I kind of liked so currently I have the design without the shadows to show you what it would look like without the shadows of course basically it's a two dev box design and it's all 50/50 it's like 30 70 and if I wanted to apply shadow well I can show you what kind of shadows are available I'll go to advanced and then I can go to drop shadow in the extra and then I get this list from 5 percent to 40 percent drop shadow I can also have a inner shadow which kinda looks like that or 40 percent drop shadow and 10 percent twenty percent now shadows is not a big deal for most people using the shadows that's already provided inside of the editor is most of the time adequate because you're not trying to do anything crazy you're just trying to get a website out and done start selling making money and that makes total sense what I'm first going to do is I'm going to go to new morphism the website that we are on and because I'm using a white background I'm gonna pick a color up here and you should get a modal like this where you can choose a color white which I'm going for white and I'm gonna set this up so what I'm looking for when I'm creating these shadows is that because the lights coming from this side you see that there's more shadow on the right hand side I don't want to put too much shadow but if I put too little you see that this corner top left is going to start losing the shadows so I'm trying to find a good balance of that in in this modal here so I got the shadow that I want and I'm gonna take a look at this box down here and you'll see that it says border radius 12 pixels which is the thing that I chose here which is for the corners around background background color is f F F F II I actually don't know if it's you if I just want if if we should make it white didn't change much but all the F means white or zero would mean black so if you have that in mind you might you might come easier or handy to you someday and then the Box shadow is the most important part which is 18 pixels forty five pixels shadow color okay so what I want to do is just go copy this which gets copied to clipboard I'm gonna go back into my editor and click funnels and I'm gonna go into settings custom CSS and when this pops up I am just going to paste this in for now and I'm gonna close it so what I want to do now is I want to be applying the shadows just to this right div and how I'm going to do that is I'm gonna go up here weights in sections rows column elements I'm gonna find the columns area I'm gonna click on it and as you hover over these some of the elements in the back are being selected I know that it's gonna be this second column because I'm reading this but if you read through it it says global navigation Cupertino which is a template that I I'm using my personal one and as I brought it in so it's named section two would be this whole section and first column is the left right it's normally the second column if you have three or four columns it should be first second and third first second third fourth so you just go by number you can also change these names but for now I'm just gonna click on my second column go down to the bottom and find this get CSS info I'm gonna click on that we're just going to bring this CSS info I'm just going to change the title for a second to master class speakers and you'll see that CSS ID selector section down here you're just gonna go command C if you're using a Mac and then of course ctrl C and you can close that go into settings click on custom.css again find the very start of this whole CSS that you pasted it from before and I'm just gonna hit enter to push that down go up to the first row and I'm gonna paste that in and I'm gonna open curly brackets and go to the very end and in close curly brackets and then you see that in here the shadow is applied so if I go save and I go preview you'll see that the shadow that I created from you morphism is being applied to my card very simple and to just show you the difference this is to a lot of people it it's not a big deal like the left one is a native shadow to clickfunnels the right is what I just implement it with CSS to a lot of people who doesn't really matter I like the shadows to be a little bit more subtle but more prominent so it feels like it's not much but the whole thing is popped out a bit more while this one feels like it's very close to the page but it works so it depends on what you like and how you like to show off your pages here's another one that I just created with new morphism I basically you just did no blur but this can be kind of fun on some of the new pages new technology pages but yeah I hope that was pretty easy for you the next video that I'm gonna do is I want to make this upcoming masters class this div stick while the right hand side scrolls up [Music]

Channel: Polar Eight

Views: 947

Keywords: cf, clickfunnel, clickfunnels, cf tutorial

Id: ocrh2WjkbFY

Length: 7min 48sec (468 seconds)

Published: Mon Apr 20 2020