How To Design A Beautiful Homepage Using Elementor For WordPress

Okay now in this video I'm going to show you how to build a beautiful homepage using the Elementor page builder and like I've said in my prior videos even if the homepage that I'm going to design right now it's can be beautiful but if it's not what you want you still should go through this process because by going through this process you're going to learn exactly how to use this page builder in exactly how to make anything that you wants so right now this is what our homepage looks like amp but in a little bit here this is what it's going to look like you have this beautiful headline and word of these buttons and it's just going to be amazing like this and you can make it look however you want but this is what I'm going to teach you right now so let's get started so first what I want you to do is upload some images to your WordPress website that were going to use in the template there so I need you to click on this media icon right there and it's good take us here to your media library now you should only have this one image in here and this is actually the image from that D fault course that we had added when we were installing the learning management plug-in and that's how we ended up getting this image but we need to do is upload the images that are included with what you downloaded earlier in one of the videos there we just need upload those and those of the images were going to use in these templates to get them all set up so right here is those downloads if you double-click where it says page templates there should be a folder that says template images when you click on it is can you show this a variety of images right there swimming to do is I want to click on add new and then I'm just gonna drag and drop all these images into this space right here are some of the highlight them and drag and drop them and Uranus either all uploading right now now this might take a sec because there's quite a few images and some of them are on the larger size so and it's really easy to delete images oops we got that in there twice someone have to click on that and delete it so I clicked on it and that Seattle here it is delete permanently let's get that out of their right so that image is gone and so here's the images were going to use for the template now the homepage working to create is really just using this image and that image right there but the other two homepage templates that I've included organ to use the variety of other images that you see now available to you on your WordPress-based website so let's get to building someone click on pages and then for the homepage I'm just going to click right here it says edit with Elementor now if I hadn't already gone through this page in the prior video what you would want to instead do is click into it and make sure that the template right here are said to full width okay full with disconnect you have that full capability and integration with Elementor and that's the option that we want right there but already have that set so if you didn't just choose then click on update but now I'm to go ahead and click on edit with Elementor it's gonna take a second then it's gonna pop up into the Elementor page builder okay everybody this is where the fun happens we are going to build this page right here step-by-step and this is where we are starting from so I might give you just 1/62 overview of what a page builder is and how every page is structured so every website page that you go to on the Internet is going to be broken down into a series of sections in those sections you can have rows and columns and then inside those rows and columns you're going to have text or images or some kind of element and so that's exactly how this is so this area right here is a whole section and this is a row with this headline a row with this sub headline and another row here with this button and that is a section and when you scroll down this is a different section and it has this beautiful image in the background to show you how to do that might be hard to notice but there's a bit of a texture on the top and the bottom of it on the show you how to do that but this one actually has two columns now I did some tricks to make one larger than the other and to make it appear that it's on top of the other but that's essentially all this is a section with two columns and this is a section with three columns in this right here is a section with two columns and guess what one column has this image and the other one has this bit of text right here and then this is a two column section and then I flipped it right here and then I flipped it here a again and this is a section with three columns anyways you get the point I don't need to go on and on so that is essentially all that any webpage is is a series of sections with rows and columns and you put things in these rows and columns now everything is good to be drag and drop so the first thing we want to do is we want to add a new section some the click on add a new section and then it immediately gives me these column options are these layout options so this is going to be a to calm and all I'll be using that for that second section and then here's a three column I'll be using this exact structure when I'm doing the testimonials and on and on slick suit started I want to just use this section right here and now I have it right there so when I hover over it I've got one column in it and if I click on this I can have some settings for the column if I click right here it's a section I can like this it's good to show me a set settings panel right here for this entire section now everything has these setting panels so a section has it a column has it and each individual element like a headline or testimonial box they'll have their own set of settings as well so they're always typically broken down into three different settings panels the middle ones get to be your style and that's the way to visually get a look color as font options etc. etc. and then some advanced options and then this first option panel for each thing we click on will be specific to what it is so since I'm in a section it's showing me a layout option and I'm not can change any of these and then we have this style option here this background I'm in a leave is why and then we have this advanced option so what I need is when I'm looking right here I need to have headline a sub headline and a button so let me go ahead and toss those elements in here so my click on the dial pad right here I want a headline I'm in a drag and drop it and then I want a another headline so I can either click on the dial pad and Dragon new one in or on these elements if I hover over it off to the right of it there's a little duplicate button right here so if I click on this it's going to duplicate it so now I've got my two headlines right there and now I want a button so I can scroll up and down here to find a button I know it's right there but there's little search box right here so I could start typing button if I wanted like that in there it is obviously I already know where it is but when you start having lots of elements sometimes a search feature makes it more convenient some to drag and drop the button in right there and I wanted to be underneath so I have these elements right here now I can go and center each one if I wanted to but there's a really neat option in the section right here the section settings where I can center everything so I want to do it that way because that makes more sense to me so many click right here it says section and now I'm back into the section options and so centering everything in this section is going to be found in the style options for the section some click on style and it's good to be hidden right here it says topography so when I click on that I have topography options is essentially the font options that would be global to this section only and so what I want to change is this text align I want that all in the center so that is the easiest way to globally is set a setting for an entire section now when I make a new section everything is going to be back on the left align this is just can apply to what's in this particular section right here so now I'm in a go ahead and start styling this up a little bit but you can see that a lot of this is actually already done you can see I'm I moving right along here now before I start changing the heading I it's a little too high here I need to have a little bit of spacing to make it look like this and push it all down how there's two different types of spacing one is called margin and one is called padding now margin is spacing outside and padding is spacing inside so I added some padding it's can add spacing inside the section in the margin would be adding spacing outside of the section so I just want to push this down but keep it all in the same section so those options are always good to be found in the advanced tab summit click on advanced and I want to add may be I just want to push it down some some and add padding now if I just want to add padding to the top which is to push it down if I start typing a number in here it's can add tat padding to the top the bottom the left so if I type the hundred just like this it's pushing it all around and that's not what I want I just want to push it down 100 I don't wanted to to have it be on the right and the left in the bottom as well so what I need to do is let me just delete that after click on this little link right here and that's can unlink everything together and then I'm going to go ahead and put my 100 in and so that's can you give me that spacing that I was after now I want to start working on this heading right here some a click on it and so now I have the settings for that in my style in advance just for this heading so let me go ahead and paste in what text I have for the most amazing course obviously you can put whatever you want and for the HTML tag since this is the first headline I don't wanted to be in H2 I want to be heading one is more of an SCO thing you see just made it a little bigger but it's not quite the size I wanted to be yet so go ahead and click on style and I want to turn on this topography override by clicking on this little switch here and now I can fully customize the font the topography for right here and what I want to do is increase the size to 55 so I can click here and enter 55 or I can just take this dial and I can bring it across till it says 55 men in there I have it the most amazing course and so when I look there it's looking pretty much the same okay so that is pretty much all I want to do to that headline so now this headline right here is going to be a little different now the funny thing is I've already made a mistake this I didn't want to be a headline actually I wanted to be a normal text box so what I need to do is delete this summer to go ahead and click on this X right here to get rid of that heading and then I might click on delete to confirm and so this is real time you can see him and to make mistakes but fix them and show you that it's okay to make mistakes as well so what I wanted to do is click on this text editor and I wanted to squeeze that in between like that very go now let me paste in the text I have for that okay so you see that when I pasted it in and added this little extra spacing here that I don't want now unfortunately sometimes WordPress does this where if I want to goes like right here it's is really and I go back like that it's gonna pull it up to the same line which is not what I want to but then when I hit enter it's gonna push it down which is also not what I want in the way you deal with that is actually really simple you go ahead and click on this option here that's his text is going to show you your text but it's can be wrapped in some code but I don't actually want any of that something a highlighted like this I'm gonna delete it and now I'm going to actually paste my text exactly the way I wanted it and there it is right there but you see now I'm still on the same line but if I click on visual now it's gonna push it down to the second line for me such as one a little quirk sometimes when you're using a visual text editor this has nothing to do with Elementor just how it is with all websites but the other week I just got it all on two lines and that's exactly what I was after you can see were pretty much looking the same right there so next I want to style this button and this is one of the things I love about Elementor's it's so easy to style your button to be exactly the way that you want it so for some to click on it there to pull up its settings panel now you can see right here where it says text this is going to be the text for the buttons you see it says click me and then right there it says click me someone to put in what I want and I wanted it to say get started just like that now right here is where you actually put in the link that you want someone take into when they click on the buttons you would just go ahead and put that in there now I think the buttons a little on the small side and you can see right here size is small of an increase that to large and it just going to make the button a little bit larger now I could tell you though I don't like all this spacing on the top and the bottom I want this to be a little more narrow so go ahead and click on the style and let's try to play around with that size and the style overall so here are our style options so first I actually want to override the topography a little bit I want my button to be in SO for topography and monitoring this on and then further transform this is where I have the option to put whatever's entered here in O choose U can see now I have my letters in perfect N if I wanted to change anything else I could if I want to change the size of the font I can do all of that right here very easily so I'm scroll down so that we can start changing some other style options so the next main style option is what happens for the normal in the hover so this is the normal color right here and it's pulling from the accent color that we set in Elementor but then there's also a hover color that we can set now or not seeing it when I hover over but if we collapse the editor settings right here we can see how it looks and we don't really have it set to anything right now when I hover over it so let's pull our settings panel out again and let's click on a hover and let's set a background color for hover some to click on that and just go ahead and put in that other main color that were using for this homepage just like that so now I'm going to collapse it and you can see when I hover over the button the color changes now obviously you don't have to have a different color like this if you didn't want to but I tend to like it so that's all I wanted to do to the button color to have that hover option right there so know what I want to do is add some box shadow what that is is it's going to add an effect word kind of lifts the button up off the page so when I show you this button here you can see how there's a bit of a shadow here and it's lifted off the page a little bit of this is a very modern design trend that works very well when you use it subtly and a lot of the different options in Elementor have this box shadow option so I'm in a turn it on it's actually just right here box gentlemen to turn it on and you can see it already added the box shadow and it it looks nice right you know it looks like it's lifted up a little bit but what I do is kind of spread that shadow out just a little bit more than it is so let's look at these box shadow options now you can change the shadow color and these four different options here so first thing I would do something to increase the blur and you can see as I increase it it's starting to kind of spread it out some but the problem with that now is it's spread out how I like it but it kind of is a little too dark for me it looks a little like like there is dirt underneath the buttons when you look at it just looks a little dirty to me so what I want to do is, lighten that up a little bit some of the go ahead and click on the color and instead of playing with this dial I'm in a play with the one here on the right to lighten it up a little bit so let's see so now when I scroll down a little bit you can see it's a lot more subtle of an effect so let me collapse the editor so now you can see how it looks just slightly lifted up there is this box shadow but it's very faint and you can't quite put your finger on it but it definitely looks lifted off the page some and that was the effect that I was going after with adding this box shadow and I use it on all the buttons on this page I really like it so the next thing is the size inside here where the text is from the edge of the button and this is going to be your text padding so I'm go ahead and change this here so what I want to do first is on link everything and basically it sets all the values to zero and you can see my button kinda just disappeared and is now just wrapping around the text so what I'm putting is 10 to 50 1050 so for the top put 10 for the right, to put 50 for the bottom, to put 10 and for the left I'm going to put 50 and there we have this more stylish looking button doesn't that look so much better than the way the default button looked it's got a custom spacing in this beautiful box shadow around it in this beautiful fade when you hover over it now the beauty of Elementor is if I want more buttons on this page I don't have to go through the entire process I could just go ahead and just duplicate this button and move it wherever I want on this template and that's one of the things I love about Elementor so to me it looks like this is section right here is pretty much done it's looking close enough to how I showed you in the beginning so that what we need to do is add a new section and this section is good to be the one right here with this background image and these two columns so this is going to be a little bit more of an admin advanced section because of the all of the different tips and techniques that I'm doing to make this effect happen so let's go back here I'm in a click on add new section and this time I'm going to add a two column section like this and you can see now I have my two column section some of go ahead and click on the section options in the first thing I want to do is make the content area not as why not take up the full width so what you do for that is here is a slider to set how wide the content area is and I'm set this to 900 and that's just how wide I want the space for those two boxes before I put the image in the background and manipulate that I first want to go to the advanced tab to add my spacing because I don't have anything in these columns if I don't add some spacing in there and I try to add the background image I'm not can really be able to see it the way that I want to see it so what I want to do is add some padding and remember that's the spacing on the inside of the section so I want to add some padding and unlink it and I'm an ad 140 to the top and the bottom so now my section has a good amount of space to the top and the bottom so now I want to do is go back to that style tab and start adding some style to the background of the section before I put my column information in so what I want to do is for the background type I'm gonna click right here it's is classic and then what I need to do is just choose my image some to click on the plus now I've already uploaded my images that we did that in the earlier step and I'm in a click on media labor and I'm going to see all of those images right there now I have two of them one of them is bankrupt to be a square and the other one is a lot wider so this is the wide one right here is the square so what I want is the wide one just like that and then I want to click on in certain media and you can see I have my image right there now for the position that's how this image will be positioned and I want to choose right here it says center center and that's gonna put the center of the image always in the center of this section so now what I want to do is add a background overlay because when you have such a vibrant image like this it's hard to put anything on top of it because it just it will just dominate whatever the content is someone to go ahead and click on background overlay and I can go classic but on this one him to do a gradient although it's going to be hard to notice the gradient because it's going to be a whites and a slightly off white color so a gradient it's kind of hard to explain it's essentially where you have one color blending into another color so for the first color here I'm going to choose whites and so there is my white option and its are you trying to blend into this color which is not what I want some to click on this and I'm been a change to this color which is kind of an off white you see that it's just a little off white like that then I need to play around with this location setting right here and what to do is I'm going to slide this bar all the way across like that to 100 and then for the second color I'm going to move this kind of in the middle to a 50 just like that so you can see it's already starting to wash out and kind of faded that image into the background now for the type of gradient I'm going to choose a radial gradients like this and then what I meant to do is bump up this opacity settings opacity is how much you can see through a color so right now it's way too low and that's why the image is so prominent still some move this up to know I'll go eight point .85 there he go so now it's kind of looking like it looks there you see how it's just perfectly blended in but see what's really neat about what I have here is if you look the edges it's kind of feathered a little bit and at the bottom what that is is this option called a shape divider and we can add it to the top and the bottom so I'm going to do that now now there's all these different shape options right here the one that I used was called mountains so when I click on mountains you can see it's already starting to be feathered in a bit but what I do is I want to play around with the height a little bit so I have a little bit more control and I will set this to say 70 okay and that's just the height of the mountain affecting you see it's perfectly blending in now but see I actually want to do the same thing to the bottom sauna click on bottom choose mountain and what I go with that same 70 I like how that looks now there's lots of different types of shape dividers alarming to be using some of them in other parts of this homepage but I just chose the mountain one and I really like it because when you change the height it gives is a little blended in effect to the image like that were just looks very good there so now that we have the background done we can start putting content into these two columns so the first thing I'm going to do is I'm in to go ahead and click on the dial pad and if we look at what I've got done here we've got a headline we got a text box and a button so let's just go ahead and re-create it and what I would do is create it right here style it right here and then just duplicated over there and that's what I'm going to end up doing to save some time so I have a heading now I want to get back to put my other elements on click the dial pad I got this text editor like that and then I want to put my button in there some to go here and remember she's going to duplicate this button and call it a day so my go ahead and click on duplicate and now I have two buttons and I can go ahead and click and drag that button down here that's just the save time and wanted things I forgot to do in the section was the center everything so to get back into the section I want to click on section right here and I think we found that in the style tab down here were it said topography and we clicked on centerline so there you go now everything is perfectly center aligned so no it's set up this headline here some to click on its and let me just paste in my content right there and it's actually looking a little too big for me to changes HTML tag down to an age 3 and it kinda makes it a little smaller typically when you go to a higher number header tag like this from H1 to H2 to H3 just going to make it a little smaller but I can already tell that I'm gonna need to tweak that a little bit so what I'll do is click on the style tab right here and let's just start styling this a little bit more Domino do a topography override him to click on their to reveal the options and I think for the size I might go with the 25 so let's go with the 25 just like that now the font is a little thicker than I'd wanted to be and that's called your fontweight so instead of the default I'm in a go down to a 300 and cc that just made it a little thinner which is kind of the look that I was after and lastly I would like to space out these lines there little too close to each other and it makes it a little hard to read so I'm in a adjust this line height maybe two I 1.3 30 go 1.3 and I think that's probably looking pretty similar right there okay so that's looking good next him and I want to push it in a little bit so when you see here I have that there will a little bit of spacing for the headline that isn't also with this text block some to push the handle and a little bit and that's good to be in the advanced tab and summon to add a little bit of padding to Ammon at about 30 to the left and 32 the right so 30 and 30 and that just pushed it in a little bit that's exactly the look that I was after so next we have this textblock I like it the way that it is and then we have our button and I like how that is as well but if you noticed I need to have the background to be white not the background of the section just the background of this column now columns have their own style settings so when I hover over this column and click on column just like this now I have my edit column settings right here so first thing we definitely want a background color or someone to click on this classic and I need to choose white and so there you go now we have that white background which is what I wanted now I want also add that back box shadow to the column so I have the option right here it says box shadow I just need to turn it on and it's already given me that box shadow but I want to do something similar to the buttons where I spread it out so remember I took the blur and I bumped up the blur 250 and then I played around with this color right here by going like this just enough to lift it up a little bit something like that that looks good to me right now so now the only problem with this boxes I'd like a little bit of inner padding on the top the left and the bottom in the right I like to add a little bit of padding there and I want to do the little bit of spacing to make this one larger than the one that's gonna be next to it so I need to go into the advanced settings for the column and what to do is for the top and the bottom for the margin I'm gonna set it to a -20 but before I do that I have to unlink it some to go -20 and then for the bottom to go -20 just like that and now I want to go ahead and add that padding so I'm going to unlink that and for that I'm a do a 6025 just like this so I've got 62 the top of the bottom and then I've got 25 to the left and the right just like that now you can see I kind of scrunched and in just the amount that I wanted to know that this box is exactly how I wanted him to show you a ninja trick with Elementor and that is duplicating columns so instead of doing everything I just did in this column I can click on column and it reveals these options and there's a duplicate option and now I just duplicated that column but this is to be a two column not a three column so I can go into this column that is empty I can click on column and then I can click on the little X and then that's going to delete that column so I just the saved some time right there now I'm going to need to do a little trick to make it look like this column is on top of this column so I need to get back into the column settings of this column here when I click on column my click on advance and this is a little advanced I have to add something here it's it's only to work if you were using the CSS I gave you but we need to put something in here and this is what we need to put on top just like that on top and what that's going to do is make this appear that it's on top of this just like you see there is see how it's now on top of this is a CSS thing that we added in the customizer that essentially says there's anything in Elementor and it's a CSS class and it says on top that it's going to appear on top of anything else that might be around it and so that's all that that is so now we need to tweak this column a little bit but you can see the timesaver of styling by through duplication like that some go into the column settings here like this and I'm in a play around with the margin in padding to make it look like it's smaller and kind of in the background so that's good to be advanced again and so we had these -20s that we put here but I'm instead to put a positive 40 what that's going to do is push it down like that you see that 40 so this is just playing around with margin and padding and for the padding here I'm in a play around with that a little bit instead of this sixth EM to make it 40 this just the top and bottom to further the effect of having it look like it's on the bottom so there you go and we pretty much created that section but the only thing left is to change the color of this button and that's actually a really easy thing to do so let me go back here and then I'm going to click on the button and I need to player out the colors there so many click on style and remember when I scroll down we got the normal in the hover so for the hover we have this color but I don't wanted to be the hover color I want to make it the normal colors on a copy it's in for the normal I'm going to go ahead and put it in here and so there is the color but then we hover turn the lighter color some the click there and here it is actually in our color picker so now when I hide the editor we've got that button and we have that button so we have this slight variation there now the only thing I don't like is I want to push this button down some there's all this extra space there so let's go ahead and click on this button and go ahead and add a bit of margin to push it down so I clicked on the button them to click on advance I'm going to unlink it and to put some top margin and let's just put 50 or so second it pushes it down a little so that looks close enough for me for us to move on okay so next we have this section here and this is actually to be really simple to do it's a testimonial a section with three columns and a testimonial so I'm a scroll down click on add new section choose three columns like this anime click on the little dial pad and I'm going to find the testimonials element it is good to be under general elements most likely testimonial there it is my go ahead and drag and drop it in there now off the bat you can tell that we need to play around with the size of the font to the line spacing the padding on the left and the right some and we want to have a little bit of a box shadow but the first thing I want to do is actually add a little bit of spacing above this section to push it further away from this section above you know you never want to like have everything so tight together some to go ahead and click on the section settings right here and I'm going to add a bit of margin so I'm to go ahead in for the top and the bottom and go with that same number of 140 I think of use that a few times and that's gonna push everything away just like that which is exactly what I wanted so now let's go ahead and play around with the column settings to kind of lift this off the page a little bit with some box shadow someone click on column and I'm in a turn on the box shadow option right there and it's kinda lifting it up off the page which is what I wanted now let me just play around with the blur a little bit will go up to 50 just like we're using on the buttons that we been doing and I'm in a dial this down a little bit in there we have a nice subtle box shadow that I wanted to next what I want to do is I want to add a little bit of spacing in between these columns so if I put a box shadow here in a box shadow here everything to be kind of close together so when you see here I have it spaced out a little bit and that's kinda what I want to go after for this so we need to add a little bit of margin in between these columns here in order to do that is really click on advanced for the column and then we have this margin tab and so I want to add another 20 pixels to the left and the right some and a unlink gets I'm going to add a 20 right there in a minute and a 20 right there and so now I have this perfect spacing so when I duplicate this column three times you can see up at this perfect spacing in between the columns now that I think the column in the section is all set up right let's go ahead and play around with how this testimonial itself looks so when I click on that here's the content for the testimonial so I want to go ahead and paste my content in just like that and next I want to add a little image that could go right here someone to click on right here to add image and will go with that box image it's a perfect square so typically for a image where it's going to be put in a circular frame you wanted to be a perfect square so, click on that click on insert media and there it is actually that came out looking really nice now one of things I don't like about this testimonial area is the text is just a little too large for me and I think we should make it smaller summit click on style and for the content I'm going to override the topography but you can control the topography for the name and for the job's we have the name in the job right there but I want to just change this and make it a bit smaller so want to turn that on and I think him to go with maybe when T's let's go down to 20 like that and it's already looking a lot better than know you don't like is I want some padding in there to kind of make the words not go quite to the edge so I'm go ahead and go into that via the column settings when I click on column advanced and I would add some padding I think I want it all the way around so let's increase this number to where we might like it so let's see 1819 20 that's a lot better than the way it looked before so I guess we could stick with that this 20 right here I think that looks good so now what we need to do is my duplication column duplication trick so even though you have different testimonials we can just duplicate the settings across and then he could just change out the text in the image which should be really easy so I need two copies of this so I'm on the column now when I can click duplicate twice and then I have to get rid of these two columns, click on column oops, click on column and then delete and confirm its enema due to this last column right here when the delete that and then I'm a conferment and there we go we have our three testimonials that are kind of lifted off the page a little bit and they look great actually I really like the way that that came out so when I go like that it looks pretty near-perfect to the example that I gave you alright so next what we need to do is we need to create this section which is going to be kind of fun because we have a shape at the top and we have a shape at the bottom and then we have these two columns let's go ahead and knock that out real quick summon add a new section 2 columns and on this time I'm in a switch it up I want to go ahead and toss my content in there so I know right here I have an image so let's drag and drop the image across and I ready have it in my media library so I can click here and I can click there and choose the image and so there she is right there all right so I know it's kind of a dorky image but I just wanted to show you the power of having an overlapping image that will overlap over the shape so kind it adds depth to your website so that's the reason why I wanted to show you that so anyways right here looks like we have a I headlined a text box and we have another heading by right here but it has a different font altogether to try to make it look like a signature so let's go ahead and do that now cemented the dial pad and window drop a heading okay let me scroll up now I want to add a text editor underneath that just like that right there and then I want to go back and let me just duplicate this heading and make it faster there we go right so here is my content right here now you notice is a problem the content is appearing at the top yet I would probably wanted to be in the middle there and this is actually really cool feature in a column you can actually have it centered so if I click on this column right here and then I go into the layout option is that there is this content position option and so I did it by default it's gonna be at the top but I wanted to be in the middle so it's gonna push all that content perfectly in the middle just like that so now what I need to do is now start styling this section it'll be pretty easy someone go ahead and click on a section and I'm a go to style and I want to make that background color with the background shape so actually here I did a gradient is a very slight gradient words lighter to darker but for the sake of time I'm just gonna use the same color right here so I'm just gonna paste that in and there it is so we we are missing our shapes and we have to change the color of all of this of all of these fonts right here so let's first go to topography and for heading color I'm going to make it globally whites just like that and then for the text color I'll go ahead and make that globally white like that hope it's not showing it white here let me just go ahead and click on here and then go into the style of that actual element and change the color right there okay there we go now we have everything white which is what I wanted so now let me get back into the section settings because working to add that really cool shape now the shape I'm using is called the tilt so I need to go back in the style and I'm to do a tilt on the top and the bottom so here's my shaped divider and for the top I'm going to go in pop in the tilt option and there it is actually pretty much done already and so for the bottom I'm pretty much going to do the same tilt and just like that and you can see how easy it was to get that tilt action and you play around with the tilt the shape of the tilt and the angle of the tilt but I'm just gonna leave it at that for the sake of time you don't need to see me style these elements right here because you seen that before however this is signature right here let me click on that and show you it's just a simple topography override so when I click on style when I turn on the topography override it just a different font and so I went to Google and I googled Google handwriting font and I came up with this font that's called just another hand there it is just another hand when I click on it there it is you see how just added that) so I know made it larger and I put Jane dough and that's all I did in order to get that to look kind of hand written so that's all we have to do for that section there next we have this alternating section and it's can be pretty quick we just have headline text and we have an image so let me show you how to do that and I think what I did is well first let's add a new section and it's going to be the two columns like this let me just go ahead and add my image so my click on the dial pad I'm going to drag and drop this image in right there and I'm going to choose that image and it's good to be the square image of the two women in them to click on insert media and now what I need to do is kind of make it smaller and round and then add the box shadow and is actually really easy so it's just the style tab for the image right here and it's a simple border radius right here so see what happens as I increase it you can see the corners start to go in and if I keep going up and I go up to 290 it's going to end up being a perfect circle now it's kinda hard to see that it's a perfect circle because the image is light in color in the background is white so I just need to go up to about 290 like that which is a perfect circle turn on my box shadow we been doing this a lot where I increase the blur to 50 and then I lower this sum so that shouldn't be anything new and there we have it but the thing is is the image a little is just a little too large for the area so what I did is added some padding some click on advanced and for the padding let me unlink it and let's add 60 to the left and right some in ad 62 the right 60 to the left and now we have that circle right there which is really perfect so we have the images in a perfect circle and it's lifted up the page a little bit now all we need is a headline in some text right here and honestly where I got that from his I just duplicated this summer to duplicate my headline and I'm in a drag it on down and drop it in there and then I did the same thing for this body of text I duplicated it and I'm in a drag and drop it down there this duplication is how you can be more consistent with the styles on your page so now I need to center this content in the column and once again you click on column like that and then you go to lay out and working to put that in the middle just like that whoops I have that little bit of padding from this style that I want to remove let me click on that and remove this padding there you go padding is now gone right so we have that and then on the section I might want to push it down a little bit with some margins on the click on section my click on advanced all at about 80 to the top like this to push it down some and because I'm an alternate this I'm going only put 20 on the bottom like that so there you have it we have that section so now all I need to do is duplicate the section you see me duplicate elements and you see me do click eight columns but you haven't seen me duplicate an entire section that's exactly what I meant to do some click on section right here and I'm going to duplicate it twice 12 so there we have it three times but I just need to kinda flip these contents and there is no trick to it I'm just gonna drag and drop this in there like that and then I'm in a drag-and-drop that there I'm in a drag-and-drop that there may make sure the headlines on the top and then I need to center this content for this column click on column go to layout and then put that in the middle just like that so now we already did are three sections where the content alternated like that and so now we are down here to this beautiful pricing table like I said this pricing table is part of the Elementor Pro package so women to do is I'm in a go down here and add a new section with three columns like this and this will be the pricing table in the three sections there but go ahead and click on my dial pad and right here the different Pro elements that are available right now some in a drag-and-drop in this pricing table and there is no more powerful pricing table that I've ever come across than this one that comes with Elementor Pro the beauty is your to be working with the same interface that you've already gotten to know in your you to be able to build the most flexible powerful beautiful pricing tables that I have ever seen I didn't really spend a lot of time customizing it but there's all these little elements you can pretty much change everything on it so first thing I want to do a style out my section I'm going to just add a bit of margin to the top and the bottom and so here it is I'm going to add hundred to the top and bottom so space it down from there a little bit and next I'm going to go ahead and add some to the column as well and be as so these columns aren't so close to each other so I'm to go to advanced and I'm going to add 20 to the left in the right so let me unlink it I'm going to add 20 to the left 22 the right just like that so it's just scrunched in a little bit okay now let's play around with the colors of the element here someone to click on it and it's just so easy to work with this element it's amazing but all I'm going to do right now was play around with the style so the header that's kind of a dull color I'm gonna change the background to this right here and it just makes it pop a little bit in its consistency of colors across the board and I don't like this gray right here I'm in a go ahead and change that to white so I need to do that in each individual section of this pricing table so for pricing I need to expand it and change the color to white in the see how just does the pricing part so me collapse that I need to do the same thing for features I'm going to change that to whites and then I need to do that for footer change that to whites and then lastly we have this ribbon I'm been to keep the ribbon on the middle pricing table and the way you do it is you just click right here and that's it for the colors and the last thing I really want to do is add my box shadow but I just want to add it to the pricing tables so what I need to do is go into the advanced settings and when I scroll down it's right here under background and border and there's that same familiar box shadows let me turn that on I'm in a stick with the blur up at 50 and I'm going no change this dial just a little bit and now we have that perfect box shadow effect now timesaver again I'm going to duplicate this across now what I didn't show you in the pricing table is how easy it is to edit all of the content here's your title your subtitle you see that there here is your pricing you see that there you can change the currency to all these various currencies right there here's the future box you can add those there here's the footer which is essentially this button and you can change where that button goes and then you can have the ribbon changes so rainouts is popular but you can move the side that it's on and you can change what it says and you can even disable it so now I need to just duplicate my column and then get rid of these two here my click click on column to duplicate it twice and then I'm a click on this column to remove just like that's anime click on this column to remove just like that and I need to remove the ribbon on these left and right Price table soma click on its Emma go down to the ribbon, turn it off and then on this one I'm to do the same thing click on it and turn that ribbon off and so let me go like that and you can see we just built a beautiful pricing table and there are so many different options it's it's just mind-boggling with this price table but you can see it's identical there and only took a couple minutes to do so lastly right here I think you get the point it's just the section with the headline and a button and all that and I took these from other places on the site so if you hung in for this entire video we built this beautiful page right here let me click save and then let me show you from the top to the bottom we did this in a very short period of time and through it you learn to live the advanced methods to have the most impactful design for your website you can see the subtle use of the box shadow were using these background shapes right here were making images into a perfect circle and then lifting them off the page a little bit and we've created this beautiful beautiful pricing table but like I said you don't have to build it yourself you could just restore the template that I in included so that is it for creating a beautiful homepage with Elementor and optionally Elementor Pro

Channel: WPCrafter.com WordPress For Non-Techies

Views: 232,521

Keywords: elementor tutorial, elementor setup, how to create an online course, how to create an online course WordPress, how to create a website, how to create an online course website, create online courses, create and sell online courses, creating online courses a step by step guide, How to Create an Online Course with WordPress, How to Create an eCourse with WordPress, wpcrafter, elementor page builder, elementor wordpress tutorial, elementor pro demo

Id: 8AcHCJVKZoc

Length: 54min 31sec (3271 seconds)

Published: Thu Mar 16 2017