{"version":"1.0","provider_name":"Flexi Post Grid","provider_url":"https:\/\/creativewebui.com\/flexi-post-grid","author_name":"Elementordipak","author_url":"https:\/\/creativewebui.com\/flexi-post-grid\/author\/elementordipak\/","title":"Quick View Popup Tutorial - Flexi Post Grid","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"xizJVYjPk9\"><a href=\"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/\">Quick View Popup Tutorial<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/embed\/#?secret=xizJVYjPk9\" width=\"600\" height=\"338\" title=\"&#8220;Quick View Popup Tutorial&#8221; &#8212; Flexi Post Grid\" data-secret=\"xizJVYjPk9\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script>\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/\/# sourceURL=https:\/\/creativewebui.com\/flexi-post-grid\/wp-includes\/js\/wp-embed.min.js\n<\/script>\n","description":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-3.mp4 Set Up Event Grid Post Types Before using the Event Grid layout in Flexi Post Grid, first enable Event Fields for your selected post type from the plugin dashboard settings. Steps Go to WordPress Dashboard \u2192 Flexi Post Grid Open the Event Grid Settings section Select your post type from Event Fields Post Types Click Save Changes Now use the Event Grid Layout inside Elementor Tip: Select at least one post type here before using Event Grid features in Elementor. Add Event Details to Your Posts After enabling Event Fields for your post type, you can now add event-specific information directly inside the post editor. These details will automatically appear inside the Event Grid, countdown timer, and popup layouts. Steps Open or create your Event post Scroll to the Flexi Post Grid : Popup Button section Add the Popup Button Text Select the Event Expire Date Add the Event Start Time Update or Publish the post Once saved, your Event Grid will automatically use these event details inside the popup and event layouts. Tip: Expired events can be hidden automatically using the \u201cHide Expired Events\u201d option from Event Grid Settings. https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-4.mp4https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-6.mp4 Enable Event Popup in Elementor Once your event details are added, you can enable the Event Popup directly from the Flexi Post Grid widget settings inside Elementor. This popup automatically displays event information such as dates, countdown timer, location, description, and custom popup content. Steps Open your page with Elementor Select the Flexi Post Grid widget Open the Details Popup section Enable the Details Popup option Select the Popup Trigger style Enable the event popup display options you want Update the page Visitors can now click the popup button to view complete event details inside a modern AJAX-powered popup window. Tip: You can fully customize popup content, countdown timer, event meta, buttons, and styling directly from Elementor controls. Create Popups for Any Post Type Flexi Post Grid also includes a universal AJAX-powered popup system that works with any post type including Blog Posts, News, Team Members, Properties, Services, Portfolios, and custom post types. This popup helps visitors quickly view additional content without leaving the current page, creating a faster and more interactive browsing experience. Steps Open your page in Elementor Select the Flexi Post Grid widget Go to the Details Popup section Enable the Details Popup option Choose the popup content source Enable title, image, meta, custom fields, and button options Customize popup colors, spacing, and styling controls Update the page Visitors can now open a clean responsive popup to view complete post information directly inside the grid layout. Tip: The popup works with all post types and supports dynamic custom fields, featured images, meta data, buttons, and AJAX loading. https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-7.mp4https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-5.mp4 Create WooCommerce Quick View Product Popups Flexi Post Grid includes a powerful WooCommerce Quick View Popup system that allows customers to preview products instantly without leaving the current page. The popup works like a modern product page and supports product gallery images, variation swatches, quantity controls, pricing, ratings, wishlist, and direct Buy Now functionality. Steps Open your page in Elementor Select the Flexi Post Grid widget Choose WooCommerce Products as the post type Go to the Details Popup section Enable the Details Popup option Select the Popup Trigger style Enable product popup features like gallery, price, rating, wishlist, and variations Customize popup layout and styling controls Update the page Customers can now open a responsive WooCommerce product popup directly from the grid and purchase products faster without navigating to a separate product page. Tip: The WooCommerce popup supports product image galleries, variation swatches, quantity selector, wishlist system, ratings, SKU, categories, and direct Buy Now buttons."}