We have over 40+ Divi modules and it doesn’t mean your creativity stops here. You can get creative a little bit, by using Divi Library Shortcode Extension.

What is Divi Library Shortcode?

You will be able to embed any Divi Library item inside another module content. You just need to build a layout, section or module using the Divi library, copy the shortcode provided and paste them to another module.

And today, we want to show you how to have a nice tilt image on your Divi site? But not only a simple tilt Image, you can have a Beautiful Text with Advanced Animation when you hover over it. Sounds cool?

Sneak Peak

Let’s get started !

That’s something we’re going to create in today’s tutorial. By the end of this tutorial, you’re be able to create unique Tilt image with Text Rotating effect on hover. This way, you can really engage more visitors to scroll through other content on your site.

We’ll be using these Modules:

• Tilt Image Module
• Text Rotator Module

We’ll be using this Extension as well:

• Library Shortcode Extension

Recreating the Same Effect for your site

Let’s see how to recreate the same thing for your site too, first of all, you’ll need to make sure that you’ve enabled the Shortcode extension from Divi Supreme’s settings page. Go to Divi Supreme Pro -> Enable Library Shortcode -> and Click on the Save Changes button.

When you’re done with that, you can now move to Divi -> Library -> and click on Add New button at the top, then you’ll see a Popup appears asking you to add a Name for the Layout and Layout Type. You’ll simply need to enter a name for the Layout to remember and select Layout Type as Module and click on the Submit button to create the Layout.

Now you’ll need to insert Module as “Supreme Text Rotator”.

In the Content tab, you’ll need to set up anything you want to show to Visitors. Here’s what we did.

Now you can open up the Design Tab and make some design changes to the Rotating Text, for example, you can change the Color font, Background, Padding, and more of Before/After and Rotating Text. You can play around with them in the Design Tab.

In our example, we’ve changed the Font, Font Size, and changed the Display of the After Text to Block.

Now you’ll need to Save this Layout and then copy the Shortcode of this Layout by going to Divi -> Library.

Alright, we’re done with setting up Layout in the Library and make sure you’ve copied the Shortcode too. So now we can move further, you’ll now need to open up your Page where you want to have the Same effect mentioned before and choose any place and simply insert the Tilt Image Module. BTW we’ve added SaaS Company Landing Page Layout to our Page Example.

After inserting the Tilt Image Module, now you’ll need to set it up as well. The first thing first is to insert the Image.

Open up the Tilt Settings Panel and make these changes there. You can also set it according to your preferences.

Changes to make:

• Perspective – 500px
• Max Rotation – 14
• Speed – 5000
• Enable Switch – Reverse (It just Reverse the Rotation you can turn it off if you like)
• Enable Switch – Use 3D Pop Out Effect (Will add 3d Feel/Effect to the Tilt Effect.)

Now open up the Overlay Panel to make some adjustments here as well:

Changes to make:

• Enable Switch – Use Icon
• Icon – Select any desired Icon from the Divi Icon Library
• Overlay Content – This is where you’ll need to add the Shortcode you copied before.
• Enable Switch – Show on Hover (Enable this switch to show the Overlay content on Hover)

Alright, we’re almost done. What you can do now is open up the Design Tab -> Border and add Corner Radius of 10px and Border of 1px with color #d3d3d3 to the Tilt Image

To give it a natural Look and Feel you can add a nice little Shadow as well by going to Shadow panel and making these Changes:

• Box Shadow Vertical Position – 10px
• Box Shadow Blur Strength – 30px
• Shadow Color – rgba(34,56,101,0.09)

And that’s it we’re Finally done with creating a Beautiful Tilt Image with a Rotating Text Animation on Hover. See that’s how easy it was to create this stunning and quick effect with Divi Supreme Features are Combined.

Final Result

There we go a very fun and fast little thing to put on your site, let us know what you think about it in the Comment section below and let us know If you’ve got any more creative Ideas Like this as well.
Have a Great day!