Preview Window Widget Tutorial

Intro

Premium Window Preview Widget is an off-grid widget that allows you to reduce clutter on your pages and show more content in smaller spaces. With the widget you can add a trigger image that displays a tooltip with more information when the user hovers over the image. The tooltip can be interactive and animated and can show either an existing Elementor template or custom content. The tooltip design can be customized and you can also select from 6 pre-made tooltip themes.

Click here to check Premium Preview Window Widget demo.

Elementor Preview Window Widget Video Tutorial

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

  • Trigger Image
  • Preview Window
  • Advanced Settings

1. Trigger Image

The trigger image is the item that the user can hover over to show the tooltip preview window.
First, select or upload an image from the WordPress media library.

  • Image Size: You can select between:
    • Thumbnail – 150 x 150
    • Medium – 300 x 300
    • Medium Large – 768 x ?
    • Large – 1024 x 1024
    • Full
    • Custom – You can crop the original image size to any custom size. You can also set a single value for the height or width in order to keep the original size ratio.
  • Alt: Add an alternative text for the image.
  • Caption: Add a caption for the image. The text is displayed below the image.
  • Link: Add a link to the image. Enter a link or select from a list of existing pages. External links can also have a no-follow and be opened in a new window.
  • Alignment: Align the image to the left, center or right of the container.
  • Floating Effects: Switch on to apply floating effects on Tigger.
    • Translate: Enable to create transition between two position points.
    • Rotate: Enable to rotate from and to specific degrees.
    • Opacity: Enable to change the opacity between two values.
    • Disable Floating Effects On Safari: You can disable Floating Effects on Safari browser to prevent any layout breaks that can result from compatibility between Safari browser and the modern CSS used to create the floating animations.
Premium Preview Window Widget for Elementor Page Builder
Premium Preview Window Widget for Elementor Page Builder

2. Preview Window

First, select your Content Type. You can choose an existing Elementor template, or you can add custom content.

Once you have added content to the preview window, you can preview it directly in the editor by hovering over the trigger image.

The following options are only available if you choose Custom Content.

Image: Enable or disable a custom image. Upload or select an image from the WordPress media library.

  • Image size: You can select between:
    • Thumbnail – 150 x 150
    • Medium – 300 x 300
    • Medium Large – 768 x ?
    • Large – 1024 x 1024
    • Full
    • Custom – You can crop the original image size to any custom size. You can also set a single value for the height or width in order to keep the original size ratio.
  • Alt: Add an alternative text for the image.
  • Alignment: Align the image to the left, center or right of the preview container.

Title: Enable or disable a title for the preview window. The title is shown below the image.
Title: Add a title and select the HTML tag that will be used to present it. Choose from H1 to H6. Alignment: Align the text to the left, center, or right.

Description -Enable or disable the description.

You can add content to the preview tooltip using the Rich Text Editor. You can edit the content visually or with code, and you can also include images from the media library.

  • You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
  • You can also select an existing Elemntor templates.

Alignment -Align the text to the left, center, or right of the preview container.

Elementor Preview Window Widget Preview Window Settings
You Can Choose to Disable the Title and Description and Only Show The Image, as In This Example From Our Demo:
Elementor Preview Window Widget Show Template
Elementor Preview Window Widget Show Template

3. Advanced Settings

Interactive: Enable or disable interactive actions. Give users the possibility to interact with the content of the tooltip.

Responsive: Enable or disable the responsive version of the tooltip. When enabled, it resizes the tooltip image to fit the screen.

Animation: Select an animation that will be used to show the tooltip preview when the user hovers over the trigger image:

  • Fade
  • Grow
  • Swing
  • Slide
  • Fall
  • Animation Duration: Set the animation duration in milliseconds, default is 350.
  • Delay : Set the animation delay in milliseconds, default is 10.
  • Arrow: Show or hide an arrow beside the tooltip. The arrow points towards the trigger image and will adjust with the Side selection option.
  • Spacing: Adjust the distance between the origin and the tooltip in pixels, default is 6.
  • Min Width: Set a minimum width for the tooltip in pixels, default: 0 (auto width).
  • Max Width: Set a maximum width for the tooltip in pixels, default: null (no max width).
  • Custom Height: Enable or disable a custom height. Select the height in pixels, em or %.
Elementor Preview Window Widget Section Advanced Section
Elementor Preview Window Widget Section Advanced Section

Side: Select which side to show the tooltip on, in reference to the trigger image. The value may be one of the following: ‘top’, ‘bottom’, ‘left’, ‘right’. If you select more than one value, the second, third and fourth values may be used as fallbacks.

Hide on Mobiles: Enable or disable the tooltip on mobile phones.

Example for Elementor Preview Window Widget
Example with The Tooltip Below The Trigger Image for Elementor Preview Window Widget

Style

1. Trigger Image

  • Background color: Select a background color. This maybe is useful for transparent images.
  • Border: Select the border type, color, size, and radius.
  • Box Shadow: Add a shadow around the trigger image with this option. Select the color and the following settings:
    • Horizontal position
    • Vertical position
    • Blur
    • Spread
    • Position: Outline or Inset
  • CSS Filters: Select from the following available image filters:
    • Blur
    • Brightness
    • Contrast
    • Saturation
    • Hue
  • Margin and Padding: Adjust the margin and padding in pixels, em or %.
Elementor Preview Window Widget Trigger Image
Elementor Preview Window Widget Trigger Image
Elementor Preview Windows Widget Example
An Example Trigger Image With a Box Shadow and Border, and Without a Caption.

2. Trigger Image Caption

  • Text Color: Select the text color of the image caption.
  • Typography: Adjust the font settings.
  • Text shadow: Add a shadow behind the text. Adjust the following settings:
    • Color, blur and position.
  • Background color: Select a background color for the caption.
  • Border: Select border type, color, size and radius.
  • Margin and Padding: Adjust the margin and padding in pixels, em or %.
Elementor Preview Windows Widget Trigger Image Caption Customization Settings
Trigger Image Caption Customization Settings
Elementor Preview Windows Widget Example
The same trigger image, but with a larger cation with a custom font and text shadow.

3. Preview Window Content

  • Background Color: Select a background color for the content.
  • Border: Select border type, color, size, and radius.
  • Box Shadow: Add a shadow around the content.
  • Margin and Paddin: Adjust the margin and padding in pixels, em or %.
Elementor Preview Window Content Customization Options
Elementor Preview Window Content Customization Options

4. Preview Window Image

  • Background Color: Select a background color.
  • Border: Select border type, color, size and radius.
  • Shadow: Add a box shadow around the content.
  • Margin and Padding: Adjust the margin and padding in pixels, em or %.
Preview Image Window Customization Settings for Elementor Preview Window Widget
Preview Image Window Customization Settings for Elementor Preview Window Widget
Example for Elementor Preview Window Widget
This preview image is transparent, but the background has been set to black. On non-transparent images, the background color is only visible if the padding around the image is increased.

5. Preview Window Title

  • Color: Select the text color for the title.
  • Typography: Adjusy the font settings.
  • Text Shadow.
  • Background color: Select a background color.
  • Border: Select border type, color, size, and radius.
  • Margin and Padding: Adjust the margin and padding in pixels, em or %.
Elementor Preview Window Widget Title Customization
Preview Window’s Title Customization Options
Elementor Preview Window Widget Example for Title Customization
Basic Preview Window Title example with background color and borders.

6. Preview Window Description

  • Color: Select the text color of the description.
  • Typography.
  • Text Shadow: Add a shadow behind the text.
  • Background Color: Select a background color.
  • Border: Select border type, color, size, and radius.
  • Margin and Padding: Adjust the margin and padding in pixels, em or %.
Elementor Preview Windows Widget Example
In this example the Preview Window Title and Preview Window Description has the same background color, white the content background color (which wraps both the image and text) is white.
Elementor Preview Window Widget Description Settings
Elementor Preview Window Widget Description Settings

7. Preview Window Container

The container that holds the preview image, title and description has two background colors; the inner background color and the outer background color. The outer background color can be used to add more than one border around the preview window.

Border: Select border type, color, size and radius.

Box Shadow: Add a shadow around the Preview Window with this option. Select the color and the following settings:

  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset

Padding: Padding is the space between the edge of the container and the content. Increasing the padding increases the size of the outer background color. Adjust the padding in pixels, em or %.

Elementor's Preview Window Container
Elementor’s Preview Window Container
Example with outer and inner background colors and box shadow Elementor Preview Window Widget
Example with outer and inner background colors and box shadow.

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.