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.
You need to activate the plugins below to your website to use this widget:
Let’s get started:
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.
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.
- 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.
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.
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.
If you want to add motion effects, happy effects, background, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.
Give a read to this Document to know more about advanced features & functions.
You can also check this handy video tutorial.
Check out the final outlook of the Happy Addons’ Image Swap widget.