Alright so welcome back to another video Today i’m gonna share my top 10 Tips for designing beautiful funnels That convert inside of Click funnels and this is part one and You’ll find part two In the full course full-time funnel Designer which Is the community the coaching calls and A hundred different videos Plus on funnel design funnel copy Email marketing and getting clients and So with that said Let’s dive in and talk about these this Is kind of like a speedy course Going through and quickly changing Things and making it look better You can see on my screen right now that We have this Kind of boring page and what i’ll do is I’ll transform this page from boring to Amazing With my 10 top design tips as with us Said let’s dive in Alright so what we have right now is a Pretty boring landing page and there’s Not much to it i mean you can tell that Some of the images The graphics look great on some of them But when you have them too small You have the logo too big you don’t have Enough spacing you haven’t removed the Background there’s no background image Here
The font is kind of boring as well and There’s just a lot of things that are Off icons are too big Some of these things i’ve done on Purpose to illustrate what i’m trying to Share with you like padding here for an Example so i’m excited To kind of go through all of these steps With you what i’m going to do first Is i’m just going to make the logo way Smaller because we don’t need it to be Close to that we can have it a hundred We can have it at 130 125 I think that will do and i’m also going To add some more Spacing here let’s see what we have we Have 20 right now i’m just going to bump That to 30. by the way if i’m going fast you’ll Find in the entire module Virus on on all these things you can Slow it down you can speed it up And kind of pick and choose what you Want to learn more of i would love for This to be Like that i want it to be in the middle I want text to be here First i’m going to add some spacing here And I’m going to bump this up to a 20 margin or maybe even 30 but we’ll Start with 20. This basic button we’re also going to do We’re going to do 30 on this one because
It’s more of like How it looks in between these two than The 20 30 25 ish so we want some spacing There It’s also very boring i want some effect So i’m gonna Elevate it when you hover over it so It’s gonna Jump like that and elevate and i’m also Gonna Instead of giving it like a hard shadow Well you can’t see on that background But i’m gonna put no shadow in and put Some css to it And make it beautifully lifted up above The background so that you know it’s Highlighted and people see and they Click it Corners i think three is okay i’m Actually going to do a square So square no borders and now it looks Clean okay I’m still gonna do a lot to it i’m also Gonna change the color I think we had down there we had orange So i’m gonna do it just like that now i Can just Duplicate these and move them down here And i’m gonna have the same button Throughout the entire page So the next thing that i’m gonna do and I don’t necessarily always go in this Order but i’m just sharing with you like
The different tips that i do on every Single funnel whether it’s my own my Clients or funnel redesigns for My students you can see we still have The same spacing here which is great And now we can kind of go into The font i want to change first of all When you’re adding custom fonts Right now in click funnels obviously you Can go here And you can choose the different fonts Or you can browse the google fonts What i want to do though is add a custom Css And just paste it in here and there’s More css videos in this module so don’t Worry about this right now I’m just gonna copy one here from my Other screen And move it in here and paste it So now if you’re new to css and custom Fonts and click funnels or any other Page builder basically how this works is We have two fonts One for these different elements so Icon bullet list button sub headline Body text which is everything else On this page except for the headline and Then I have one for the headline you can see This title is headline so i want This font recoleta to be just for this Element so headline I want this font all of these others i
Want this font and so You don’t have to worry about the code You just copy paste the code that i have And then you go in and change the asset Meaning the font that you actually want To use so you’re telling Clickfunnels the editor like here’s the Css Which means here’s what i want it to do Okay so i’m telling see I click funnels i want you to take this Font and add it to this element So when i’m gonna do it for the button Later i’m going to tell clickfunnels I want you to change the button and i Want to change The color and i want the color to be Gradient from This color to this one so i’m going to Put the button I’m going to put the color hex code and Exactly Just tell it that css in a nutshell just Telling the editor What i wanted to do with one specific Element so if i want to add the shadow To A button i’m going to find the id the Code of the button and say add shadow to This And so it’s not complicated If you just go through this you know Slowly and and kind of start playing Around with it
And so uh one thing you know that you’ll See here is This is a geomenist i don’t know how you Pronounce that but that’s the font so The font family is Germanist and so i’m gonna add that in Here as well That with these elements i want you to Use Gel menus so if i for example with Headline want to change it i could Either move this up the headline to This button in the same bracket or i Could just change The font family to say geo Manist and you could see it would change The font to The headline there as well so now we Have the same headline as Everything else so we’re not going to do That though We want it to be recoleta and so I’m just going to change that back and There you go so Just going to make this a little bit Smaller There we go now for spacing so there’s Two things that i could do Okay one for an example let’s say i want To just move this down And add spacing i could move it down Like that 50 pixels at the top margin i could add Some spacing below this
Let’s say a 100 pixels the bottom And i could make this smaller like 400 Pixels wide so now we have it uh right There I’m also going to center this and that Could be okay But what i want to do instead is Add these new rows like a one column row And i just choose setting and desktop Only because Right now so i’m going to delete that Again and show you if i go to mobile You’ll see that clickfunnels already Building The mobile as you build up the page Right but we’re going to optimize it and Make it look amazing so Right now we have the logo in the middle That’s okay we have the support email to The right If i change it to the middle it’s also Gonna be here in the middle So what i’m gonna do is i’m actually Going to just make this one Desktop only you can choose mobile only Here or for both You know all devices i’m also going to Add an icon To this so email icon there we go And add a spacing to it as well and What i’m going to do is in mobile it’s Just look at okay the spacing Is it’s okay but it’s also a lot like All this empty space
One you know as much as possible to be Above the fold so what i can do Is i move this up to 15 so you guys know I use 15 30 50 70 or 100 most of the time So what i’m gonna do instead is click Add new row Column and i’m gonna Put this desktop only so we have spacing On desktop Right just like i could do here and bump This down so now we have more spacing Here And i could delete the spacing here Down to like 30. i want to choose The spacing here as well to be as as Little as possible so we’ll do Yeah we’ll do zero because we have Spacing here so we don’t need spacing Everywhere Now when i look here you’ll see that’s Good we have some spacing but not too Much And this is okay now what i could do is Some people like to clone this and have One for mobile only and one for desktop I don’t want you to do that and here’s Why all you have to do Is go into this one i’m gonna make it All again And just choose the mobile size so like I want the mobile to be 36 for an Example In that case it’s gonna be that big i’m
Gonna delete the mobile only version And instead this is the same element so I’m just going to choose 32 see what that looks like i want it to Be three lines so i’m gonna go with 30. sometimes i even go with 26 or 28. what you could do is you could do 30 And then for sub headlines or headlines Down the page As you scroll down they could be like Here for an example I think this one is 30 then you could Have these headlines for an example you Could have 26 So it’s like these are headlines for These icons So it’s almost like they’re sub Headlines but um just going to change This Real quick and now we’re already you Know getting closer to where we want to Be we have custom font We can even make you know custom let me Just kind of The bold color would be orange and i Could highlight this Just click command b or just click up Here and it’s going to turn that Specific part To another color so now we’re Highlighting that but now what i want to Do is i want to add a custom Background now because i have this here I can just copy the link
And go up here and click there and paste It And then i just go all the way to The right there we go And just hit one delete so one There’s like if you copy this link and You go up here To the top of your browser you’ll see That there’s like uh what is it like a Quote mark At the end of it so you just need to Delete that and then you get The same background from your landing Page But you could also just go here and you Know upload The image and add it just make sure that You have it As a fill 100 width and not width and Height so it’s like compressing the Image and So now you can see i don’t want it to be Orange anymore i want this to be Wide because i can see it better button Is okay it’s okay But now what i’m gonna do is i’m gonna Change this image because i don’t want An image with a background And the best way to do that in my Opinion is clipping magic you can see an Image here All you do is you just click this right Here boom we have you know separate Videos
Regarding this but i just want to show You real quick And then minus what i wanted to cut out Um It’s also getting really good at using Ai so it can find all of this For you and boom found it preview Looks great here’s the original with Background it’s without background Just go to shadows and sometimes it can Have Like a shadow automatically applied so You just want to delete that Or if you want one you could you know Reduce the opacity of it don’t Make it super strong but you can’t have A shadow there if you want to And then just make the make sure that You crop it so that it can be Like here for example if i crop it at Right there I also want to delete all of this empty Space on the sides So that it’s not when it’s uploading to Click funnels So that it doesn’t think that or the Image is this wide and therefore making The actual image Super small and so now i would just Click ok And i could download it boom there we go So i have it already Inside of click funnels so what i’m Going to do is just go
Here type in ghosten and boom you can See i found The image right there and i’m actually Just going to delete The image width so i want it to be big And now what i could do Is i could just add like minus to the Margin here to get it come up a little Bit minus 50 Sometimes you might have to also check Mobile to make sure that it’s not Covering A button or anything like here so then You would want to actually Duplicate it make this one mobile only And then put that one to like 15 spacing And then this one desktop only so Now what i want to do is i actually want This one to go down A little bit but if i go here and i make This Let’s say 40 top margin or 30 You can see that again it creates a lot Of space right So i’m gonna go back and i’m going to Remove that And what i’ll do is i’ll just find a new Or create a new element And go to divider so i use this a lot Divider And just choose like white color and Then opacity to zero And then you can choose this like how Big do you want it to be
Go desktop only and then move this above This one So now i can go here i can choose how You know big i want the space to be move This around let’s say i want it to be Something like that and now on mobile This one is still at the same place so It looks great And now i’m going to move on to the next One i’m actually going to delete this as Well Make sure there’s no spacing at the Bottom because i want This image to cover the Next section there we go so now i think This looks clean And i’m gonna move to the next one so Then i’m gonna go and grab a new code And i’m just gonna copy that go back Into css And i’m gonna change my color of my Buttons So i’m gonna paste that in you can see i Have a gradient Button but i don’t want it to be blue Since i have the background Blue and so it doesn’t look great what I’m gonna do instead is give it a Sort of like an orange just gonna click Here and get the code i need this code Right here So one and i’m just gonna go in here and Change so i’m telling again click Funnels like hey
I want the button color right to be this Background Pasting it in there okay and then i want It to be It goes from this color to this one and The percentages are basically like Where’s the gradient Shift starting and ending and that sort Of stuff so i’m just gonna change out All of the Beginning [Music] And if you’re like what are these codes Ghosts then you don’t have to worry About them you can see here that it’s Working It’s basically just for different Browsers and i didn’t write those codes So you don’t have to worry about it you Don’t have to be a coder to do this So the next one i’ll just change to get A little Brighter maybe or darker I will try this so something like this Just going to grab that code Go back in and paste those Right there so now you can see that we Have a gradient Button and the text has c funnel Portfolio usually i want the font to be The same size As the text so 20 I think this is 20. but if you want a Bigger button at you know one place like
Here for an example Then you could obviously make one that’s Centered it’s bigger You can basically just turn this to 32 Center spacing is okay One more thing that i do to my buttons Is to make sure that the horizontal Space is 40 And this is 10 or 15. okay so now here For an example Apply now to see if we’re a fit And just make this a little bit bigger As well Awesome so anyways that’s that now a Couple more things that i want to talk About which is super important And really increases the beauty of your Funnel design and i’ll take this one for An example first Icons first i’m going to make these like Way smaller hundred or even Like 70. i’ll do 70 for these So 70 and the next Thing that you’ll see here is kind of Awesome so instead of doing this Right where you have like a background For these three i’m just gonna delete That And what i’ll do instead is add a shadow To it so let me show you i go to Section i add like 30 Pixels of padding to all sides of That area and i’m gonna make it a white Background
And five pixel corner radius no border Okay I grab this css This id of that element i am going to Paste this in here okay and then i’m Going to grab another code For a shadow i can also add a code that Says i don’t want Any borders on it so border 0 pixels and Then here’s the The shadows and let me show you what it Looks like right now so It doesn’t look great you can see that This is a shadow that’s mainly here at The bottom So you could go in here and change this And sort of Uh make it like darker you can see this One makes it super dark Um and play around with it but what i’ve Found to be the easiest way is to just Find a new code for this only the shadow So i would use something like css matic And i’m just gonna make this like Seven zero so it’s in the middle Um you can also make this one white if Your section Is or a row the background is white in Your funnel so you can see what the The shadow is actually going to look Like this is what Most people’s shadows look like but what I’m going to do is I’m going to make this like
[Music] Maybe 10 and what i’ll do instead Is i’m gonna blur it something like that And spread it like that And then i just copy this so let me show You now when i add it in here Mark this and paste and boom now it Looks way better so if i now want to Make it stronger i just change it to Like two So then it’s 20 opacity even 15 it could Be 15. So 1 5 1 5. we go I think that’s that looks clean so now What i would do Is i would go in and find the next one You can see it’s hovering over this one These are all on 30 but you can’t see The number 30 so you get a Uh this is a glitch but i you know do This all the time so it’s okay Square choose that uh change it to five Grab this code and same thing right here You just put a comma and paste in the Code Okay column and do one more Just to make this one beautiful as well And i want to share with you another Thing as well i told you this one was Going to be good So if you watch this far I’m hoping that you’ve learned a lot so Come on boom
All right that looks clean so way better Than the other section with just like a Plain background to it i mean you saw The The previous one that i had so didn’t Look great now i’m gonna move the Remove the the padding at the top here To kind of get this closer Maybe even this at the bottom as well Doesn’t have to be That crazy 30 15. one more thing These right here so let’s say that you Want to do something cool Uh here’s another design trick first of All i’m going to delete these because These are Mock-ups they can be that big no problem And what i’m actually gonna do is i like When things overflow Into like let me show you 70 minus like This for an example Maybe even 50 is okay yeah so you can See that it comes Out on top of that one i’m just gonna Add a column Here and There we go add some spacing and do the Same for this one Same for this one and i’m gonna do the Same here so you can see That usually when people do a mistake When it comes to padding or spacing they Do that all the time So 30 30 30. and now that looks
Beautiful So i will do that on all of them Actually we could still add a Shadow to this button and so we can just Go into css i can either copy this Or type it in here so i could just Boom i add that to it dot l Button with a capital b and I would add that in here because i’m Basically again telling the editor All these elements i want you to do this Right and you’ll see in the other css Videos you’ll see like with the Headlines And with different multi-color or Gradient Uh we’re basically just adding the Element here’s the headline i want you To add a background behind The highlighted keywords and i want you To do it for this headline and we’re Just pasting in here’s the element Here’s what i want you to do with it So there we go hopefully that was Helpful we have a page that now looks Way different than the other one if i Preview this You’re gonna see what it looks like Before and then you’re gonna see what it Looks like after so this is the before And now i’m going to save it and preview It again And gonna see if you guys see any Difference so
We have this one kind of boring Just an image that’s uploaded no custom Fonts big logo We don’t really have any theme like a Branding to it there’s no consistency And it’s this the images look off even The graphics are great This looks like an amateur like way too Big icons No custom background to it the spacing The padding here is off these are way Too small And with this one you can see that we Have a person Showing the face but we remove the Background so we can you know just focus On the person And the copy done for you beautiful Funnel designs for personal brands We build blah blah see funnel portfolio This one there’s a nice little effect to It Got a small shadow we could have added a Little bit more to the shadow But this one looks clean right here this One has You know great padding spacing and these Are bigger i would do this for all of These three as well And also before you go make sure that You smash the like button so that we can Push this to more people for the youtube Algorithm to reach more people um That inspires me to create more free
Trainings for you and if you want to see Part two of my secret Hacks for designing beautiful funnels For different types of funnels and Clients And behind the scenes of actual real Clients how we get clients how we Attract them how we build our personal Brands then close them overcome Objections Uh collect payments onboard them Smoothly with an automated funnel And then build beautiful funnels that Get results for the clients make the Clients happy And so that they want to buy more Funnels and also refer more people to us Then make sure to check out the course Full-time funnel designer Link is in the description 200 off when You enroll now And it comes with a lifetime access to a Software Called frameworks that i’ve also created So with that said i will see you In the next video peace You
