How to Create a Floating Module?

Add the following code to your Custom CSS within your WordPress admin area: Divi >> Options.

.object {
    animation: MoveUpDown 5s linear infinite;
    position: relative;
    left: 0;
    bottom: 0;

@keyframes MoveUpDown {
    100% {
        bottom: 0px;
    50% {
        bottom: 20px;



Add the class name object to your desired module’s CSS Class under the advanced tab, within the module’s settings. In this example we used an image module.

Mission Complete.
Note: This hack can also be applied to a row and/or section.

Feel free to experiment with different figures within your CSS code.



Join Our Divi Mobi First Community

Get access to all our Divi Mobi First 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.

By Kerwin

Web Designer | Developer | Educator

Completely revolutionize the way you think about building Divi Websites.
Get Instant Access Now

Check Out These Related Posts

How to Add Zoom Effect To Images?

How to Add Zoom Effect To Images?

Create you own hover zoom effectTo add a Hover Zoom-In effect to a Divi image module, there are two steps to apply. First of all, add an additional CSS class name to the module, for example:zoom-in  Next, add the following code to the Custom CSS field under...

read more



Submit a Comment

Your email address will not be published. Required fields are marked *