How I designed this product website in Elementor Pro

hey guys if you want to learn how to build a page like this in elementor pro then this video is for you i've already showed this design in two tutorials uh one tutorial being the new hotspot widget of elementor and one tutorial where i showed you how to create this blur header uh these videos are both linked in the description if you want to check them out but people also wanted me to make a video about the whole design of this page and i thought that would be a pretty cool video and it would be a great practice if you want to learn how to build a cool website with elementor pro i'm going to show you how i would do it so if that sounds interesting to you then keep watching [Music] okay so the only thing that we already have is that blur header but this is a new page a blank page for elementor pro and before we're gonna click and try to do everything what you first should do is look at your design and i think about how you would structure it before you actually gonna build it because that will save time so what is this well first of all it's a big background a background with some blur as you can see it has an image that overlays onto the next section two text and a button and that's actually it so let's just start with that one section and two columns okay so what we're going to do is we're going to select the two columns and then first we're going to give it some height because we need room for that video for the section put it on minimum height and we're going to put this at 850. now we have enough room for the video make sure that the column gaps are off because elementor always adds a little bit of padding in here which i don't like because then it's not aligned to all the other items and now let's first insert our video so we're gonna go to style and then we're gonna go to video so here we can place a youtube link but on the final website the video if you reload the page it plays instantly and when you use youtube link it needs to load first so what you can also do is paste in a link here that is actually hosted on your own website so how you do that is to go back to your dashboard then go to media and then make sure that you upload your mp4 in here just dump it in over here from your finder right so this is the video you're gonna dump it here then you click on the video you get a preview here and this is the link you're gonna copy there's a button here or you can double click and then copy it then you go back to your page and you paste that video link in here and then it starts to play the video instantly how cool is that now on the final website we also have a blur over here and that makes this part more visible so what we can do now is go to background overlay then click on gradients you don't see anything yet but we need to play with the colors to actually see what we're doing so i've already set up some colors you can of course set up your global colors inside of the site settings so for this website i've already prepared something so some colors i've inserted them over here and some fonts so for example the primary font over here is sora that's the font you can see right here actually this is also soraa it's all a google font called sora so to make my life easier i've already set up the fonts over here so whenever i drag in a title or a text it already looks the way i want so i'm gonna exit here i'm gonna go back to my section so now with that we've inserted the video we can go to background overlay and here we can create that gradient so what i always do is start out with some colors that you can clearly see so for example super green and red so now you can see that red is on the bottom and green is on the top but we want to have that gradient that is like this so we need the radial for that so if you select linear to radial you can see that now the green is in the middle and if you then put the position in the top right you can put the green over here let's now increase it so make sure you almost don't see the guy so something like this you can also change the location so maybe make it a little bit more intense something like this so when you have your item over here it's much more visible because this is 85 opacity and now if we decrease the opacity from this one to zero you can see that we now have this cool glow that looks pretty cool so now we only have to change this color to the color of our design and now you can see that the video is just in that corner really cool so now we can easily add items and if the items are not visible enough we can change the opacity or change the location so now let's add some things i'm going to add a header first i'm going to make an h1 i've already set that up like i said in the site settings that's why it has this styling i'm going to insert a text the text on the website that i've set up is gray because gray is the color that i use most often so here i need to change the color so i'm going to put that on white and then to create this cool gradient button we also have a little trick so what we're going to do is we're going to insert a normal button like this it's not styled yet so what you need to do first set it on medium because it's a little bit bigger then we can go to icon and it has this play button but you can insert any icon that you want i'm gonna give it some spacing it's not perfectly middle aligned and there's no such setting for this which i don't really like so what i normally do is just change the line height a bit to make it a line a little bit better it's not a perfect solution but it works there you go okay it's bold and now for the colors we're gonna go to gradients and now we can select two colors again so here if we change this to a random color like this you can see that the gradient pops up now you don't want to change it to radial you want to change the angle because right now it's 180 degrees so that is from top to bottom so if you put it at 90 it becomes this gradient looks really cool but these colors are way too intense so we're going to change this to the color of the actual of our design all right something like this that looks cool now we're going to increase the border radius to make the button rounded and as you can see this button still has more padding you can also increase that over here so for example put a 30 on all sides and that doesn't look good so unlink it and make sure that the top and the bottom are not too high so for example 15 or 18 and then the sides you can make them a lot bigger and that always makes a button look nice and now since we've set up the padding ourselves the button size option doesn't really apply so if you put it back to small the only thing that will change is the actual size of the icon and the text so that's something to keep in mind okay let's now add in our big image and see how we can overlap that to the next section okay so i'm just gonna drag in an image like this and the image that we're gonna work with is this image it already has some padding on the left and it has a blur as you can see inside of the design so this blur is exported within that png i'm gonna select that png that i have imported with a blur okay so now to make it overlap we're gonna go straight to the advanced tab to positioning and then go to custom then we're going to give this a width of 1000 and then put the positioning on absolute and in that way you can play with it a little bit more because now you can drag it to the position that you want so as you can see it's still not the right size so we also need a little trick over here go to style then put this on pixels and then also increase this to a thousands and now it's the the right size you want to go to positioning and now position it like you want it so now it's massive and it already hangs on to the next section okay so we're almost done with the header i forgot one thing and that is to style the button a little bit more because on the final website we have a hover and the gradient flips that's pretty cool so how you can do that is go to the stealth button then go to hover then put this one on gradient as well and then make sure to use the same colors so drag in copy and paste the same color and now the gradient is horizontal so we need to change the angle again so we had it on 90 so now nothing will change so then we need 90 plus 180 and that is of course 270 and now it flips and then the last thing that i did is put it on shrink so in that way you have this nice little effect it may be maybe it's a little bit too intense but it's a nice feature all right we're now done with the hero this was the most difficult section okay now for this section i'm not gonna explain all the little widget because you know how to drag in a text from now right that's not very hard so i'm not gonna show you how to create a title but what i wanna say is that this main section is a two columns and then within this column there is an intersection so we have two columns inside of this column which is part of the main section if this sounds really complicated for you i have a basics video on sections and columns and margin and padding which you can watch it's now in the cart and in the description uh so if this is too fast for you then you should watch that video but i think for most people they already know what i'm gonna do i'm gonna click on the plus over here i'm gonna create a section with two columns for this section i won't use a minimum height i'm just gonna work with uh padding so i'm gonna add some padding to the bottom 150 some padding to the top let me first drag in some titles okay so for the title i've also used a little trick to make sure that this will always be on the next line so i don't have to mess with paddings how you can do that is by adding the uh in here so a a break uh that is html it works inside of this title fields is useful sometimes and then for this section it's just an intersection with two titles an icon that i can by the way also has a gradient but i didn't make that elementor i added that gradient inside of adobe xd and then i exported it into an svg that already has that gradient inside of it so if you're gonna work with icons i suggest using svg because that works inside of elementor and it's vector so it's unlimited sharp so just an icon i've imported an icon upload svg uploaded my own icon just a title and a text okay so now for this part that rotates when you start scrolling that is also a png so what i want to do is drag in an image like this i'm going to select that image and that is this image and now if you go to the advanced tab click on motion effects this is where it becomes fun you're going to go to scrolling effects and then go to rotate because we want it to rotate when it scrolls so you now scroll you already see that it happens if you increase the speed so for example put it on 5 way too intense and now i see that my image is not perfectly middle aligned so that looks a little bit weird maybe i'm going to put it at 2 for example that looks better and that's actually all you need to do for that super easy and cool effect in elementor so that's all you need to know for this section so two columns one intersection with svg icons and an image that has a motion effect now for the last section of our page we have this cool image that also has a radial gradient and that is not inside of the image so the original image is this so edit the gradient inside of elementor let's see how that is done so what you want to do is you want to create a new section like this for now we're just going to use the minimum height let's just put it on 850 as well we're going to go to style now select the image choose the image that you want so the normal image click on it now we're going to go to background overlay click on the gradients now select two colors that you can clearly see as always green and red so i'm not going to use red because it's also red in this image so green and blue put this at radial and now the middle we want that transparent so this is center centered because the the gradient is on the outside okay so put the green on transparent like this and now for this color i want to use the same color that i used in the header and now if you increase the opacity it's not really clear it's also not 100 transparent and that is because you need to play with the location so what i suggest you actually do is first play with the locations with the green color so let's just put it back as green first play with the location make sure that if you put this at 100 that the outside is not visible anymore so something like this because that's what you want okay and now put the green on zero and now as you can see it has that that nice glow you can of course increase it by doing that and this hotspot feature i already explained that in uh in the hotspot tutorial so the only thing you might want to know is how to create this button an outline button so let me show you how to do that so if you're gonna drag in a button like this you have just a default style so what i suggest you do is grab your button that you already made and put it in here now delete this one let's just middle align it now go to style we don't want a background in the button but we want a border border on the outside for example 2 pixels but then it's automatically gray so we actually want a background but then a transparent background and that is how you can create a transparent background now of course just delete the gradient and then it should work and you already know how to import a title and a little text and like i said this part is explained in the other tutorial so that's actually all you need to know now you know how to create this whole page i hope that you liked this video it's just a little practice if you want me to make more videos like this just some cool designs just some some cool tricks let me know give me some new ideas and i will make a new video that's it and if you want more videos like this then you can subscribe if you want to and then hopefully i will see you in the next video [Music] you

Channel: LivingWithPixels

Views: 37,983

Keywords: livingwithpixels, Elementor pro tutorial, elementor pro, elementor pro header, blur header, Elementor website design, Elementor website build, Elementor product page, Elementor header background video, Elementor scroll animations, Elementor gradient website, Elementor big header tutorial, Elementor Pro header tutorial, elementor tutorial, elementor pro tutorial, elementor, elementor blur header, wordpress elementor tutorial, elementor design, sticky header elementor

Id: LnQ-gOrnc9I

Length: 14min 55sec (895 seconds)

Published: Thu Oct 28 2021