{"id":7,"date":"2025-04-26T15:20:38","date_gmt":"2025-04-26T15:20:38","guid":{"rendered":"https:\/\/flexipostgrid.creativewebui.com\/?page_id=7"},"modified":"2026-05-02T04:14:28","modified_gmt":"2026-05-02T04:14:28","slug":"home","status":"publish","type":"page","link":"https:\/\/creativewebui.com\/flexi-post-grid\/","title":{"rendered":"home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-afe656d e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"afe656d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3897ce0 elementor-widget elementor-widget-html\" data-id=\"3897ce0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FLEXI POST GRID \u2013 SaaS HERO (NO HEADER INSIDE) -->\r\n<section class=\"fpg-hero2\">\r\n  <!-- Background -->\r\n  <div class=\"fpg2-bg\" aria-hidden=\"true\">\r\n    <div class=\"fpg2-blob b1\"><\/div>\r\n    <div class=\"fpg2-blob b2\"><\/div>\r\n    <div class=\"fpg2-grid\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"fpg2-wrap\">\r\n    <!-- CONTENT (TOP) -->\r\n    <div class=\"fpg2-top\">\r\n      <div class=\"fpg2-pill\">\r\n        <span class=\"dot\"><\/span>\r\n        Elementor Post Grid Widget \u2022 Fast \u2022 Flexible \u2022 Premium UI\r\n      <\/div>\r\n\r\n      <h1 class=\"fpg2-h1\">\r\n        Build any <span class=\"grad\">Post Grid<\/span><br \/>\r\n        <span class=\"italic\">visually<\/span> with Elementor\r\n      <\/h1>\r\n\r\n      <p class=\"fpg2-sub\">\r\n        Create News, Blog, Portfolio, Team, Event & WooCommerce Product grids with\r\n        <b>16+ preset layouts<\/b>, AJAX filters, Load More & Infinite Scroll \u2014 without coding.\r\n      <\/p>\r\n\r\n      <div class=\"fpg2-buttons\">\r\n        <a class=\"btn primary big\" href=\"https:\/\/creativewebui.com\/flexi-post-grid\/pricing\/\">\r\n          Get Flexi Post Grid Pro\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path d=\"M14 5l7 7-7 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <path d=\"M3 12h17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n          <\/svg>\r\n        <\/a>\r\n\r\n        <!-- \u2705 this must be an anchor -->\r\n        <a class=\"btn ghost big fpg-video-btn\" href=\"#\">Watch Demo<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"fpg2-stats\" style=\"display: none;\">\r\n        <div class=\"stat\"><b>16+<\/b><span>Preset layouts<\/span><\/div>\r\n        <div class=\"stat\"><b>AJAX<\/b><span>Filter + Pagination<\/span><\/div>\r\n        <div class=\"stat\"><b>Woo<\/b><span>Product grids<\/span><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fpg2-trust\">\r\n        <span class=\"label\">Works with<\/span>\r\n        <div class=\"chips\">\r\n          <span class=\"chip\">Elementor<\/span>\r\n          <span class=\"chip\">WooCommerce<\/span>\r\n          <span class=\"chip\">ACF \/ Meta<\/span>\r\n          <span class=\"chip\">Any Post Type<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- SCREENSHOT (BELOW CONTENT) -->\r\n    <div class=\"fpg2-screen\" id=\"demo\">\r\n      <div class=\"screen-glow\" aria-hidden=\"true\"><\/div>\r\n\r\n      <figure class=\"screen-frame\">\r\n        <div class=\"screen-topbar\" aria-hidden=\"true\">\r\n          <div class=\"mac-dots\">\r\n            <span class=\"dot r\"><\/span><span class=\"dot y\"><\/span><span class=\"dot g\"><\/span>\r\n          <\/div>\r\n\r\n          <div class=\"tb-left\">\r\n            <span class=\"ico\" title=\"Back\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M15 18l-6-6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span class=\"ico\" title=\"Forward\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M9 6l6 6-6 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span class=\"ico\" title=\"Refresh\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M20 12a8 8 0 10-2.3 5.7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\r\n                <path d=\"M20 8v4h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n          <\/div>\r\n\r\n          <div class=\"addr\">\r\n            <span class=\"lock\" title=\"Secure\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M7 11V8a5 5 0 0110 0v3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.1\" stroke-linecap=\"round\"\/>\r\n                <path d=\"M6.5 11h11A1.5 1.5 0 0119 12.5v7A1.5 1.5 0 0117.5 21h-11A1.5 1.5 0 015 19.5v-7A1.5 1.5 0 016.5 11z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.1\" stroke-linecap=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span class=\"urltext\">flexipostgrid.demo<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"tb-right\">\r\n            <span class=\"ico\" title=\"Share\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M12 3v12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\r\n                <path d=\"M8 7l4-4 4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                <path d=\"M5 13v6a2 2 0 002 2h10a2 2 0 002-2v-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span class=\"ico\" title=\"New tab\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M12 5v14M5 12h14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span class=\"ico\" title=\"Menu\">\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M5 6h4v4H5V6zm0 8h4v4H5v-4zm10-8h4v4h-4V6zm0 8h4v4h-4v-4z\"\r\n                      fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.1\" stroke-linejoin=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"demo-placeholder\" style=\"padding: 0\">\r\n          <img decoding=\"async\" src=\"\/flexi-post-grid\/wp-content\/uploads\/2026\/02\/News-grid-1.jpg\"\/>\r\n        <\/div>\r\n      <\/figure>\r\n\r\n      <!--<div class=\"badge b1\">16+ layouts<\/div>-->\r\n      <!--<div class=\"badge b2\">AJAX Filter<\/div>-->\r\n      <div class=\"badge b3\">Infinite Scroll<\/div>\r\n      <!-- Floating stat boxes -->\r\n        <div class=\"stat stat-float s1\"><b>16+<\/b><span>Preset layouts<\/span><\/div>\r\n        <div class=\"stat stat-float s2\"><b>AJAX<\/b><span>Filter + Pagination<\/span><\/div>\r\n        <div class=\"stat stat-float s3\"><b>Woo<\/b><span>Product grids<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- =========================\r\nPROFESSIONAL VIDEO POPUP\r\n========================= -->\r\n<div id=\"fpg-video-modal\" class=\"fpg-video-modal\" aria-hidden=\"true\">\r\n  <div class=\"fpg-video-backdrop\"><\/div>\r\n\r\n  <div class=\"fpg-video-dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Flexi Post Grid demo video\">\r\n    <button type=\"button\" class=\"fpg-video-close\" aria-label=\"Close video popup\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M6 6l12 12M18 6L6 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"fpg-video-shell\">\r\n      <div class=\"fpg-video-top\">\r\n        <div class=\"fpg-video-badge\">\r\n          <span class=\"fpg-video-badge-dot\"><\/span>\r\n          Product Demo\r\n        <\/div>\r\n        <div class=\"fpg-video-title\">How to Use Flexi Post Grid Plugin with Elementor<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fpg-video-frame-wrap\">\r\n        <div class=\"fpg-video-loader\">\r\n          <span class=\"fpg-loader-ring\"><\/span>\r\n        <\/div>\r\n\r\n        <iframe\r\n          id=\"fpg-video-frame\"\r\n          src=\"\"\r\n          title=\"How to Use Flexi Post Grid Plugin with Elementor\"\r\n          frameborder=\"0\"\r\n          allow=\"autoplay; encrypted-media; picture-in-picture; fullscreen\"\r\n          allowfullscreen\r\n          referrerpolicy=\"strict-origin-when-cross-origin\">\r\n        <\/iframe>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* =========================\r\nVIDEO MODAL\r\n========================= *\/\r\n.fpg-video-modal{\r\n  position:fixed;\r\n  inset:0;\r\n  z-index:99999;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  padding:24px;\r\n  opacity:0;\r\n  visibility:hidden;\r\n  pointer-events:none;\r\n  transition:opacity .28s ease, visibility .28s ease;\r\n}\r\n\r\n.fpg-video-modal.is-open{\r\n  opacity:1;\r\n  visibility:visible;\r\n  pointer-events:auto;\r\n}\r\n\r\n.fpg-video-backdrop{\r\n  position:absolute;\r\n  inset:0;\r\n  background:rgba(7,10,20,.72);\r\n  backdrop-filter:blur(10px);\r\n  -webkit-backdrop-filter:blur(10px);\r\n}\r\n\r\n.fpg-video-dialog{\r\n  position:relative;\r\n  width:min(1100px, 100%);\r\n  transform:translateY(18px) scale(.98);\r\n  transition:transform .3s ease;\r\n}\r\n\r\n.fpg-video-modal.is-open .fpg-video-dialog{\r\n  transform:translateY(0) scale(1);\r\n}\r\n\r\n.fpg-video-shell{\r\n  position:relative;\r\n  border:1px solid rgba(255,255,255,.12);\r\n  background:linear-gradient(180deg, rgba(20,24,39,.96), rgba(12,15,28,.98));\r\n  border-radius:22px;\r\n  box-shadow:\r\n    0 30px 80px rgba(0,0,0,.45),\r\n    0 0 0 1px rgba(255,255,255,.04) inset;\r\n  overflow:hidden;\r\n}\r\n\r\n.fpg-video-top{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:16px;\r\n  padding:16px 22px;\r\n  border-bottom:1px solid rgba(255,255,255,.08);\r\n  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));\r\n}\r\n\r\n.fpg-video-badge{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:8px;\r\n  padding:8px 12px;\r\n  border-radius:999px;\r\n  font-size:13px;\r\n  font-weight:600;\r\n  color:#eef2ff;\r\n  background:rgba(175,14,157,.14);\r\n  border:1px solid rgba(175,14,157,.24);\r\n  white-space:nowrap;\r\n}\r\n\r\n.fpg-video-badge-dot{\r\n  width:8px;\r\n  height:8px;\r\n  border-radius:50%;\r\n  background:#AF0E9D;\r\n  box-shadow:0 0 0 5px rgba(175,14,157,.14);\r\n}\r\n\r\n.fpg-video-title{\r\n  flex:1;\r\n  min-width:0;\r\n  color:#fff;\r\n  font-size:18px;\r\n  font-weight:700;\r\n  line-height:1.3;\r\n  text-align:right;\r\n}\r\n\r\n.fpg-video-frame-wrap{\r\n  position:relative;\r\n  width:100%;\r\n  aspect-ratio:16\/9;\r\n  background:#05070d;\r\n}\r\n\r\n#fpg-video-frame{\r\n  position:absolute;\r\n  inset:0;\r\n  width:100%;\r\n  height:100%;\r\n  display:block;\r\n  opacity:0;\r\n  transition:opacity .25s ease;\r\n}\r\n\r\n#fpg-video-frame.is-ready{\r\n  opacity:1;\r\n}\r\n\r\n.fpg-video-loader{\r\n  position:absolute;\r\n  inset:0;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:\r\n    radial-gradient(circle at 20% 20%, rgba(175,14,157,.14), transparent 32%),\r\n    radial-gradient(circle at 80% 25%, rgba(18,12,122,.22), transparent 36%),\r\n    linear-gradient(180deg, #0b1020, #060812);\r\n  z-index:1;\r\n  transition:opacity .25s ease, visibility .25s ease;\r\n}\r\n\r\n.fpg-video-loader.is-hidden{\r\n  opacity:0;\r\n  visibility:hidden;\r\n}\r\n\r\n.fpg-loader-ring{\r\n  width:54px;\r\n  height:54px;\r\n  border-radius:50%;\r\n  border:3px solid rgba(255,255,255,.15);\r\n  border-top-color:#ffffff;\r\n  animation:fpgSpin .85s linear infinite;\r\n}\r\n\r\n@keyframes fpgSpin{\r\n  to{ transform:rotate(360deg); }\r\n}\r\n\r\n.fpg-video-close{\r\n  position:absolute;\r\n  top:-16px;\r\n  right:-16px;\r\n  width:46px;\r\n  height:46px;\r\n  border:none;\r\n  border-radius:50%;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:#fff;\r\n  color:#111827;\r\n  cursor:pointer;\r\n  box-shadow:0 14px 30px rgba(0,0,0,.22);\r\n  z-index:5;\r\n  transition:transform .2s ease, box-shadow .2s ease;\r\n}\r\n\r\n.fpg-video-close:hover{\r\n  transform:scale(1.06);\r\n  box-shadow:0 18px 36px rgba(0,0,0,.28);\r\n}\r\n\r\n.fpg-video-close svg{\r\n  width:20px;\r\n  height:20px;\r\n  display:block;\r\n}\r\n\r\nbody.fpg-video-open{\r\n  overflow:hidden;\r\n}\r\n\r\n@media (max-width: 991px){\r\n  .fpg-video-dialog{\r\n    width:min(96vw, 100%);\r\n  }\r\n\r\n  .fpg-video-top{\r\n    padding:14px 16px;\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n  }\r\n\r\n  .fpg-video-title{\r\n    text-align:left;\r\n    font-size:16px;\r\n  }\r\n\r\n  .fpg-video-close{\r\n    top:10px;\r\n    right:10px;\r\n    width:40px;\r\n    height:40px;\r\n  }\r\n}\r\n\r\n@media (max-width: 640px){\r\n  .fpg-video-modal{\r\n    padding:12px;\r\n  }\r\n\r\n  .fpg-video-shell{\r\n    border-radius:16px;\r\n  }\r\n\r\n  .fpg-video-badge{\r\n    font-size:12px;\r\n    padding:7px 10px;\r\n  }\r\n\r\n  .fpg-video-title{\r\n    font-size:15px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  var openBtn   = document.querySelector('.fpg-video-btn');\r\n  var modal     = document.getElementById('fpg-video-modal');\r\n  var backdrop  = modal ? modal.querySelector('.fpg-video-backdrop') : null;\r\n  var closeBtn  = modal ? modal.querySelector('.fpg-video-close') : null;\r\n  var iframe    = document.getElementById('fpg-video-frame');\r\n  var loader    = modal ? modal.querySelector('.fpg-video-loader') : null;\r\n\r\n  var videoURL = 'https:\/\/www.youtube.com\/embed\/Xmuie3_jUIQ?autoplay=1&rel=0&modestbranding=1&playsinline=1';\r\n\r\n  if (!openBtn || !modal || !iframe) return;\r\n\r\n  function openVideo(e){\r\n    if (e) e.preventDefault();\r\n\r\n    modal.classList.add('is-open');\r\n    modal.setAttribute('aria-hidden', 'false');\r\n    document.body.classList.add('fpg-video-open');\r\n\r\n    iframe.classList.remove('is-ready');\r\n    if (loader) loader.classList.remove('is-hidden');\r\n\r\n    setTimeout(function(){\r\n      iframe.src = videoURL;\r\n    }, 120);\r\n  }\r\n\r\n  function closeVideo(){\r\n    modal.classList.remove('is-open');\r\n    modal.setAttribute('aria-hidden', 'true');\r\n    document.body.classList.remove('fpg-video-open');\r\n\r\n    iframe.src = '';\r\n    iframe.classList.remove('is-ready');\r\n    if (loader) loader.classList.remove('is-hidden');\r\n  }\r\n\r\n  openBtn.addEventListener('click', openVideo);\r\n\r\n  if (closeBtn) {\r\n    closeBtn.addEventListener('click', closeVideo);\r\n  }\r\n\r\n  if (backdrop) {\r\n    backdrop.addEventListener('click', closeVideo);\r\n  }\r\n\r\n  document.addEventListener('keydown', function(e){\r\n    if (e.key === 'Escape' && modal.classList.contains('is-open')) {\r\n      closeVideo();\r\n    }\r\n  });\r\n\r\n  iframe.addEventListener('load', function(){\r\n    iframe.classList.add('is-ready');\r\n    if (loader) {\r\n      setTimeout(function(){\r\n        loader.classList.add('is-hidden');\r\n      }, 250);\r\n    }\r\n  });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b6eccd2 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"b6eccd2\" data-element_type=\"container\" data-e-type=\"container\" id=\"features\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-79aa435 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"79aa435\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d79e610 elementor-widget elementor-widget-heading\" data-id=\"d79e610\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"gridfetures\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Key Features<br> Elementor Post Grid Widget<br> by <span class=\"grad\">Flexi Post Grid<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-341fcd7 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"341fcd7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-95ae22b elementor-widget elementor-widget-text-editor\" data-id=\"95ae22b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Built for both beginners and developers, Flexi Post Grid offers <strong>complete design control<\/strong> with a wide range of layout types including <strong>full-width grids, list views, and classic grid views<\/strong>\u2014all equipped with deep styling options. Its seamless Elementor integration, fast AJAX performance, and multipurpose capabilities make it the ultimate <strong>Elementor Post Grid Widget<\/strong> for crafting interactive and engaging content grids.<\/p><p>To make things even easier, Flexi Post Grid comes with <strong>16 unique pre-designed grid styles<\/strong>. Simply select your preferred layout from the grid style options and customize it to match your brand and content goals\u2014saving you time while delivering stunning results.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a26945e custom-fields-align-h-center elementor-widget elementor-widget-blog_grid_filter\" data-id=\"a26945e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"blog_grid_filter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"blog-grid-filter\" data-unique-id=\"blog-posts-container-69f5a6b141da5\"><ul class=\"category-filter\" data-unique-id=\"blog-posts-container-69f5a6b141da5\"><li data-category=\"all\" class=\"active\">All<\/li><li data-category=\"key-features\">Key Features<\/li><\/ul><div id=\"blog-posts-container-69f5a6b141da5\" class=\"blog-posts-container list-layout\"\n\t\tfpg-wl-pos-top-right\n    \tfpg-wl-design-heart\"\n\t\tdata-unique-id=\"blog-posts-container-69f5a6b141da5\"\n\t\tdata-posts-per-page=\"12\"\n\t\tdata-post-type=\"post\"\n\t\tdata-post-order=\"DESC\"\n\t\tdata-sort-by=\"date\"\n\t\tdata-grid-style=\"list-layout\"\n\t\tdata-popup-enabled=\"no\"\n\t\tdata-popup-trigger=\"image_title\"\n\t\tdata-popup-content-source=\"excerpt\"\n\t\tdata-popup-show-image=\"yes\"\n\t\tdata-popup-show-title=\"yes\"\n\t\tdata-popup-show-categories=\"yes\"\n\t\tdata-popup-category-links=\"no\"\n\t\tdata-popup-show-meta=\"yes\"\n\t\tdata-popup-show-post-date=\"yes\"\n\t\tdata-popup-show-author=\"yes\"\n\t\tdata-popup-show-meta-category=\"no\"\n\t\t\n\t\tdata-popup-show-tags=\"no\"\n\t\tdata-popup-show-comments=\"no\"\n\t\tdata-popup-show-custom-fields=\"yes\"\n\t\tdata-popup-custom-field-keys='[]'\n\t\tdata-popup-enable-custom-button=\"no\"\n\t\tdata-popup-shortcode=\"\"\n\t\tdata-popup-product-enabled=\"no\"\n\t\tdata-popup-product-button-text=\"View Details\"\n\n\t\tdata-popup-show-event-info=\"no\"\n\t\tdata-popup-show-event-start-date=\"yes\"\n\n\t\tdata-popup-show-event-end-date=\"yes\"\n\t\tdata-popup-show-event-location=\"yes\"\n\t\tdata-popup-show-countdown=\"no\"\n\t\tdata-popup-countdown-show-year=\"no\"\n\t\tdata-popup-countdown-show-month=\"yes\"\n\t\tdata-popup-countdown-show-day=\"yes\"\n\t\tdata-popup-countdown-show-time=\"yes\"\n\t\tdata-popup-countdown-expired-text=\"Event Ended\"\n\t\tdata-popup-countdown-alignment=\"flex-start\"\n\t\tdata-popup-countdown-gap=\"8\"\n\t\tdata-popup-countdown-min-width=\"72\"\n\t\tdata-popup-countdown-box-padding='{&quot;top&quot;:10,&quot;right&quot;:10,&quot;bottom&quot;:10,&quot;left&quot;:10,&quot;unit&quot;:&quot;px&quot;}'\n\t\tdata-popup-countdown-box-bg=\"#8b3dff\"\n\t\tdata-popup-countdown-box-border-color=\"rgba(255,255,255,0.14)\"\n\t\tdata-popup-countdown-box-border-width=\"1\"\n\t\tdata-popup-countdown-box-radius=\"10\"\n\t\tdata-popup-countdown-value-color=\"#ffffff\"\n\t\tdata-popup-countdown-label-color=\"rgba(255,255,255,0.82)\"\n\t\tdata-popup-countdown-expired-bg=\"#fef2f2\"\n\t\tdata-popup-countdown-expired-color=\"#991b1b\"\n\t\tdata-popup-countdown-value-typography='{&quot;font_family&quot;:&quot;&quot;,&quot;font_size&quot;:&quot;&quot;,&quot;font_weight&quot;:&quot;&quot;,&quot;text_transform&quot;:&quot;&quot;,&quot;font_style&quot;:&quot;&quot;,&quot;line_height&quot;:&quot;&quot;,&quot;letter_spacing&quot;:&quot;&quot;}'\n\t\tdata-popup-countdown-label-typography='{&quot;font_family&quot;:&quot;&quot;,&quot;font_size&quot;:&quot;&quot;,&quot;font_weight&quot;:&quot;&quot;,&quot;text_transform&quot;:&quot;&quot;,&quot;font_style&quot;:&quot;&quot;,&quot;line_height&quot;:&quot;&quot;,&quot;letter_spacing&quot;:&quot;&quot;}'\n\n\t\tdata-popup-image-fit=\"cover\"\n\t\tdata-popup-enable-mobile-image-fit=\"no\"\n\t\tdata-popup-image-fit-mobile=\"cover\"\n\t\tdata-popup-image-position-y=\"center\"\n\t\tdata-popup-width=\"920\"\n\t\tdata-popup-image-width=\"42\"\n\t\tdata-popup-content-padding='{&quot;top&quot;:32,&quot;right&quot;:32,&quot;bottom&quot;:32,&quot;left&quot;:32,&quot;unit&quot;:&quot;px&quot;}'\n\t\tdata-popup-border-style=\"none\"\n\t\tdata-popup-border-width=\"0\"\n\t\tdata-popup-border-color=\"#e5e7eb\"\n\t\tdata-popup-border-radius=\"18\"\n\t\tdata-popup-overlay-color=\"rgba(15,23,42,.72)\"\n\t\tdata-popup-bg-color=\"#ffffff\"\n\t\tdata-popup-title-color=\"#111827\"\n\t\tdata-popup-text-color=\"#374151\"\n\t\tdata-popup-meta-color=\"#6b7280\"\n\t\tdata-popup-button-bg=\"#120c7a\"\n\t\tdata-popup-button-text-color=\"#ffffff\"\n\t\tdata-popup-button-hover-bg=\"#0f0a63\"\n\t\tdata-popup-button-hover-text-color=\"#ffffff\"\n\t\tdata-popup-loader-color=\"#120c7a\"\n\t\tdata-popup-loader-track-color=\"rgba(17,24,39,.12)\"\n\t\tdata-popup-shadow-color=\"rgba(15,23,42,.28)\"\n\t\tdata-popup-shadow-blur=\"80\"\n\t\tdata-popup-close-color=\"#111827\"\n\t\tdata-popup-close-bg=\"#ffffff\"\n\t\tdata-popup-close-size=\"42\"\n\t\tdata-popup-image-padding=\"12\"\n\t\tdata-popup-content-bottom-space=\"32\"\n\t\tdata-product-popup-sale-price-color=\"#111111\"\n\t\tdata-product-popup-regular-price-color=\"#8a8a8a\"\n\t\tdata-product-popup-price-font-size=\"24\"\n\t\tdata-product-popup-regular-price-font-size=\"16\"\n\t\tdata-product-popup-rating-star-color=\"#f5b301\"\n\t\tdata-product-popup-rating-empty-star-color=\"#d7d2dc\"\n\t\tdata-product-popup-rating-count-color=\"#8a8a8a\"\n\t\tdata-product-popup-rating-count-font-size=\"14\"\n\t\tdata-product-popup-option-label-color=\"#222222\"\n\t\tdata-product-popup-option-label-font-size=\"12\"\n\t\tdata-product-popup-option-text-color=\"#7a7a7a\"\n\t\tdata-product-popup-option-bg-color=\"#ffffff\"\n\t\tdata-product-popup-option-border-color=\"#d9d9d9\"\n\t\tdata-product-popup-option-border-radius=\"10\"\n\t\tdata-product-popup-option-active-text-color=\"#ffffff\"\n\t\tdata-product-popup-option-active-bg-color=\"#17181d\"\n\t\tdata-product-popup-option-active-border-color=\"#17181d\"\n\t\tdata-product-popup-color-selected-ring-width=\"2\"\n\t\tdata-product-popup-qty-button-color=\"#7a7a7a\"\n\t\tdata-product-popup-qty-button-bg=\"#ffffff\"\n\t\tdata-product-popup-qty-button-border=\"#d9d9d9\"\n\t\tdata-product-popup-qty-number-color=\"#17181d\"\n\t\tdata-product-popup-qty-number-font-size=\"20\"\n\t\tdata-product-popup-qty-border-radius=\"10\"\n\t\tdata-product-popup-wishlist-icon-size=\"18\"\n\t\tdata-product-popup-wishlist-icon-color=\"#17181d\"\n\t\tdata-product-popup-wishlist-icon-active-color=\"#be123c\"\n\t\tdata-product-popup-wishlist-bg=\"#ffffff\"\n\t\tdata-product-popup-wishlist-border-color=\"#d9d9d9\"\n\t\tdata-product-popup-wishlist-border-radius=\"10\"\n\t\tdata-product-popup-zoom-icon-size=\"18\"\n\t\tdata-product-popup-zoom-icon-color=\"#111111\"\n\t\tdata-product-popup-zoom-icon-bg=\"rgba(255,255,255,.92)\"\n\t\tdata-product-popup-zoom-btn-size=\"42\"\n\t\tdata-product-popup-zoom-btn-border-color=\"#d9d9d9\"\n\t\tdata-product-popup-zoom-btn-border-radius=\"12\"\n\n\t\tdata-show-product-rating=\"no\"\n\t\tdata-show-product-price=\"no\"\n\t\tdata-show-product-swatches=\"no\"\n\t\t\n\t\tdata-title-alignment=\"\"\n\t\tdata-description-alignment=\"left\"\n\t\tdata-image-resolution=\"thumbnail\"\n\t\tdata-custom-image-width=\"\"\n\t\tdata-custom-image-height=\"\"\n\t\tdata-show-excerpt=\"yes\"\n\t\tdata-excerpt-length=\"20\"\n\n\t\tdata-pagination-mode=\"none\"\n\t\tdata-load-more-text=\"Load More\"\n\n\t\tdata-show-meta=\"\"\n\t\tdata-show-pagination=\"\"\n\t\tdata-show-filter=\"\"\n\t\tdata-show-image=\"yes\"\n\t\tdata-gutter=\"20\"\n\n\t\tdata-show-read-more=\"\"\n\t\tdata-read-more-text=\"\"\n\t\tdata-show-read-more-icon=\"\"\n\t\tdata-show-read-more-text=\"\"\n\t\tdata-read-more-icon-position=\"after\"\n\t\tdata-read-more-icon=''\n\n\t\tdata-show-read-more2=\"\"\n\t\tdata-read-more-text2=\"\"\n\t\tdata-show-read-more-icon2=\"\"\n\t\tdata-show-read-more-text2=\"\"\n\t\tdata-read-more-icon-position2=\"\"\n\t\tdata-read-more-icon2='[]'\n\n\t\tdata-show-title=\"yes\"\n\t\tdata-title-tag=\"h3\"\n\t\tdata-fallback-image=\"\"\n\n\t\t\/* PRO MERGE *\/\n\t\tdata-custom-field-keys='[]'\n\t\tdata-custom-field-layout=\"cf-horizontal\"\n\n\t\tdata-include-categories='[&quot;6&quot;]'\n\t\tdata-exclude-categories='[]'\n\t\tdata-selected-categories='[&quot;6&quot;]'\n\n\t\tdata-include-posts=\"\"\n\t\tdata-exclude-posts=\"\"\n\t\tdata-post-offset=\"0\"\n\n\t\tdata-column=\"3\"\n\t\tdata-column-tablet=\"2\"\n\t\tdata-column-mobile=\"1\"\n\n\t\tdata-show-date-separator=\"yes\"\n\t\tdata-show-category-separator=\"yes\"\n\t\tdata-hover-animation=\"\"\n\n\t\t\/* PRO MERGE: image animation *\/\n\t\tdata-image-animation-effect=\"\"\n\t\tdata-zoom-in-scale=\"1.05\"\n\t\tdata-zoom-out-scale=\"0.95\"\n\t\tdata-slide-up-distance=\"20\"\n\t\tdata-slide-down-distance=\"20\"\n\t\tdata-slide-left-distance=\"20\"\n\t\tdata-slide-right-distance=\"20\"\n\t\tdata-image-animation-duration=\"0.5\"\n\n\t\tdata-disable-heading-click=\"yes\"\n\t\tdata-disable-thumbnail-click=\"yes\"\n\t\tdata-disable-meta-click=\"yes\"\n\n\t\tdata-show-product-button=\"yes\"\n\t\tdata-product-add-to-cart-text=\"Add to cart\"\n\t\tdata-product-select-options-text=\"Select options\"\n\t\tdata-enable-product-quick-view-popup=\"no\"\n\t\tdata-product-quick-view-button-text=\"View Details\"\n\t\tdata-show-product-btn-icon=\"yes\"\n\t\tdata-show-product-btn-text=\"yes\"\n\t\tdata-product-btn-icon-position=\"before\"\n\t\tdata-product-button-icon=\"[]\"\n\n\t\t\/* Product Swatches (Dashboard driven) *\/\n\t\tdata-fpg-enable-color-swatches=\"yes\"\n\t\tdata-fpg-swatches-max-show=\"3\"\n\t\tdata-fpg-swatches-show-all=\"no\"\n\t\tdata-fpg-swatches-show-more=\"yes\"\n\n\t\tdata-show-wishlist=\"yes\"\n\n\t\t\/* Grid Connection (A to Z Filter) *\/\n\t\tdata-grid-id=\"grid-1\"\n\t\tdata-current-letter=\"all\" \n\n\t\t\/* FPG Search Filter - Search state *\/\n\t\tdata-current-search=\"\"\n\n\t\t\/* Slider (NEW) *\/\n\t    data-slider-enable=\"0\"\n\t    data-slider-max=\"12\"\n\t    data-slider-arrows=\"0\"\n\t    data-slider-dots=\"0\"\n\t    data-slider-autoplay=\"0\"\n\t    data-slider-delay=\"3000\"\n\t    data-slider-speed=\"450\"\n\t    data-slider-gap=\"20\"\n\t    data-slider-perview-d=\"3\"\n\t    data-slider-perview-t=\"2\"\n\t    data-slider-perview-m=\"1\"\n\t    data-slider-scroll-d=\"1\"\n\t\tdata-slider-scroll-t=\"1\"\n\t\tdata-slider-scroll-m=\"1\"\n\n\n\n\t\tdata-meta-options='[&quot;date&quot;,&quot;author&quot;,&quot;category&quot;]' style=\"--fpg-cols:3;--fpg-cols-tablet:2;--fpg-cols-mobile:1;gap:20px;\">\n\t<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-666f2f2 preset-styles e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"666f2f2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-31b23cb e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"31b23cb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4362399 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"4362399\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b06e683 elementor-widget elementor-widget-html\" data-id=\"b06e683\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"fpg-style-marquee\" aria-label=\"Flexi Post Grid styles marquee\">\n  <div class=\"fpgm-wrap\">\n\n    <!-- HEADING -->\n    <div class=\"fpgm-head\">\n      <h2>16 Pre-Designed Grid Styles<\/h2>\n      <p>Choose from 16 modern, professionally-designed grid templates to quickly get started with the Elementor Post Grid Widget.<\/p>\n    <\/div>\n\n    <!-- ROW 1 (LEFT) -->\n    <div class=\"fpgm-row\" data-dir=\"left\">\n      <div class=\"fpgm-track\">\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png\" alt=\"Grid\"><span class=\"fpgm-cap\">Grid<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/List.png\" alt=\"List\"><span class=\"fpgm-cap\">List<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Blog-Grid.png\" alt=\"Blog Grid\"><span class=\"fpgm-cap\">Blog Grid<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Blog-Grid-2.png\" alt=\"Blog Grid 2\"><span class=\"fpgm-cap\">Blog Grid 2<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Simple-News-Grid.png\" alt=\"Simple News Grid\"><span class=\"fpgm-cap\">Simple News Grid<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Simple-News-List-View.png\" alt=\"Simple News List View\"><span class=\"fpgm-cap\">Simple News List View<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/News-Grid-2.png\" alt=\"News Grid 2\"><span class=\"fpgm-cap\">News Grid 2<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/News-Grid-3.png\" alt=\"News Grid 3\"><span class=\"fpgm-cap\">News Grid 3<\/span><\/span><\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ROW 2 (RIGHT) -->\n    <div class=\"fpgm-row\" data-dir=\"right\">\n      <div class=\"fpgm-track\">\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/News-Grid-4.png\" alt=\"News Grid 4\"><span class=\"fpgm-cap\">News Grid 4<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/News-Grid-5.png\" alt=\"News Grid 5\"><span class=\"fpgm-cap\">News Grid 5<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Alternativ-Grid.png\" alt=\"Alternativ Grid\"><span class=\"fpgm-cap\">Alternativ Grid<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Full-Width-Alternativ-Grid.png\" alt=\"Full Width Alternativ Grid\"><span class=\"fpgm-cap\">Full Width Alternativ Grid<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Portfolio-Grid.png\" alt=\"Portfolio Grid\"><span class=\"fpgm-cap\">Portfolio Grid<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Event-Grid.png\" alt=\"Event Grid\"><span class=\"fpgm-cap\">Event Grid<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Team-Grid.png\" alt=\"Team Grid\"><span class=\"fpgm-cap\">Team Grid<\/span><\/span><\/a>\n        <a class=\"fpgm-card\" href=\"#\"><span class=\"fpgm-surface\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/01\/Product-Grid.jpg\" alt=\"Product Grid\"><span class=\"fpgm-cap\">Product Grid<\/span><\/span><\/a>\n      <\/div>\n    <\/div>\n\n    <!-- \u2705 BUTTON (below grids) -->\n    <div class=\"fpgm-btn\">\n      <a class=\"btn primary big\" href=\"\/flexi-post-grid\/preset-grids\/\">\n        View Our Preset Grid Styles\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M14 5l7 7-7 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n          <path d=\"M3 12h17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path>\n        <\/svg>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n\/* ===== SECTION ===== *\/\n.fpg-style-marquee{\n  --gap: 18px;\n  --card-w: 210px;\n  --card-h: 240px;\n  --radius: 18px;\n  --border: rgba(18,12,122,.09);\n  --shadow: 0 5px 20px rgba(18,12,122,.10);\n\n  padding: 80px 0 80px;\n\n  \/* \u2705 FIX BACKGROUND CONFLICT: use neutral white with very soft tint (no clash) *\/\n  background: #ffffff;\n\n  overflow: hidden;\n}\n\n@media (max-width: 1024px){\n    .fpg-style-marquee{\n        padding: 60px 0 70px;\n    }\n}\n\n@media (max-width: 768px){\n    .fpg-style-marquee{\n        padding: 50px 0 60px;\n    }\n}\n\n\/* \u2705 optional soft tint behind cards (still white look, no conflict) *\/\n.fpg-style-marquee::before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background: radial-gradient(900px 320px at 50% 0%, rgba(226,213,251,.25), transparent 60%);\n  pointer-events:none;\n}\n\n.fpg-style-marquee{ position: relative; }\n.fpgm-wrap{ position: relative; z-index: 1; max-width:1180px; margin:0 auto; padding:0 18px; }\n\n\/* ===== HEADING ===== *\/\n.fpgm-head{ text-align:center; max-width:800px; margin:0 auto 22px; }\n.fpgm-head h2{ margin:0 0 10px; font-size:40px; line-height:1.12; color:#0f172a; }\n.fpgm-head p{ margin:0; font-size:16px; line-height:1.6; color:#0b1220b3; }\n\n\/* ===== ROW ===== *\/\n.fpgm-row{\n  overflow:hidden;\n  margin-top: 0;\n  padding:20px 0;\n  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\n  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\n}\n\n.fpgm-track{\n  display:flex;\n  gap:var(--gap);\n  width:max-content;\n  will-change:transform;\n  transform:translate3d(0,0,0);\n}\n\n\/* ===== CARD ===== *\/\n.fpgm-card{\n  width:var(--card-w);\n  min-width:var(--card-w);\n  height:var(--card-h);\n  text-decoration:none;\n  border-radius:var(--radius);\n  display:block;\n}\n\n.fpgm-surface{\n  height:100%;\n  width:100%;\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n  border-radius:var(--radius);\n  background:#fff;\n  border:1px solid var(--border);\n  box-shadow:var(--shadow);\n  padding:14px 14px 12px;\n}\n\n.fpgm-surface img{\n  width:100%;\n  object-fit:contain;\n  display:block;\n  border-radius:12px;\n  background:#fff;\n}\n\n.fpgm-cap{\n  display:block;\n  text-align:center;\n  font-size:14px;\n  color:#120C7A;\n  padding-top:0;\n}\n\n\/* \u2705 REMOVE HOVER COMPLETELY *\/\n.fpgm-card:hover,\n.fpgm-card:focus,\n.fpgm-card:active{\n  transform:none !important;\n  box-shadow:none !important;\n}\n\n\/* \u2705 BUTTON WRAP *\/\n.fpgm-btn{\n  margin-top: 26px;\n  display:flex;\n  justify-content:center;\n}\n\n\/* Responsive *\/\n@media (max-width: 768px){\n  .fpg-style-marquee{ --card-w: 190px; --card-h: 230px; }\n  .fpgm-head h2{ font-size: 32px; }\n}\n@media (max-width: 480px){\n  .fpg-style-marquee{ --card-w: 175px; --card-h: 220px; }\n  .fpgm-head h2{ font-size: 28px; }\n}\n\n@media (prefers-reduced-motion: reduce){\n  .fpgm-track{ transform:none !important; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75595e3 elementor-widget elementor-widget-html\" data-id=\"75595e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"fpg-popup-features-section\">\r\n  <div class=\"fpg-popup-features-wrap\">\r\n    <div class=\"fpg-popup-head fpg-reveal-up\">\r\n      <span class=\"fpg-popup-mini-badge\">Interactive Popup Features<\/span>\r\n      <h2>Powerful <span>Quick View Popups<\/span> for Better<br> User Experience<\/h2>\r\n      <p>\r\n        Showcase post details, event information, and WooCommerce product quick views\r\n        in a clean interactive layout without sending users away from the page.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- SIMPLE POST POPUP -->\r\n    <div class=\"fpg-popup-card fpg-reveal-up is-visible\" id=\"fpg-simple-popup-card\">\r\n      <div class=\"fpg-popup-card-media\">\r\n        <div class=\"fpg-popup-card-image-wrap\">\r\n          <img decoding=\"async\"\r\n            src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/04\/Post-Popup.png\"\r\n            alt=\"Flexi Post Grid Simple Post Popup\"\r\n            class=\"fpg-popup-card-image\"\r\n          \/>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fpg-popup-card-content\">\r\n        <span class=\"fpg-popup-label\">01 \u2014 Simple Post Popup<\/span>\r\n        <h3>AJAX-Powered Content Popup for Posts & Custom Post Types<\/h3>\r\n        <p>\r\n          Open detailed content instantly without redirecting users to another page.\r\n          The Simple Post Popup loads content dynamically with AJAX, giving visitors\r\n          a fast and smooth browsing experience for blogs, news sites, portfolios,\r\n          and custom post type listings.\r\n        <\/p>\r\n\r\n        <div class=\"fpg-popup-feature-grid\">\r\n          <div class=\"fpg-popup-feature-item\">Show title, image, excerpt or full content<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Control author, date, tags, comments and categories<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Supports ACF, custom fields and shortcode content<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Add custom action button or external link<\/div>\r\n        <\/div>\r\n\r\n        <a href=\"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup\/\" class=\"fpg-popup-btn primary\" target=\"_blank\" rel=\"noopener\">\r\n          <span>View Demo<\/span>\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path d=\"M14 5l7 7-7 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <path d=\"M3 12h17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path>\r\n          <\/svg>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- EVENT POPUP -->\r\n    <div class=\"fpg-popup-card fpg-popup-card-reverse fpg-reveal-up\" id=\"fpg-event-popup-card\">\r\n      <div class=\"fpg-popup-card-media\">\r\n        <div class=\"fpg-popup-card-image-wrap\">\r\n          <img decoding=\"async\"\r\n            src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/04\/Event-Popup.png\"\r\n            alt=\"Flexi Post Grid Event Popup\"\r\n            class=\"fpg-popup-card-image\"\r\n          \/>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fpg-popup-card-content\">\r\n        <span class=\"fpg-popup-label\">02 \u2014 Event Popup<\/span>\r\n        <h3>Advanced Event Popup with Date Logic & Action Support<\/h3>\r\n        <p>\r\n          Display event details in a structured popup layout with support for start date,\r\n          end date, expiry date, location, and action buttons. It is ideal for webinars,\r\n          event listings, schedules, and other time-sensitive content.\r\n        <\/p>\r\n\r\n        <div class=\"fpg-popup-feature-grid\">\r\n          <div class=\"fpg-popup-feature-item\">Display start date, end date, expiry date and location<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Hide expired events automatically<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Flexible short and full date formats<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Countdown timer and registration button support<\/div>\r\n        <\/div>\r\n\r\n        <a href=\"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup\/\" class=\"fpg-popup-btn primary\" target=\"_blank\" rel=\"noopener\">\r\n          <span>View Demo<\/span>\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path d=\"M14 5l7 7-7 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <path d=\"M3 12h17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path>\r\n          <\/svg>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- PRODUCT POPUP -->\r\n    <div class=\"fpg-popup-card fpg-reveal-up\" id=\"fpg-product-popup-card\">\r\n      <div class=\"fpg-popup-card-media\">\r\n        <div class=\"fpg-popup-card-image-wrap\">\r\n          <img decoding=\"async\"\r\n            src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/04\/Product-Popup.png\"\r\n            alt=\"Flexi Post Grid Product Popup\"\r\n            class=\"fpg-popup-card-image\"\r\n          \/>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fpg-popup-card-content\">\r\n        <span class=\"fpg-popup-label\">03 \u2014 Product Popup<\/span>\r\n        <h3>WooCommerce Quick View Popup with Full Product Interaction<\/h3>\r\n        <p>\r\n          Let shoppers explore products directly inside the grid with price, rating,\r\n          SKU, stock status, variations, quantity, wishlist, and buy options. It helps\r\n          users browse faster and improves shopping flow without opening a separate product page.\r\n        <\/p>\r\n\r\n        <div class=\"fpg-popup-feature-grid\">\r\n          <div class=\"fpg-popup-feature-item\">Title, price, rating, SKU, stock and description<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Regular and sale price support<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Color and size variation selection<\/div>\r\n          <div class=\"fpg-popup-feature-item\">Quantity, wishlist, add to cart and buy now support<\/div>\r\n        <\/div>\r\n\r\n        <a href=\"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup\/\" class=\"fpg-popup-btn primary\" target=\"_blank\" rel=\"noopener\">\r\n          <span>View Demo<\/span>\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path d=\"M14 5l7 7-7 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <path d=\"M3 12h17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path>\r\n          <\/svg>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .fpg-popup-features-section {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 90px 20px;\r\n    background:\r\n      radial-gradient(circle at 10% 10%, rgba(175, 14, 157, 0.09), transparent 28%),\r\n      radial-gradient(circle at 92% 12%, rgba(18, 12, 122, 0.09), transparent 28%),\r\n      linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);\r\n  }\r\n\r\n  .fpg-popup-features-wrap {\r\n    max-width: 1320px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .fpg-popup-head {\r\n    text-align: center;\r\n    max-width: 880px;\r\n    margin: 0 auto 46px;\r\n  }\r\n\r\n  .fpg-popup-mini-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 42px;\r\n    padding: 10px 18px;\r\n    border-radius: 999px;\r\n    background: #ffffff;\r\n    border: 1px solid rgba(18, 12, 122, 0.08);\r\n    box-shadow: 0 10px 24px rgba(18, 12, 122, 0.06);\r\n    color: #af0e9d;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    margin-bottom: 18px;\r\n    font-family: var(--e-global-typography-primary-font-family), Sans-serif;\r\n  }\r\n\r\n  .fpg-popup-head h2 {\r\n    margin: 0 0 12px;\r\n    font-family: var(--e-global-typography-primary-font-family), Sans-serif;\r\n    font-size: clamp(34px, 4.6vw, 40px);\r\n    line-height: 1.08;\r\n    letter-spacing: -0.02em;\r\n    color: #101828;\r\n  }\r\n\r\n  .fpg-popup-head h2 span {\r\n    background: linear-gradient(90deg, #af0e9d 0%, #120c7a 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n\r\n  .fpg-popup-head p {\r\n    margin: 0 auto;\r\n    max-width: 760px;\r\n    color: #5d6472;\r\n    font-family: var(--e-global-typography-primary-font-family), Sans-serif;\r\n    font-size: 17px;\r\n    line-height: 1.75;\r\n  }\r\n\r\n  .fpg-popup-card {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);\r\n    gap: 28px;\r\n    align-items: center;\r\n    margin-bottom: 28px;\r\n    padding: 20px;\r\n    border-radius: 28px;\r\n    background: rgba(255, 255, 255, 0.92);\r\n    border: 1px solid rgba(18, 12, 122, 0.08);\r\n    box-shadow: 0 18px 50px rgba(17, 12, 46, 0.08);\r\n    position: relative;\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: transform 0.8s ease, opacity 0.8s ease, box-shadow 0.3s ease;\r\n  }\r\n\r\n  .fpg-popup-card.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .fpg-popup-card:hover {\r\n    box-shadow: 0 22px 60px rgba(17, 12, 46, 0.12);\r\n  }\r\n\r\n  .fpg-popup-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    background: linear-gradient(135deg, rgba(175, 14, 157, 0.03), rgba(18, 12, 122, 0.02));\r\n  }\r\n\r\n  .fpg-popup-card-reverse {\r\n    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);\r\n  }\r\n\r\n  .fpg-popup-card-reverse .fpg-popup-card-media {\r\n    order: 2;\r\n  }\r\n\r\n  .fpg-popup-card-reverse .fpg-popup-card-content {\r\n    order: 1;\r\n  }\r\n\r\n  .fpg-popup-card-media {\r\n    min-width: 0;\r\n  }\r\n\r\n  .fpg-popup-card-image-wrap {\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 22px;\r\n    padding: 14px;\r\n    background: linear-gradient(135deg, rgba(175, 14, 157, 0.18), rgba(18, 12, 122, 0.18));\r\n    border: 1px solid rgba(18, 12, 122, 0.08);\r\n    box-shadow:\r\n      inset 0 0 0 1px rgba(255,255,255,0.55),\r\n      0 12px 30px rgba(18, 12, 122, 0.08);\r\n  }\r\n\r\n  .fpg-popup-card-image {\r\n    display: block;\r\n    width: 100%;\r\n    height: auto;\r\n    border-radius: 16px;\r\n  }\r\n\r\n  .fpg-popup-card-content {\r\n    min-width: 0;\r\n    padding: 6px 4px;\r\n  }\r\n\r\n  .fpg-popup-label {\r\n    display: inline-block;\r\n    margin-bottom: 10px;\r\n    color: #af0e9d;\r\n    font-family: var(--e-global-typography-primary-font-family), Sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.08em;\r\n  }\r\n\r\n  .fpg-popup-card-content h3 {\r\n    margin: 0 0 12px;\r\n    color: #101828;\r\n    font-family: var(--e-global-typography-primary-font-family), Sans-serif;\r\n    font-size: clamp(25px, 2.5vw, 30px);\r\n    line-height: 1.14;\r\n    letter-spacing: -0.02em;\r\n  }\r\n\r\n  .fpg-popup-card-content p {\r\n    margin: 0 0 16px;\r\n    color: #5d6472;\r\n    font-family: var(--e-global-typography-primary-font-family), Sans-serif;\r\n    font-size: 15px;\r\n    line-height: 1.75;\r\n  }\r\n\r\n  .fpg-popup-feature-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 10px;\r\n    margin-bottom: 18px;\r\n  }\r\n\r\n  .fpg-popup-feature-item {\r\n    position: relative;\r\n    padding: 12px 14px 12px 38px;\r\n    border-radius: 14px;\r\n    background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);\r\n    border: 1px solid rgba(18, 12, 122, 0.07);\r\n    color: #1f2940;\r\n    font-family: var(--e-global-typography-primary-font-family), Sans-serif;\r\n    font-size: 14px;\r\n    line-height: 1.55;\r\n    box-shadow: 0 8px 18px rgba(18, 12, 122, 0.04);\r\n  }\r\n\r\n  .fpg-popup-feature-item::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 14px;\r\n    top: 17px;\r\n    width: 12px;\r\n    height: 12px;\r\n    border-radius: 50%;\r\n    background: linear-gradient(135deg, #af0e9d, #120c7a);\r\n    box-shadow: 0 0 0 4px rgba(175, 14, 157, 0.08);\r\n  }\r\n\r\n  .fpg-popup-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    text-decoration: none;\r\n    border-radius: 999px;\r\n    transition: all 0.25s ease;\r\n    font-family: var(--e-global-typography-primary-font-family), Sans-serif;\r\n  }\r\n\r\n  .fpg-popup-btn.primary {\r\n    padding: 12px 16px;\r\n    font-weight: 700;\r\n    font-size: 15px;\r\n    color: #ffffff;\r\n    background: linear-gradient(90deg, #af0e9d 0%, #120c7a 100%);\r\n    box-shadow: 0 14px 32px rgba(69, 22, 140, 0.2);\r\n  }\r\n\r\n  .fpg-popup-btn.primary:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 18px 36px rgba(69, 22, 140, 0.26);\r\n  }\r\n\r\n  .fpg-popup-btn.primary svg {\r\n    width: 18px;\r\n    height: 18px;\r\n    flex: 0 0 18px;\r\n  }\r\n\r\n  .fpg-reveal-up {\r\n    opacity: 0;\r\n    transform: translateY(38px);\r\n    will-change: transform, opacity;\r\n  }\r\n\r\n  .fpg-reveal-up.fpg-show {\r\n    animation: fpgRevealUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;\r\n  }\r\n\r\n  @keyframes fpgRevealUp {\r\n    0% {\r\n      opacity: 0;\r\n      transform: translateY(38px);\r\n    }\r\n    100% {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 1100px) {\r\n    .fpg-popup-card,\r\n    .fpg-popup-card-reverse {\r\n      grid-template-columns: 1fr;\r\n      gap: 22px;\r\n    }\r\n\r\n    .fpg-popup-card-reverse .fpg-popup-card-media,\r\n    .fpg-popup-card-reverse .fpg-popup-card-content {\r\n      order: initial;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .fpg-popup-features-section {\r\n      padding: 70px 16px;\r\n    }\r\n\r\n    .fpg-popup-head {\r\n      margin-bottom: 30px;\r\n    }\r\n\r\n    .fpg-popup-head p {\r\n      font-size: 15px;\r\n    }\r\n\r\n    .fpg-popup-card {\r\n      padding: 14px;\r\n      border-radius: 22px;\r\n      gap: 18px;\r\n    }\r\n\r\n    .fpg-popup-card-image-wrap {\r\n      padding: 10px;\r\n      border-radius: 18px;\r\n    }\r\n\r\n    .fpg-popup-card-content h3 {\r\n      font-size: 24px;\r\n    }\r\n\r\n    .fpg-popup-card-content p {\r\n      font-size: 14px;\r\n    }\r\n\r\n    .fpg-popup-feature-item {\r\n      font-size: 13px;\r\n      padding: 11px 12px 11px 36px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function () {\r\n    const revealItems = document.querySelectorAll('.fpg-reveal-up');\r\n\r\n    if (!revealItems.length) return;\r\n\r\n    const runReveal = function(entry, index) {\r\n      setTimeout(function() {\r\n        entry.target.classList.add('fpg-show');\r\n        if (entry.target.classList.contains('fpg-popup-card')) {\r\n          entry.target.classList.add('is-visible');\r\n        }\r\n      }, index * 120);\r\n    };\r\n\r\n    if ('IntersectionObserver' in window) {\r\n      const observer = new IntersectionObserver(function(entries) {\r\n        entries.forEach(function(entry, index) {\r\n          if (entry.isIntersecting) {\r\n            runReveal(entry, index);\r\n            observer.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, {\r\n        threshold: 0.18\r\n      });\r\n\r\n      revealItems.forEach(function(item) {\r\n        observer.observe(item);\r\n      });\r\n    } else {\r\n      revealItems.forEach(function(item, index) {\r\n        setTimeout(function() {\r\n          item.classList.add('fpg-show');\r\n          if (item.classList.contains('fpg-popup-card')) {\r\n            item.classList.add('is-visible');\r\n          }\r\n        }, index * 120);\r\n      });\r\n    }\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5502fe9 elementor-widget elementor-widget-html\" data-id=\"5502fe9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FLEXI POST GRID \u2013 CONTENT (40%) + MARQUEE (60%) -->\n<section class=\"fpgv2\" aria-label=\"Ultimate Grid Customization section\">\n  <div class=\"fpgv2-wrap\">\n\n    <!-- LEFT CONTENT -->\n    <div class=\"fpgv2-left\">\n      <h2 class=\"fpgv2-title\">\n        Ultimate Grid Customization \u2014<br>\n        No Code Needed in the Elementor Post Grid Widget\n      <\/h2>\n\n      <div class=\"fpgv2-text\">\n        <p>\n          Flexi Post Grid empowers you with a wide range of intuitive customization options, all within a user-friendly interface.\n          From content filtering and pagination to advanced image styling, meta settings, and button controls \u2014 every element of\n          your grid is fully configurable. Easily adjust image size, alignment, spacing, hover effects, and more without writing\n          a single line of CSS.\n        <\/p>\n\n        <p>\n          Whether you\u2019re showcasing blog posts, team members, or featured items, Flexi Post Grid lets you build unique and\n          professional grids in minutes \u2014 all through simple visual controls. Everything you need to create stunning layouts is\n          built right into this <strong>Elementor Post Grid Widget<\/strong>, giving you complete design freedom without any technical\n          complexity.\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <!-- RIGHT: 3 COLUMN MARQUEE -->\n    <div class=\"fpgv2-right\" aria-hidden=\"true\">\n      <div class=\"fpgv2-cols\">\n\n        <!-- COL 1 (UP) -->\n        <div class=\"fpgv2-col\" data-dir=\"up\">\n          <div class=\"fpgv2-viewport\">\n            <div class=\"fpgv2-track\">\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-1.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-2.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-3.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- COL 2 (DOWN) -->\n        <div class=\"fpgv2-col\" data-dir=\"down\">\n          <div class=\"fpgv2-viewport\">\n            <div class=\"fpgv2-track\">\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-5.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-6.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-8.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- COL 3 (UP) -->\n        <div class=\"fpgv2-col\" data-dir=\"up\">\n          <div class=\"fpgv2-viewport\">\n            <div class=\"fpgv2-track\">\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-7.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-9.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n              <figure class=\"fpgv2-card\"><img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/control-2.jpg\" alt=\"\" loading=\"lazy\"><\/figure>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n\/* ===== Padding rules ===== *\/\n.fpgv2{ padding: 90px 0 90px; background:#fff; }\n@media (max-width:1024px){ .fpgv2{ padding: 70px 0 70px;; } }\n@media (max-width:768px){ .fpgv2{ padding: 50px 0 50px;; } }\n\n\/* \u2705 inner container width = 1300px *\/\n.fpgv2-wrap{\n  max-width: 1300px;\n  margin: 0 auto;\n  padding: 0 18px;\n  display: grid;\n  grid-template-columns: 40% 60%;\n  gap: 46px;\n  align-items: center;\n}\n\n\/* LEFT *\/\n.fpgv2-title{\n  margin: 0 0 18px;\n  font-size: 40px;\n  line-height: 1.12;\n  color: #0f172a;\n  font-weight: 400;\n}\n.fpgv2-text p{\n  margin: 0 0 16px;\n  font-size: 16px;\n  line-height: 1.75;\n  color: #0b1220b3;\n}\n.fpgv2-text p:last-child{ margin-bottom: 0; }\n.fpgv2-text strong{ color:#0f172a; }\n\n\/* RIGHT *\/\n.fpgv2-cols{\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 18px;\n  align-items: start;\n}\n\n\/* COLUMN *\/\n.fpgv2-col{\n  height: 540px;\n  border-radius: 14px;\n}\n\n\/* \u2705 NO OUTER BORDER (requested) *\/\n.fpgv2-viewport{\n  height: 100%;\n  overflow: hidden;\n  border-radius: 14px;\n  position: relative;\n  background: transparent; \/* no border, no bg box *\/\n  border: none !important;\n}\n\n\/* Fade top\/bottom *\/\n.fpgv2-viewport::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  pointer-events:none;\n  border-radius: 14px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,1) 0%,\n    rgba(255,255,255,0) 12%,\n    rgba(255,255,255,0) 88%,\n    rgba(255,255,255,1) 100%);\n  z-index: 3;\n}\n\n\/* mover created by JS *\/\n.fpgv2-mover{\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  will-change: transform;\n  transform: translate3d(0,0,0);\n}\n\n\/* \u2705 Keep ONLY control image border *\/\n.fpgv2-card{\n  margin:0;\n  border-radius: 12px;\n  overflow: hidden;\n  background:#fff;\n  border: 1px solid rgba(18,12,122,.14);\n  box-shadow: none;\n}\n\n\/* keep spacing + clean separation *\/\n.fpgv2-card img{\n  width:100%;\n  height:auto;\n  display:block;\n  padding: 10px;\n  background: #fff;\n  box-sizing: border-box;\n}\n\n\/* track spacing *\/\n.fpgv2-track{\n  display:flex;\n  flex-direction:column;\n  gap: 18px;\n  padding: 10px 5px; \/* no side padding so no outer border feel *\/\n}\n\n\/* ===== Responsive layout ===== *\/\n@media (max-width: 1024px){\n  .fpgv2-wrap{\n    grid-template-columns: 1fr;\n    gap: 34px;\n    align-items: start;\n  }\n  .fpgv2-title{ font-size: 34px; }\n  .fpgv2-col{ height: 460px; }\n}\n@media (max-width: 768px){\n    .fpgv2-cols{\n        gap: 4px;\n    }\n}\n\/* Reduced motion *\/\n@media (prefers-reduced-motion: reduce){\n  .fpgv2-mover{ transform: none !important; }\n}\n<\/style>\n\n\n\n<script>\n(function(){\n  const section = document.querySelector('.fpgv2');\n  if(!section) return;\n\n  const cols = Array.from(section.querySelectorAll('.fpgv2-col'));\n  const SPEED = 12; \/\/ px\/sec\n\n  \/\/ Build mover (track + clone)\n  cols.forEach(col=>{\n    const viewport = col.querySelector('.fpgv2-viewport');\n    const track = col.querySelector('.fpgv2-track');\n    if(!viewport || !track) return;\n\n    if(viewport.querySelector('.fpgv2-mover')) return;\n\n    const clone = track.cloneNode(true);\n    clone.setAttribute('aria-hidden','true');\n\n    const mover = document.createElement('div');\n    mover.className = 'fpgv2-mover';\n    mover.appendChild(track);\n    mover.appendChild(clone);\n\n    viewport.innerHTML = '';\n    viewport.appendChild(mover);\n\n    col._mover = mover;\n    col._dir = (col.getAttribute('data-dir') || 'up').toLowerCase();\n    col._half = 0;\n    col._y = 0;\n  });\n\n  \/\/ Wait images load\n  function waitImages(){\n    const imgs = Array.from(section.querySelectorAll('img'));\n    const pending = imgs.filter(img => !img.complete);\n    if(pending.length === 0) return Promise.resolve();\n    return new Promise(resolve=>{\n      let left = pending.length;\n      const done = ()=>{ left--; if(left<=0) resolve(); };\n      pending.forEach(img=>{\n        img.addEventListener('load', done, { once:true });\n        img.addEventListener('error', done, { once:true });\n      });\n      setTimeout(resolve, 1200);\n    });\n  }\n\n  function measure(){\n    cols.forEach(col=>{\n      if(!col._mover) return;\n      const firstTrack = col._mover.children[0];\n      col._half = firstTrack ? firstTrack.getBoundingClientRect().height : 0;\n      col._y = 0;\n    });\n  }\n\n  \/\/ Animate only when in view\n  section._active = true;\n  const io = new IntersectionObserver((entries)=>{\n    entries.forEach(e=>{\n      if(e.target === section) section._active = e.isIntersecting;\n    });\n  }, { rootMargin: '-35% 0px -35% 0px', threshold: 0.01 });\n  io.observe(section);\n\n  let last = performance.now();\n\n  function tick(now){\n    const dt = Math.min(0.028, (now - last) \/ 1000);\n    last = now;\n\n    if(section._active && !matchMedia('(prefers-reduced-motion: reduce)').matches){\n      cols.forEach(col=>{\n        if(!col._mover || !col._half) return;\n\n        col._y = (col._y + SPEED * dt) % col._half;\n\n        if(col._dir === 'down'){\n          const ty = -(col._half - col._y);\n          col._mover.style.transform = `translate3d(0,${ty}px,0)`;\n        }else{\n          const ty = -col._y;\n          col._mover.style.transform = `translate3d(0,${ty}px,0)`;\n        }\n      });\n    }\n\n    requestAnimationFrame(tick);\n  }\n\n  (async function init(){\n    await waitImages();\n    measure();\n    window.addEventListener('resize', measure);\n    requestAnimationFrame(tick);\n  })();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b21519c e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"b21519c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-ba89c77 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"ba89c77\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f15f38 elementor-widget elementor-widget-html\" data-id=\"6f15f38\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FLEXI POST GRID - Sticky Scroll Story (6 Slides | NO BLANK | Exit+Enter Together) -->\r\n<section class=\"fpg-story6\" id=\"fpg-story6\">\r\n  <div class=\"fpg-story6__sticky\">\r\n    <div class=\"fpg-story6__stage\">\r\n\r\n      <!-- Slide 1 -->\r\n      <article class=\"fpg6-panel\" data-i=\"0\" aria-hidden=\"false\">\r\n        <div class=\"fpg6-grid\">\r\n          <div class=\"fpg6-media\">\r\n            <img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Flexi-Post-Grid-Animation.png\"\r\n                 alt=\"Interactive Image Animations with Full Control\" loading=\"lazy\">\r\n          <\/div>\r\n          <div class=\"fpg6-content\">\r\n            <h2>Interactive Image Animations with Full Control<\/h2>\r\n            <p>\r\n              Flexi Post Grid includes powerful image animation effects that make your grid layouts more interactive and visually engaging. You can apply modern hover animations like Zoom In, Zoom Out, Slide Up, Slide Down, Slide Left, and Slide Right to create dynamic content presentation.\r\n            <\/p>  \r\n            <p>  \r\n              Each animation comes with flexible controls, allowing you to adjust animation distance and duration for smooth transitions. These settings help you fine-tune the visual experience and add a professional touch to your grid layouts without writing any custom code.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Slide 2 -->\r\n      <article class=\"fpg6-panel\" data-i=\"1\" aria-hidden=\"true\">\r\n        <div class=\"fpg6-grid\">\r\n          <div class=\"fpg6-media\">\r\n            <img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Flexi-Post-Grid-News-Grid.png\"\r\n                 alt=\"Multiple Layouts for Modern News and Blog Grids\" loading=\"lazy\">\r\n          <\/div>\r\n          <div class=\"fpg6-content\">\r\n            <h2>Multiple Layouts for Modern News &amp; Blog Grids<\/h2>\r\n            <p>\r\n              Flexi Post Grid offers multiple layout styles designed for modern blogs, news websites, and content-rich platforms. You can choose from different grid structures, including magazine-style layouts, list views, and featured post designs that highlight important content.\r\n            <\/p>\r\n            <p>\r\n              Each layout is fully responsive and customizable, allowing you to control thumbnail positions, typography, spacing, and button styles. These flexible layout options help you present articles, news, or blog posts in a clean and engaging way, making it easier for visitors to browse and discover your content.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Slide 3 -->\r\n      <article class=\"fpg6-panel\" data-i=\"2\" aria-hidden=\"true\">\r\n        <div class=\"fpg6-grid\">\r\n          <div class=\"fpg6-media\">\r\n            <img decoding=\"async\" src=\"\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Custom-Field.png\"\r\n                 alt=\"Display Custom Fields Without Writing Code\" loading=\"lazy\">\r\n          <\/div>\r\n          <div class=\"fpg6-content\">\r\n            <h2>Display Custom Fields Without Writing Code<\/h2>\r\n            <p>\r\n              Flexi Post Grid allows you to display dynamic custom field data inside your grid layouts without writing any code. You can easily add fields such as designation, contact details, pricing, location, or any custom information by simply entering the field key and label.\r\n            <\/p>\r\n            <p>\r\n              This feature makes it easy to create advanced grids for team members, real estate listings, business directories, or product details. Flexi Post Grid automatically pulls and displays the custom field data, helping you build rich and informative layouts directly inside Elementor.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Slide 4 -->\r\n      <article class=\"fpg6-panel\" data-i=\"3\" aria-hidden=\"true\">\r\n        <div class=\"fpg6-grid\">\r\n          <div class=\"fpg6-media\">\r\n            <img decoding=\"async\" src=\"\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Flexi-Post-Grid-Product-Grid.png\"\r\n                 alt=\"Fully Customizable WooCommerce Product Grid Layout\" loading=\"lazy\">\r\n          <\/div>\r\n          <div class=\"fpg6-content\">\r\n            <h2>Fully Customizable WooCommerce Product Grid Layout<\/h2>\r\n            <p>\r\n              Flexi Post Grid allows you to create fully customizable WooCommerce product grids directly inside Elementor. You can control important product elements such as ratings, price, color swatches, wishlist icons, and action buttons. The plugin also lets you easily change button text and icons to match your store\u2019s design and branding.\r\n            <\/p>\r\n            <p>\r\n              You can further customize grid colors, button styles, and overall layout appearance to create a modern and visually consistent product display. These flexible design controls help improve the shopping experience, making it easier for visitors to browse products and discover items quickly on your website.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Slide 5 -->\r\n      <article class=\"fpg6-panel\" data-i=\"4\" aria-hidden=\"true\">\r\n        <div class=\"fpg6-grid\">\r\n          <div class=\"fpg6-media\">\r\n            <img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Pagination-and-Filter.png\"\r\n                 alt=\"Advanced AJAX Pagination and Category Filter Controls\" loading=\"lazy\">\r\n          <\/div>\r\n          <div class=\"fpg6-content\">\r\n            <h2>Advanced AJAX Pagination and Category Filter Controls<\/h2>\r\n            <p>\r\n              Flexi Post Grid includes advanced AJAX pagination and category filtering to help visitors browse content quickly and smoothly. You can choose between classic numbered pagination, a Load More button, or infinite scroll to control how posts or products appear on the page.\r\n            <\/p>\r\n            <p>\r\n              Users can also filter content by categories without refreshing the page, creating a fast and seamless browsing experience. These dynamic controls keep your grid modern and interactive while making it easier for visitors to explore and discover relevant content on your website.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Slide 6 -->\r\n      <article class=\"fpg6-panel\" data-i=\"5\" aria-hidden=\"true\">\r\n        <div class=\"fpg6-grid\">\r\n          <div class=\"fpg6-media\">\r\n            <img decoding=\"async\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Flexi-Post-Grid-Slider.png\"\r\n                 alt=\"Responsive Grid Slider with Full Navigation Control\" loading=\"lazy\">\r\n          <\/div>\r\n          <div class=\"fpg6-content\">\r\n            <h2>Responsive Grid Slider with Full Navigation Control<\/h2>\r\n            <p>\r\n              Flexi Post Grid allows you to convert any grid layout into a responsive slider with powerful navigation controls. With a simple slider option, you can enable autoplay, arrow navigation, dot pagination, and adjust slider speed for smooth content transitions.\r\n            <\/p>\r\n            <p>\r\n              The slider also supports responsive column settings, letting you control how many items appear on desktop, tablet, and mobile screens. This flexible carousel layout helps showcase posts or products in a modern, space-saving design while keeping the browsing experience smooth and engaging.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Dots -->\r\n      <div class=\"fpg6-dots\" aria-hidden=\"true\">\r\n        <span class=\"fpg6-dot\"><\/span>\r\n        <span class=\"fpg6-dot\"><\/span>\r\n        <span class=\"fpg6-dot\"><\/span>\r\n        <span class=\"fpg6-dot\"><\/span>\r\n        <span class=\"fpg6-dot\"><\/span>\r\n        <span class=\"fpg6-dot\"><\/span>\r\n      <\/div>\r\n\r\n      <!-- Background -->\r\n      <div class=\"fpg6-bg\" aria-hidden=\"true\"><\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .fpg-story6{\r\n    --vh: 100vh;\r\n    --slides: 6;\r\n    --holdFactor: 1.55;\r\n    position: relative;\r\n    height: calc(var(--slides) * var(--holdFactor) * var(--vh));\r\n    background:#fff;\r\n  }\r\n\r\n  .fpg-story6__sticky{\r\n    position: sticky;\r\n    top: 0;\r\n    height: var(--vh);\r\n    overflow: hidden;\r\n  }\r\n\r\n  .fpg-story6__stage{\r\n    position: relative;\r\n    height: 100%;\r\n    display: grid;\r\n    place-items: center;\r\n    padding-top: 50px;\r\n    padding-bottom: 50px;\r\n  }\r\n\r\n  .fpg6-bg{\r\n    position:absolute;\r\n    inset:0;\r\n    background:\r\n      radial-gradient(circle at 18% 35%, rgba(175,14,157,.14), transparent 55%),\r\n      radial-gradient(circle at 78% 45%, rgba(18,12,122,.12), transparent 60%),\r\n      linear-gradient(90deg, rgba(255,255,255,0), rgba(245,242,255,.55));\r\n    pointer-events:none;\r\n  }\r\n\r\n  .fpg6-bg::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:-40px;\r\n    background-image:\r\n      linear-gradient(rgba(175,14,157,.10) 1px, transparent 1px),\r\n      linear-gradient(90deg, rgba(175,14,157,.10) 1px, transparent 1px);\r\n    background-size: 64px 64px;\r\n    opacity: .3;\r\n  }\r\n\r\n  .fpg6-panel{\r\n    position:absolute;\r\n    inset:0;\r\n    display:grid;\r\n    place-items:center;\r\n    pointer-events:none;\r\n    opacity:0;\r\n    will-change: opacity, transform;\r\n    z-index:1;\r\n  }\r\n\r\n  .fpg6-panel.is-on{ opacity:1; }\r\n  .fpg6-panel.is-focus{ pointer-events:auto; }\r\n\r\n  .fpg6-grid{\r\n    width: min(1280px, 92vw);\r\n    max-height: calc(100vh - 100px);\r\n    display:grid;\r\n    grid-template-columns: 1.25fr 1fr;\r\n    gap: clamp(18px, 3vw, 60px);\r\n    align-items:center;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .fpg6-media{\r\n    border-radius:18px;\r\n    overflow:hidden;\r\n    transform: translateY(var(--imgY, 0vh));\r\n    will-change: transform, opacity;\r\n  }\r\n\r\n  .fpg6-media img{\r\n    width:100%;\r\n    height:auto;\r\n    display:block;\r\n  }\r\n\r\n  .fpg6-content{\r\n    transform: translateY(var(--txtY, 0vh));\r\n    will-change: transform, opacity;\r\n  }\r\n\r\n  .fpg6-content h2{\r\n    margin:0 0 14px;\r\n    font-size: clamp(28px, 3.2vw, 42px);\r\n    line-height:1.2;\r\n    letter-spacing:-0.02em;\r\n    color:#15123a;\r\n  }\r\n\r\n  .fpg6-content p{\r\n    margin:0 0 14px;\r\n    font-size: clamp(14px, 1.25vw, 16px);\r\n    line-height:1.75;\r\n    color: rgba(21,18,58,.78);\r\n  }\r\n\r\n  .fpg6-content p:last-child{\r\n    margin-bottom:0;\r\n  }\r\n\r\n  .fpg6-dots{\r\n    position:absolute;\r\n    right:18px;\r\n    bottom:18px;\r\n    display:flex;\r\n    gap:8px;\r\n    padding:10px 12px;\r\n    border-radius:999px;\r\n    background: rgba(255,255,255,.80);\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(18,12,122,.10);\r\n    box-shadow: 0 10px 24px rgba(0,0,0,.08);\r\n    z-index:5;\r\n  }\r\n\r\n  .fpg6-dot{\r\n    width:8px;\r\n    height:8px;\r\n    border-radius:999px;\r\n    background: rgba(18,12,122,.25);\r\n  }\r\n\r\n  .fpg6-dot.is-on{\r\n    background: linear-gradient(90deg,#AF0E9D,#120C7A);\r\n  }\r\n\r\n  @media (max-width: 980px){\r\n    .fpg6-grid{\r\n      grid-template-columns:1fr;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 1024px){\r\n    .fpg-story6{\r\n      height:auto !important;\r\n      overflow:visible !important;\r\n    }\r\n\r\n    .fpg-story6__sticky{\r\n      position:relative !important;\r\n      top:auto !important;\r\n      height:auto !important;\r\n      overflow:visible !important;\r\n    }\r\n\r\n    .fpg-story6__stage{\r\n      height:auto !important;\r\n      display:block !important;\r\n      place-items:unset !important;\r\n      padding-top:50px !important;\r\n      padding-bottom:50px !important;\r\n    }\r\n\r\n    .fpg6-panel{\r\n      position:relative !important;\r\n      inset:auto !important;\r\n      opacity:1 !important;\r\n      pointer-events:auto !important;\r\n      will-change:auto !important;\r\n      margin:0 0 60px 0 !important;\r\n    }\r\n\r\n    .fpg6-grid{\r\n      max-height:none !important;\r\n    }\r\n\r\n    .fpg6-media,\r\n    .fpg6-content{\r\n      transform:none !important;\r\n      will-change:auto !important;\r\n    }\r\n\r\n    .fpg6-dots{\r\n      display:none !important;\r\n    }\r\n\r\n    .fpg6-bg::before{\r\n      inset:0;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const root = document.getElementById('fpg-story6');\r\n  if(!root) return;\r\n\r\n  const panels = Array.from(root.querySelectorAll('.fpg6-panel'));\r\n  const dots   = Array.from(root.querySelectorAll('.fpg6-dot'));\r\n\r\n  const clamp  = (n, min, max) => Math.max(min, Math.min(max, n));\r\n  const smooth = (x) => x * x * (3 - 2 * x);\r\n  const DIST   = 110;\r\n\r\n  const HOLD_W  = 1.00;\r\n  const TRANS_W = 0.65;\r\n\r\n  const mql = window.matchMedia('(max-width: 1024px)');\r\n\r\n  let ticking = false;\r\n  let enabled = false;\r\n\r\n  function setPanel(i, alpha, imgY, txtY){\r\n    const p = panels[i];\r\n    if(!p) return;\r\n    p.style.opacity = String(alpha);\r\n    p.style.setProperty('--imgY', imgY + 'vh');\r\n    p.style.setProperty('--txtY', txtY + 'vh');\r\n  }\r\n\r\n  function setDots(active){\r\n    dots.forEach((d, di) => d.classList.toggle('is-on', di === active));\r\n  }\r\n\r\n  function resetInline(){\r\n    panels.forEach((p) => {\r\n      p.style.removeProperty('opacity');\r\n      p.style.removeProperty('--imgY');\r\n      p.style.removeProperty('--txtY');\r\n    });\r\n    dots.forEach((d) => d.classList.remove('is-on'));\r\n  }\r\n\r\n  function update(){\r\n    if(mql.matches) return;\r\n\r\n    const rect = root.getBoundingClientRect();\r\n    const vh = window.innerHeight || document.documentElement.clientHeight;\r\n    const storyHeight = root.offsetHeight;\r\n    const scrollable = Math.max(1, storyHeight - vh);\r\n\r\n    const progressed = clamp(-rect.top, 0, scrollable);\r\n    const t = progressed \/ scrollable;\r\n\r\n    const totalSlides = panels.length;\r\n    const totalWeight = totalSlides * HOLD_W + (totalSlides - 1) * TRANS_W;\r\n    const tw = t * totalWeight;\r\n\r\n    for(let k = 0; k < totalSlides; k++){\r\n      setPanel(k, 0, -DIST, DIST);\r\n    }\r\n\r\n    let cursor = 0;\r\n\r\n    for(let i = 0; i < totalSlides; i++){\r\n\r\n      if(tw <= cursor + HOLD_W){\r\n        setPanel(i, 1, 0, 0);\r\n        setDots(i);\r\n        return;\r\n      }\r\n      cursor += HOLD_W;\r\n\r\n      if(i < totalSlides - 1 && tw <= cursor + TRANS_W){\r\n        const local = (tw - cursor) \/ TRANS_W;\r\n        const x = smooth(local);\r\n\r\n        setPanel(i, 1 - x, x * DIST, -x * DIST);\r\n        setPanel(i + 1, x, (1 - x) * -DIST, (1 - x) * DIST);\r\n        setDots(x > 0.5 ? i + 1 : i);\r\n        return;\r\n      }\r\n\r\n      if(i < totalSlides - 1){\r\n        cursor += TRANS_W;\r\n      }\r\n    }\r\n\r\n    setPanel(totalSlides - 1, 1, 0, 0);\r\n    setDots(totalSlides - 1);\r\n  }\r\n\r\n  function onScroll(){\r\n    if(!enabled) return;\r\n    if(ticking) return;\r\n\r\n    ticking = true;\r\n    requestAnimationFrame(() => {\r\n      ticking = false;\r\n      update();\r\n    });\r\n  }\r\n\r\n  function enable(){\r\n    if(enabled) return;\r\n    enabled = true;\r\n    window.addEventListener('scroll', onScroll, { passive: true });\r\n    update();\r\n  }\r\n\r\n  function disable(){\r\n    if(!enabled) return;\r\n    enabled = false;\r\n    window.removeEventListener('scroll', onScroll, { passive: true });\r\n    resetInline();\r\n  }\r\n\r\n  function syncMode(){\r\n    if(mql.matches){\r\n      disable();\r\n    }else{\r\n      enable();\r\n    }\r\n  }\r\n\r\n  syncMode();\r\n\r\n  if (mql.addEventListener) {\r\n    mql.addEventListener('change', syncMode);\r\n  } else {\r\n    window.addEventListener('resize', syncMode);\r\n  }\r\n\r\n  window.addEventListener('resize', () => {\r\n    if(!mql.matches) update();\r\n  }, { passive: true });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c06ac07 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"c06ac07\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af7de43 elementor-widget elementor-widget-heading\" data-id=\"af7de43\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Frequently Asked Questions (FAQs)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ed8d9c5 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"ed8d9c5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9df076 wpr-advanced-accordion-icon-no-box elementor-widget__width-inherit elementor-widget elementor-widget-wpr-advanced-accordion\" data-id=\"a9df076\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;active_item&quot;:0}\" data-widget_type=\"wpr-advanced-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n            <div class=\"wpr-advanced-accordion\" data-accordion-type=\"accordion\" data-active-index=\"0\" data-accordion-trigger=\"click\" data-interaction-speed=\"0.4\">\n\n\t\t\t\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Which page builders does Flexi Post Grid support?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Flexi Post Grid is built specifically for Elementor, including both the Free and Pro versions. It integrates seamlessly with the Elementor interface and follows its native control structure, so you can design and customize your grids visually without writing any code.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Does it support AJAX filter and pagination?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. Flexi Post Grid includes <strong data-start=\"743\" data-end=\"776\">powerful AJAX loading options<\/strong> such as category filters, Load More button, Infinite Scroll and classic pagination. These features load content without refreshing the page, providing a faster browsing experience and improving user engagement.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Does it work with Custom Post Types (CPT) and custom fields?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Absolutely. The plugin fully supports <strong data-start=\"1101\" data-end=\"1122\">Custom Post Types<\/strong> and allows you to display <strong data-start=\"1149\" data-end=\"1190\">custom fields created with any plugin<\/strong>. This makes it ideal for events, portfolios, WooCommerce products, directories, real estate listings and other dynamic content websites.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Is the post grid optimized for SEO and performance?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. Flexi Post Grid is built with <strong data-start=\"1429\" data-end=\"1471\">clean, lightweight and semantic markup<\/strong> to ensure fast loading and better search engine visibility. AJAX loading is optimized for performance, and the responsive structure ensures excellent Core Web Vitals across all devices.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Can I create WooCommerce product grids?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. You can design <strong data-start=\"1732\" data-end=\"1778\">fully customized WooCommerce product grids<\/strong> with price, rating, variation swatches, hover image and add-to-cart functionality. It helps you showcase products in a modern layout that improves conversions and user experience.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Does it support slider or carousel layouts?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. Any grid can be converted into a <strong data-start=\"2055\" data-end=\"2094\">fully responsive slider or carousel<\/strong>. You get complete control over slides per view, autoplay, navigation arrows, dots, speed and spacing to create interactive and compact content sections.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Can I control the layout for mobile and tablet devices?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. Flexi Post Grid provides <strong data-start=\"2348\" data-end=\"2418\">separate column and layout controls for desktop, tablet and mobile<\/strong>. This ensures your grid looks perfectly structured and readable on every screen size.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Can I reorder the elements inside the grid item?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. You can <strong data-start=\"2581\" data-end=\"2663\">set the display order for thumbnail, meta, title, excerpt and read-more button<\/strong> using simple order controls. This allows you to create multiple layout variations without changing the preset design.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Does it support category filtering?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. You can enable an <strong data-start=\"2855\" data-end=\"2887\">AJAX-powered category filter<\/strong> that allows users to instantly sort and view content without page reload. This is especially useful for large blogs, portfolios and product catalogs.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Is coding knowledge required to use the plugin?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>No. Flexi Post Grid is designed with a <strong data-start=\"3139\" data-end=\"3191\">fully visual, no-code interface inside Elementor<\/strong>. All layout, styling and functionality settings can be controlled using intuitive options.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Will it slow down my website?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>No. The plugin is <strong data-start=\"3345\" data-end=\"3405\">performance-optimized and loads only the required assets<\/strong>. AJAX loading reduces server requests and improves page speed, ensuring smooth performance even with large content grids.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Can I use multiple grids on the same page?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. You can create and display <strong data-start=\"3891\" data-end=\"3953\">multiple grids with different layouts, queries and filters<\/strong> on the same page without conflicts.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Do you provide regular updates?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. The plugin is actively maintained with <strong data-start=\"4248\" data-end=\"4316\">new features, performance improvements and compatibility updates<\/strong> for the latest versions of WordPress, Elementor and WooCommerce.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                \n\t\t\t\t\t<div class=\"wpr-accordion-item-wrap\">\n\t\t\t\t\t\t<button class=\"wpr-acc-button\">\n\t\t\t\t\t\t\t<span class=\"wpr-acc-item-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-close\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\t<span class=\"wpr-toggle-icon wpr-ti-open\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"wpr-acc-title-text\">Is there a money-back guarantee?<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"wpr-title-icon\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<div class=\"wpr-acc-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wpr-acc-panel-content\"><p>Yes. We offer a <strong data-start=\"3591\" data-end=\"3637\">100% risk-free 30-day money-back guarantee<\/strong>. If the plugin does not meet your expectations, you can request a full refund \u2014 no questions asked.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n\n                            <\/div>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b9edaef e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"b9edaef\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9c604d9 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"9c604d9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-cd718c5 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"cd718c5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2796c82 fpgrid-about-section elementor-widget elementor-widget-text-editor\" data-id=\"2796c82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<section class=\"fpgrid-info-section\">\n  <div class=\"fpgrid-info-content\">\n    <h2>\u2728 Build Stunning Grids with <span>Flexi Post Grid<\/span><\/h2>\n    <p>\n      <strong>Flexi Post Grid<\/strong> is a powerful \n      <strong>Elementor Post Grid Plugin<\/strong> for WordPress. \n      It helps you create modern blog grids, news layouts, and portfolios \n      with AJAX filters, pagination, and animations \u2014 all without writing a single line of code.\n    <\/p>\n\n    <div class=\"fpgrid-btn-group\">\n      <a href=\"https:\/\/creativewebui.com\/flexi-post-grid\/preset-grids\/\" class=\"fp-btn demo\">\ud83c\udf10 Live Demo<\/a>\n      <a href=\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/\" class=\"fp-btn docs\">\ud83d\udcd8 Documentation<\/a>\n      <a href=\"https:\/\/creativewebui.com\/flexi-post-grid\/pricing\/\" class=\"fp-btn pro\">\u2b50 Get Pro Version<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3031dcc elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"3031dcc\" data-element_type=\"container\" data-e-type=\"container\" id=\"demo2\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-811eb53 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"811eb53\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-95d1969 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"95d1969\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcefe27 elementor-widget elementor-widget-heading\" data-id=\"fcefe27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Elementor Post Grid Widget for WordPress \u2013 Flexi Post Grid<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a88fee3 elementor-widget elementor-widget-heading\" data-id=\"a88fee3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Build Beautiful AJAX Blog, News &amp; Product Grids in Elementor<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7fd2f22 elementor-widget elementor-widget-text-editor\" data-id=\"7fd2f22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<strong>Flexi Post Grid<\/strong> is a versatile and fully customizable <strong>Elementor Post Grid Widget<\/strong>, designed to transform your WordPress website with beautifully dynamic and responsive layouts. This <strong>AJAX-powered grid widget for Elementor<\/strong> lets you build a wide variety of layouts such as <strong>news grids, blog grids, portfolio showcases, property listings, event calendars, team member sections, and alternative box-style layouts<\/strong>. With Flexi Post Grid, you can create it all\u2014without writing a single line of code.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e53d76 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"1e53d76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#gridfetures\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-arrow-right\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Explore Widgets<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2fabb0c e-con-full laptop-view e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"2fabb0c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a43bf82 elementor-widget elementor-widget-image\" data-id=\"a43bf82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"941\" height=\"580\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Laptop1.png\" class=\"attachment-full size-full wp-image-1630\" alt=\"\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Laptop1.png 941w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Laptop1-300x185.png 300w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Laptop1-768x473.png 768w\" sizes=\"(max-width: 941px) 100vw, 941px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae793ac elementor-widget__width-initial elementor-widget elementor-widget-image-carousel\" data-id=\"ae793ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;effect&quot;:&quot;fade&quot;,&quot;navigation&quot;:&quot;none&quot;,&quot;autoplay_speed&quot;:4000,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Slide-02.png\" alt=\"Elementor Post Grid Widget\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Slide-06.png\" alt=\"Slide-06\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Slide-05.png\" alt=\"Slide-05\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Slide-04.png\" alt=\"Slide-04\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Slide-03.png\" alt=\"Slide-03\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"6 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Slide-01.png\" alt=\"Slide-01\" \/><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elementor Post Grid Widget \u2022 Fast \u2022 Flexible \u2022 Premium UI Build any Post Grid visually with Elementor Create News, Blog, Portfolio, Team, Event &#038; WooCommerce Product grids with 16+ preset layouts, AJAX filters, Load More &#038; Infinite Scroll \u2014 without coding. Get Flexi Post Grid Pro Watch Demo 16+Preset layouts AJAXFilter + Pagination WooProduct grids Works with Elementor WooCommerce ACF \/ Meta Any Post Type flexipostgrid.demo Infinite Scroll 16+Preset layouts AJAXFilter + Pagination WooProduct grids Product Demo How to Use Flexi Post Grid Plugin with Elementor Key Features Elementor Post Grid Widget by Flexi Post Grid Built for both beginners and developers, Flexi Post Grid offers complete design control with a wide range of layout types including full-width grids, list views, and classic grid views\u2014all equipped with deep styling options. Its seamless Elementor integration, fast AJAX performance, and multipurpose capabilities make it the ultimate Elementor Post Grid Widget for crafting interactive and engaging content grids. To make things even easier, Flexi Post Grid comes with 16 unique pre-designed grid styles. Simply select your preferred layout from the grid style options and customize it to match your brand and content goals\u2014saving you time while delivering stunning results. All Key Features 16 Pre-Designed Grid Styles Choose from 16 modern, professionally-designed grid templates to quickly get started with the Elementor Post Grid Widget. Grid List Blog Grid Blog Grid 2 Simple News Grid Simple News List View News Grid 2 News Grid 3 News Grid 4 News Grid 5 Alternativ Grid Full Width Alternativ Grid Portfolio Grid Event Grid Team Grid Product Grid View Our Preset Grid Styles Interactive Popup Features Powerful Quick View Popups for Better User Experience Showcase post details, event information, and WooCommerce product quick views in a clean interactive layout without sending users away from the page. 01 \u2014 Simple Post Popup AJAX-Powered Content Popup for Posts &#038; Custom Post Types Open detailed content instantly without redirecting users to another page. The Simple Post Popup loads content dynamically with AJAX, giving visitors a fast and smooth browsing experience for blogs, news sites, portfolios, and custom post type listings. Show title, image, excerpt or full content Control author, date, tags, comments and categories Supports ACF, custom fields and shortcode content Add custom action button or external link View Demo 02 \u2014 Event Popup Advanced Event Popup with Date Logic &#038; Action Support Display event details in a structured popup layout with support for start date, end date, expiry date, location, and action buttons. It is ideal for webinars, event listings, schedules, and other time-sensitive content. Display start date, end date, expiry date and location Hide expired events automatically Flexible short and full date formats Countdown timer and registration button support View Demo 03 \u2014 Product Popup WooCommerce Quick View Popup with Full Product Interaction Let shoppers explore products directly inside the grid with price, rating, SKU, stock status, variations, quantity, wishlist, and buy options. It helps users browse faster and improves shopping flow without opening a separate product page. Title, price, rating, SKU, stock and description Regular and sale price support Color and size variation selection Quantity, wishlist, add to cart and buy now support View Demo Ultimate Grid Customization \u2014 No Code Needed in the Elementor Post Grid Widget Flexi Post Grid empowers you with a wide range of intuitive customization options, all within a user-friendly interface. From content filtering and pagination to advanced image styling, meta settings, and button controls \u2014 every element of your grid is fully configurable. Easily adjust image size, alignment, spacing, hover effects, and more without writing a single line of CSS. Whether you\u2019re showcasing blog posts, team members, or featured items, Flexi Post Grid lets you build unique and professional grids in minutes \u2014 all through simple visual controls. Everything you need to create stunning layouts is built right into this Elementor Post Grid Widget, giving you complete design freedom without any technical complexity. Interactive Image Animations with Full Control Flexi Post Grid includes powerful image animation effects that make your grid layouts more interactive and visually engaging. You can apply modern hover animations like Zoom In, Zoom Out, Slide Up, Slide Down, Slide Left, and Slide Right to create dynamic content presentation. Each animation comes with flexible controls, allowing you to adjust animation distance and duration for smooth transitions. These settings help you fine-tune the visual experience and add a professional touch to your grid layouts without writing any custom code. Multiple Layouts for Modern News &amp; Blog Grids Flexi Post Grid offers multiple layout styles designed for modern blogs, news websites, and content-rich platforms. You can choose from different grid structures, including magazine-style layouts, list views, and featured post designs that highlight important content. Each layout is fully responsive and customizable, allowing you to control thumbnail positions, typography, spacing, and button styles. These flexible layout options help you present articles, news, or blog posts in a clean and engaging way, making it easier for visitors to browse and discover your content. Display Custom Fields Without Writing Code Flexi Post Grid allows you to display dynamic custom field data inside your grid layouts without writing any code. You can easily add fields such as designation, contact details, pricing, location, or any custom information by simply entering the field key and label. This feature makes it easy to create advanced grids for team members, real estate listings, business directories, or product details. Flexi Post Grid automatically pulls and displays the custom field data, helping you build rich and informative layouts directly inside Elementor. Fully Customizable WooCommerce Product Grid Layout Flexi Post Grid allows you to create fully customizable WooCommerce product grids directly inside Elementor. You can control important product elements such as ratings, price, color swatches, wishlist icons, and action buttons. The plugin also lets you easily change button text and icons to match your store\u2019s design and branding. You can further customize grid colors, button styles, and overall layout appearance to create a modern and visually consistent product display. These<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elementor Post Grid Widget for WordPress - Flexi Post Grid<\/title>\n<meta name=\"description\" content=\"Flexi Post Grid is the ultimate Elementor Post Grid Widget for WordPress. Create customizable grids with AJAX filters, pagination, and pre-designed styles for blogs, News, and more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativewebui.com\/flexi-post-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor Post Grid Widget for WordPress - Flexi Post Grid\" \/>\n<meta property=\"og:description\" content=\"Flexi Post Grid is the ultimate Elementor Post Grid Widget for WordPress. Create customizable grids with AJAX filters, pagination, and pre-designed styles for blogs, News, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-02T04:14:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/\",\"url\":\"https:\/\/creativewebui.com\/flexi-post-grid\/\",\"name\":\"Elementor Post Grid Widget for WordPress - Flexi Post Grid\",\"isPartOf\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png\",\"datePublished\":\"2025-04-26T15:20:38+00:00\",\"dateModified\":\"2026-05-02T04:14:28+00:00\",\"description\":\"Flexi Post Grid is the ultimate Elementor Post Grid Widget for WordPress. Create customizable grids with AJAX filters, pagination, and pre-designed styles for blogs, News, and more.\",\"breadcrumb\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creativewebui.com\/flexi-post-grid\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/#primaryimage\",\"url\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png\",\"contentUrl\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png\",\"width\":350,\"height\":350},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creativewebui.com\/flexi-post-grid\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/\",\"name\":\"Flexi Post Grid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Post Grid Widget for WordPress - Flexi Post Grid","description":"Flexi Post Grid is the ultimate Elementor Post Grid Widget for WordPress. Create customizable grids with AJAX filters, pagination, and pre-designed styles for blogs, News, and more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativewebui.com\/flexi-post-grid\/","og_locale":"en_US","og_type":"article","og_title":"Elementor Post Grid Widget for WordPress - Flexi Post Grid","og_description":"Flexi Post Grid is the ultimate Elementor Post Grid Widget for WordPress. Create customizable grids with AJAX filters, pagination, and pre-designed styles for blogs, News, and more.","og_url":"https:\/\/creativewebui.com\/flexi-post-grid\/","og_site_name":"Flexi Post Grid","article_modified_time":"2026-05-02T04:14:28+00:00","og_image":[{"url":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/","url":"https:\/\/creativewebui.com\/flexi-post-grid\/","name":"Elementor Post Grid Widget for WordPress - Flexi Post Grid","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/#primaryimage"},"image":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png","datePublished":"2025-04-26T15:20:38+00:00","dateModified":"2026-05-02T04:14:28+00:00","description":"Flexi Post Grid is the ultimate Elementor Post Grid Widget for WordPress. Create customizable grids with AJAX filters, pagination, and pre-designed styles for blogs, News, and more.","breadcrumb":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativewebui.com\/flexi-post-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/#primaryimage","url":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png","contentUrl":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/07\/Grid.png","width":350,"height":350},{"@type":"BreadcrumbList","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativewebui.com\/flexi-post-grid\/"},{"@type":"ListItem","position":2,"name":"home"}]},{"@type":"WebSite","@id":"https:\/\/flexipostgrid.creativewebui.com\/#website","url":"https:\/\/flexipostgrid.creativewebui.com\/","name":"Flexi Post Grid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":1540,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":7877,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/pages\/7\/revisions\/7877"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}