May 21, 2021 | Divi Resources

Introducing Divi Tilt Image Module – An Outstanding Tool to Create Rich Tilt Images in Divi

Perhaps you’ve created tilt images in Photoshop, but in Divi, you may find it tricky. However, the new Divi Plus module, Divi Tilt Image, could help you do that in a few simple steps. The Divi Tilt Image module is a premium, easy-to-use tool with different options to create your perfect tilt image in Divi. You could turn any image into a beautiful interactive image that tilts in different directions upon hovering on it. Moreover, with additional customization options, you could take its appearance to the next level for the highest engagements and use.

In this blog post, we’re going to overview this new module. We will see its features and how best you can use it to create a tilted image in Divi.

Content Tab & Its Options


Upon inserting the Divi Tilt Image module on your website, the first setting that appears is the Content tab. Here, you get Tilt Image, Content, Link, Background, and Admin Label settings.

Divi Tilt Image module's Content tab's settings

Except for Tilt Image and Content settings, the other 3 are just like the native Divi builder’s settings available in the content tab. Link settings allow you to insert a link to your image. The Background settings enable you to customize the image’s background with Color, Gradient, and an Image. And the Admin Label setting allows you to give your module a custom label to recognize in the builder as usual.

Tilt Image Settings

With Tilt Image settings in the Content tab, you could easily select an image for your Divi Tilt image. Using this option, you could directly add an image from the library. Or, you could select a dynamic image for it using the dynamic option.

Divi Tilt Image adding image option

Once the image is added, it will appear like the below screenshot in its full size with the Image Alt text input field in the settings. It looks beautiful the moment you add it to the module.

Tilt image on the page

You could input the image alt text if you haven’t added it before in the media library. Otherwise, you can leave it as it is and move to the other setting, which is Content.

Content Settings

The first option you get in Content settings is to apply Title and Description to your Divi tilt image.

Title and description option for the tilt image

Furthermore, it allows you to add an Icon with a Read More button. You could select a custom icon as well as give a read more button its custom label also. Plus, you can also use the dynamic option to add the URL and open the link in the Same or New Window.

Tilt image's icon and read more button's settings

After choosing Icon and customizing read more button’s working; we’re set to head over to the Design tab.

Design Tab & Its Options in the Divi Tilt Image Module


The Design tab of this module provides you with the following additional settings: Tilt Settings, Overlay, Icon Styling, Content Styling, Button, Title, and Description to enhance the tilt image’s appearance and work.

Design tab of the Divi Tilt Image module

Let’s take a look at each of the options one by one.

Tilt Settings

Max Rotation

To make your tilt image alive and working this is the particular option you need to open and tweak. Here, you can adjust how much rotation you want to display on your tilt image, when the user hovers on it, by using the Max Rotation feature. In the below illustration, when I increase the value, the image tilts faster. Likewise, when I decrease the value it shows a little sign of tilt motion.

Perspective

Another option available in the Tilt settings, Perspective, allows you to enlarge or reduce the viewing angle of the tilted image. When I decreased the value of perspective in the below illustration, the tilted image turns more than when I increase the value.

Scale on Hover

In addition to these, the Scale on Hover option makes the tilted image zoom in according to the value. The higher the scale number you’d enter, the more it will zoom in.

Speed

After Scale on Hover, next comes the control to increase or decrease the tilted image’s transition Speed when the mouse enters or leaves the image. The lower the value, the faster the image would become tilt and goes to normal upon bringing the mouse over the image and taking it back. Similarly, the more value you’d add to the Speed option, the slower the image would become tilt and goes to normal.

Disable on Mobile

Furthermore, it also allows you to disable tilt image on mobile using the Disable on Mobile option. As on a mobile phone, users don’t have a cursor to scroll over an image. So, there’s no use of a tilted image. However, you can keep tilt image for mobile if you need; it won’t create any problem.

Disabling Divi tilt image for mobile devices

Glare

If you want to add a shade of light on the image every time the user hovers on it, then using the Glare option, you could easily do that.

Glare option in the Divi Tilt Image module

It puts a shine on the image with high intensity where the user’s mouse pointer touches the image. Plus, it follows the movement of the mouse and makes it look rich and alive. Furthermore, using the Max Glare option, you can control its intensity. The higher the value, the more glare the Divi tilt image would have. If you enter a low value, then you’d get a low-intensity glare on the image.

3D Effect

The 3D Effect option available in the Tilt Settings allows you to create depth between the image’s elements and the image itself. The elements like icon, button, and content would look as if they are coming out of the surface. With 3D Effect, the rule applies the same — the more value you’d assign to it, the greater the 3D effect would become.

Disable Tilt Image Funtion on Y or X Axis

The last feature available in the Tilt Settings of the Design tab is to disable the functioning of the tilted image on the X and Y-axis. By enabling Use Disable X/Y axis, you can apply this particular function. It provides you with two more options Y Axis and X Axis.

Disabling Divi Tilt Image on X or Y axis option

When you enable this option for the Y axis, the tilted image stops functioning for the horizontal view. And when you choose the X axis, it stops working for the vertical view, the same as the below illustration.

Overlay

Once you’re done with all the Tilt Settings, the next option available for you to apply on the Divi tilt image is the overlay color. To do that, all you have to do is, go to the Overlay settings, enable Image Overlay, and choose the preferred color from the Overlay Color option.

Tilt image with an overlay

Your chosen overlay color will appear on the image, just like the above screenshot. It has an overlay color of hex code #0c71c3 with a medium transparency rate.

Icon Styling

The Icon Styling settings available in the Divi Tilt Image module allow you to change your tilt image’s icon and its color and size. According to the requirement of your website designing, you can apply changes to the tilt image icon and make it suitable for website’s look and feel.

Divi Tilt Image's Icon Color & Size Styling Option

Content Styling

With this particular setting, you can change the placement of your tilt image’s element on serval locations as well as apply entrance animation to them. The Content Alignment option available in this setting provides up to 9 locations to place the image’s elements.

Content alignment option for the Divi tilt image

Moreover, by enabling Content on Hover, you get 4 different entrance animation effects that you can apply to the image’s elements. It gets activated on hover, and according to the animation effect, the element appears on the image from different directions.

Content animation effect on tilt image

Button Customizations

The Button settings available in the Design tab of the Divi Tilt Image module play a significant role to customize the button of the tilted image in Divi. It provides you with all the tools that can tweak an image’s read more button at a high level. Using this option, you could change the button’s size, apply different button text colors. Add icon on hover, and much more without any extra effort.

Title Customizations

With Title settings, you can change the appearance of your tilt image’s title. The setting includes all the text customization options such as Font Size, Font Type, Title Color, Title Alignment, etc.

Description Styling

Just like the Title settings, the Description settings of the Divi Tilt Image module allow you to enhance the appearance of your tilt image’s content. It includes all the text customization options to perfectly blend the content with the image’s look and feel.

Enhance Divi Tilt Image With Other Native Options


The above was the premium features of the new tilt module of the Divi Plus plugin. That are easy to use and effective to turn an image into a beautiful and interactive tilt image. All the options are enough to bring novelty to the image. However, there’s scope to enhance their look and feel, which you can do easily by incorporating features of the Divi builder’s native settings.

With them, you could apply border-radius to the entire image. Apply entrance animation effect to the whole image. Or even make it sticky with the Scroll Effects in the Advanced. So, if you want to create tilt images in Divi that look rich and active, this module is the right choice for you. If you haven’t got the Divi Plus plugin, go and get it today to make the most out of your Divi designing. Because with a single Divi Plus plugin, you get over 50+ modules, 4 extensions, 50+ starter templates, 200+ section blocks, and multiple Divi child themes for free.

Posted By:
Marshall
Marshall is creative head at Elicus and works with the team to bring ideas to life. He is strongly focused on delivering a quality experience to clients and customers.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

7 Tips & a Complete Guide to Design Perfect Website Header

7 Tips & a Complete Guide to Design Perfect Website Header

From recognizing a brand to navigate the website with ease, a visitor’s journey starts from the website header. And it continues up to an indefinite time whenever he visits the site -- to either explore, get the services, or read the blog and whatnot. The header of a...

11 Superb WordPress Form Builders in 2021 (New, Old, Free & Paid)

11 Superb WordPress Form Builders in 2021 (New, Old, Free & Paid)

Creating forms in WordPress isn’t an easy task. Though, it’s not impossible either. With the right tools and knowledge, you can get the desired results in no time. And for contact forms, WordPress Form Builders are the tools you need.  However, as WordPress...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts