Image Swap

Overview #

Image Swap is a simple way to change the display of any image when you mouse over them and may revert back to the original image by mouse out of the image. Here’s a comprehensive article to explain every method in detail. Follow the step-by-step process to connect the Image Swap.

Plugin Required: #

1. Elementor: Download plugin.
2. ElementsKit Lite: Download plugin.
3. ElementsKit Pro: Get the plugin.

Step 1: Enable Image Swap widget #

Firstly, you need to enable the widget from the WordPress dashboard. To enable the Image Swap widget:

1. Navigate to ElementsKit > Widgets.
2. Find the Image Swap from the list and enable the widget.
3. Click on the SAVE CHANGES.

Step 2: Drag and Drop the widget #

After that, open the Elementor editor, then drag and drop the ElementsKit Image Swap widget into the design area.

Step 3: Configure Image Swap widget #

In this step, you can add the front and back images, set the image size, choose swap style, and more.

1. Front Image: Upload the first image as the front image.
2. Back Image: Upload the second image as the back image.
3. Image Size: Select an image size from the given options.

4. Swap Style: ElementsKit Image Swap widget comes with 21 swap styles. You can choose any of the styles.

5. Tigger: Choose how to trigger the swap effect from the following options.
   1. Hover: The swap effect will trigger when you hover the mouse over the image.
   2. Click: The swap effect will trigger when you click on the image.
6. Indicators: It indicates the active image (image on show) and the image on the back.
7. Link: You can add an URL to the images.

Step 4: Customize Image Swap widget #

Now you can customize the image and indicator styles.

4.1 Image #

1. Fixed Height: Adjust the height of the image.
2. Transition Duration: Set the transition time between the image swap.

4.2 Indicators #

1. Normal Color: Set the color of the indicator.
2. Active Color: Choose an active indicator color.

3. Size: Adjust the size of the indicators.
4. Spacing: The space between the two indicators.
5. Style: Two styles are available for the indicators: Horizontal and Vertical.
6. Position: Adjust the position of the indicators. Position X: To change the horizontal position, Position Y: To change the vertical.

Finally, you can add the image swap widget to your website. Here is how it works:

Like the Image Swap widget, ElementsKit comes with hundreds of advanced elements for Elementor. Get ElementsKit and use those elements to build WordPress websites with full of features.