How to Create Floating Overlapping Images in Divi + Free Opt-in Page Layout!

hi everyone i would like to share with you a little layout pack i created for the tv team it's an opt-in page layout with nice floating images on the side so in this video i would like to show you how to recreate this in divi [Music] hi my name is anya and my goal here is to help you build beautiful websites so in this short video i'm going to show you how to create this nice floating images effect in dv we are going to use a tiny bit of css and the tv builder to achieve that so here we are in the newly created page i'm going to add a two column row in the first section and then on the right side let's just add some uh some text so we have some content here but we're going to focus on this left column here i'm going to use three different images the first one would be the image on the left the second one would be the right one but first let's uh let's edit it a bit so in the design section i'm going to make sure that it's it's not taking the full width of the column let's make it maybe 40 wide or maybe 50. they will overlap so it should work fine and um i will align it to the left side now just so we can see it better i'm going to [Music] well add some border radius but to see it better i'm going to add some nice shadow not so strong just delicate delicate effect okay great now the second image would be the left side sorry right side and the last one is the image that's going to be in the middle so our cover image okay and the first two are going to use the absolute position so if i go here in the advanced tab position absolute it got hidden behind the second one but that's okay now the second one can also be positioned absolutely but on the right side and our cover image let's make it aligned to the um to the center and we can make it a bit bigger okay that's a great start so the last one is not positioned absolutely so because we don't want the height of the column to change so this is a great start and now we only need to add some css to animate these images so we need to target them with a css class when the module is positioned absolutely it's sometimes difficult to access the module settings we can use the layers panel to do that so go to layer that opens the layers panel and i can i have my all the modules listed here in a nice list so i can go into the left image settings in the advanced tab let's add a css class of dl floating i will copy it and add it to all the images okay now um for our custom css i can add it well in different places in dv but let's add it to the page settings custom css box here so first let's define our animation i will call the animation um floating so to to define it we have to define the keyframes of the animation so um and then curly brackets and now we have to define different steps of the animation so at the beginning at zero percent uh and at fifty percent and then one hundred percent we can do different uh different transitions different settings okay that is very annoying but don't worry about these errors it's all fine it will be it will be gone once we're done so i'm going to use the transform property to change the position of image during the animation so at the beginning the transform would be zero so transform translate let's use translate y so it's translated with the y axis and 0 at first and the last step would be the same so at 100 it would also be zero but at 50 we can move it by 15 pixels okay so hopefully oh we have to define the name oh that should fix the errors okay that was my bad so there we there we go keyframes of the animation name floating are no transformation at the zero percent no transformation at the end and in the middle it would it would move by 15 pixels and in this case to the top and now our dl floating element can use this animation so animation floating and so it's a shorthand animation name animation duration so let's say seven seconds it will take three and a half seconds to get to move the 15 pixels up and then three and a half seconds to move it down so very slow animation for the slow floating effect animation easing function so easing out and then animation iteration count so in our case it will be infinite we want this to float well forever so that's the animation and as you can see it already works but they all flowed in the same direction so in order to differentiate these images in between we will use additional css class so dl floating one and we can change the animation delay to negative sorry delay negative value like minus 3.5 five seconds um floating okay and now this css class can be added to one of the images we can use multiple css classes here if it's separated by a space symbol and now this image floats in an opposite direction so that's lovely and we can do another css class for the right hand image let's do floating 2 and in the css we'll do a different delay you can play with the values and let's do 4.5 maybe this is the second one right so it's floating a bit differently and now we can also add some margin to to these images so they are a bit further down the page so spacing and top margin like this and to the right one as well maybe something like this or maybe even less lovely so hopefully that was clear you can copy all the css i use uh on my blog post and also download the full layout with the late with the opt-in page and then the curtain confirmation page and download page thank you so much for watching i hope that was helpful please let me know in the comments and also feel free to check my blog post where you can download this layout as a json file so you don't need to recreate it yourself and i'll see you next time you

Channel: Ania Romańska

Views: 3,714

Keywords: Divi Theme, Divi Tutorial, Divi 4, Divi, CSS tutorial, Free Divi Layout, Divi walkthrough, divi animation, divi floating images, floating animation

Id: RdyehlTo6dA

Length: 11min 59sec (719 seconds)

Published: Tue Feb 16 2021