All right so how do you take a figma Design and turn into a live funnel Inside of click funnels or any other Platform that you’re using that’s what We’re gonna do in this video you know That i first start with a mood board ish But i’m gonna simplify in this video and I’ll just show you kind of where i start To map out the feeling the theme the Style that i want for a funnel so we got Three to five different colors and so What we use for the inner circle if you Haven’t checked it out i’ll put a link So you can watch the the live funnel to This as well and then we’ll start with a Empty funnel and start building it here In a second but first we gotta design it In figma let me grab a screenshot of This as well So we have that inside of figma to kind Of model Boom there we go we’ll move that Right there And then uh we’ll start with the Background color background image sorry So we got different phones in the Background we got a layer which is Gradient then we got a mesh gradient in The middle and then we got the inner Circle logo we got me and pedro Got the 3d icons and then we got a Multi-color headline so Nothing too crazy and so what we’ll Start with is the background image so
For this one i just put together like a Bunch of different funnels that i’ve Built and pedro has built And that will be the theme for it Together with mesh gradient of the color So What i’ll do is i’ll start fresh on a New page i’ll click a or f for frame Slide so we get that 1920 to 1080 this Is good i will then grab This color right here in fact i’ll just Copy All of this into page 2. If i want to i can call this Page 2 is like funnel And then page one is assets And now that i have this i can go ahead And just fill this With my dark color and now i’m going to Assets And well i could just do this copy Background one Into funnel and boom i have it in here So i can just delete this and then i’ll Make the Background color here Right there it was just gonna be one Color though like if i Change this to like 10 like you could See we get a layer but we don’t want That we want a Layer on top of it that is gradient and Mesh gradient so i’ll move this up here And then i’ll create
A rectangle I’ll put that on top of it which by the Way you can do this with any background Image if you want one of you like Working whatever it is you can put that There and then you add a rectangle on Top of it you can see it here so let me Delete that one we got one rectangle and This one will be a linear gradient so Again we’re going to choose this one Same thing here and i will move them Just like That Boom And then i’m also going to choose one Here i just click this right here and i Reduce actually this will be this will Be like 99 so it’s oops So it’s almost just the color and then These will be Like 95 so we can see the funnels On the sides Okay and then what we want is we want um You can click o And keep shift down otherwise it’ll be Not even so keep shift down And then i want This color And i want the effect of a layer blur I’ll make that like 300 Maybe even 500 And then set that down to like 30 percent
Actually you see here on The Rectangle that is too visible i want the Middle one To be literally a hundred percent Right because i i don’t want it to be Any funnels visible there what i could Do is even go into Rectangle And just drag two of these like let’s Say They’re Just like that they’re touching the Borders Something like that yeah i think that’s Good so now we have enough Space right there in the middle where we Can have text and it’s not going to be Distracted by the background image so I’ll actually try to bump this to 50 40. there we go and then i will Just group this Copy it Drag it in here Shift make it a little bit bigger and That will be a part of either the can be Part of the background image or it can Be a part of the graphics As you see here This you can see right there it’s a part Of the graphic that we upload but it can Also be a part of the background like For example You can see that the mesh is a part of
The background so let me delete this and Make it a part of the the graphic Instead so now i just i keep command c And v it’ll duplicate the whole thing And so now i can try to you know add the Graphics in there and now i can Literally just Click this right there Go down to export Png or jpeg I’ll just call it inner circle Background One I already have that so i’ll call it 11 11. then we go to tiny png to compress It obviously we got 1.5 megabytes way Too much and it’s going to slow down the Page speed this is going to compress This 297 it’s a little bit on the high End we want it lower than that but i’m Just gonna go with this for the sake of This video so what i could do for Example is export asset jpeg export it As a 0.75 that’s going to reduce the the File sauce as well There we go i’m going to add that on Fill 100 width okay So now we got what do we got we got a One row or one column sorry And then we can start adding the uh sub Headline This will be I’ll just put this [Music]
Out the background color You don’t want a background color We want the actual text element Put that to white White for bold Make this like 22 Uppercase letter spacing And then this will say Warning not another Coaching Program Instead partner with us Okay and then we want a headline as well And so i’ll make this Like 58 White bald color would be Yeah there we go and then mobile will be Like 36 And then i’ll make this Uppercase as well but no letter spacing Okay so what was our headline we’ll just Copy that Done for you so i’m gonna bold this Oh anyways i’ll just make it white for This one because that’s not the uh the Css is not a part of the the video the Topic today but i can just make it Double or multi-color with the css code But anyways done for you funnel agency Launch system I’ll make this a sub headline element as Well
And get the text i literally just Grabbed the text from this one Make this 20 And maybe 18 moba [Music] 10 pixels And then let’s squeeze it a little bit There we go This one also 1.5 Yeah that’s better All right now we want an image here That will be This one right And so you can see here we want zero Margins or padding here down but we want Some space there So what i would do to build this is go Into my assets And i would upload images for example if I upload an image with a Background color right here i could just Use a plugin here called remove Background Or i can use clippingmagic.com or remove Background you can remove the background Before you upload them here but now for This one you can see how we’ve done it a Pattern me But the number one mistake people do is They don’t look at the full picture just Like oh hey let me make sure it’s Aligned here and kind of here and boom That does like this doesn’t look natural Right so what you do is you look at the
Face okay like it Gotta have about the same Face size there we go And then i look at like who’s gonna be In front Well this image right here and yes we Could ask for a new image but if this One is cutting off i’ll just put me There so that The ears and eyes are kind of the same Same level And then i will just keep Command and move this up so it’ll crop It now i’m also going to delete any dead Space Right now this one happened to have a Shadow so there’s not a lot of dead Space But i would usually just delete all of The or delete remove the dead space so That the image Won’t be any wider than it is causing Additional space here we want zero empty Space outside the image now i’ll grab Some of the assets that i’ve uploaded And i’ll just Add them kind of here to show visually What i did i can also move them Obviously behind me you’ll see on an Image like here i’ve added text the Circle My Signature i can edit the image before i Upload it if i want it to fade out into
The background for this one we want it To be a hard cut into the credibility Section and so that’s why you can see That we have it set like this so let’s Say i want to use this right i would Just Actually for this one let’s do something Else So Inner Circle and then we’ll set this to White Ten percent Will use montserrat Even though i know it’s not that one but Black uh we won’t feel it actually we’ll Do stroke And Then yeah let’s make it bigger 200 160 I can also just drag it like that and Then move it underneath i can command x Select me and pedro command v And there we go i’ll move it beneath us [Music] And so there I can get a text Just like that inner circle and now i’ll Make that white Put it down to like 20 percent maybe And that will be our Our image so Our graphic now you can see we got empty
Space here so i would normally delete That but for the sake of this let me Just group it command g And export it as a png so we don’t get That background pedro ghost and Hero image Okay run it through a tiny png got 400 Kilobytes we’re gonna download it at a Hundred and we’re gonna upload the image Right here just gonna drag it in there Starting to upload and then the hero Section is almost done boom there you go You can see the padding Is at 30 so we’ll just make sure that we Got About the same padding everywhere so That is good Now you can see that it’s cutting off There so First of all let me add a footer to this Page [Music] And then This will be Set to zero so we got Padding set to zero on the actual Section and then Here in the row we want to set it to Zero i’ll put this to zero as well And now You can see there’s still a tiny bit They might be in the image if the if oh Yeah the shadow is the shadow from me That is causing
This to not be you can see there’s a Small space there So even if i set this to the credibility Section here or the footer whatever we Want to use as But then i can just put minus 20 here Minus 10 Minus 12 15. And there we go That is perfect now it’s aligned with The section so now we can go here we can Add new elements and we can start Building out The rest of the page right like if we Have this one that we’re modeling we can Just add a headline sub-headline then Create a new section Oh we need logos like a pr section Great we got Logos right here so You can see we got a lot of empty space There command and just drag it in and That way we crop it now we can just Command c And V I can just drag this out here And boom group them and upload them as An image for mobile i would just set it As Like if you have the logos here you set This as desktop only And then you
Create another one that is mobile only And uh for mobile you can like let’s say This was six logos on desktop and then You could just Copy those and make it More mobile friendly for the mobile Version so that you can actually see The logos otherwise it’ll make them too Small so anyways That is it you would group this run it Through tiny png and you go to the next Section right you need a new background Cool you just go into the funnel There we go And you go I noticed i just built this image here But i would normally build it inside of A dark background if that’s how i want To use it so i can see the text i can See the image the the shadows the how it Fits with this mesh gradient And all those things and so by the way If you want to check out the inner Circle and learn more how we build these Funnels for clients uh you if you need Help with lead generation clients Growing a funnel agency with 10k per Month definitely check it out apply 10 First people get a special launch deal And it’s actually the first done for you Funnel agency launch Program in the inner circle out there in The market so very excited for it i’m Personally going to be in there
Launching your portfolio onto your Profile funnel so you can attract those Clients by looking actually looking Professional And when you get clients i go personally Into your account and redesign it to Clean it up and put it in the portfolio That i also built for you In the domain in the brand name that i Also built for you And It’s it’s awesome so anyways you can Check out all the information about that Uh in the description but hopefully you Found this video helpful if you have any Questions put them in the comments i’ll See in the next one
