Elementor Complete Tutorial 2021 - Build A Website With Elementor

Key Takeaways

hey everybody welcome back to the channel in this video I'll show you everything you need to know to set up your first website using Elementor on WordPress so this is actually very easy to use very very powerful and you have lots of options I'll show you this one in a second and this is actually the website we will be building in this video very easy to do very very powerful and there is a free version as well as a paid version so no matter who you are no matter what your skill level is no matter what your budget is Elementor is a great way to build your website on WordPress and like I said you have tons and tons of options that you could utilize all of them if you want a very powerful and diverse website or you could just use the fundamentals and have a very easy website set up no matter what it's easy to do you can build your website in a matter of minutes or hours depending on how much information you want on there and you can do things all like this now in this video I'll show you how to set up WordPress first of all how to get set up and have Elementor setup with WordPress then I'll show you actually how you can either import an entire website so you have a full website theme that you just have to go and type in your own information add your own images but other than that it's a turnkey situation to have a full website really in a matter of minutes or I'll also show you how to set up an entire page using just from scratch using Elementor so here's an example of the page we will be building in this video and on top of that I'll be showing you how to set up templates and how to set up pop-ups on your website so looking at this page here we'll talk about adding a title we'll talk about adding you know images and text and buttons these are the fundamentals we'll also talked about having backgrounds on different sections and different little borders on the bottom then we can talk about adding some cool little things maybe if you want to have tabs that show different things you know different text ideas different pictures we'll talk about forums how to have a nice little parallax effect in the background behind your forms and how to actually redirect those forms so when somebody types in their information it comes to you as an email and on top of that you can choose a secondary action where when they hit send maybe it redirects them to another page on your website for example we'll talk about adding cool things like this little countdown timer as well as the cool little thing down here which is going to be the testimonial slideshow where you see different people might be saying different things about your website it's a great way if you're trying to sell things or otherwise show any kind of social validation very popular way to improve website and then down here I'll be showing you of course this is just kind of a filler right there a lot of dummy text and then you can add other things such as maybe a map and something I really like about this one in particular is that you can go and not only can we link to other pages within our website or out of our website for example but we could also go and link within the website down on the same page to an anchor as you see right here so clicking on that brings us down to an anchor I'll show you how to do that in this video and something else to note is this video I'm gonna try to move at a pretty consistent pace tour the video if that's too fast for you YouTube has a really cool feature where you can actually go and play this back at a slightly slower pace so 0.5 0.75 whatever you need to do you can pause it you can work with me alongside and just you know hit play when you're ready to go to the next step or if I'm moving too slow for you likewise you could speed up in this video now with that being said the other thing I want to show you guys is how to set up a template for a post so when you have a post for example if we just go and check out maybe like this post right here there's a template in the background all of this is showing up on all of my posts so all I had to do was go down and type in the title and then paste in the information all the text I wanted in here and automatically added things like this to my website to this post in particular and then lastly I'll show you how to get a pop-up that can be triggered from clicking or scrolling or moving your mouse anywhere on the screen and the pop-up can do really whatever you want it could be an email campaign it could be a download it could be trying to capture you know you know offer a new product the discount really lots of options you have there so we'll talk about all of that in this video all right so the first thing we want to do is get started with WordPress and so you can go down and click on the link on the top of the description or we can go up to San Trail Mediacom / Bluehost Bluehost is one that I recommend admittedly this is an affiliate link just a quick disclaimer just to help keep these tutorials free and it costs absolutely nothing extra to you now this right here says 395 per month I'll show you how you can actually get that for even cheaper yet so if we go to choose plan they give us a couple options here and you can read into these if you would like there's choice plusses the one they recommend of course they do it's the most expensive one I would generally recommend if you're getting started off the cheapest one is probably you know sufficient for most people unless you need a lot of space on your website so we are going to select this one it's three nine five per month I will show you how you can get it for even 295 per month and now we want to choose a new domain now the options here we can either make a domain and we can get a new one or we can transfer one that we already have so I'm going to say San Trail media example site ENCOM and click Next and it is available and now they bring you to this page where you can either sign in with Google or set up your account information down here and before I type in any of that I want to point down here to the package information and the package extras and so starting off with the account plan you have a couple options here you can get 12 months which is 595 per month you can go three years is gonna be the cheapest at 395 per month and that's generally what I would recommend if you can afford it it's only like it's gonna be 140 bucks but you actually have a really cool way you can reduce that by one dollar per month if you just go up here and say oh we're gonna exit out we really don't like this and then oh what's that we get some savings we can claim all right so now it's 265 per month so now let's claim those savings click claim savings it'll reload this page and now it is going to tell us that if we want to get 36 months it's 265 per month so now it's ninety five dollars you pay a hundred bucks and you have three years of a website honestly that's a pretty good deal I would I really have been looking around for other cheaper options and Bluehost is definitely one of the cheapest now up top we can go and add in our information so I'm gonna do that right now and then let's go down here and we have some package extras and within the package extras we can add some different things so domain privacy is something that I highly recommend you get this is essentially going to protect your information from anybody out there who's trying to find out you know anyone can go to look up your your domain and find out the address the phone number and the name associated with the owner of that domain now what this does is it hides your name from that and they put something else there and so it cost you one dollar per month for me that's worth it code guard basic something I'm not going to get right now on this one I'm not going to get the SEO tools on this one I already have Microsoft 365 and I'm not going to get site lock security although all these things are things you should consider getting if you are thinking about you know read them over yourself and more information but for the purposes of this tutorial I don't need to get those so I'm going to just omit those right now now we can add the credit card information I'm going to jump back right when we have that completed all right then it brings us to this page where we can create our account so I'm going to just add in my information there and say I agree to their privacy policy obviously read them first and then we can create our account and it brings us to right here where we can go and log in with the password that we have based on our domain and so we can go and click login right now and now I generally recommend skipping all of this stuff they just want to help you get set up and give you a whole bunch of plugins but you know you're watching this video and that's my job so skip this step I will show you what you need to get and it brings you over here so you can either launch my site or go to WordPress what we want to do is go to WordPress and it'll bring you over to essentially yourdomain.com forward slash wp-admin alright so then it brings us to this page and you'll see on the left side a whole bunch of things and honestly we don't need like insights and optinmonster WordPress forms all these little plugins that Bluehost just gave us we we don't need those so we can easily get rid of them by going down to plugins so we'll click on plugins might take a second because this is still kind of a new website here and if you scroll down with the plugins first of all they want to give you all these notifications to get rid of all of those get rid of them go away I don't want to talk to you jetpack and then we can actually go and start getting rid of these plugins so highlight or select all the ones that we don't need which I'm going to keep the Bluehost one but for the most part for the most part I'm going to get rid of everything else so then go to bulk actions deactivate these click apply and then it'll get rid of them and then we can actually go and delete them as well okay so we deactivated them and now we can go and select them again and so now we can go and delete them alright and then we're finally set up here were just a normal WordPress dashboard without anything on there now the next thing we want to do is actually start getting the plugins that we really do need as well as the themes we need so let's go into appearance and then you'll see themes so click on themes and there are a lot of themes you can choose from one that I recommend if we open a new tab and go to central Mediacom slash Astra it'll bring you to this theme right here which you can download for a wordpress it's very easy to do and you can either get a free version or there is also a paid version as well so if we click download now it'll download it and we can choose if we want either one of these that we cannot pay for the the paid versions or we can actually just get the free one as well so if you want these click get started for Astra Pro or if you want the free one you can just click on wordpress.org themes and we can search for Astra Astra of course there's so many other themes as well if you want those go go for that but it won't click install which was with whatever theme you choose that you want Astra just click install and then once it installed we click activate ready to use dozens of starter templates so you can do that or you can actually go down to Astra options and that same link will be showing up here I'll show you guys that just in case this is not showing up for you so if we go and click on Astra options there we go so Astra options and you can click install importer plug-in and that's going to allow you to import an entire you know a whole site template right away very easily so let's close out of the tabs we don't need on the top and then right here it says select which one which page builder you want if we're installing an entire website and because we want to use Elementor we are actually going to have to get element or first so in a new tab again Santro Mediacom slash Elementor and again Elementor is really great because there is a free version as well as a paid version and so that's why I like to start off with the paid one right away because there's a lot of stuff you can do with that but you know if you have a tighter budget the free one definitely still works so do we have a WordPress website yes we do so let's say continue and click on element or approach should be popping up right there in my account so I'll click on that and they have a couple different pricing options and I'll explain those and just as soon as they load here but really I usually just go with the cheapest one the personal site because we're only doing one website here so one makes sense $49 a year that's like what about four dollars a month if that's like the price of like a Big Mac every month about so for the price of one Big Mac per month you get quite a bit of extra capability on your website so let's go to buy now alright so that'll bring you to this page and what you want to do is actually highlight your key right here so it gives you a personal a license key so highlight it right click select copy and then click on this link right here that says Elementor - pro dot and then a whole bunch of numbers and that's gonna be the latest version so click on that it'll download and don't bother opening that click on the little icon that says show in folder so you can find out where it's downloaded just probably should be in your downloads but you never know where some things are being saved and so then go over to the previous page the wordpress dashboard and what we want to do is first we want to add element or free and then we have to add element or pro it's kind of weird that there are almost two different things here they merged together and become one but let's say Elementor so we go to add a new plugin search for element or element or search for element or and it should pop up as the first one so 5 million plus active installations say Install Now and then once that installs should take about a minute or two and then we can click on activate so its installed let's click on activate alright there we go and so now what we want to do is actually go on down to plugins so click on add a new plug-in so add new plug-in and this time we're not going to add we're not going to search for one we're going to upload a plug-in so we're gonna choose a file and this one is going to be from our downloads you'll see it's right there and so then click Install Now and we should be set up with Elementor so we're gonna activate this one click on activate plug-in and then that brings you to your plugins page and the big bold text right there says connect and activate so what we want to do is actually go and remember we copy that license key we're going to have to click activate here so it's connected to the account that's signed in let's say activate and I always like to copy the key just in case but usually it just connects to your account very easily because your browser just knows that you're signed in to both and it makes life a lot easier so there we go we are active we have the license all set up we have Elementor pro and now we're actually ready to go and start making some pages let's go up to the top and let's actually make a new page now so if we go to pages I'm going to make a breast contact page today so we'll go to add new and let's title this one press contact contact and you'll see on the right side we have a couple things for WordPress editing and obviously in the middle we have our WordPress editor you might have used this before and honestly it kind of sucks especially in comparison to the Elementor editor just because it's really clunky and annoying to use you have a couple options on the right but it's just really not it's not easy to use so Elementor is obviously a great choice that's why you're watching this video let's go up click on the blue button right there for edit with Elementor and let's make this press contact page and you'll see that when we get here it you know a different layout very different from what we saw in the WordPress editor and we have a lot of things on the left and I think it's pretty intuitive that a lot of these are going to be your drag and drop them into here but let's look at the right side first this is that what our website is actually going to look like so you're building in real time here and on the right side you could see this little dotted line that outlines a section and the way this is really being built is in a section layout so you create one section and put in text on images whatever you want then you can create another section and the difference is between the sections would be the backgrounds you put in there or really the the layouts that you have you can separate it into sections and I typically have maybe three sections per window maybe two and a half that are shown on the screen and of course your website could be as long as you want you could have it twenty-five sections along if you wanted generally people don't go more than like six or seven now so you'll see with this little dotted line we can go and add something from envato elements and vados another plug-in I have it on this website obviously and so you can either import an entire page which I'm not going to be doing right now but you could do that or you can import an entire block so these little sections you can import a whole section that's going to be maybe like a map for example and they have some really cool layouts that really make your life a lot easier and save a lot of time but this video is not a tutorial for Envato this is for Elementor so we're gonna build this page from scratch and so the other options you have right here you can add a template and so if you have any block templates that you saved in the past and I'll show you how to do that you could have the ones that you saved in my templates or you can look at some that Elementor already has for you so you can go and say maybe I want an FAQ block so you can go and check out an FAQ block they have a lot of options this little countdown timer it actually kind of looks like a Nike website for some reason but anyway you get a lot of options here that you can do now like I said building this page from scratch let's go and click the plus icon and you'll see that you have a couple options here with how your website is going to be laid out in this section so you can have a single pane right here you can have multi columns notes oh and another thing to note is like this and this and this and this and this these are all basically the same and it's really easy to rate rearrange the width of these so I'm not exactly sure why they have such differences here like this one and this one I really don't seem like they provide any new value but let's go and add in just for the top we're gonna add in this one and let's add one below that maybe just like a 3 a 3 section a 3 column in this section so you'll see right here if you just highlight over the or just hover right over the dotted line you can click and drag it over to wherever you want and so click and drag it now we have a wider center and the other ones you can see it shows you the pixel count right there so or percent so if we get it's like 15 percent slide it over to 15 percent it's definitely not the most convenient to do it this way both see if we can get to 15 okay close enough and then on this side let's go to 15 as well so that it's even on both sides and we got 15 now for the top one let's go and add a title here so this is going to be the press contact page let's have press contact show up at the top so to get here click on the little grid icon on the top right click on header and drag it over to the top block and for this let's call it press contact and now you'll notice that me we don't want that on the left it really doesn't look good so far so let's go and highlight that let's make it an h1 so first of all the text editor here not only do we have the content right there but we can also change a lot about that so this is the header two primary header so let's make it h1 and of course if we look at the text we can actually have a you'll notice this little thing pops up on the right side this little stack of coins is what it looks like these are dynamic tags that you can have and this is really not going to be useful on this page but if you were making a template or if you're making something that's going to be saved as a template you might want something that's like the post date so if you're making a template for your blog articles maybe you want to have a title and below that and that like the release date or something instead of typing that in every single time you can have something that is dynamic and automatically updates so that's what these are on the right side we can link this out if we want this text to be a link to either another page on the website or a URL or an anchor really whatever we want I'll show you that later on in the video now the size of this we can change let's make this extra extra large we want a really big title on the top and so far that looks really bad so we want to go over to actually let's make it in the center another thing looking a little better and now let's go over to this style and so with the style you can change the color of this text you can change the typography I normally don't do that I don't really add shadows I don't do anything else here except maybe I'm gonna make this white and I'll show you why we're gonna change the background of this section in a minute so I'm gonna make the text white for now and then let's go over to advanced and here you can add padding above and below that if we want to add a little bit of margin or padding so margin and padding are going to be essentially above and below this I'll come back to that in one second but let's change the background of this block so let's click on the three dots for editing this section and we have right here a couple options we can change the width of it if we want this to be stretched to the full width so let's go and stretch it to full width that way it'll go all the way across the screen you won't have any white on either side and I'm not gonna change anything else about this you can change the height you can make it for example fit to screen it's gonna be a very very large thing so depending on the unscreened it'll it'll show up like that for the most part I don't generally do that I just leave it as default and then you can change the height by adding things like you know spacers above and below or add some margin and like I said I'll show you all of this in a second so now let's go over to style and let's start making this look a little better now for the background let's go to normal make sure you're not on hover gonna go to normal and let's change the background to a gradient and maybe the gradient we want to start with a color how about this color this is one that I have saved and then the second color let's use as this color and let's make these how about 23:23 and then this one should be maybe eighty-three and let's change this to 230 so there we go now it's looking a little bit better but let's make that like I said a lot bigger so let's go back and click on press contact or you can click on the little pencil icon on the top and if we go over to advanced this is where we can add it to margins I wanted to change that background first so you guys could see what the margins actually do here so first of all if you click on it you could edit and you can make it negative you could even you know bring it down and it tightens in like that eventually it starts cutting off the text so if things are ever a little too far apart you could always just do that as kind of a backup thing I generally don't recommend using negative margins but is an option that you could potentially do now likewise we could add a little bit of positive margin here so let's add maybe like ten for example we could also add padding if we wanted some more space above or below that so if we added like ten for padding again you'll see we have more space above and below and actually on the right and left side as well so you see that right here the box is actually in a little bit now if we don't want that right here we have the little lock icon that links these values together let's make the right and left zero I really don't want anything on the right or left because I just want this to be really nice and centered so not worrying about anything being too tight there and let's do that so now we have it going across the entire page and it's in the center but it's still a little bit not it's a little bit short on the top and bottom so we could either add more margin or more padding or another option that I typically like to do for adding a large space above or below it's just to add literally a spacer so click on the little four or the grid icon on the top and click on spacer let's drag one above and let's drag another one below so we go add a spacer below so something like that I think that honestly looks pretty good we can make that a little bit of a larger spacer maybe 75 on the top maybe 75 on the bottom 75 okay so now we're actually getting somewhere press contact in the middle so that's the title of this page all right so now it's looking a little bit better but let's make this kind of a less boxy border on the bottom so if we click on the icon on the top of this section let's actually edit that to do something else so let's go down and we could either add maybe an image but I don't think an image is going to look good here let's go and add a border or a shape divider a shape divider on the bottom I think would look good so this is going to add something down here to make it a little more just to kind of break up that edge a little bit so let's go and make this you have like mountains that's on the top oops so top and bottom I don't think we want one on the top let's add this on the bottom and so you have like mountains I don't really like that I think maybe something let's try these down waves brush maybe maybe that one maybe that one looks good maybe waves pattern no I don't like that one so you have a lot of things to choose from here and you can really just go through these and figure out which one looks best so actually let's just go with let's go with mountains we'll change it so it looks a little better than this so we have the height which we can change you'll see here you can make it really tall or really shallow ones so maybe something like that and then we can change the width of it which will kind of stretch it out so I think something like like that maybe maybe like like that might look good that might look okay I think that looks pretty good actually so let's do that now with this I think it's still a little bit too tall okay so that's a little bit of a better border on the bottom all right so I got rid of the three column section below this one but now let's actually go and add another section so I think maybe like a two column one would be great if we go to add new and we select two column and then maybe we want to slide this over so it's not quite in the center so maybe right there and maybe we want a picture on the left and maybe some paragraph on the right so let's go and on the right side let's add the text editor it looks like I missed let's go and do that right there so the text editor let's just copy this and then add a whole bunch more dummy text so we have a small paragraph there maybe that's like about us or something saying central media is whatever and then on the left let's go and click on this and we want to add an image so click and drag the image and this image we have some options here so we can either change the image size as you see right there and so you can make it smaller or larger and we can change the alignment of it that's not important here because it's in the middle and we can add a caption we can add a link to this if we want this image to actually redirect to either the media file itself or to maybe a custom URL for example but in this case I'm actually not gonna link it out let's just click on the little image icon and make it maybe like a picture of me for example maybe it's going to be about me and so on the right side we have a large void on the bottom I think a good thing to do right there it would maybe be to add a button maybe a button would be something that we'd like to have here so let's go and add a button so if you click and drag that you can put it above or below the image Oriol so you can put it above or below the text you cannot put it between them because it's not how we have this section laid out so let's put it below the text so right there obviously that button looks way too small and I really don't like what it's doing so let's change the design of this button so let's first say that we want the button to be just default and we want it to say about read more about us and so maybe that's gonna link to the about us page so we can change the link here to about us and it should just about so we can link it to the about page or you can of course type in the entire link yourself as well and we can make this button small or extra extra large I think larger is gonna be better for this button and actually if we slide this over that image on the Left should be a little smaller there we go so that looks a little bit better and then this button I think this should be in the middle so let's go and center that button and we can make it extra large like I said we can change it if we want an icon we can check out the icon library and if we want to have maybe like a read more add an arrow for example if you want to insert that that's not really something that I typically use a lot I don't usually use icons and buttons but maybe you want that here you can add some more icon spacing so if you want a little bit more space between the icon and the words you can change that and then if we go over to style let's change the color of this to match the theme of the website so we can change the text color to white which it already is and we can change the background color of the button to the blue that we have on this website now let's just say when somebody is hovering over the button we want it to be a little different so let's go to hover and we can actually change it so that when they're hovering the background color becomes this color down here so when someone hovers it does that I think that looks a little bit better so let's just leave it as it is right there so that's just normal and hover that's how you change that with the button you can change the typography again in the text shadow I'm not going to do that right now I think it looks pretty good and then maybe that we don't really like to sharp edges here we've already been rounding off like up here for example let's round off the edges on this button so a radius let's add a radius of 10 now maybe 15 let's add a radius of 15 on this button and then we could also add some padding on here so if we click on padding and we add we could either add a little bit more padding which starts down at zero but we can make the button bigger so if we want to add let's make it really wide so let's undo this so we want to actually first of all make it all make it all like 15 so top bottom left to right and then if we click the unlink so by default it just kind of does it on its own and figures out how big the button should be but now let's make it a little bit wider so on the right side lets me get like 30 and then on the left side let's also make it 30 so now we have a button that's you know probably a better size I think it looks it looks pretty good and so you can change it all right there now if we go to advanced there's really not a whole lot that I want to talk about here is just margin and stuff like that padding above and below this little section but because it looks really you know pretty good right now I think that's probably fine and then one more thing I realized that I probably do want this to be left aligned so I'm going to go back to style and add it as a left align button all right now below that maybe we want to add a form because maybe the big purpose of the press contact form is to get people to reach out to us so let's click on the plus icon let's click on just a blank section right here and now so we're getting a little more advanced here with the form but let's go back and see what other things we have to add so we can add like a header if we want so if we can have maybe a contact us thing right here we could add more images videos icons google maps Pacers a lot of premium stuff so this is actually what we get into the Elementor Pro you're really going to need that to get this but if you know if you don't have Elementor Pro you can just skip a couple minutes ahead in the video and you'll be able to add you know we'll get back to some more of this stuff in a second so let's go and add the form so click and drag that over and the form is going to be showing up very ugly at first I really don't like how that looks at all so maybe instead we want to let's go through and head at this so let's say we don't want the labels above it so the labels are like right here it says name email above it so let's get rid of that we don't want that and then it's also kind of really close to this so let's go to this one and add a little bit of a margin on that so let's add that section so give it a top and bottom let's give it another like 25 just a little bit of extra margin on this block so back to this one all right so let's first change what we actually have here so first we're gonna say maybe we want to split up first and last name so maybe this is going to be so if you just click on it it opens up little options down here there's advanced settings as well we're just going to do basic content settings first so there's gonna be two B this one can be text if we want so it's going to be either name so let's say let's say this is just first name and here's gonna be first first name and then for label words gonna say first first underscore name and so this is going to be not required and we can make column with full or we can make it less if we want to make it like 50% for example you'll see it's now half as wide so that can be the first one the second one maybe we can say last name so because we already have email let's go and add another item it's gonna show up down here so click and drag it up to write below first name and we are going to change this one to last name so again it's text and then last name so last name that's we're gonna label it and then the placeholder last name and this one is below but we want it to be on the right side here so let's go and change it to 50% so there we go first name last name those are lined up properly now and then we have email below that and we have a message so if we go to email maybe email is going to show them so right here we have email but of course you could have a lot of other things so let's say placeholder email yes then we can change the input size to larger if we want I think that takes up too much space let's make it small I think small looks a little bit better and if we think that overall this is really weirdly wide so I think what I want to do is kind of smoosh this whole thing in a little bit towards the middle so if we go over to advanced we can change the margins on this section again and so let's go to margin or padding actually actually and let's change the right padding to maybe like 50 on the right side 50 on the left side so it looks a little bit better maybe like 150 would be better yet so 150 150 all right so I think that looks a little better a little bit more of a middle contact us thing right there and let's add a little bit of above and below so let's add 50 above that or 50 below and 50 above so now we have our contact form a little bit more in the middle and let's change how this looks it still looks really bad so we can go down here and so obviously we have our forms we're all labeled let's change the name of this to press contact form you don't need to use underscores it's something that I just typically do then we can go to buttons and so the button right here is the send button and we can change the size of that from small to large if we want it to be maybe a little bigger that might look a little better and we can change the alignment so leave it in the middle we can leave it the full width of it so it justified as wide as possible we can make it a Next button if we want previous button that's not going to be important for this really we just want to send button and we can add an icon if we want so currently no icon I don't think that's really important so now looking at actions after submit if you go down here and you click on that you have a couple of things that pop up so you can connect it to MailChimp or you know a lot of other things get response discord slack like tons of options I'm just going to say maybe we want a redirect so we want you know an email and a redirect so when they fill it out they click Submit it's going to send that email with all these fields to me and then also it's going to have them redirect it to another page you'll notice when I did that redirect showed up right here so these are the actions after submit the email and the redirect so let's go to email first and so we wanted to send to yes to me on the subjects going to be new message from Santro media no how about press contact inquiry something like that and we want maybe all the fields to be sent so everything in here is going to be sent to me and it's going to be from the email is going to be from email Sandro Mediacom central media and that's what it's going to be and we can copy other people if we want and the metadata we can have the time of the date the page URL stuff like that so that's how it's going to be your contact form is going to send stuff to you that they fill out now the redirect is going to send them to maybe another page maybe we want to send them over to the about page after they do this so we can go and check out about and it's not popping up below there so let's go to HTTPS how much do a wordpress just send them to the WordPress page I don't know just just for an example to show you what is it going to do so then we can go down and change the additional options but for the most part that's what we want to do for the actual technical part of what this forum is doing now if we go to style we can make it start to look a lot better now we can change the columns gap if we want a little more gap between them in the middle maybe that looks good the Rose gap we want a little bit more between that as well I don't think we necessarily need that I think I like it a little tighter then we can change the label spacing so if we want the labels to have any more space that's not really what I worry about too much and the typography of the labels obviously we don't have labels on there so it's going to be inside the field instead so if we go to field you can change the typography of the field to maybe just like black might be a little more visible and then maybe we want to make it slightly larger so we can change the size of it maybe like that for example I don't know I'm not gonna actually I'm gonna undo this so ctrl Z I'm gonna leave it with default for now and then the background color right now I believe is white so we're gonna leave it as white and actually I realized that this gap in this gap looks really bad so let's go back to form and change those gaps so the spacing is going to be maybe a little bit larger maybe even both like 15 all right so now if we go back down to field we can actually change the border radius so if we make it like maybe 12 for example you get a little bit of a radius on all these and you'll notice again they are all the same radius unless we unlink them which I really wouldn't recommend I really see no value in doing that here so if we go down to buttons again we can add a radius on this and also change the color because I think that looks pretty bad right now so the background color of the button let's make that the blue just like we have up there and maybe the text color is going to be white and then when they hover we can make it so the background color turns into that blue again the lighter blue and we can have the text color show up again as white so if we hover over it there we go and now let's add a border radius on this as well make it 15 and so it's a little bit more consistent on this page all right now this is looking pretty decent right now but let's see something cool that we can do here is actually changing the background of this section so if we go to edit the section we can go to style and let's actually add in the background click on classic it's not an image back there so if we click on an image let's use this Philly nightscape and it's going to look like that now if you want to add an image behind a section you have a couple options with where you want it to be positioned so for this I'm going to say Center Center I think that looks pretty decent and we can change the size of it if we want by default I think that looks fine and we can add a couple other things so like the scrolling effect of motion effects it's not really what I'm going to do right now so instead we can actually go down to the background overlay so if we go down to background overlay we can change maybe something on top of this so let's go and add like maybe a gradient on top of this so maybe we'll have again the same two colors so maybe this color and other color would be the darker one maybe that's our gradient so you see it looks like that but you can change like the location of the gradient so let's bring that back a little bit bring that forward and let's change the opacity again so maybe it's a little bit lighter or a little bit I think darker looks a little better so that's what we're gonna that's what we can do right there now something else is you can actually change when you're scrolling how that's going to look to make it to give it a really cool scrolling effect we can actually go to when I hear the attachment and change it from scroll to fixed and that way as you scroll it'll stay in place you can see you can scroll through that image I think that looks pretty cool and it might be a little bit more appealing for some people so all right so now let's add maybe a little bit of space above and below this form just to make it pop out a little more so click on the pencil icon go back to advanced I think you guys know how to do this by now and we're going to change the padding on the bottom to 100 and the padding on the top to 100 as well and all right now that we have this background I think the send button probably should be outlined a little bit better so let's click on the pencil icon for this and we can go over to the style we can go down to buttons and we can actually add an outline on there as well so I believe we should be able to say border type we want a solid border and the border could be white maybe that looks fine honestly it makes it pop out well enough I don't really care what it looks like for the purposes of this video but I think that's going to be a decent idea right there now maybe we want something between these two so if we want to add another section something cool we can do again let's go and add a section and I should have pointed this out before let's add just a regular section here and you can actually click and drag these sections to rearrange them however you want so we want this one down below the blank one we can click on the the six dots and drag it down below that and you'll see right there it's going to be showing up looks like I didn't get it there so let's click and drag this one up above it so we can put the section right there and it shows up and so now in this section we could add you know some other things let's go and check out what else we can add on this page so so far we've got our title we've got our little bit of about us a button that works and does stuff we have our contact form with a really cool background that Scrolls and maybe in this next section we want to add portfolio for example so let's go and add just to see what that looks like me we can change that see what else we have as well maybe a testimonial care some would be good so portfolio is gonna be a whole bunch of different articles a lot of these don't have a featured image but I don't really like that so let's right-click on this and say delete so we can delete things within a section very easily by right-clicking on the pencil icon and choosing delete so besides portfolio maybe we want like I said testimonials would be a good one we could add that we could add a gallery we could have had a countdown I don't really I'll show you how to do a countdown in a second I think countdown might be kind of cool actually I think this one's pretty cool as well let's go and add some tabs so we'll add tabs and then within tabs you can add really whatever content you want so within tab one we're going to add just whatever this text is fine maybe tab two you can add some other text and so this would be a cool way that if you want to have maybe like why are you contacting us and so for tab one you could say about sponsorships and maybe this one can be about product reviews and maybe we want another tab that's going to be about how about like about maybe like guest posting right something like that and we can have some content in each of these that would just be whatever we want so that way when people are looking at this they can easily just go through and see let's go and they can have you know enough stuff that they're they're able to learn about this so maybe our websites gonna look like this and they can say oh I really care about guest posting or I care about all those things we can go to style we can change the look of this as well so if we really want to change the border of the background stuff like that you can change pretty easily and of course we can go to advanced as well and change what we had on the other one before so this is our website so far the press contact page now something to note is that we didn't actually save this yet so let's go and make sure that this is saved as a draft as I save and now let's check this out and see what it looks like maybe on a tablet for example so if we click on responsive mode here we can see what it's going to look like on a tablet so on a tablet still looks pretty good I think that still looks pretty decent the buttons and kind of a weird spot so I probably touched that up a bit and otherwise actually you could say you know what maybe when we're on a tablet mode maybe this right here I don't want this button to be shown so maybe for example if it's just really out of place and you just wish it wasn't there you can go to that button so if we click on the pencil icon to edit we can go over to advanced and this is a really really important thing that some people you know typically overlook and forget that you can even do so if you go down to responsive you can actually hide it on different things so hide it on a tablet you could hide it on mobile in that way the the tablet website is going to look like this and the button won't be there so that way your website's still going to look great on any any device being used so let's go over and check out what that looks like on mobile now remember I did hide that so that button is no longer there but you know what maybe it does look good on mobile let's go and re add that to mobile so that's how you can really add things that are really specific to only showing up on desktop or tablet or mobile or whatever else you want so this right here you know it still works on on mobile as well but maybe this contact form just really does not look good there so we could change that and hide this one from mobile so if we go and click on that go to advanced go to responsive and let's just hide it on mobile that way our site looks just fine on any device that you want so let's go back to desktop and let's actually preview this in a full mode right now so if we click on preview changes it'll open a new tab and so we can see here this is what the website is going to look like and I did actually stretch this to full width and you'll see why I think that does look a lot better so you wouldn't have white on the left or right so instead you have it goes all the way across and I think it looks a lot better I know this doesn't scroll all the way up to the top of the buildings because we don't have anything below so let's continue to populate this page all right so now let's go and add something down below and I think again we can add some basic stuff if you want to add more content but I think it's kind of cool to add some of the pro contents right now so if you have Elementor Pro and we want a testimonial carousel maybe below that or above that maybe we want a timer and it looks like it's a little slow just for the time being let's go back and add a timer above that so scroll down a little bit add a countdown to right above this and so that way we'll have a countdown until something happens but we want to know what's going to happen so let's add a header just above that and so maybe this is going to be a countdown next youtube video release it's gonna be in 29 days honestly sometimes it feels like that's how long it is between videos but anyway we'll go to style we can change the background of this as well so background color maybe we want it to be blue I think that looks better with the website testimonials we can go and c