1. Home
  2. Docs
  3. Happy Elementor Addons Pro
  4. Premium Widgets
  5. Image Swap

Image Swap

The Happy Addons’ new ‘Image Swap‘ widget allows you to swap two different images to your Elementor-powered website. With this advanced widget, you can add several effects to the image and make it more appealing to your users.

How To Use Happy Addons’ Image Swap Widget

You need to activate the plugins below to your website to use this widget:

Pre-requisites

Let’s get started:

Find & Add Image Swap Widget

First, you need to find the ‘Image Swap‘ widget from the Elementor widgets area. Then drag & drop the widget into the suitable place on your webpage.

Add Image Swap Widget

In the Content area, you can select an Effect Type between the Default and the Slide. Here, we’ll show you both designs. However, you can also set the Transition Speed of the swap image.

Default Effect Type

First, Select Effect Type->Default. Second, you need to add two images for the swap. You can set the Trigger from the two options Click & Hover. Finally, you need to choose an Effect from the drop-down list. The effects are.

  • Fade
  • Move Left
  • Move Top
  • Move Right
  • Move Bottom
  • Zoom In
  • Zoom Out
  • Card Left
  • Card Top
  • Card Right
  • Card Bottom

Check out the image below to learn the process.

Default Effect Type

Slide Effect Type

You can also choose the Select Effect Type->Slide option. This option only allows the Click Trigger option by default. Finally, you need to choose an Effect from the drop-down list. The effects are.

  • Slide Top
  • Slide Bottom
  • Slide Right
  • Slide Left

Let’s see the below image.

Slide Effect Type

Note: Choose the same sized images whenever you select the Effect Type->Slide option. It’s impossible to give the image customization option.

Style Image Swap

In the Style area, you can set the Border Type, Border Width, and Border Color. Also, you can add the Border Radius to both images.

Style Image Swap

Advanced Settings

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Advanced Elementor Settings

Give a read to this Document to know more about advanced features & functions.

You can also check this handy video tutorial.

Final Preview

Check out the final outlook of the Happy Addons’ Image Swap widget.

Final Preview of Image Swap

That’s it.

Was this article helpful to you? Yes No

How can we help?