|
After Watching Video ,
Try that
"ClickFunnels Gives You EVERYTHING You Need To
Market, Sell, and Deliver Your Products and Services Online!"
|
hello everyone and welcome Sol this is , the final design that will be designing , in today's tutorial so the good new sis , if you'dike to use this layout in your , freelance jobs or even in your personal , projects you can go ahead and do so you , all you have to do is to click the link , I provided in the show notes below and , download the layout there's also a video , that you can use that shows you , step-by-step how to download and install , this on your own website secondly I have , some deals for you in this tutorial so , firstly I can give you up to W percent , off on hosting with a company called in , motion so it's fantastic deal so if , you want some very good hosting I really , really recommend this company secondly , if you'dike to learn TV I also have a , fully featured course this course is , called blueprint 3 it will show you , everything that you need to know about , Di vi to get you up and running if you , haven't really started working with , Word Press I also have a word press course , which will get you up and running as , Welland these two courses are all at , discount sand I'vie also linked them in , the show notes below finally in order , for you to design this layout you are , going to need a elegant themes , membership so again I'vie linked , everything that you need in the show , notes below so without wasting a lot of , time let's dive in and let me show you , how Managed to create this landing , page all right so let's build this page , so first off what we're going to need to , do is to create brand new page so I'm , going to come over here to my dashboard , and I'm gonna come over hereto pages , and click on add new so we're gonna call , this page fitness so this page can be , used fora fitness club gym or whatever , club that you wish because all you have , to do is to change the images to make it , whatever club you want to customize it , to okay so I'm gonna click on use the , Dibbled and use a visual builder , right so with that in place we're going , to start off by adding aback ground , image so I'm gonna come over here to my , section settings click on background , and I'gonna come over here to the , image click this plus button here and , the image'm gonna use for this is this , one right here click on upload image , okay so Icahn see my image is right , there in the background the next thing I , want to do is to come over here to , advanced click on custom.cs sand you're , gonna add this CSS code now what the CSS , code does it just stretches my image so , that it fits the whole page right so , let's go over back to my content and , then click on background now over here , on my background need to come over , here to this second tab because this tab , is very important because the style that , we're gonna get from this is quite , interesting so let me choose my colors , for my gradient type so I'gonna come , over here and select this blue and then , I'm gonna come over here to the right , and this is where we can play around , with these colors and see what works so , now that I have my two colors selected , I'm gonna come over here to my third tab , which is the Image stab and then click , on a background image blend now here we , can try multiply okay so I can see we , have this but this dozen'look really , nice because this is a swimming pool , ideally if you want to have this water , as blue as we can so I'm gonna come back , over here change this yellow and let's , find a version of blue so I'm just gonna , drag this around until I get to a spot , which I'm happy with so I'gonna leave , that there for now I'going to try and , shift my gradient direction as Welland , see what effect can get from this so , as I'm dragging this in fact I'm gonna , come over hereto my image and let's see , what changes are happening so we can see , here the darker part is towards the top , right of the image and that'snot what I , want so I'm just going to drag this , again to make sure we have Avery good , balance right so I think that's okay I'm , gonna go ahead now and save the next , thing I want to do here is to add a , column structure so the structure I need , here is a single column and in that , column'm gonna add at ext module so , I'm gonna type in here text so I can , find it easier , so the texting I'gonna use is some , dummy text from lo rem opossums I'm just , gonna come over here and copy a chunk of , text so I'm just gonna copy this and , come over here to our site and paste it , inhere right so you can see here the , text is quite small now let's fix that , straightaway so I'm gonna come over here , to my design tab click on text now , change it from dark to light and the , text orientation that needs to be , centered right so that's looking good so , far , now let's come over here to the text , font now over here we need to use font , calfskin and let's add let's , increase the font size so we're gonna , make this really big so I think W he's , perfect and then I'm gonna come over , hereto my line height and reduce that , to about 1.okay so that's looking good , so far , I'm gonna comeback to my content tab , click on text now what I'm gonna do here , ISO am going to add a break to this , text so I'm gonna click right here and , add my HTML code well that's that's not , what I'm looking for , let's have a look let me add my break , okay I'vie added my break in there so , that'looking really nice I'm gonna go , ahead now and save the next thing I'm , gonna do here is to add a button so I'm , gonna click this plus button here and , add our button module sou'm gonna add , it by clicking this button here and are , we gonna call this sign up okay now let's , stylize this button so I'm gonna come , over hereto design click on alignment , and make sure that'Salinger Center and , then we're gonna come over hereto , button and for us to customize this , button we ha veto make sure that use , custom styles for button is activated so , I'm gonna click on ye sand then we're , going to increase the size of our texts , to about say and we're gonna come , over here to button board and color , right so we're gonna make it white , then I'gonna come over here to my text , color and make that white- right so , that's looking good so far but now we , need abut ton with rounded edges so I'm , gonna come over hereto my button , border-radius and I'gonna increase , that until Get to about say yeah I , think is fine in fact now let me , increase it ab it more to about say W , right that'better so I'm gonna make my , font bold and all caps like that so , that'looking much much much better now , my border width that's a bit too thin , let me make it about 4 in fact maybe , will do right 3 is fine , I'm happy with that and then finally I , prefer not to have an icon there so I'm , gonna come over here to add button icon , and set Otto no so all I'm gonna have , is a button without the icon so I'm , gonna scroll over here to the bottom and , what I'm gonna do here is I'm gonna make , sure that have a transparent color , because we don't have any indication , that this ISS button when we hover over , it so I'm gonna come over hereto button , have aback ground color and I am going , to choose a color here but add , transparency to it , so let's see right I don't really like , that color so let's try this no that's , not working , okay let's choose this orange okay maybe , that could work in fact maybe it's uses , yellow that matches that cap okay so I , think that's fine but what'm gonna do , here ISO would like to get rid of this , have a radius so I'm gonna put 0 in , there so next what I'gonna do is I'm , going to increase my border radius to W , to match what we have up there on the , top so that when we hover over it we , don't get a weird shape and then I'm , also gonna come over here to my hover , border color and I'just gonna set it , all transparent so when Hover over it , I don't get that border so I think I , like their style better okay so I want , to go ahead no wand save now we need to , find a way to push , all this text and the button been , slightly below so that it becomes , centered so to achieve that'm going to , come over here to my row settings and we , are going to add some margins so I'm , going to click on design click on , spacing and for a margin top I'm gonna , add NOW this is where you can just , play around with this with the sizes to , see what what works for you because , sometimes when you have a different size , monitor you might need to add a bit more , so maybe let's try W right in fact I'm , think'm happy with okay so let's , leave it at SO that's it for this , section'm gonna go ahead and save now , let's go ahead and add on next section , so I'm gonna come over here and click , this plus button hereto ad dour new , section'm gonna click on regular and , we need three columns here alright so , what we're gonna ha vein these columns , are blurbs so I'm going to click on , blurb and I am going to start adding my , content so I'gonna come over hereto , my lo rem opossum text'm gonna highlight , this paragraph and I'm gonna come over , here and paste it like that I'm gonna , take a bit of this text and use that as , my heading text so I'gonna paste it , here on the top so you can see here with , this is starting to take shape let's , come over here to design click on image , an icon in fact here on the image an , icon we don't need to do anything here , so let's go to text and we are going to , change this orientation to the center , eventually we're gonna have this text , set to white but for now we need to be , able to see what we're designing so I'm , going to come over here to edit text I'm , gonna make sure that this is bold and , I'm also going to change this to our , font which silicon and we're gonna , make this bigger so let's let's increase , the size let's make it about say , maybe even W right let's make it all , cap sand , add a bit of line height so I'll say 1.3 , is perfect now next let's go to the body , text now here weened to increase this , to about say W me yeah about W W is , fine okay now our body line height , I think.8 is perfect so that's looking , good so far , now let's come over here and add our , icon so I'm going to come back here to , content click on image an icon and then , I'going to click on use icon so here , we can just choose any icons that work , with our theme so I'm gonna start with , this lock so this could be something , that signifies a membership or whatever , Otis but you can change this if you , want okay so now that we have our icon , I'm going to come over here to design , check click on image an icon now we have , the opportunity to change this icon , color and make some settings so first , off I'going to come over here to use , icon font size and decrease that to , about say and then our icon color we , might as well start making it white so , I'm gonna add my hexadecimal for white , like that and then I'm gonna come over , hereto my text change it from dark to , light okay so that's looking good so far , I'm gonna go ahead now and save changes , now let's go into our row settings right , so in the row settings click on , background so for my first background , here I'm going to click this plus button , to add our background color so I want to , start off with ya I'm gonna start off , with green next I'm gonna save and then , duplicate this so I can add it to the , other two columns so duplicate this , twice like that and drag it into , position , right so right now it looks like there's , nothing on there that's because we don't , have aback , color so let's go and fix that so I'm , gonna come back here into my row , settings click on background and I'm , gonna start adding my background colors , so my next color here is this okay so , that's fine I'm gonna save and then I'm , gonna add my final color so back again , here click on background and I'm gonna , go Tommy third column and add redo so , I'm happy with that now I'm gonna go , ahead and save so we can see now that , this section is taking shape next what , I'm gonna do is I'gonna come over here , to my section settings and click on , design spacing and I'gonna make sure , that my custom padding on the top is set , to and at the bottom because we , don't want any spaces here as we're , designing this so go ahead and save now , let's go back into our section settings , click on design sizing now we need to , make this full width so I'm gonna click , on yes for full width and then'm gonna , come over here to my gutter width and , set Otto NOW the reason why we said , setting it to is because we want this , to be edge to edge and then I want to , click on a finalize column Heights okay , so that's looking good now okay so let's , go ahead and save and now it'stymie to , come into our module settings so I'm , going to come over here click on design , and I'going to come over here to , spacing now let's start off with our , margins so I'm gonna star toff with , adding hundred at the top and at , the bottom let's see how that looks okay , it'snot too bad so I'm gonna try maybe , W and okay that's looking cool , so I'm just going to copy this and I'm , gonna add it Tommy other columns so I'm , gonna come over here click on design , spacing at my margin top and my margin , bottom and it's safe and do this to the , final one , pasted here and paste it there perfect , so I'm going Togo ahead and save so , over here I can see Have this white , space and he's really annoying me so let , me get rid of that by coming over here , to my row settings click on design and , spacing so in the spacing here on my , custom padding top I need to add zero , and now as I'vie added that you can see , now that my section here is touching my , top section which is exactly what I want , now let's do the same to the bottom to , get rid of that white space like that , and that's perfect I'gonna go ahead , now and safe so now you can see our page , is really really taking shape so let's , go ahead and add our next section so I'm , going to click this plus butt onto add a , new section it's going to be regular , section and a single color so what I'm , gonna do here is add a text module so , I'gonna scroll all the way down and , select my text module so here I'gonna , paste my text sou'm just gonna copy , some text from here like that and paste , it in place then I'm gonna comeback and , Aim going to copy some text which I'm , gonna use as my heading text now paste , it in here and I'm gonna add my HTML , tags for my heading like that perfect , okay so that's looking good I'gonna , come over here now to my design click on , header text and I'm gonna make it bold , my header font'm gonna choose my font , vol on all caps and we also need this , centered so I'm going to come over here , to text on the text orientation make , sure that it's centered so everything , now is all in the center which is , exactly what I want so on my text font , here'm going to increase my size to , about let's say okay so I can see , here that we don't have enough text so , let me add a bit more text in there so , I'gonna come over , -no room - and I'm just gonna copy some , more text and paste it inhere like that , okay so that's better so I'm going to , come back to my design click on text add , some line height to this so I think one , point six is perfect and yeah I think , that's fine okay let's say let's save , this for now next we are going to add a , another row and this time is gonna have , two column snow in these two columns we , are going to add buttons so I'm gonna , click on button for a button module so , our button text is let's say try out , today okay that's gonna be our text for , a link'm just gonna add a blank link , for now click on design alignment now we , need this align all the way to the right , and then we're gonna come over hereto , text and make sure our text is set to , light click on button and we need to , again as before access our button styles , to be able to customize this so let's go , ahead now and click on button background , color so for our color here you can , choose any color that would like to use , but I'm just gonna you know choose a , random color maybe try its just colors , that are close to our palates okay let's , go with that next what I'gonna do is , I'gonna come over here to my font make , it all bold and all caps for my icon I'm , gonna say no and then'm gonna come , over here to my button border-radius , again we would like this butt onto look , like a pill okay so that's fine At's , and perhaps we can just increase our , button text size a little bit more to , about say maybe W or maybe , okay so that'looking good so I'm gonna , go ahead now and save because'm happy , with that button next I'm going to , duplicate this button oh I can just copy , and paste it so I'll just do it easier , copying and pasting it like that so , again I'm gonna come into my settings , and this time this button needs to be , aligned all the way to the left so they , get to be close together so I'm gonna , click on left so now they're closer , together which is exactly what we're , trying to achieve click here on text no , in fact our button let's change the , button color and this time I'gonna , choose let's find a darker color okay I , think I'll go with that that's fine okay , so that's looking good I'm gonna go , ahead and come hereto my content click , on text instead of tryout today we , could say free lessons tomorrow , in fact the buttons don't match because , that's way too much text so let me get , rid of that and just say free lessons , now okay that's slightly better okay so , that's fine I'm gonna go ahead now and , save okay so now this section is , complete let's go no wand add another , section so I'm going to click on this , plus button here click on regular and , this time we need two equal columns so , on the left column we are going to need , a text module so I'm just gonna select , text'm gonna paste my text in here , like that then we need to add break so , we could do it right here okay that's , fine okay I'm happy with that I'm gonna , come over hereto design click on text , and let's make this text in fact doc is , fine let's make it bold and let's choose , our vol con as before just for , consistency so I'm gonna make this text , size much bigger in fact maybe could , do right I think that's fine line height , I am going to make IT.3 yeah I think , I'm happy with that and then I'm going , to go ahead and save , now the next thing I'm going to do here , is to add my next module and this time , is going to be an image module click on , image now let's select our image and , this time I'm gonna go with the marathon , runners click on upload perfect so we , can see now that we have our image and , our text that goes along with it on the , left so what I'gonna do next is to add , a background color and ideally we would , like this to fill in this whole section , so let me show you how to do that so I'm , gonna come over here and say for now and , then'm gonna come over hereto my row , settings so in my row settings I'm gonna , come over hereto design click on sizing , make this full width and then I'm gonna , come over here to use gutter width set , that to like that so already we can , see now that this section is taking , shape'm gonna click on equalize , column sand then I'm going to go ahead , and save so we can see now that's that's , looking good now as before we're gonna , come over here to our section settings , click on design spacing and we just , going to make sure that the top padding , is set to and the bottom is set to , okay so what weened to do next is to , come over here to our text module and , let's click on design spacing and let's , ad dour margin so I'm gonna start off , with margin left let's add a hundred to , the left and to the top let's add W so , I think that's looking really good so , I'm gonna go ahead now and save so , that'perfect , so I still have this white spaces here , so let's go back into our row settings , click on background in fact we need to , go to design click on spacing and we're , gonna make sure that our custom padding , tithe top is set to zero and zero to , the bottom like that okay so that's , looking good I'm gonna go ahead now and , save now let's ad dour final section , and this section is gonna have our , latest news or the blog so I'm gonna , click this plus button to add our new , section so this is gonna be regular , section single row and in that row we , are going to have a blog so I search for , it and click on blog and for this we , only need three but obviously if you , have more than three you can always add , more let's come over here to design , click on layouts so instead of having , this full width like this it's much , easier to read if it's a grid so I'm , going to select on grid so now we have a , perfect grid which is exactly what we're , looking for , let's go ahead now and save and then we , need to add a title to this so all we , need to do now is to come over here and , add anew row single column and I'm just , gonna close this and drag this to the , top now for consistency what I'm gonna , do is I'm going to come over here and , duplicate this so I'm just going to , duplicate that and drag it into my row , like that okay perfect so I'vie got it in , here so Indeed to come into my module , settings because there's a setting there , that has all this padding so let's come , over here to design click on spacing and , you can see here this is the reason why , we have all that space so I'm just gonna , get rid of it and also to the left and , I'just gonna make sure that this text , a is centered and also reduce that text , because because it's a bit too much so , I'gonna come over here and just get , rid of it like that okay so that's , looking much better I'm gonna go ahead , no wand save changes so pretty much this , is our layout it's final and it's really , looking nice to make things even more , exciting if you are going to change your , landing page you can always come over , here and swap these images so you can , always you can also use a different , image so let me show that let me show , you quickly how you can do that so I'm , going to come over here , section settings click on background and , I'm on my background tab I'm gonna , delete this for now click the plus , butt onto add another one and this time , I'm gonna add this image click upload an , image so you can see here this this , actually is a much better image right , okay so let's play around with the , blending modes so I'm gonna click on my , tab here for the blending mode and I am , going to select a color so I think what , works with this is a nice warm color , like that , okay so let's click on our image so we , can see here the warmth is over tithe , right you can play around with this , however you want I can even change this , to maybe a purple and then I can play , around with my direction so you can see , here as I'dragging this you know it's , changing my direction , so I'gonna leave it like that and I'm , gonna save so this is another layout , that you could actually have so the , beauty of using this template is you can , go in and change your backgrounds , according to you season or according to , what's happening that week in your in , the company okay so that's really cool , so all you ha veto do now with this , layout is download it it's absolutely , free you can use it in your designs or , with your client sand all you have to do , is to go in and change this text and , also change these background images okay , thanks alto for watching hope you , like this tutorial and also to support , this channel please do use my affiliate , links and now if you do that I'll really , really appreciate it so all the links , that you needs to purchase your hosting , is in the show notes below and also if , you haven't bought Di vi the Di vi , membership you can also do so by , purchasing it in my comments box below , we also have course which will show , you step-by-step how to use Di vi right , from the ground up and this course is , called , Di vi blueprint you can go ahead and , get W%disk , if you purchase this today again I'll , leave the link in the show notes below , thanks alto for watching and look , forward to more tutorials like these and , make sure that you subscribe or sign up , to my newsletter in order for you to be , notified when I release new tutorials , thanks a lot for watching and see you , soon
