Elementor Website Tutorial: Create an Instagram-Inspired Website, Easy Method!

Key Takeaways

if you want a brand new website for your business with a really modern light and airy feel i've got you covered here i'm going to show you a really easy step-by-step method for creating this website or one that feels like it in under an hour with no technical skills needed from you so in an hour you could be up and running with your brand new website making a great first impression with your prospects and yes this is the same way i create websites for my actual clients and this is how i teach it in my paid program as well and it's super easy even for the newest newbies out there so you can definitely do this and it's free so a few months back i posted a tutorial on how to create a bold simple apple inspired website and people really seem to like that so i want to make this a new feature on this channel showing you how to create websites in all kinds of current styles and this time around i wanted to focus on that light breezy kind of style that's pretty heavily influenced by instagram so if you think this kind of style would be a good fit for your business i'll walk you through it step by step and you can always customize it as we go with your own colors fonts and images so it's ultimately going to feel like this but it's also going to feel like your brand at the end of the day and we're using wordpress and the free version of elementor a really simple drag and drop page builder but it's so much better than wix or squarespace because you're not going to be limited by the templates they have and you end up owning the site not just renting it with a monthly recurring charge but it is really important to keep in mind that in this video i'm just walking you through the creation process the building process we're not getting into content or conversion methods in this video but i do have you covered on all that stuff in my free on-demand master class training how to create and launch your own profitable client generating website without any of the content confusion tech troubles or designer price tags now you definitely don't want to miss out on this because the planning and the content that you put on your site is actually the most important piece here so just click the link in the description below to save your seat in that on-demand master class okay so if you're ready let's get building okay so starting right out we're in the dashboard area of your wordpress and if you don't have hosting yet if you don't have wordpress installed yet and you need hosting just go to wes mcdowell.com hosting that is my affiliate link and but it will give you my discount for my preferred hosting of choice so that would be the first step if you don't already have that but once you're there once you've got wordpress installed what we need to do is install the plugins that are going to help us build our pages so what we do is go over to plugins add new and the first one we're going to look for is called elementor and then the first one here element elementor page builder just click on install now and then activate and this one is completely free there is a pro version that has extra features involved with it but we're not going to use that today and we're just going to click out of here because there's one more plug-in we need in order to build our menu because that is normally a thing that you need elementor pro for so what we're going to do is a little work around so then click on search plugins and you're going to type in elementor header footer and it's this first one right here elementor header footer and blocks template so just click on install now and activate next thing we actually need our theme to be working here so go over to appearance and themes what we want to do is choose one that's going to work the best with elementor and honestly elementor works with all themes but there's one that there that they built themselves that works best with it so i'm going to click on add new theme rather sorry and i'm going to search for hello and it's this one right here just click on install and activate all right so let's just go back out to the dashboard here and then you should see a big elementor block right here and just click on create new page okay so see how we see all this kind of stuff up here that comes with a theme it's kind of ugly so we're going to get rid of that just go down to the very bottom left under this gear icon settings and under page layout we're going to choose elementor canvas and that gives us a brand new workspace with nothing on it okay so before we begin what we really want to do is set our fonts and our colors so hopefully you have had a chance to go to google fonts and you can kind of find a font combination that you like or you can just do it in real time in here it's up to you so just go up to this little hamburger icon right here and click on default fonts and here we're going to set up our primary headline secondary body text and accent text so for primary headline i'm going to choose one called oswald and then for secondary headline i'm going to choose one called mr de havilland i think it goes nicely with our with our instagram theme here and then for body text i'm just going to choose a nice simple clean one called equestrial and accent text in case you're wondering is usually the text on the button so i'm just going to choose equestrial for that as well all right now click on apply up here if you don't click apply it's not going to save any of those changes and then from here we can set our default colors just go back up to the hamburger uh default color so basically this is going to be your primary headline color secondary text and then this accenture button color so i'm going to set the primary color to not quite black but a nice really deep navy blue and i'm going to set the same color for secondary headline and text as well and for our button color i've chosen a nice like turquoise teal color alright so that's all chosen and i'm just going to click on apply okay so now the real fun can begin and we can start building out our page starting at the top with the hero section so there are different ways you can build pages within elementor there's two different choices here so basically what we have are sections so this would be a section with columns inside that and then widgets you can drag inside of the column so let's just take a quick look one thing we can do here is click on the folder icon which is going to bring up all these pre-formatted pages i don't generally recommend going this way because it makes you like it makes you shoehorn your content into whatever they've come up with i prefer to use blocks if anything that way you can just kind of take these really simple layouts and then customize them with your own colors and fonts and all that good stuff but what we're going to do right now is actually do it from scratch so you really can see how it's done so just click on the plus icon and we're going to you can choose the number of columns you have we're going to choose a nice two column layout for this hero section and this is the section it's in blue it doesn't look like anything yet there's nothing in there so we just go to this little grid icon this is where all the widgets are kept and take a heading and just drag it right over here and then go back to the widgets and then drag a text editor underneath that followed by a button and one thing we want to do so basically we can control what happens with each column by clicking on this and you see the the gray icon here same here but if you choose this blue thing up here that is editing the entire section so what we want to do is choose the section and we want to go to layout we want to make sure it's not boxed but it's full width that way there won't be any white space on the sides it's just going to be a nice full width treatment so first things first let's go ahead and add a background color to this side and we do that by going over to we choose the column and we go over to style and under background we're going to choose classic and then right this is the color picker and i've found a color that i like a nice beige color and by the way whenever you use a color you can always add it to the color picker so it's always there at the ready when you need it so you don't have to keep entering entering it in manually you'll just have the color you've chosen and then click on the plus icon right here so that's kind of the the general styling we're not done yet by any means but then what we want to do is add an image over to this side so click on this column style and background type we're still going to choose classic but rather than choosing a color we're going to choose an image right underneath so click on choose image and i've already got my images loaded up here but if not you would just drag it onto the stage but i just wanted to make it easy here so we're going to insert this image and of course it doesn't look like much of anything right now because we don't have this all styled up yet so what we want to do is give all of this some more space because this does not look like a really appealing top of a website does it so we're going to choose the entire section and we're going to go over to advanced so here's where we control the margin and the padding so think of margin as the space outside of the blue box in other words we want to have 100 pixels of space between the outside of the box and the next element whereas padding refers to the space inside the box so if we wanted a bunch of space between this button and the edge of it that is uh done by padding so let's just go ahead and add a top hat oh first of all important to know uh values can either be linked together meaning if we did 200 it would be the same for all of them or we can unlink it and have you know independent values of each other so but anyway i'm going to re-link it and i'm just going to zero that out because what we really want to do here is add padding to the column not the entire section so click the column advanced padding i'm going to unlink the values i'm going to give it a 200 not 2 200 on the top 100 on the right 200 on the bottom and 100 on the left so let's go ahead and give this a make this a little bit bigger i'm going to choose that text and click on style and then under typography that's where we make all these choices so we can make the size quite a bit bigger which is what i'd recommend here and wait i think we chose a little too heavy of a font in when we chose the the font text so let's go back up to the hamburger menu i'm going to go to default fonts i'm going to choose primary headline and i'm going to drop this down to let's see what 300 that's a little light let's choose 400. okay i like that so i'm going to click on apply so now let's go back to this text and back to typography so we can choose obviously the size the weight so we could override what we just did and make it bold but what i want to do is under transform i want to make it all this text uppercase and you can also do things with the line height so you can make it much more space or much less space i think something like this i think just i'm going to bring that back to how it was i think that looked fine and if we want to make this text a bit bigger we just choose it style typography bump up the size to how whatever looks good and then the button i always like to make a bigger deal about the button so i'm going to click on that and under content you can choose the size of it overall so small medium large extra large let's see what large looks like all right i like that actually and then i'm going to click on style and what we can do we can change the border radius so if you see there's a little bit of a rounded edge which i like but i also like kind of a more of a pill form where it's just kind of circular on both sides all right looking good so now what i want to do is fix the the size and the placement of this image so i'm going to click on that column so underneath the image area here you've got all these choices in terms of where the image is positioned so let's start by actually let's start with size and i like to do cover because that's going to make sure it's big enough to cover the entire space without being too big and then position we can do things like center center you know all these different choices i think i'm just going to keep it on center center i think that looks good alright so one thing missing up here we don't have a a header menu so let's go ahead and whenever you want to add something above a section you're going to find the section and click on the plus icon and that opens here so we're going to create this header from scratch so click on the the plus icon and choose a three column layout first thing we're going to do is we're going to take the call to action button right click copy and then right up here on the top right right click paste and we're going to go over here on the the side under alignment we're going to right justify that and then we're going to see how you can you can always mess with the column width so i'm just going to make it the right uh i'm just going to make it much tighter over here then what we want is the logo and the navigation menu so go up to widgets and choose image drag it in here and then go back up to the grid for widgets and we're going to type in nav so we're going to find his navigation menu that remember that plugin we installed that was going to let us do this that's where this comes from we're going to drag this right into the middle section here and that's just pulling in from a menu so basically you within wordpress you would have your pages you would create a menu in wordpress and then it would pull from there so if you have more than one menu you would make your choice here of which one you're going to draw from but let's just go ahead and get our logo in here so we'll click on the image placeholder and then choose image and i've already got an image file right here i'm just going to insert that we can make it smaller which i think is probably a good idea just about like that looks good to me and then notice how things aren't exactly looking centered vertically so we'll be how to fix that is just click on the section and then under layout vertical align we're going to go to middle okay so that looks pretty good to me so now we can move on with the rest of the page so let's say you have different services you want to offer or this could also be like a benefit section we're just going to do a nice two column layout and we're going to grab a heading widget and put it right in there and we're going to right click and duplicate it we're going to have two headlines on top of each other and then we're going to go over to the widget and we're going to do a we're going to drag an inner section into this guy right here now don't worry it's all going to become very clear what we're doing in a second so let's just go ahead and type in here i mean by the way if you ever want to when you need to change your text you'll just click it and you'll always want to edit it over here on the left column and i'm just going to style this text like we've done before okay and then i'm going to change the background color of this column so basically what i'm doing is i'm just kind of making i'm using that soft color palette um that is really kind of indicative of instagram so and you can obviously feel free to use your own colors here get your own inspiration you know even though we're doing this one layout it really can be just about anything you want it to be so and one thing i'm noticing here is we wanna we also want this to be full width like this is we don't want this white space so click the section layout content width full width perfect and now i want to drag this to be much bigger than that column and then what we're going to do is we're going to start adding in our content over here of our services or these can be benefits or whatever you want it to be so click on the widgets and we're going to drag an image and we're going to drag a header and i am going to change the text to a different font so i'm just going to click on typography and i'm going to choose quest real that's the thing like whenever you add your own default fonts you can always override them later and i'm going to make the size a bit smaller [Music] okay so what i'm going to do is i'm going to i want three of these next to each other but rather than do this over and over again i'm going to right click on this column delete and then find the so there's this column then the intersection column right click that duplicate and then again so now we've got a nice three column layout they're a little close to each other so the way we fix that is choose this intersection and then under layout columns gap i'm going to choose extended and see what that looks like yeah that's much better to me so now let's just go in and pop in our images so click the first one choose image all right cool so i've got the images in and notice they're different sizes this is a personal preference thing this is this kind of said instagram to me a little bit so i kind of like that they're different in different sizes but if you didn't like that you would just choose three images that were the same dimensions but i think that i want to round the edges around the corners rather of these images so i'm going to choose the image go up to style and border radius i'm just going to start messing with that so i think yeah 9 looks about right to me so what i do though rather than do that on each time and this goes for almost anything on the site you're going to right click and then copy and then right click here paste style and it'll carry that style over of the rounded rounded corners so there's a few things left to do here i want a little bit more padding between the top and in the image here as well as on the bottom and i don't like that this this does this looks sloppy to me at this point so let's choose the entire section layout vertical line middle that'll take care of this part and let's set the padding a little higher okay so i'm going to choose the section go and up to advanced and i'm going to choose a padding of 50 on top okay uh so notice what it did here it didn't it didn't give us the the background color because what it did is it's this is for the whole section so i'm glad i made this little mistake here so i'm going to go back and get rid of it what we need to do to give it more space but keeping the background color here what we need to do is actually choose this intersection and then go to advanced and we're going to give it a margin i'm going to unlink the values i'm going to do a top margin of 50 and a bottom margin of 50. and to get a preview we can just close this window out just by clicking that that arrow it's looking pretty nice so far uh one thing i'm not happy with i would like there to be a little less space between these two headers so i'm just going to click the top one go up to advanced and then margin i'm going to unlink the values and bottom i'm just going to go into the negatives with it and just get it a little bit closer okay next we might want to do a simpler section so it's easier on the eyes let's just do a nice kind of text based section maybe in about us so let's click on the plus icon and grab a one column layout and we're gonna go up to the widgets and we're going to drag in a heading and a text editor right underneath it and we'll just pop in our text here and i'll edit the style of it a little bit so it reads better okay so i want to have an image background on this one so let's click on the section itself and click up on style then background we'll choose classic and then we'll choose an image i found this one so i'm going to insert that not looking too great so far so i'm going to click on attachment fixed that way it stays in place as we scroll past it which i kind of like that but we need to do something so what i think i want to do is because it's hard to read right so we want to make the background dark and the text light so i'm going to add a background overlay on top of this image so un click on background and click on background overlay and then we will choose classic color so i'm going to choose this kind of dark blue color and then the way you can bump this up is you it can be either more transparent or darker whichever you want so you just use this slider and just kind of eyeball it to see what looks good and of course now i need to make this text light so i'm going to i'm going to do that real quick okay so a few things left to do here um i'm not in i i don't like when text is this goes this far from left to right we want to make that a bit tighter so i'm going to choose the whole section and layout and it's box so what we can do is we can choose in this with this slider here how wide the text is i'm going to make it about 800 i think that's going to look nice and i actually want to add a box all around this too so i'm going to click on the column style background type classic and i'm going to choose that same blue color we just chose and then if i wanted to make that a little less opaque and just a little tiny bit transparent i can do that with this slider here so i'm going to do that and now last thing i need to make sure that there's a little bit more padding between this and the top of the box as well as outside of this blue box so you'll see what i'm talking about here let's make sure the section of the column is chosen go up to advanced and i'm going to start increasing the padding just on all sides of it i think that looks pretty good now the last thing to do is to give it a little bit more space above this so what i want to do is unlink these values because i just want it to be on the top and bottom for margin so let's give it a 50 on top and a 50 on bottom all right so let's see what we got yeah i'm liking that i think it looks pretty good okay moving right along let's add another two column layout maybe for benefits so i'm going to click on the plus icon and do a two column layout and i'll go ahead up to the widgets i will drag an image into this slot and a heading over here and then also what i'm going to try to find i'm going to go over to widgets i'm going to type in icon box right so it's this one right here i'm going to drag it right underneath the heading so first thing i'm going to go ahead and give this some some padding so i'm going to click on the section advanced i'll unlink i'll give it 50 on top 50 on bottom i'll choose the image click that and then choose image i've got this one chosen click on insert i'll go ahead and round those corners all right so now let's start um changing our text so i'm going to click on this i'm just going to pop in y us change the style typography i'm going to make it bigger like that and i'm going to make it all uppercase okay so now we've got an icon box so how do we style that how do we add our own touch to it so make sure it's clicked so basically what this is it's a standalone element that has all these different elements within it so it's not an icon and a heading and a text box it's kind of all these things rolled into one so the first thing i want to do we've got um we can choose the icon and we can add in the heading and the test the description text but i want to first change the icon position you can have it be on the top like it is now on the right but i want it on the left okay so i'm going to choose the heading let's go back over to content i'm just going to this is where you put the the benefit name right here and then you would describe it right here and then let's talk about choosing icons so all you have to do is click on light icon library and choose the one that fits best [Music] i'm going to choose this one but i'm not happy with the style yet so i'm gonna click on style and here we can shoot we can change the style of the icon as well as the written text so let's go ahead and make the icon a different color more of a brown color and then remember i'm going to add i'm going to add that to our color palette so we don't have to do that again and we can do all kinds of things like changing the spacing between it which you might want to increase we can change the size of the icon i'm probably just going to put it back to how it was i think it was fine you can even rotate it which is kind of cool so a lot of things you can do and then so let's change the text now i'm going to click on content and so we can change the vertical alignment it's a top now i think middle might look nicer yeah i kind of like that better and let's change the text typography for the benefit name i'm going to click on typography i'm going to change it to that cursive font that we have and bump up the size but see how it's a little the the text is a little far from this text so i'm going to change the line height now that looks better okay so now that i have it how i want it i'm going to right click duplicate and then duplicate again and this is completely up to you but i think i want a little bit of separation between there not just in space but with the actual divider so i'm going to click on widgets and choose the divider widget and drag it right between like that and then you can change the width to be smaller kind of like it better like that and i'm just going to change the the color i'm just going to keep it black but i'm going to drag this down so it's not quite as as dark just a little bit of a lighter touch and i'll duplicate that and then i'll drag that right in between so let's take a look okay so right away i feel like there's not enough space between these columns so i'm going to choose the whole section layout column gap i'm going to choose wide or let's see what wider looks like yeah i kind of like that better and this feels tight so i'm going to choose the ys text advanced i'm going to give it a margin on the bottom unlink let's say 30. yeah looks good so now you would just want to choose the right icons all right so now let's add a testimonial section super important so i'm going to just choose a one column layout and then drag in a heading and then an intersection because we want a three column layout for that but we want the the title to be able to be above it so that's why we can't just have a straight up three column layout so we would change this text [Music] and let's change the background color okay so now what we're going to do is we're going to add in testimonials so go back up to widgets type in testimonial and we can't do the carousel with the free version so we just have to do this the old-fashioned way um one at a time so drag in a testimonial widget right into that block and i want the actual testimonial to have a white background to it so it stands out so let's choose the column that it's in and then style background type classic and then just choose white okay so now choosing the testimonial text i'm actually going to replace title it usually just kind of has a placeholder wanting you to put in the person's job title i prefer to put in five stars i just think it reads better as a testimonial that way and then i think i want to make it left aligned as well so now let's go up to style and see what we can do with the look of this i'm pretty happy with the text of the testimonial itself but let's uh mess with the name a little bit what i want to do is typography i want to bump the the size up just a bit i would like it to be all uppercase and let's just change the way to a little lighter let's make it 300 and see what that looks like i like it so now let's just go we would just pop in the uh the image because obviously you know you you definitely want to have the image of the person who's giving the testimonial makes it come across better especially in a very visual site like this so you'd go up to content and then choose image and then you know let's just choose this one again okay so what we want to do is we want to give this more padding on the inside right so click on the the column advanced and let's give it a padding all the way around of 30. all right that's looking pretty good to me so what we want to do is duplicate this three times so we're going to delete this column we're going to right click duplicate and then duplicate alright so but here's the thing notice how there's no separation between these so how do we fix that we can't actually did what we did before with the column gap see like it just doesn't it doesn't do anything because it's it just doesn't do anything so i'm going to set that back to default what we need to do is choose the column advanced and we need to give each one a bit of a margin so i'm just going to do 10 pixels all the way around then to uh to duplicate those results remember we don't have to reinvent it we can just right click copy right click paste style don't just paste paste style now one last thing i just want to give this a little bit more padding on the top and bottom of the whole section and i actually want to do something a little interesting here too um so i'll show you what i'm going to do i want this image to kind of overlap with this section a little bit so just makes things more interesting and it's a cool trick to know so choosing this section i'm going to go to advanced and then i'm going to unlink the values of padding i'm going to give it a bottom padding of 50 but we're going to give it a little bit more on top and then what we're going to do is we're going to go back up here we're going to choose the section and we're going to go to advanced and we're actually going to take away the bottom padding of that and then we're going to choose this column that this image is in okay we're going to choose the whole column advanced and then we're going to unlink the values of margin and we're just going to go into the negative with it okay so we're going to overlap it but notice how it's covering that up so what we're actually going to have to do is we need this image to be above this one so it's really easy to do we just choose this whole section and z index is what makes what the higher that number is the further to the front it's going to be the lower it is the more to the back it's going to be so let's just give this a you know 9.99 brings it all the way to the front so see what we've done there we've kind of added a little bit of an overlap just some visual interest so now we're going to add a footer to the page so we're just going to go underneath here we're going to add a two column layout we're going to put the logo here so we're going to drag an image and then a text editor underneath that followed by a heading over here and then i'm going to type in social social icons we're just going to drag that right underneath this so let's first give this a little bit of padding so choose the section advanced unlink values let's give it 50 and 50. so we'll start by choosing the logo file so click on the image choose image and we'll just use the same one we used before and we can sh we can change the image size by just saying custom let's go ahead and say 200 width and then apply and then we're going to align it to the left all right so then here's where we'd want to put your address you know for for that local seo factor i'm just going to go ahead and pop that in as well as the phone number and i'm going to go to style and i'm going to tighten up the line height on this a bit cool and now over here i'm just going to change the text and then for the social icons what you'll want to do obviously so they're basically in there in their own little widgets within a widget so and you can add whichever ones you want they've got a million of them they've got um you know instagram so let's say if you want to add a new one so you'd click on icon library and you just type in you know whichever one you want and then click on insert and then if you want to get rid of one of these you just click on the x so let's start by aligning them to the left and you can choose between rounded rectangles squares or i'm going to do a circle for this one so the next thing you can do is you can either keep it the official color uh so it's facebook blue youtube red you know whatever the color is for the for that platform but what i want to do is brand it a little bit better so i'm going to click on style and i'm going to take it away from official color to custom and i'm just going to choose that same you know kind of blue kind of black color that we've been using from there you can change the size you can make them smaller i think i'm gonna make them about like that and then you can change the spacing between them as well and then of course to change it the links to it you just go to content and for each one of these you would just link right to your account okay so one last thing we can do here to make things a little more kind of animated and fun is you can definitely add in some motion effects so for instance i would take this whole section and let's go over to under advanced we have motion effects we have all these different entrance animations you can do so what i would recommend here is probably a fade in from the right so see how that looks like so when you scroll down to it it kind of animates in and you could take this section right here and you could do um maybe just a fade in i think that looks nice it's nice and subtle and then this whole block you could probably have so advanced motion effects you could do a fade in up and then you could take this one i mean now we're getting a little crazy we just want to show you what's possible we do fade in left with that so you know get creative have fun with it but yeah let's check things out from the top to bottom so we've got this really nice clean airy feeling website that would look very nice with you know choose your own colors choose your own fonts but something like this would make you look very branded and very put together and it took us less than an hour to do it okay so remember that's how you physically create your website but do you have persuasive content or a content strategy at all if not you're just going to want to click right up here to get your copy of my free on-demand master class on how to create and launch your own profitable client generating website and i'm going to show you exactly what you need to amplify your business in under 60 minutes so just click right up here and i'll see you inside the training