Divi Builder Image Hover Add-on

Introduction

The Divi Builder Image Hover Add-on is a powerful tool that allows you to create stunning hover effects on your images in just a few clicks. With this add-on, you can add a wide range of effects, from simple hover colors to complex animations, to enhance the visual appeal of your website. In this tutorial, we will guide you through the step-by-step process of how to use the Divi Builder Image Hover Add-on to create impressive hover effects on your images.

Step 1: Installing the Image Hover Add-on

Before you can start using the Image Hover Add-on, you need to install it. To do this, follow these steps:

1. Log in to your WordPress dashboard and navigate to the "Divi" tab.
2. Click on the "Builder" sub-menu and then click on "Add-ons" from the drop-down menu.
3. Search for the "Image Hover" add-on in the search bar and click on the result.
4. Click the "Install" button to install the add-on.
5. Once the installation is complete, click the "Activate" button to activate the add-on.

Step 2: Adding the Image Hover Module

To add the Image Hover module to your page, follow these steps:

1. Log in to your WordPress dashboard and navigate to the page where you want to add the image hover effect.
2. Click on the "Add Module" button to add a new module to your page.
3. In the module library, search for the "Image Hover" module and click on the result.
4. Click the "Insert" button to add the module to your page.

Step 3: Configuring the Image Hover Module

Once you have added the Image Hover module to your page, you can configure it to suit your needs. To do this, follow these steps:

1. Click on the "Edit" button to enter the module’s settings.
2. In the settings, you can configure the following options:
   • Image: Choose the image you want to apply the hover effect to.
   • Hover Effect: Choose the type of hover effect you want to apply. Options include color, gradient, image, and animation.
   • Duration: Set the duration of the hover effect.
   • Delay: Set the delay before the hover effect starts.
   • Animation: Choose the animation style for the hover effect.
3. Click the "Save" button to save your changes.

Step 4: Adding the Image Hover Effect to Your Page

Once you have configured the Image Hover module, you can add it to your page. To do this, follow these steps:

1. Click on the "Insert" button to add the module to your page.
2. Drag and drop the module to the desired location on your page.
3. Click the "Save" button to save your changes.

Step 5: Customizing the Image Hover Effect

To customize the image hover effect, you can use the "Style" tab in the module settings. To access the "Style" tab, follow these steps:

1. Click on the "Edit" button to enter the module’s settings.
2. Click on the "Style" tab.
3. In the "Style" tab, you can customize the following options:
   • Padding: Add padding to the image before and after the hover effect.
   • Margin: Add margin to the image before and after the hover effect.
   • Border: Add a border to the image before and after the hover effect.
   • Shadow: Add a shadow to the image before and after the hover effect.
4. Click the "Save" button to save your changes.

Conclusion

That’s it! With these steps, you have successfully installed and used the Divi Builder Image Hover Add-on to create a stunning hover effect on your image. Remember to customize the settings to suit your needs and experiment with different hover effects to achieve the desired look.

Divi Builder Image Hover Add-on Review

Overview

The Divi Builder Image Hover Add-on is a powerful tool that allows you to add stunning hover effects to your images. With over 200 hover styles to choose from, you can customize your website’s visuals to make them stand out.

Features

One of the standout features of this add-on is its extensive range of hover effects. You can choose from 35+ different categories, including fade, push, slide, reveal, border reveal, and many more. Each category offers a variety of effects, giving you a total of over 200 options to choose from.

The effects are categorized for your convenience, making it easy to find the perfect one for your website. You can also preview each effect in the demo, which is a great way to get an idea of how they will look on your site.

Effect Categories

• Fade
• Push
• Slide
• Reveal
• Border Reveal
• Zoom and Rotate
• Shift
• Modal Slide
• Modal Hinge
• Flash
• Hinge
• Shutter Out
• Shutter In
• Flip
• Blinds
• Book Open
• Bounce
• Cube
• Gradient
• Zoom
• Blocks
• Fold
• Strip Shutter
• Throw in
• Throw out
• Fall Away
• Parallax
• Dive
• Strip Horizontal
• Strip Vertical
• Pixel
• Pivot in
• Pivot out
• Switch
• Circle
• Lightspeed
• Stack

Automation Options

If you want to take your website’s automation to the next level, you can use FlowMattic, a plugin that integrates seamlessly with the Divi Builder Image Hover Add-on. FlowMattic allows you to automate various tasks on your website, making it easier to manage and maintain your site.

Score: 0

I would give this add-on a score of 0, as it is an impressive tool that offers a wide range of hover effects and categories. The demo feature is also a great way to get an idea of how the effects will look on your site. However, the score is based on the content provided, and I do not have any personal experience with the add-on.