fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

google-maps-widget
age-verification-widget-for-elementor
digital-business-card-templates-for-elementor

360 Product Viewer

The “360 Product Viewer Widget”  allows you to present every angle of your product through its dynamic 360-degree view, which cannot be conveyed using a static image. You also have the ability to magnify specific attributes or elements, spin the item, and draw attention to its distinctive characteristics using the hotspots feature.

You provide an array of images showcasing your product from different perspectives. The widget then smoothly blends these sequences to produce an interactive 360° product view. Users can easily engage with your product, rotate it, and examine every detail, offering an immersive experience that enhances the visual appeal of your website. Say goodbye to stagnant images and embrace the future of product presentation with our user-friendly Elementor widget.

 

Let’s look at each of the options in the “360 Product Viewer Widget” below.

Install 360 Product Viewer Widget for Elementor

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “360 Product Viewer”
  3. Hover over the widget in the search results and click install
  4. Add your “360 Product Viewer” widget to any Elementor Page

General Settings

1

Folder URL

Paste the URL of folder where the sequence images are stored.

2

File Name

If filenames are product_0001.jpg, product_0002.jpg, product_0003.jpg then enter "product_ "

3

File Index Base Zero

If filenames are product_0001.jpg, product_0002.jpg, product_0003.jpg then put file index base zero value to 4.

4

File Format

Select the file format you  stored earlier.

  • JPEG
  • JPG
  • PNG
  • WEBP
5

Image Count

Set the image count.

6

Drag Speed

Set the drag speed.

7

Drag Reverse

Turn on or off the drag reverse option.

8

Stop on Edge

Turn on to stop the viewer on edge.

9

Enable Full Screen

Enable or disable the fullscreen option.

10

Disable Drag

Disable the drag option.

11

Lazyload

When turned on, widget will only load if user scroll to it.

12

Control Reverse

Turn on or off the control reverse option.

Layout Settings

1

Show Arrow Keys

Show arrow keys to rotate and view product.

2

Show Bottom Circle

Show/Hide the bottom circle.

3

Show Loading Progress Bar

Show loading progress bar of viewer.

4

Enable Zoom

Enable/disable zoom on viewer.

5

Zoom

Set the zoom level on viewer.

Autoplay Settings

1

Autoplay

Turn on or off the autoplay option.

2

Autoplay Reverse

Turn on to autoplay the viewer  in reverse direction.

3

Autoplay Speed

Set the autoplay speed in milliseconds.

4

Play Once

Viewer will only play once.

Hotspot Settings

1

Enable Hotspots

Enable/disable hotspots on image.

2

Hotspots Debug Data

Enable debug data for initial image dimension width and height.

3

Initial Dimension Width

Set the initial width for hotspot.

4

Initial Dimension Height

Set the initial height for hotspot.

Hotspots

1

Hotspot Type

Select the type  of hotspot.

  • Link
  • Popup
2

Title

Type title for hotspot.

3

Link

Type or paste your URL to link with hotspot.

4

Hotspot Position Data

Type the hotspot position data where imageIndex used for Frame or Image number, xCoord for horizontal positioning, and yCoord for vertical positioning.

360 Product Viewer Widget Styling

Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.

Bottom Styling

In this section, set the positioning of bottom circle.

Hotspots Icon Styling

You can set the hotspot icon background, size, color, border color, background  color, background border, and background border color.

Hotspots Popup Styling

Set the background color, border, box shadow, padding, title typography, color, text shadow of hotspots popup.

Usage Examples

Here are some live use cases for the 360 Product Viewer Widget.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!