How to Create a Landing Page in Wordpress — Proven to Convert!

this might be one of the most effective highest converting landing pages you'll ever find and by the end of this video it's going to be all yours because i'm going to show you how to create this landing page step by step and you'll see how to customize it with your own images text colors fonts and customize for your unique offer whether that's for a lead magnet you know a webinar sign up getting people into a consultation call or to buy your product and guess what it converts really well so this method requires zero experience so if you've never made a landing page or a website before i'll show you just how easy it is using wordpress along with a free super simple fun to use drag and drop page building plugin and then with a few extra clicks we'll make sure it looks and functions amazingly well on all of your mobile devices too and i have included chapter markers below this video just in case you ever need to skip to a specific step so look for those down in the description below so great if you're ready let's get started by getting you set up with a free domain name along with a pretty huge discount on your web hosting if you need it that i've worked out with my favorite hosting company bluehost so you just need to use my affiliate link to get that discount and your free domain name so to get that you can either follow the link below or go to wes mcdowell.com hosting and we can get started right now okay so when you follow that link westmcdowell.com hosting you're going to end up right here so as you can see you've got quite a discount 295 as opposed to 8.99 a month and you've got all kinds of great stuff with bluehost you've got expert 24 7 support i hardly need them but when i do they're right there and it's just a really easy way to get your wordpress set up and you do get that free domain name if you need it so i'm just going to click on get started we're going to get through this pretty quickly okay so now it's time to choose your plan basic is just fine as long as you're just creating one website if you're a web designer creating multiple sites for clients and you want staging servers then go with one of these but if you're just a business all you need is this 2.95 a month plan so i'm going to click on select now here's where you can either use a domain you own so if you already have a com you want to use you would just type that in here and it'll walk you through the steps of transferring it or if you want a brand new domain all you need to do is see if the one you want is available so i would just type in yourmostprofitablewebsite.com and we'll see if that's available click on next all right we are in business it's available so all you need to do from here is input all of your billing information choose your account plan so basically it is cheaper the longer out you go with 36 months but you can go down to 12 months that's fine too then we have all these extras so i like to just uncheck all of them i don't think any of them are that necessary and i'll click on turn it off this one domain privacy and protections the only one you might consider that's going to keep your name off potentially being on any spam lists but i've actually not really encountered that so it's up to you if you want to keep that checked or not and then enter in your payment information and check right here and then click on submit okay so when everything goes through all you have to do is click on create your account you've already got your domain name here now you're just going to create your password and i'm just going to use the the one that they got for me i'm just going to take note of it i'm just going to do a copy then click right here to show that you've read an agreed and then create account now go to login and then type in your password and then log in i'm just going to save it okay now create your website i'm going to choose skip this step and i'm going to keep choosing saying skip this and then i'm finally going to choose limitless customization and they're going to ask you a few things what type is it let's just say you know just choose the type of your business or you know we can actually just click on skip this step i'm going to do that now here's where you want to put in the name of your business or the name of your website tagline's not that important i'm going to skip that and click continue we actually do not need to pick our theme here because the next step we do is going to take care of that for us so i'm going to click on skip this step for now they're installing wordpress and now we're ready to actually log into wordpress where the fun can begin so just click right over here okay so we're now inside of our wordpress dashboard actually if we click right here we're actually in the dashboard where you would be when you log in to wordpress each time so a few things i want to show you real quick before we get started so within wordpress the side panels where you're going to go this is where most of your options are so whenever you write a blog post for instance you can click on posts add new same with pages but the main thing i actually want to talk about right now is users because you didn't actually choose a password for wordpress yet so we're going to go ahead and click on users all users now when you signed up it did create a user account for you so i'm just going to click on edit and i'm going to go down to the bottom and it allows you to put in your first name your last name all that stuff the really important thing though is that it has your email correct and then it has your password so change it to something you'll remember and then click on update profile then whenever you need to log back into your account you just go to com yourwebsitename.com wp dash admin you're gonna put in your username and your password okay so before we can get started here we do need to add a few things first of all we need to add the theme for the site so we're gonna go over to appearance and themes and we're just going to add a really simple one that's going to work the best with our page builder uh called elementor so we're going to go down to add new theme i'm just going to type in actually it's already here but if it's not here you're going to just type in hello elementor and i'm gonna click on install and then on activate okay so we've got our theme but we're not actually gonna be working with the theme to build we're gonna use our page builder so we need to go over to plugins add new and i'm going to go over and search for elementor and it's this guy right here i'm just going to click on install now and then activate okay so now we have all the pieces we need in order to get buildings so we're just going to go over to pages and add new just going to type in landing page you'll type in whatever you need to here and then edit with elementor okay so this is basically what it looks like inside of the elementor page builder we have the what i call the stage over here this is where we visually build and bring all the different elements into place and then this is the left sidebar where we have all of the elements all the different widgets where we can change the text and all that kind of stuff and you will see what i mean as we get going but the first thing we want to do is actually get rid of all this stuff up here we want to start with a brand new clean page so to do that we're going to go down to the little gear icon way down in the bottom settings and under page layout we're going to go to elementor canvas all right so we've got a brand new page here to work with and the way this works is again you're going to be dragging elements into place onto the stage like for instance let's drag this heading on over and then you click it and over here is where we're going to change that text we can change the style there's a ton of things we can do and i'm going to show you all of it as we get going by the end of this video you're gonna have a really clear picture about how to build just about any page you ever need including this landing page so let's just go ahead i'm gonna right click on this and then click on delete and i'm actually gonna delete this whole section as well so that we can just start fresh and the way we'll do that is just click on the x right up here so so we're going to make this website in sections and there's a few different ways that you can make a section so the first way would be to click on the folder right here and then go over to blocks and we've got all these blocks of different layouts that you can choose between and then what you would do is basically change the the different elements inside it the content we're going to get to that in a bit but first we're going to do it the other way because i really want to get our feet wet so we know what we're doing so we're going to build a section completely from scratch so i'm going to click on the little plus icon here and from here you just choose how many columns you want in our case we're going to choose two columns and here's our section it does not look like much yet but that's okay so the first thing we're going to do is start dragging in our different element so this is going to be the top section of our landing page otherwise known as the hero section so what i'm going to do is click on this little grid this is going to bring us to all of our widgets over here so i'm going to take a heading widget just drag it right into this column here and i'm going to go back i'm going to drag a text editor right underneath that and back and now finally a button and of course we still have a lot of uh work to do here a lot of customization so first thing you'll notice is this is not given very much vertical space right like it's really tight so what we probably want to do is just choose the entire section and then under layout we can go over to where it says height now we've got a few options here here is default so just basically taking up the the amount of space that the content within it is giving it so um but we want to give it more than that so it has room to breathe so under height we can do a few things we can do fit to screen which is going to make it be the the entire height of the screen which can be a nice clean look and it's going to really depend on the person's browser so however big their browser is that's how big this is going to be but i think we want to do something different here i'm actually going to do a minimum height and from there we can just basically make it however big we want and i like to use something around like 600 pixels or 700 pixels maybe 7 in this case i think that looks pretty good so let's just do a little quick recap here of how the building process here works so what we have here is this section uh it's outlined in blue and within a section we have columns right we can have one column two three um up to four i wouldn't go too many more than four it really depends on the content i guess but and we can do things like stretching the columns like this we can they don't have to be equal right so we can kind of drag it to make sure it looks good and then within each column we have our widgets our different building blocks for our different types of content we have images video google maps even icons lots of stuff and we're going to get to most of this in this video so uh the next thing i want to do is let's let's dress this up a little bit let's add a background image so the way we do that is we choose the entire section and now we go over to style and we've got choices when it comes to background so we have just a normal what they call classic which is just a color so basically if you want to click here you can make a any color you want as a background you could do a gradient so you choose uh you know the top color and the bottom color you can do a video even which is kind of cool in the right application you can do a slideshow where you can choose multiple images but we're actually going to be pretty simple here we're going to go back to classic you know remember how we can choose a color but under classic you can also just choose a background image so i'm going to choose image and what you would do is you would find your image you can go to find a stock image somewhere maybe it's one you took yourself you just drag that image file right onto the stage here and what i like to do just as a pro tip i like to keep my hero images if they're going to be full width like this one's going to be i like those to be about 1900 pixels wide but in our case i've actually pre-populated our images we're going to use so i'm going to go over to media library and choose this one right here now it's a little awkward looking it doesn't quite fill the space right so the first thing i do want to do is go to size and we're gonna do cover and what that does is it makes sure that the image is just big enough to cover the space allotted and as you resize the window it'll get bigger or smaller accordingly and then what if we wanted what if we thought there was too much head space here and we wanted to move the whole thing up well assuming that the image allows for that right if it's big enough we're going to go to position and we can do all kinds of things here we could do we could start with center center to see actually that looks pretty good we can choose all these different types of scenarios or if you're not happy with any of those preset ones you can just go to custom and then you can start sliding it around but you got to be careful because you don't want it to repeat like that so usually i'm just going to keep that on zero so it's centered and then but y position we'll move it up or down so we can move it to however we want it to be and i think that looks pretty good the other trick i'm going to show you here is notice how the image scrolls with us what i like to do what i think looks a little cooler is to actually switch the attachment to fixed meaning as you scroll the image is going to stay in place i just think this is a much more modern approach i like doing that so but time to move on now let's dress up our text a little bit so i'm just going to go ahead and click on the header and there's lots of stuff we can do here so first of all in order to change the text you have to go to content and then you would type in your new header here in this case it would be you know this is where you'd want to type in your unique value proposition for whatever it is you're offering on this landing page and then for the text underneath it you want to put in something that's telling people exactly what you're offering and how that's going to improve their life and remember clear beats clever every single time so we'll do that and then we'll change this call to action on the button too because click here is not a very compelling call to action you really want it to be much more specific to whatever it is they're getting whether that's downloading a lead magnet or purchasing something you'd say like get yours now something along those lines but so that's just changing the actual content now we need to change the style to match whatever it is you're going for so let's start with the header i'm just going to click on that and then we'll go over to style and this is where we can change just about everything about it we can change the text color um the typography which involves you know what font you're using how big it is how bold it is so let's just start with the text color i'm going to choose a simple white that works best most of the time and then under typography i'm going to choose something a little different from this i don't always love the roboto font but that's what they always default to i'm going to actually choose one called poppins i think that's a nice clean one and let's bump up the size a bit as well i think something big and bold looks good like that and speaking of bold let's go under weight and this particular font has like nine different weights to it so let's see what looks best i'm gonna choose 800 that might be too big let's go with seven i like that you can change things like under transform you can make it all uppercase if you want i'll lower case i'll you know capitalize which will capitalize the first letter of each word i'm just going to go back to default here i think this feels the friendliest and then line height this is an interesting one so you can basically make it tighter or you can make it more spread out i tend to use this a lot because i think they they give you too much space between lines sometimes so i'll just arrange it till it looks good i think i actually think that looks pretty perfect and then we'll go do the same thing with the text underneath it so we'll choose that text block up to style text color i'm going to choose white again and then under typography we'll go with pop-ins again and i'm going to bump up the weight a bit to be a little more legible i think that looks pretty good i think it goes over a little too far so what i'm going to do is drag this over a bit something like that looks good to me now we'll go down to the call to action under style typography i'm going to choose the same font again and this time under transform i'm going to do all uppercase here and let's say we wanted to change the button color we would just go still under style we just go down to color and then you can choose any color you want you can slide this around you can choose anything but i've already got a color picked out that i want to use okay so let's take a look at what this looks like if you want to get a true preview without seeing all these bounding boxes around everything you just got to collapse the sidebar by clicking this little arrow icon here so this is what we're left with and i like it but here's what's missing this text is a little hard to read over the white so what i want to do is darken this side up just a bit so that all this text really pops so the way we're going to do that is we're going to choose the section again and under style we've already chosen the the background image now we need to put on an overlay so we're going to collapse background go down to background overlay and again we have choices what we could do is go under classic and choose just black the problem with that is it darkens the whole thing and most of the time that's okay especially when your text is kind of more in the middle but since it's over to the side i kind of just want it dark over here not everywhere so i'm going to choose the gradient instead and don't worry i'm going to get rid of this pink but i am going to keep it here for now just so we can see better what we're doing the first thing we want to do is change the angle of the gradient because now it's going from top to bottom we want it to go from left to right so the way we do that is over an angle if it's 180 now i'm going to choose 90. so see we have the black over here fading into the pink so all i'm going to do is i'm going to i'm going to click on the pink and i'm going to choose black but here's where our opacity or how transparent that is so i'm just going to bump that all the way down to zero and see what that did already this is so much easier to read right and you hardly even notice that it's there so i'm really happy with how that looks but since i am showing you pro tips here i do want to show you one thing that we can add here that's probably going to improve your uh your conversion rate on this button so i'm going to go over to our widgets and i'm going to type in icon and what we're looking for is an icon list i'm going to drag this right under our button i'm going to get rid of both of these so we just have one list item and as you can see we have an icon we can choose whatever icon we want and we have some text so i'm just going to click right on here to edit this and under the text here's where you can include some kind of risk reversal text right it would say something like no obligation no credit card needed something that's going to make people feel better about clicking this button and that's going to be different for whatever it is you're offering so and if you wanted to change the icon you would just click right here and you would choose whatever you want i think the check mark is fine though so we're going to go up to style and then go under icon and here's where we can change the color of it i'm going to choose this kind of gold color and then we'll go under list or sorry under text rather and change the text color to white and then of course change the font to uh what we have for the rest so go to typography i'm gonna choose pop-ins and i'm probably gonna make that a little smaller as well and this is a totally optional step but i find that it does help when we're trying to really um bump up those conversion rates and i do want to show you one other cool thing so right now this uh this bottom section is or the the line here is pretty squared off but there's some cool stuff you can do so if we choose the section under style we can go down to shape divider and we can choose whatever shape we have on the top or the bottom in this case we're talking about the bottom so i'm going to click on that and then under type here's where you can choose from all these different uh different types some of them are a little over the top like that one is is a bit much i think the one i'm going to do here is just waves it's nice and simple and you can change the height of it so it's not so over the top you can change the width of it so it's just how you want it i'm going to make the height slightly bigger like that but again easy does it here like you don't need to have that i'm just showing you what's possible all right so it's time to move on to our next section which is going to be a benefit section so we're going to do another one from scratch just to keep the momentum going here and you so you really get the lay of the land where everything is and how to make these customizations so i'm going to click on the plus icon and i'm going to choose one column here and then i'm going to go up to the widgets and i'm going to choose a heading and then underneath this we're going to have three different columns of benefits so we need in order to do that because remember we chose one column here we're going to go up to the widgets and we're going to choose an intersection and we're going to drop that right under here the reason we do it that way is because net that way we can have a one column text block right above our three columns here it's just the most efficient way of doing that rather than having to have a whole separate section just for that text so the first thing i want to do is give this a little bit of visual um you know separation from the section above it because right now it's really tight right so i'm going to choose this section and then we're going to go up to advanced and here's where we have margin and padding so margin is the space from the outside of this box above it so if i wanted to have a hundred pixels of margin i would do that and that means this is sitting 100 pixels away from there so this is just empty space and you can do that on the sides as well i'm actually going to zero this out and i'm going to go to padding instead this is going to give us room on the inside of our section which is really where we want it to be so there's a few things to keep in mind here if i were to type in i'm just going to do 80 but see how it automatically tethers all these values together on the left right top and bottom but what if we don't want it on the left and right i'm going to delete that i'm going to unlink these values so i'm going to give it 80 on top 80 on bottom all right so from here i'm just going to take our text i'm going to first of all center it and then go up to style text color let's give it just like a simple black actually i'm going to give it something a little slightly off black i think that tends to look a little nicer so i've just chosen a color that's you know pretty deep blue but reads as black almost and then under typography i'm going to choose our pop-ins font again let's bump up the size slightly if we want to bring that up to 700 again to match up here we can do that and then under content you would type in something you know describing these as your the benefits that you deliver okay so now let's add in these actual benefits so we have two columns now um i actually want to make it three i love using three benefits i think that's the magic number so all we would do is right click here and then duplicate or right click add new column either way so we're going to drag in what are called icon boxes into each of these so i'm going to go back up to our widgets and i'm going to choose i'm going to type in icon and then icon box is what we're looking for so i'm going to drag one of these right into our first column and you would put in you know the name of your first benefit here and then the text should really show the benefits of signing up for an appointment or your lead magnet webinar or your free consultation so it really has to sell the benefit and before we add the other two let's get our styling right because then we can just copy and paste it and we don't have to do all those steps for each one so first of all you want to change the icon to whatever you want it to be so go to icon library and you just find whichever thing you know whatever kind of sells your benefit visually the best let's choose this light bulb right here and i'll go up to style where we can change all the colors and the fonts and everything again so so i'm going to go ahead and make the icon the same yellow colors we have here so i'm going to choo click here i'll type in our color code and this is really important too we should have done this up here if you want to save a color to use again all you have to do is click on the plus icon here and then you can name it if you want to you know i'll just type yellow accent create then we can use it anytime we want just by clicking on the global colors right here it'll be right here for us and we can do things like change the size we can make it a little bigger if we wanted to we can change the spacing it's going to get rid of that i thought it was good before and we can even rotate it i don't know why you'd want to but it's nice to know it's there and now for content for the the written content let's click on that and change the color let's change the color to our same let's go ahead and grab this color and reuse it so i'm going to click here go up to style text color i'm just going to click on it click on plus i'm just going to name this dark text and then create all right so now we can grab that and use it everywhere else on the page so we'll click on back on our icon box and then under content color i'm going to choose the the little globe icon here and then dark text under typography i'm going to choose our same font we've been using and then under description color let's choose the same text and typography let's change that again as well all right cool so let's go ahead and right click copy right click paste and right click paste again now we just have to change the individual you know content for each of these i would probably click here i would choose a different icon for it let's just choose that to be quick we'll call that benefit two and then on benefit three we'll choose the magic wand here and then that's benefit three okay so now what if we wanted to actually change the background color here slightly so i'm just going to choose the entire section and go up to style and what i'm going to do is choose classic and then i'm going to make it just a really simple light color so click right here and i've chosen this really light gray and of course i'm going to save our color as gray background so this has created a couple problems right this doesn't match anymore and it looks really awkward i think so the way we fix that if you were to if you had chosen any kind of a shape overlay like this you just got to go to the section where that exists and then under style shape divider you're going to go to the bottom and now we just have to change the color here to match this color so good thing we have it saved there we go now it all matches now what if we wanted these to be kind of on white cards just to help them pop out from the background a little bit well i'll show you how to do that we just need to choose each section sorry each column and then we'll go to style and background type we're going to choose classic and we're just going to choose this to be white and there's other things we can do here too like if we wanted these uh corners to be rounded we would just go down to border and then border radius let's see what like 20 pixels looks like maybe slightly higher like 30. that looks pretty good now i just want to show you something else let's talk about padding again because right now all these elements are way too close to the edges and it kind of looks amateurish to me so we'd go up to advanced still choosing the the column itself we'll go to padding and let's see what 20 pixels of padding looks like and to me i think that looks pretty good so if we want to apply this change to our other two columns all we need to do is right click here copy and then we'll go to the next column right click paste style not paste and then over here paste style again now we just need to give it some separation between these columns so the way we do that let's go back to our first column and i'm going to under advanced i'm going to give this a bit of a margin on the side so i'm going to unlink the values and i'm going to do 10 on the right 10 on the left and now i'm going to do again right click copy right click paste style and once more cool so hopefully by now you're really getting it and getting uh the kind of the flow of how we can actually edit stuff so what if we think that this text is too close to these boxes which i i think i do so what we would do is we can either choose the text or we can choose this and adjust the padding accordingly so i'm just going to choose uh the text up top and i'll go to advanced and then padding we're going to unlink the values and i'm going to give it let's see what 30 looks like there we go then that gives it the breathing room that it needs all right so let's get into our next section which is going to be telling people what they're going to get or what they're going to accomplish once they opt in on your on your landing page here so let's do this one a little differently so we've already built two sections from scratch now i want to show you how to use a pre-made block and then we can just customize that so rather than clicking the plus we'll click on the folder icon and we have all of these pre-made blocks all different formats that can be customized with all your colors all your images all that good stuff a few things to note you'll see all these little pro designations on a lot of these that means you have to have the paid version of elementor to use those but don't worry there's a ton of free ones so they're categorized you can either choose to just go through them all and see what layout you like or you can start your search out at least by trying to find the right kind of category so i'm going to start by looking at features and see if we have something we like there so again you would just be looking for the right layout knowing that all the images and colors can change so i'm actually going to choose this one right here because i know i want to have an image and then a bulleted list basically on this side so i'm going to click on insert so the first thing i want to do is i want to add a heading to this because right now it just has the bullets so i'm going to go up to the widgets i'm going to grab a heading and pull it on top and i'm going to write something you know what you'll what you'll get or accomplish and we'll style it up up to style text color we'll use our same dark text typography we'll keep it the same as everything else pop-ins 700 i'm going to make it a little bit bigger and it feels tight so i'm going to take line height and bump it up a little bit too and then here's where you just fill in all the different things that people can expect um if it's a lead magnet what it what are they going to learn what are they going to be able to do by the end of it so you'd fill in all that here you just click on it and this is like another compound widget basically where you have everything in one place you have the icon the title and the text so let's just worry about styling this now you'll fill it in with your own details i'm going to go up to style and under the icon here's where you can change the color of the icon you know i've picked out this kind of turquoise color right here and i'll go ahead and save it this turquoise accent create and then under content that refers to the written content so under title i'm going to change the color typography font really and then i'm going to get rid of the uppercase because we're not really using that any anywhere else we want to keep things nice and consistent so i'm going to choose default and then this is just a nitpick thing but notice how these are not quite lined up like center they're not quite centered the way i'm going to fix that is i'm just going to go down to line height and i'm just going to play around with it until it looks good to me like right there i think is fine and then i'm going to go to the description color i'm going to change that to our text color and the typography as well and then if we want to apply the changes we made here we just right click copy right click paste style paste style and once more and then of course to change the icons you would just click on each one go over to content and then go to icon library and just choose the right icon for each one or you can just leave them all the stars or check marks something like that if you wanted to make it simpler all right so now let's talk about this image we obviously don't want to keep this so we're just going to go ahead and click on it and then go over to content and choose image and again you would just drag over whatever image you wanted to use i happen to have the one already in here so i'm just going to click on it insert media now we do want to actually show you something that's kind of cool and new within elementor so let's say you don't want it to be just kind of a boring square shape you can go up to advanced and then under mask they've got all these and you just turn it on and they've got all these different shapes so we have circle we have a flower uh sketch triangle so there's all these all these different things you can try to play around with i'm just going to do circle and you can change the positioning of it if you don't like how it is but i think this works perfectly actually okay so that's how you customize a pre-made block but let's customize it even more because like what if it's missing an element you needed well we already put in a a headline so we already showed you how to do that a little bit but let's add a button down here because again this is a landing page right we want to give people multiple options to actually click through and get what we want to what we want to sell them so i'm going to go up to the widget actually there's a few ways you could do this we could drag a button over and style it or guess what we already have a button so let's not waste it let's just right click on it copy and then right here paste easy as that and i should say i didn't mention this earlier the way you actually um link up a button to where you want to go just make sure you click on it and then under link right here this is where you type in the web address of where that's going so maybe you have a mailchimp forum that's you know they click on this and it's going to open up the form and they can opt in maybe it's to a sales page maybe it's to a checkout page it can go wherever you need it to go or open up anything it needs to open up within your email program before we move on i actually do want to show you how to make this image bigger if you wanted to so let's click on the image itself and then let's go to style and so let's go to max width so right now it's set to 66 of the width of this column let's just make it as big as we want to right here i think that looks much better already so let's take a look at what we've got so far hero section benefits this section here now let's add some social proof and testimonials super important for any landing page this will be an easy one we're just going to go ahead and add another pre-made text block so click on the folder and under category i'm going to look for testimonials right there and let's find a layout that works for us i'm just going to do this one right here and click on insert okay so we would want to just change the text to whatever you want it to be and rather than styling the text i'm going to show you another trick so what we can do because we already have kind of a headline here and one here let's grab this one i'm just going to right click copy and then right click paste style then you just want to go through each one of these so again this is another compound widget a testimonial widget so it has the text and the person's picture super important by the way you always want to use the person's picture if you can and if they've agreed to it it just lends a lot more credibility to the testimonial people believe it more then you have the person's name and they say title right so like it's meant to say like their job title or some some descriptor about them it can say where they live but what i actually like to do is i like to use a five star emoji right here so you would just want to do a search online for web emojis and find the star copy it and then i'm just going to paste it right in here one two three four five that really helps sell it more as a testimonial and it gives it that just visual indicator that this is a five star review which means even if they don't read the text they're still going to kind of get the point so now let's just style this up go up to style text color we'll choose our same color we've been using let's change it to our same font and we'll do the same thing with the name as well so text color and typography font and of course under content this is where you would uh you would type in the content of the testimonial and you'll choose the correct image here you just choose image and you would drag the real image of the person over as well but i'm just going to leave it i'm just going to leave the placeholder in our case here and now remember how we have these as a rounded boxes we want to carry that over we want to be consistent so let's do the same thing here i'm going to choose the column and then go under style and then under border that's where you do it i don't know why it's under border it just is and then border radius they already have one but let's match the other one we already have which is 30 pixels and let's check it out i like it i think it's how i want it so now we can just copy and paste it so right click copy right click paste style and one more time but that just took care of the actual columns meaning that's how we have the rounded edges but this styling is still not carried over because it's the widget not the column that needs to be copied and pasted so we're going to right click copy and then on this widget right click paste style and paste style one more time and let's go on each of them and give them the five stars because that's not a style that's a content change remember that all right so now we just need to change the background because remember we want this to feel like multiple sections that people are scrolling down through so we're just going to give it the same background colors we have here i'm just going to expand this back out choose the section style background type classic i'm going to choose our gray background color ah so these were not given a color they just have like a kind of a box shadow on them so unfortunately we need to make these white now so super easy to do though just click the column style background type i'm just going to under color make it white and now we'll do the same thing again right click copy paste style one more time okay so we're almost done here we just have two really simple sections left we're just going to make these guys from scratch because they're so easy so i'm just going to click on the plus icon two columns i'm going to go up to widgets i'm going to get a i'm going to grab a video so if you have any kind of a video describing your product or your lead magnet whatever it is you're offering here highly recommend putting a video here if you don't you can just put another image it's okay and i'm going to go up and i'm going to grab a heading and a text block or text editor rather and so for heading i'm just gonna you know here you would want to build some extra credibility in this section that's what it's all about you'll talk a little bit about your authority you know what qualifies you how you've helped others in the past that kind of thing and then you would type in your content here of course now let's go ahead and style this section so i'm going to click the entire section first of all we want to give it some room to breathe right so i'm going to go up to advanced and i'm going to go to padding i'm going to unconnect the values i'm going to do 80 on top 80 on bottom i like 80 i think that's it's a nice number that gives enough breathing room without having to make people scroll too far so if i'm giving you a pro tip here i like 80 pixels of padding i think it works the best and let's give this a nice dark background to stand out from everything else we've done so i'm going to go to style and then background type classic i'm going to choose our same dark text color just to kind of stick with our color palette we have and i'm going to make this text under style i'm going to make that white and of course change our font under typography and the same thing with this text as well and i'm actually going to add a button here too so rather than dragging another one over let's just work with what we've got right click copy right click paste so now let's go ahead and add in our video and you do have a few options here so it lets you either embed it from youtube vimeo dailymotion or you can self-host it meaning you would actually have the video file on your on your website itself i do not recommend doing that it's going to really slow down your site i highly recommend going with youtube because it's just good for seo it's good for a lot of things to use youtube over vimeo so i'm gonna click youtube and then you're just gonna upload your video and then grab the little share link that they give you and you're going to pop that in right here and then there's a lot going on here it's a little busy so i'm just going to click off player controls which at least just gets rid of that bottom thing here it's still a little busy but we can deal with it and i do want to show you one more thing because right now to me these elements are way too close to together so the way we can change the width between the columns is we just choose the entire section and under layout we go to columns gap and then we can go let's say wide let's see what that looks like yeah i think that looks pretty perfect right there and this is actually all pretty nice and centered it's not exactly centered but if there's a case where maybe this text let's let's make this text longer just so you can see what i'm talking about i just want to make sure you know how to do this let's go ahead and add a second column here so if we wanted to make sure everything was centered meaning this video we would choose the entire section under layout vertical align middle and that's going to make everything nice and centered there so i'll go ahead and get rid of that second paragraph now okay so last section time so this one's really easy and there's something that exists that we can actually draw from so i'm going to click on the folder and then under blocks we're going to choose call to action so i'm just going to find a really simple one just like this one right here insert so this is basically just gonna be hitting them up one last time to opt in i'm going to right away delete this second uh line here just right click delete i'm going to copy our button and paste it but see how it's left justified because that one is too so easy fix just under content go to alignment center and i'll change our text to whatever we would want it to be and of course style it text color typography and only one thing left to do now and that is to add our background color so i'm going to choose the section go to style i really want this to pop because it's kind of our last chance to get people so under classic i'm going to choose that uh turquoise accent that we used before all right so if we take a look i think this is a really nice clean page that does a really good job of actually selling whatever it is that you want to sell so but you might want to have your logo up here here's what i don't recommend doing on a landing page you do not want any navigation up here this needs to be a standalone page that they can't use to get to other pages on your website having said that you know you still may want a logo up here so i'm going to show you how to do that real quick um just hovering over the top section we're going to click on the plus icon that's going to give us a new section i'm just going to click on the plus icon i'll do a two column layout and i'm going to drag this over to make it pretty small go up to your widgets and then take an image file and drag that right over here and this is going to be your logo file so you can either choose to have it like this with a white bar or you can change the background color of this to black if you want with your logo or if you want to get extra fancy and you have a logo file with a transparent background we can actually do something really cool here so so i'm actually going to replace this with our logo file so i'm going to click on choose image and then i'm going to drag over a transparent background uh image file so it's otherwise known as a png file it's going to be hard to see you won't be able to see it quite yet but just going to click on insert media and of course you can't see anything because it's transparent so what we're going to do is we're going to push this section here up here and then this section is going to sit on top of it okay so then we're going to be able to see our logo as a transparent header the first thing we need to do though is choose this section we're going to go to advanced z index just set this at 2. now we're going to go to this section underneath it advanced we're going to make sure our values are not linked together and now we're going to put push this into the negative then now you can start seeing that logo right there so we're going to start pushing this up until it reaches the very top here all right just like that and if that's too big we can kind of play around with the spacing and the sizing right here to look however you want it to look let's take a look at this and one thing i might do is i think i might make this section a little taller just a little general cleanup here i'm going to right click edit section and then under layout i'm just going to make the minimum height slightly bigger just give it all a little bit more breathing room and to me this looks pretty solid so far so next thing we need to do is expand this out and click on publish now one thing that can really make or break this page is the images that you choose to go on it and i'm here to show you all my best image selection secrets along with some of my favorite places to go to find the really good ones on a budget or even for free so click this video to get all my best image guidance that's going to help tie all this together into the highest converting landing page possible so click right here and we'll get you all set up

Channel: Wes McDowell

Views: 2,517

Keywords: how to create a landing page in wordpress, How to Create a Landing Page in Wordpress 2022, how to create a landing page in wordpress using elementor, How to Create a Landing Page 2022, create a landing page, how to build a landing page in wordpress, create landing page in wordpress, how to build a landing page, landing page, landing page for affiliate marketing, landing page tutorial, landing page wordpress, wordpress, landing pages, page builder, elementor, landing page design

Id: zK25pjjatD4

Length: 48min 12sec (2892 seconds)

Published: Sat Oct 30 2021