{"id":13557,"date":"2019-06-06T08:23:47","date_gmt":"2019-06-06T06:23:47","guid":{"rendered":"https:\/\/premiumaddons.com\/?post_type=docs&#038;p=13557"},"modified":"2024-03-05T13:13:15","modified_gmt":"2024-03-05T11:13:15","slug":"preview-window-widget-tutorial","status":"publish","type":"docs","link":"https:\/\/premiumaddons.com\/docs\/preview-window-widget-tutorial\/","title":{"rendered":"Preview Window Widget Tutorial"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Intro<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Click here to check <a href=\"https:\/\/premiumaddons.com\/preview-window-widget-for-elementor-page-builder\/\">Premium Preview Window Widget demo<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe title=\"Elementor ImagePreview Window Widget Tutorial\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/EmptjFjrc4E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<\/div><figcaption class=\"wp-element-caption\">Elementor Preview Window Widget Video Tutorial<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Requirements: <\/h3>\n\n\n\n<ul><li>You will need <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/pro\/\" target=\"_blank\">Premium Addons PRO<\/a> plugin installed and activated on your website.<\/li><li>Also, make sure that this widget\/addon is enabled so you can find it in the Elementor editor. Check <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/plugin-settings\/\" target=\"_blank\">this article<\/a> to know how to do that. <\/li><li>Premium Addons works only with <a rel=\"noreferrer noopener\" href=\"https:\/\/bit.ly\/Get-Elementor\" target=\"_blank\">Elementor Page Builder<\/a> plugin so you will need to have it installed and activated as well.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key Features<\/strong><\/h3>\n\n\n\n<ul>\n<li>Trigger Image<\/li>\n\n\n\n<li>Preview Window<\/li>\n\n\n\n<li>Advanced Settings<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"> 1.  Trigger Image<\/h4>\n\n\n\n<p>The trigger image is the item that the user can hover over to show the tooltip preview window.<br>First, select or upload an image from the WordPress media library.<\/p>\n\n\n\n<ul>\n<li><strong>Image Size:<\/strong> You can select between:\n<ul>\n<li>Thumbnail &#8211; 150 x 150<\/li>\n\n\n\n<li> Medium &#8211; 300 x 300<\/li>\n\n\n\n<li> Medium Large &#8211; 768 x ?<\/li>\n\n\n\n<li> Large &#8211; 1024 x 1024<\/li>\n\n\n\n<li> Full<\/li>\n\n\n\n<li> Custom &#8211; 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<em>.<\/em> <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Alt:<\/strong> Add an alternative text for the image.<\/li>\n\n\n\n<li><strong>Caption:<\/strong> Add a caption for the image. The text is displayed below the image.<\/li>\n\n\n\n<li><strong>Link:<\/strong> 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. <\/li>\n\n\n\n<li><strong>Alignment:<\/strong> Align the image to the left, center or right of the container.<\/li>\n\n\n\n<li><strong>Floating Effects:<\/strong> Switch on to apply floating effects on Tigger.\n<ul>\n<li><strong>Translate:<\/strong> Enable to create transition between two position points.<\/li>\n\n\n\n<li><strong>Rotate:<\/strong> Enable to rotate from and to specific degrees.<\/li>\n\n\n\n<li><strong>Opacity:<\/strong> Enable to change the opacity between two values.<\/li>\n\n\n\n<li><strong>Disable Floating Effects On Safari:<\/strong> 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.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnRyaWdnZXItaW1hZ2UtMS0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Premium Preview Window Widget for Elementor Page Builder\" class=\"wp-image-13916\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Premium Preview Window Widget for Elementor Page Builder<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"> 2. Preview Window<\/h4>\n\n\n\n<p>First, select your Content Type. You can choose an existing Elementor template, or you can add custom content.  <\/p>\n\n\n\n<p><strong>Once you have added content to the preview window, you can preview it directly in the editor by hovering over the trigger image.<\/strong><\/p>\n\n\n\n<p><em>The following options are only available if you choose Custom Content<\/em>.<\/p>\n\n\n\n<p>Image: Enable or disable a custom image.  Upload or select an image from the WordPress media library. <\/p>\n\n\n\n<ul>\n<li>Image size: You can select between:\n<ul>\n<li>Thumbnail &#8211; 150 x 150<\/li>\n\n\n\n<li> Medium &#8211; 300 x 300<\/li>\n\n\n\n<li> Medium Large &#8211; 768 x ?<\/li>\n\n\n\n<li> Large &#8211; 1024 x 1024<\/li>\n\n\n\n<li> Full<\/li>\n\n\n\n<li> Custom &#8211; 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<em>.<\/em> <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Alt: Add an alternative text for the image.<\/li>\n\n\n\n<li>Alignment: Align the image to the left, center or right of the preview container. <\/li>\n<\/ul>\n\n\n\n<p>Title: Enable or disable a title for the preview window. The title is shown below the image.<br>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.<\/p>\n\n\n\n<p>Description -Enable or disable the description.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<ul>\n<li>You can use&nbsp;<strong>Elementor Live Templates<\/strong>&nbsp;feature to create\/edit Elementor template on the same page. For more information, please check Elementor templates article from&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/how-to-create-elementor-template-to-be-used-with-premium-addons\/\" target=\"_blank\">here<\/a>.<\/li>\n\n\n\n<li>You can also select an existing Elemntor templates.<\/li>\n<\/ul>\n\n\n\n<p> Alignment -Align the text to the left, center, or right of the preview container.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctd2luZG93LTEtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Elementor Preview Window Widget Preview Window Settings\" class=\"wp-image-13981\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">You Can Choose to Disable the Title and Description and Only Show The Image, as In This Example From Our Demo:<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctZXhhbXBsZS0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Preview Window Widget Show Template\" class=\"wp-image-14181\" style=\"width:580px;height:338px\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Preview Window Widget Show Template<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3. Advanced Settings<\/h4>\n\n\n\n<p>Interactive: Enable or disable interactive actions.  Give users the possibility to interact with the content of the tooltip.<\/p>\n\n\n\n<p>Responsive: Enable or disable the responsive version of the tooltip. When enabled, it resizes the tooltip image to fit the screen.<\/p>\n\n\n\n<p>Animation: Select an animation that will be used to show the tooltip preview when the user hovers over the trigger image:<\/p>\n\n\n\n<ul>\n<li>Fade<\/li>\n\n\n\n<li>Grow<\/li>\n\n\n\n<li>Swing<\/li>\n\n\n\n<li>Slide<\/li>\n\n\n\n<li>Fall<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>Animation Duration: Set the animation duration in milliseconds, default is 350.<\/li>\n\n\n\n<li><g class=\"gr_ gr_33 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace\" id=\"33\" data-gr-id=\"33\">Delay :<\/g> Set the animation delay in milliseconds, default is 10.<\/li>\n\n\n\n<li>Arrow: Show or hide an arrow beside the tooltip. The arrow points towards the trigger image and will adjust with the Side selection option.<\/li>\n\n\n\n<li>Spacing: Adjust the distance between the origin and the tooltip in pixels, default is 6.<\/li>\n\n\n\n<li>Min Width: Set a minimum width for the tooltip in pixels, default: 0 (auto width).<\/li>\n\n\n\n<li>Max Width: Set a maximum width for the tooltip in pixels, default: null (no <g class=\"gr_ gr_17 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"17\" data-gr-id=\"17\">max width<\/g>).<\/li>\n\n\n\n<li>Custom Height: Enable or disable a custom height. Select the height in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRmFkdmFuY2VkLXNldHRpbmdzLTEtMi0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Preview Window Widget Section Advanced Section\" class=\"wp-image-13990\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Preview Window Widget Section Advanced Section<\/figcaption><\/figure>\n\n\n\n<p>Side: Select which side to show the tooltip on, in reference to the trigger image. The value may be one of the following: &#8216;top&#8217;, &#8216;bottom&#8217;, &#8216;left&#8217;, &#8216;right&#8217;.  If you select more than one value, the second, third and fourth values may be used as fallbacks.<\/p>\n\n\n\n<p>Hide on Mobiles: Enable or disable the tooltip on mobile phones.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRmFkdmFuY2VkLXNldHRpbmdzLXNpZGUtMS0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Example for Elementor Preview Window Widget\" class=\"wp-image-13995\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Example with The Tooltip Below The Trigger Image for Elementor Preview Window Widget<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. Trigger Image<\/h4>\n\n\n\n<ul>\n<li>Background color: Select a background color. This maybe is useful for transparent images.<\/li>\n\n\n\n<li>Border: Select the border type, color, size, and radius.<\/li>\n\n\n\n<li>Box Shadow: Add a shadow around the trigger image with this option. Select the color and the following settings:\n<ul>\n<li>Horizontal position<\/li>\n\n\n\n<li>Vertical position<\/li>\n\n\n\n<li>Blur<\/li>\n\n\n\n<li>Spread<\/li>\n\n\n\n<li>Position: Outline or Inset <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>CSS Filters: Select from the following available image filters:\n<ul>\n<li>Blur<\/li>\n\n\n\n<li>Brightness<\/li>\n\n\n\n<li>Contrast<\/li>\n\n\n\n<li>Saturation<\/li>\n\n\n\n<li>Hue<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Margin and Padding: Adjust the margin and padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlLXRyaWdnZXItaW1hZ2UtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Elementor Preview Window Widget Trigger Image\" class=\"wp-image-13999\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Preview Window Widget Trigger Image<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRmV4YW1wbGUtdHJpZ2dlci0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Preview Windows Widget Example\" class=\"wp-image-14184\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">An Example Trigger Image With a Box Shadow and Border, and Without a Caption.<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Trigger Image Caption<\/h4>\n\n\n\n<ul>\n<li>Text Color: Select the text color of the image caption.<\/li>\n\n\n\n<li>Typography: Adjust the font settings.<\/li>\n\n\n\n<li>Text shadow: Add a shadow behind the text. Adjust the following settings:\n<ul>\n<li>Color, blur <g class=\"gr_ gr_43 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep\" id=\"43\" data-gr-id=\"43\">and<\/g> position.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Background color: Select a background color for the caption.<\/li>\n\n\n\n<li>Border: Select border type, color, size <g class=\"gr_ gr_45 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep\" id=\"45\" data-gr-id=\"45\">and<\/g> radius.<\/li>\n\n\n\n<li>Margin and Padding: Adjust the margin and padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlLXRyaWdnZXItaW1hZ2UtY2FwdGlvbi0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Preview Windows Widget Trigger Image Caption Customization Settings\" class=\"wp-image-14001\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Trigger Image Caption Customization Settings<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnRpdGxlLWV4YW1wbGUyLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Preview Windows Widget Example\" class=\"wp-image-14197\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The same trigger image, but with a larger cation with a custom font and text shadow.<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3. Preview Window Content<\/h4>\n\n\n\n<ul>\n<li>Background Color: Select a background color for the content.<\/li>\n\n\n\n<li>Border: Select border type, color, size, and radius.<\/li>\n\n\n\n<li>Box Shadow: Add a shadow around the content.<\/li>\n\n\n\n<li>Margin and Paddin: Adjust the margin and padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctd2luZG93LWNvbnRlbnQtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Elementor Preview Window Content Customization Options\" class=\"wp-image-14003\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Preview Window Content Customization Options<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">4. Preview Window Image<\/h4>\n\n\n\n<ul>\n<li>Background <g class=\"gr_ gr_30 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del\" id=\"30\" data-gr-id=\"30\">Colo<\/g>r: Select a background color.<\/li>\n\n\n\n<li>Border: Select border type, color, size <g class=\"gr_ gr_9 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep\" id=\"9\" data-gr-id=\"9\">and<\/g> radius.<\/li>\n\n\n\n<li>Shadow: Add a box shadow around the content.<\/li>\n\n\n\n<li>Margin and Padding: Adjust the margin and padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctd2luZG93LWltYWdlLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Preview Image Window Customization Settings for Elementor Preview Window Widget\" class=\"wp-image-14005\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Preview Image Window Customization Settings for Elementor Preview Window Widget<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctaW1hZ2UtdHJhbnNwYXJlbnQtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Example for Elementor Preview Window Widget\" class=\"wp-image-14190\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">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.<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">5. Preview Window Title<\/h4>\n\n\n\n<ul>\n<li>Color: Select the text color for the title.<\/li>\n\n\n\n<li>Typography: <g class=\"gr_ gr_63 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"63\" data-gr-id=\"63\">Adjusy<\/g> the font settings.<\/li>\n\n\n\n<li>Text Shadow.<\/li>\n\n\n\n<li>Background color: Select a background color.<\/li>\n\n\n\n<li>Border: Select border type, color, size, and radius.<\/li>\n\n\n\n<li>Margin and Padding: Adjust the margin and padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctd2luZG93LXRpdGxlLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Preview Window Widget Title Customization\" class=\"wp-image-14008\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Preview Window&#8217;s Title Customization Options<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctdGl0bGUtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Elementor Preview Window Widget Example for Title Customization\" class=\"wp-image-14193\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Basic Preview Window Title example with background color and borders.<\/em><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">6. Preview Window Description<\/h4>\n\n\n\n<ul>\n<li>Color: Select the text color of the description.<\/li>\n\n\n\n<li>Typography.<\/li>\n\n\n\n<li>Text Shadow: Add a shadow behind the text. <\/li>\n\n\n\n<li>Background Color: Select a background color.<\/li>\n\n\n\n<li>Border: Select border type, color, size, and radius.<\/li>\n\n\n\n<li>Margin and Padding: Adjust the margin and padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctY29udGVudC1iYWNrZ3JvdW5kLWNvbG9yLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Preview Windows Widget Example\" class=\"wp-image-14188\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>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.<\/em><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctd2luZG93LWRlc2NyaXB0aW9uLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Preview Window Widget Description Settings\" class=\"wp-image-14010\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Preview Window Widget Description Settings<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">7. Preview Window Container <\/h4>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Border: Select border type, color, size and radius.<\/p>\n\n\n\n<p>Box Shadow: Add a shadow around the Preview Window with this option. Select the color and the following settings: <\/p>\n\n\n\n<ul>\n<li>Horizontal Position<\/li>\n\n\n\n<li>Vertical Position<\/li>\n\n\n\n<li>Blur<\/li>\n\n\n\n<li>Spread<\/li>\n\n\n\n<li>Position: Outline or Inset <\/li>\n<\/ul>\n\n\n\n<p>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 %.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctd2luZG93LWNvbnRhaW5lci0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor's Preview Window Container\" class=\"wp-image-14012\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor&#8217;s Preview Window Container<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnByZXZpZXctd2lkZ2V0LWV4YW1wbGUtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Example with outer and inner background colors and box shadow Elementor Preview Window Widget\" class=\"wp-image-14157\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Example with outer and inner background colors and box shadow<\/em>.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"The preview window Elementor widget is an off-grid widget to show an image, Elementor template when an image or icon is hovered.","_seopress_robots_index":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"docs_category":[496],"docs_tag":[],"_links":{"self":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/13557"}],"collection":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/comments?post=13557"}],"version-history":[{"count":2,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/13557\/revisions"}],"predecessor-version":[{"id":72844,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/13557\/revisions\/72844"}],"wp:attachment":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/media?parent=13557"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_category?post=13557"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_tag?post=13557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}