How to Create Multiple Floating Images in Divi

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.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

7 Comments

  1. Abel

    Thank you for the tutorial please consider making video tutorial and documentation

    Reply
    • Divi Supreme

      Hi Abel,

      Thanks for your suggestion. At the moment, we will only post tutorial “How to” here on our blog and other stuffs.

      For video, we will be considering that in the near future.

      Reply
  2. Muhammad Asmal

    Thanks for the excellent tutorial and an excellent product.

    Please consider adding the layouts for download with the tutorial.

    Reply
  3. Jane M

    Great Read , Thank you

    Reply
    • Divi Supreme

      Thanks Jane. We will continue to add in more useful modules and hopefully more free layouts on how to use our modules 🙂

      Reply
  4. Jon Tarrant

    Great tutorial – covered the basic settings clearly.
    I have just bought the lifetime membership and have no buyer’s regret at all!

    Reply
    • Divi Supreme

      Thank you so much Jon! More great and useful tutorials coming soon.

      Reply

Submit a Comment

Your email address will not be published.

six + 14 =