Floating Images is one of the easiest way to grab user’s attention. Floating Images immediately attract users to it. So If you’ve got something to show to your visitors and want to showcase in a really attractive way, then you better not miss today’s tutorial.
Floating Images is one of our Amazing Divi Module added to Divi Supreme Pro’s amazing Module list, and using this Module you can easily create multiple floating images on your Divi website. So if you’re looking for a very easy way to float images without any code hassle than this module is made for you.
It will help you immediately add multiple floating Images to your Page, you’ll just need to add images, add corner radius or box-shadow and change the animation speed and there you go. So that’s what we’re going to learn in today’s’ tutorial.
Let’s Get Started
First of all, Enable Divi Builder on the page you want to add multiple floating Images. After that, you’ll need to choose a location where you want to show floating images. And then simply insert the Supreme Floating Images Module. For our example, we’re using the Mobile App Landing Page layout from Divi Library today.
Once you’ve added the module you can now start adding Images you want to show to visitors. You’ll just need to click on the +Add New Item button.
Now you’ll see many new options opens in a new window. And in the content tab, you’ll need to insert your first Image
So I’ve added one image that came with this layout.
Now you can move to the Design Tab to design the image a little bit adding Border, Corner Radius, Box Shadow, and more.
So let’s first add Corner Radius to the Image of around 40px to match the theme of this layout (because all the images in this layout are having a 30px-40px corner radius).
So now we’ll also add a little box-shadow to the image to make it look more natural. For that open up the Box Shadow panel and add box-shadow with these changes:
- Box Shadow Vertical Position – 10px
- Box Shadow Blur Strength – 80px
- Shadow Color – rgba(0,0,0,0.2)
And you’re done with the designing the image a little bit, you can always go with your own presets according to your site design.
So now we’ll need to add more images for this go back to the main panel and duplicate the first item you’ve just created.
For our example, we’ll duplicate it 3 times but you can duplicate it as many images as you want to show. Once you’re done with duplication you can now go to each item and change the image
And once you’re also done with changing Images it’s finally time to change the position of each image to make them look perfect. Now the last image that you’ll have will be on top of other Images so If you want one image to be on top of other than make sure that it’s on the last number. And now you can go to an Image Item Settings -> Design -> Sizing and there you’ll be able to change the position by sliding the handles.
In the same way, you can change the position of all other images. And that’s it you’ve just created a beautiful section that includes Floating Images which makes it more attractive.
Here’s what we created
That’s how easy it is to create multiple floating Images in Divi, so lastly let’s see how to control the animation speed. For that you need to go to the Design tab -> Animation, and there you’ll be able to add delay and increase or decrease the animation.
You can click on the Floating Effect dropdown to change the animation effect to either Left-Right or Up-Down.
So now you must have completely understood how the Floating Multi Images Module works and how you can take its benefit to create a very modern and beautiful looking Floating Images Section in Divi.
And that’s it for today’s tutorial, we hope you’ve enjoyed it and let us know what you think about this Creative Divi Module in the comment section below. If you ever face any problem don’t forget to Contact us!
Have a great day!
How to access the Floating Multi Images Module
To use the Floating Multi Images Module, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.
Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.
So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Floating Multi Images Module in the comments section below.
Or try out the Divi Supreme Lite
Divi Supreme Lite Offers 20 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.