How I created floating images in Elementor (from my Adobe XD Portfolio Design project)

welcome back to the channel my name is Reena and you're watching live with pixels today we're gonna design the section that you are seeing here this for floating images that animate in is gonna be fun so let's get started alright welcome back last week we made this upper section with the video background with the wave and this overlapping section all the fonts and thank you so much for all the positive comments again on my videos slowly more and more people are discovering my channel I even got discovered on Facebook by somebody named fairly Heinz I don't know if he's watching this but it was posted my video was posted in the element or Facebook group so that's super cool so thank you so much Heinz ferdi if you're watching this it's so cool to see that people are sharing and liking the content because I've put so much effort into the videos so thanks a lot so last week we've designed this upper section and now we're gonna do this section this left part is not so complicated this right part is a little bit more complicated and when you viewed on mobile only two images pop up otherwise it's gonna be four images and that's a long scroll so we're gonna make it mobile optimized alright so let's get started I'm gonna do it in element or of course so this is where we ended last week so I'm gonna open elements or and we're gonna design the next section together alright first of all I'm gonna zoom out a little I'm gonna closely navigate it for now I'm gonna zoom down and I already ended a last video with two columns I must say so I have two resoled open here so I'm just gonna put that next to it so the first thing that we're gonna do is make this left side that's the easy part alright let's just start with something easy we're gonna drag a heading in into the left column and we're gonna copy the title like this I'm just gonna base it in here first I like to put in all the content before I go to styling so content first and then styling so now we're gonna create this little line that's called a divider if you type in diff you're gonna find it so dragging the divider and now make the width a little smaller I think I made it like two or three pixels thick something like that and then we need a little text and then we need some icons so let's just insert a text so we're gonna grab the text editor we're gonna put it in here and there's already a small text in here so that's okay now we are going to make an icon lists I'm gonna use this feature you can also make one row and then duplicate it but there's already a nice feature in here delete this these first two and then duplicate the first one so you get free of the same icons now the last thing that we need is a button alright so let's go to the button and it's here I'm gonna drag it and there it is it's already purple because I've set up my colors here in the default colors so the accent color is where I put my Purple's when you're dragging a button for example it becomes already the purple that I want so now we need to style it a little bit it's already looking pretty good because I have prepared a lot of things already here also the fonts but let's tell it what do we see well first of all we need more white space at the bottom otherwise we can't really breathe so we're gonna edit this section not within this column the whole section because we also need white space under this column so we're gonna go to advanced unlink this one and just add something like a tea to the bottom give it a little bit of space and also we want more room here so since this part is also part of this section we need to add a margin on top to this section over here so we're gonna go to the Advanced section and oh there's already 50 so I'm gonna make it 150 no that's too much maybe 100 yes something like that or maybe 80 yes all right so that's it for this section now we're gonna sell it a little bit so grab the text we're gonna go to cell typography and we're gonna make it bigger I don't know what font size we used up here but I have a plugin that's very nice it's called what phones and if you hover you can see it's montserrat and it's 36 pixels high and then the line height is 47 pixels and it's also the weight 600 so if you want if you also want this plugin well it's actually an extension a Google Chrome extension to go just go to the Google Chrome extension store and search for what phones there's a 36 and 47 so that's what we're gonna do we're gonna go oh it's already 36 and that was that line height is gonna be 74 all right that looks good now for the texts it's 16 so we're gonna go to this one and we're gonna make it 16 yes that's a little bit bigger and we also I think we want the same text size on the list items so we're gonna go to style text typography and we're gonna type in 16 now as you can see the color or the width is a little different I don't know if this is because of the colors or the width of the font so let's just go back and see what the width is it's 300 so we're gonna first try that we're gonna put the weight on 300 I said with by the way but it's weight and it doesn't really change because it's probably because of the color the text color is probably this dark purple I think it's this dark purple which we can check it and of course if you use Adobe XZ you can also you know see how you designed it and then exactly use those numbers and those colors inside of Elementor now I am redesigning a page that I already made but the normal flow is that you have Adobe XD or sketch or something like that and you go to your sketch you see oh it's 16 pixels so then you go to Elementor and you type in 16 pixels so now I'm using this as my design fell so as you can see this is the color here so we're going to copy that and I think it's yeah this that's already the same color all right now for the icon we're gonna make that the purple bright color and we're gonna make it a little bigger something like this and now we want more spacing between the icon and the texts yes something like this maybe make the icon a little bit smaller yes this looks good we're gonna copy the text for this part and we're gonna paste it in here and as you can see the white space between this and this is pretty big because Elementor puts 20 pixels marching at at the bottom of every text so that's what I'm gonna remove right now I'm gonna go to bottom and I kind of type minus 20 and now it's a little bit nicer last thing that I need to do is change the color of this little line and now I think the left part is done so let's just see what we have made so far we're gonna click on publish and we're gonna click on preview changes so now if we scroll down down this section is looking good the last thing that I want to do is add a hover effect to the button because the button now is a little bit boring so we're gonna go loose tell to hover and then make it a string so it has this little animation when you hover over the icon all right I'm gonna click on update and now we're gonna go to the right section it looks pretty hard if you look at the result especially the animation when you come to the page the items build up and there's this hover effect there's the shadow effect things are overlapping I'm gonna show you how to do this let's just go back to my column and first we're gonna put in some images because it's just four separate images that's it grab the first image and then select the image from your library the images that are exported are just small images of 300 by 225 pixels there's a little bit of difference between them but but that's it so I'm gonna insert that we're gonna duplicate it and we're gonna click on the next one which is this one duplicate it again click on this one and duplicate it again and then click on the last one which is the purple one all right so now we have all the images imported and elements inside of a column they just stack on top of each other so what you need to do is a little trick and that's here under advanced and you go to custom positioning this is by the way a pretty new feature that they added I think well I don't know but but it's it's pretty new so don't change anything in here just go to position and click on absolute and when you click on absolute you can move the image like in Adobe XD for example so that's pretty nice I also do want to add a shadow before I'm gonna copy this tile and put it up on all the other images because that makes the workflow a lot easier so I'm gonna go to style I'm gonna go to box shadow just scroll down make the blur a lot bigger make the vertical also a little lower as you can see now it looks like it's floating now change the opacity because we don't want it too much something like this all right and we also want to have a hover effect when you hover over the image like you see here it starts to you know float a little bit so that effect is called blob so if you go to hover and hover animation you scroll down and you go and you click on pop and as you can see now it starts to like fly when you hover over the image all right so what you want to do now you want to copy the style of this image you're gonna go to the other image and you're gonna baste the stell and now you can also move this image in the same way to let for now just put it on the side go to this image also based the style put it down and now the last image based the style and put it down and now you can just position the images how you want it you can even place it outside of the main section if you want you can make them overlap in our example if I want to have this image always on top that's called z-index if you go to advanced there's this option here the index and G index is actually like layers in Photoshop so the higher the seed X the more the layer is on top of other layers so if you put this image on for because you always want that on the foreground it's gonna go to the foreground as you can see so 0 or 4 right maybe we want this on number 3 always so it's gonna go above this one and I think I'm gonna put it on 2 and this one on free so the shadow of this one also overlaps this one and now this one can stay at number 1 that's ok because I like the overlapping effect that it has right now I move it a little bit to make it a little bit more interesting now I see that I need a more wide space here and there so I'm gonna add the section again and on the advanced I'm gonna put 120 at the bottom maybe even 140 yeah I want a little bit more room to breathe and also on this one I'm gonna put it on 120 yes all right now I'm gonna update it and we'll see what happens as you can see the shadows are applied the hover effect is there but I forgot one thing and that's the animation so actually I needed to do that before I copied estelle because now there's no animation because if you scroll the images are just there but in the in the final result that I may they are animating in when you scroll down so that effect is called motion effect so if you click on an image you're gonna go to motion effects and entrance animation you want to fade it from the bottom to the top so fade in up and this is why you need to prepare all the effects before you start copying and pasting because now if I want to paste the stell is also kind of based out of two position and that's not what I want so right now I'm just gonna click on a comment Z and I'm gonna add the animations by hand this one and also on this one so this effects makes it whenever it's in viewpoint it's gonna animate in so we're gonna click on update and see if it worked alright we're gonna scroll down and as you can see they start animate again when we scroll this is super cool and the last thing that I want to show you is the mobile editing feature to hide images on mobile so if you go to responsive mode and mobile now you're gonna see that it's a big mess it's not really nice and on mobile the custom positioning is a little harder to column as you can see it's here so you need to first give the column some space because I'm mobile I don't know how it really works but you need to give it some space or you're gonna add some padding on the top and bottom for example like 200 on the bottom and 200 on the top not 2,000 something like this maybe that's even too little because I need a little bit more space or 250 and now I can just drag the images and put them into a place where I want something like this and for these two images I'm gonna hide them and this is what you can do in responsive mode you click on responsive and you click on height on mobile click on the other image also click on responsive and click on height on mobile and now if we're gonna click update' I'm gonna grab my mobile phone I'm gonna show you how it looks so I hope you can see it I'm gonna scroll down as you can see the upper section of the website is not mobile optimized but now now we're scrolling to the section and as you can see there are the images that are animating in that there's only two images it looks pretty good they're centered in the middle and the other two images are not popping up all right so it turned out pretty well as you can see let's just look at our result one more time so we're gonna refresh the page and if we scroll down the images are animating in there's a nice hover effect on the images and a mobile there's only two images to keep it clean so this was also a little bit difficult part of the website if you want to see other parts of the website how I made it which is all made in the free version of Elementor by the way if you want to try that for yourself there's a link in the description the upper two sections are the most difficult part which we made in this video and the last video but I want to make this website way more complicated because now I'm only using the free version of Elementor but especially I want to make the portfolio section more interesting because now it's just links and I want portfolio items so in the future I'm gonna make this website bigger and better and more interesting so if you want me to continue on this website next week please let me know and then I hope to see you next week all right thank you for watching

Channel: LivingWithPixels

Views: 79,329

Keywords: webdesign portfolio, web design portfolio, livingwithpixels portfolio, web design tutorial, web design adobe xd, adobe xd web design, adobe xd tutorial, portfolio wordpress, wordpress video background, web design portfolio websites, web design tutorial for beginners, adobe xd wordpress, portfolio graphic design, graphic design portfolio examples, web design trends, wordpress header, video header wordpress, adobe xd animation

Id: fGuDvr2AvjU

Length: 16min 49sec (1009 seconds)

Published: Sun Sep 08 2019