1. Home
  2. Docs
  3. Image Elements
  4. Preview Window

Preview Window EA Element

EA Preview Image Widget is one of the off-grid widgets that allows you to display extra information for images you display once they are covered by the visitor. With EA Preview Window Widget, you can add an entire section template to the modal box. Here in this tutorial, you’re going to learn how to use the Preview Window 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 Preview Window Element

 

»Content

 

Trigger Image

⇒Choose Image: Choose an image for the trigger from your media library or upload a new.

⇒Image Size: Customize the fixed size of the trigger image of the preview window from our pre-defined size type.

⇒ALT: Add the image alt tag here.

⇒Caption: Add a caption to the trigger image.

⇒Link: Enable/disable the link on the image. Then, add a custom link or select an existing page link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Alignment: Set the image alignment either left, right or center.

Preview Window

⇒Content-Type: Select the content type of the preview window here. Select either custom content or add a section template to the modal box.

⇒Image: Enable/disable image as the preview window.

⇒Choose Image: Choose an image for the preview window from your media library or upload a new.

⇒Image Size: Customize the fixed size of the preview window image from our pre-defined size type.

⇒ALT: Add the image alt tag here.

⇒Alignment: Set the preview window image alignment either left, right or center.

⇒Title: Enable/disable the title on the preview window image. If select enable, then add title text, HTML tag and customize the alignment.

⇒Description: Enable/disable the description and then add the description text and content alignment if you enable it.

 

Advanced Settings

⇒Interactive: Give users the possibility to interact with the content of the tooltip by enabling the Interactive option.

⇒Responsive: Enable/disable responsive to resize tooltip image to fit the screen.

⇒Animation: Choose an animation effect type to add a 3D effect on the preview window.

⇒Animation Duration: Set the animation duration in milliseconds, default is 350

⇒Delay: Set the animation delay in milliseconds, default is 10

⇒Arrow: Show/hide an arrow beside the tooltip.

⇒Spacing: Customize the distance between the origin and the tooltip in pixels, default is 6

⇒Min Width: Set a minimum width for the tooltip in pixels for different dimensions, default: 0 (auto width)

⇒Max Width: Set a maximum width for the tooltip in pixels, default: null (no max-width)

⇒Custom Height: Enable/disable the custom height. If enabled, set the height manually for the tooltip for different dimensions.

⇒Side: Sets the side of the tooltip. The value may one of the following: ‘top’, ‘bottom’, ‘left’, ‘right’. It may also be an array containing one or more of these values. When using an array, the order of values is taken into account as the order of fallbacks and the absence of a side disables it.

⇒Hide on Mobiles: Show/hide tooltips on mobile phones

 


»Style

Trigger Image

⇒Background Color: Add a custom color to the image background and control the opacity.

⇒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 image for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the image border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the image 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.

⇒CSS Filters: Customize the CSS filters for the trigger image of the preview window. Edit the blur, brightness, contrast, saturation, and hue of the image.

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

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

 

Trigger Image Caption

⇒Text Color: Add a custom color to the trigger image caption.

⇒Typography: Set the typography options for the caption.

⇒Text Shadow: Customize the text-shadow color, set the horizontal and vertical value of the shadow, and control the blur radius of the caption text.

⇒Background Color: Add a custom color to the caption background and control the opacity.

⇒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 trigger image caption for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the caption border.

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

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

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

 

Preview Window Content

⇒Background Color: Add a custom color to the preview window content background and control the opacity.

⇒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 content for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the content border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the content 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.

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

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

 

Preview Window Image

⇒Background Color: Add a custom color to the preview window image background and control the opacity.

⇒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 preview window image for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the image border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the image 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.

⇒CSS Filters: Customize the CSS filters for the preview window image. Edit the blur, brightness, contrast, saturation, and hue of the image.

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

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

 

Preview Window Title

Color: Add a custom color to the preview window title.

⇒Typography: Set the typography options for the preview window title.

⇒Text Shadow: Customize the text-shadow color, set the horizontal and vertical value of the shadow, and control the blur radius of the title text.

⇒Background Color: Add a custom color to the preview window title background and control the opacity.

⇒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 preview window title for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the preview window title border.

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

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

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

 

Preview Window Description

Color: Add a custom color to the preview window description.

⇒Typography: Set the typography options for the preview window description.

⇒Text Shadow: Customize the text-shadow color, set the horizontal and vertical value of the shadow, and control the blur radius of the description text.

⇒Background Color: Add a custom color to the preview window description background and control the opacity.

⇒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 preview window description for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the preview window description border.

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

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

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

Container

⇒Inner Background Color: Add a custom color to the container inner background and control the opacity.

⇒Outer Background Color: Add a custom color to the container outer background and control the opacity.

⇒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 container for different dimensions. You can link the values together or customize them individually.

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

⇒Border Radius: Set the border radius for the top, right, bottom and left around the container 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 container 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 Preview Window Element.


Was this article helpful to you? Yes No

How can we help?