With this widget, you can animate an image sequence automatically or on different types of mouse interaction, ideal for showing products.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- This is a pro widget, so make sure you have either WDesignKit pro license or have activated The Plus Addons for Elementor pro key in your WDesignKit account.
- Make sure you’ve downloaded the Product 360 Viewer widget.
How to Activate the Product 360 Viewer Widget?
Go to
- WDesignKit → Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.
How to Use the Product 360 Viewer Widget in Elementor?
Add the Product 360 Viewer widget to the page.
Content
From the Source Type dropdown you have to select the image sequence source. Here you’ll find two options –
- Local – To add images from your WordPress media library.
- Remote – To add images from an external URL.
Let’s select Remote.
In the Image Link field, you have to add the image folder path without the image name.
Note: For the Local source type you can directly add the images.
For example, https://website-name.com/images/
Note: For the Remote source type, you have to name your images in a number sequence followed by the image extension like 1.jpg, 2.jpg, 3.jpg etc. but for the Local source type you can directly arrange the image sequence from the gallery.
From the Digit Number dropdown, you have to select the option based on your image naming convention, for instance, if you’ve named your images like 001.jpg, 002.jpg, and so on then you have to select 3.
In the Start Frame field, you have to mention the fame number from where you want to start the animation.
In the End Frame field, you have to mention the fame number where you want to end the animation.
Extra Option
From the Desktop Width, Desktop Height, Tablet Width, Tablet Height, Mobile Width and Mobile Height sections, you can set the canvas width and height for desktop, tablet and mobile separately.
Then by enabling the Full Screen Button toggle, you can add a button to show the animation in full screen.
When enabled you can edit the button text, adjust the button position and an option to show the button hover.
You can play the animation on load by enabling the Animate toggle.
In the Frame Time field, you can set the time for image updates to adjust the animation speed.
Note: You can set the time in milliseconds, for instance, 40 ms is equal to 25 FPS.
By enabling the Loop toggle, you can play the animation in a loop.
Note: You need to enable the Animate toggle for the loop to work.
In the Stop Frame field, you can mention the frame number where you want the animation to stop.
Note: Stop Frame will not work if Loop is enabled.
By enabling the Reverse toggle you can play animation in reverse.
By enabling the Retain Animate toggle, you can resume the animation autoplay when you move the cursor away from the image after mouse interaction.
Note: For Retain Animate to work you must enable the Animate toggle.
From the Mouse Option dropdown, you can select the mouse interaction type for the animation. Here you’ll find four options –
- None – To add no mouse interaction, suitable if you want to autoplay the animation.
- Drag – To play the animation as you drag your mouse over the image.
- Move – To play the animation as you move the mouse over the image.
- Wheel – To play the animation as you scroll the mouse over the image.
By enabling the Easing toggle, you can have an easing effect on image change and the animation will play slightly longer after the mouse interaction is over.
From the Blur toggle, you can add a blur effect to the image animation.
From the Style tab, you can style the full screen button.
