1. Home
  2. Docs
  3. Marketing Elements
  4. 360° Product View

360° Product View EA Element

360° Product View EA widget is a rich-feature and unique Elementor Addons with a fully responsive layout. It allows you to display a large number of images from different angles of a 2D or 3D product offering control over the layout in the way that pleases you most, allowing the user to rotate, pan or zoom the images. Here in this tutorial, you’re going to learn how to use 360° Product View element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the 360° Product View Element

 

 

»Content

 

Layout

⇒Source Type: Select the source type either local image or remote image. If you select the remote image, then add the image source link. You should name all files with same digit serial numeric number, e.g: image-01.jpg, image-35.jpg

⇒Add Image: If you select the source type as local, then upload images here. Please upload all the images showing different angles so that viewers can have a 360° view perfectly.

⇒Image Size: Select the image size from our pre-defined sizes.

⇒Width: Customize the image width manually.

⇒Height: Customize the image height manually.

⇒Fullscreen Button: Enable/disable the fullscreen button here. And customize the button icon, icon position, and icon on hover.

 

Additional

⇒Animate: Enable/disable the animation on the viewer. Enable animate to start the animation automatically on load.

⇒Frame Time: Set the frame time here. Time in ms between updates. e.g. 40 is exactly 25 FPS

⇒Loop: Enable/disable the loop on the viewer.

⇒Reverse: Enable/disable the reverse. Animation playback is reversed.

⇒Retain Animate: Retains the animation after user interaction.

⇒Mouse Option: Select the mouse option on the image. Choose between drag, move, and wheel or leave it as none.

⇒Reverse: Enable/disable the reverse on the mouse option. Sensitivity factor for user interaction.

⇒Easing: Enable/disable easing on the 360 product image.

⇒Blur: Enable/disable blurriness on the 360 product image.

 


»Style

 

Icon Style

⇒Size: Customize the icon size on the fullscreen button for different dimensions.

⇒Color: Add a custom color to the icon for both normal and hover view.

⇒Background Color: Customize the icon background color for Normal & Hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for normal view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the fullscreen icon for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Padding: Set the padding value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the 360° Product View Element.


Was this article helpful to you? Yes No

How can we help?