{"id":31,"date":"2026-10-25T12:04:05","date_gmt":"2026-10-25T12:04:05","guid":{"rendered":"http:\/\/localhost\/aistheticpro%20theme\/index.php\/widgets\/"},"modified":"2026-10-25T12:04:05","modified_gmt":"2026-10-25T12:04:05","slug":"widgets","status":"publish","type":"page","link":"https:\/\/msoulpro.com\/aisthetic\/widgets\/","title":{"rendered":"Widgets Showcase"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"31\" class=\"elementor elementor-31\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-sec_wid_hero elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"sec_wid_hero\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-col_wid_hero\" data-id=\"col_wid_hero\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-w_wid_dh elementor-widget elementor-widget-aisthetic_dual_heading\" data-id=\"w_wid_dh\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"aisthetic_dual_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"aisthetic-widget-wrapper aisth-dual-heading-wrap aisth-style-gradient aisth-mode-inline\">\n\t\t\t\n\t\t\t\t\t\t\t<div class=\"aisth-heading-pretitle-wrap\">\n\t\t\t\t\t<span class=\"aisth-heading-pretitle\">42 NATIVE ELEMENTOR WIDGETS<\/span>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<h1 class=\"aisth-dual-heading-title\">\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"aisth-heading-primary\">All Your Essential Widgets.<\/span>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"aisth-heading-highlight\">Zero Bloat.<\/span>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t<\/h1>\n\n\t\t\t\t\t\t\t<p class=\"aisth-heading-description\">Built directly on Elementor native Widget Base with modular script loaders that only enqueue CSS\/JS on pages where the widget is actively used.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-sec_body_31 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"sec_body_31\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-col_body_31\" data-id=\"col_body_31\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-w_html_31 elementor-widget elementor-widget-html\" data-id=\"w_html_31\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"msoul-page msoul-widgets\" style=\"max-width: 1240px; margin: 0 auto; padding: 20px 20px 80px;\">\n\n    <!-- Architecture Superiority Banner -->\n    <div class=\"msoul-card\" style=\"margin-bottom: 40px; border-color: var(--msoul-primary); background: radial-gradient(circle at 100% 0%, rgba(46, 180, 255, 0.15), transparent 70%), var(--msoul-surface); padding: 28px;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;\">\n            <div style=\"max-width: 750px;\">\n                <span class=\"msoul-tier-badge msoul-tier-annual\">0 jQuery &bull; Native Elementor Base<\/span>\n                <h2 style=\"font-size: 1.6rem; margin: 12px 0 8px;\">Why Aisthetic Native Widgets Outperform 3rd-Party Addon Packs<\/h2>\n                <p style=\"margin: 0; color: var(--msoul-muted); font-size: 0.95rem; line-height: 1.6;\">\n                    Popular addon packs like Essential Addons or Ultimate Addons force your site to load 1.2MB+ of bloated jQuery libraries on every single page. Aisthetic Pro widgets are built directly into Elementor's native Widget Base with modular script loaders that only enqueue CSS\/JS on pages where the widget is actively used.\n                <\/p>\n            <\/div>\n            <div style=\"display: flex; flex-direction: column; gap: 10px; background: #070B1A; border: 1px solid var(--msoul-border); padding: 18px 24px; border-radius: 10px; text-align: center;\">\n                <div style=\"font-size: 2rem; font-weight: 800; color: var(--msoul-green);\">0 KB<\/div>\n                <div style=\"font-size: 0.8rem; color: var(--msoul-muted);\">Dormant Widget CSS\/JS Overhead<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Live Category Filter & Search Bar -->\n    <div style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 36px;\">\n        <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\" id=\"msoulWidgetTabs\">\n            <button class=\"msoul-widget-filter-btn active\" data-cat=\"all\" style=\"background: var(--msoul-primary); color: #FFF; border: none; padding: 10px 20px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: all 0.2s;\">All 47 Widgets<\/button>\n            <button class=\"msoul-widget-filter-btn\" data-cat=\"hero\" style=\"background: rgba(255,255,255,0.06); color: var(--msoul-text); border: 1px solid var(--msoul-border); padding: 10px 20px; border-radius: 999px; font-weight: 600; cursor: pointer; transition: all 0.2s;\">\u26a1 Hero & Conversion (10)<\/button>\n            <button class=\"msoul-widget-filter-btn\" data-cat=\"creative\" style=\"background: rgba(255,255,255,0.06); color: var(--msoul-text); border: 1px solid var(--msoul-border); padding: 10px 20px; border-radius: 999px; font-weight: 600; cursor: pointer; transition: all 0.2s;\">\ud83c\udfa8 Creative FX & Interactive (8)<\/button>\n            <button class=\"msoul-widget-filter-btn\" data-cat=\"commercial\" style=\"background: rgba(255,255,255,0.06); color: var(--msoul-text); border: 1px solid var(--msoul-border); padding: 10px 20px; border-radius: 999px; font-weight: 600; cursor: pointer; transition: all 0.2s;\">\ud83d\udcca Business & Commercial (8)<\/button>\n            <button class=\"msoul-widget-filter-btn\" data-cat=\"woo\" style=\"background: rgba(255,255,255,0.06); color: var(--msoul-text); border: 1px solid var(--msoul-border); padding: 10px 20px; border-radius: 999px; font-weight: 600; cursor: pointer; transition: all 0.2s;\">\ud83d\udecd\ufe0f WooCommerce Native (8)<\/button>\n            <button class=\"msoul-widget-filter-btn\" data-cat=\"content\" style=\"background: rgba(255,255,255,0.06); color: var(--msoul-text); border: 1px solid var(--msoul-border); padding: 10px 20px; border-radius: 999px; font-weight: 600; cursor: pointer; transition: all 0.2s;\">\ud83d\udcd1 Content & Display (8)<\/button>\n        <\/div>\n        <div style=\"min-width: 260px;\">\n            <input type=\"text\" id=\"msoulWidgetSearch\" placeholder=\"Search 42 widgets...\" style=\"width: 100%; box-sizing: border-box; background: #070B1A; border: 1px solid var(--msoul-border); border-radius: 999px; padding: 10px 20px; color: #FFF; font-size: 0.9rem; outline: none;\">\n        <\/div>\n    <\/div>\n\n    <!-- 47 Widgets Rich Interactive Grid -->\n    <div id=\"msoulWidgetGrid\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;\">\n\n        <!-- 1. Dual Color Heading -->\n        <div class=\"msoul-card msoul-widget-item\" data-cat=\"hero\" style=\"display: flex; flex-direction: column; justify-content: space-between;\">\n            <div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <span class=\"msoul-tier-badge msoul-tier-free\">Core Included<\/span>\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-cyan); font-family: monospace;\">aisthetic_dual_heading<\/span>\n                <\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px;\">Dual Color Heading<\/h3>\n                <p style=\"color: var(--msoul-muted); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5;\">Split gradient typography with eyebrow prefix, secondary highlight color, and independent typography controls for high-converting hero headlines.<\/p>\n                <div style=\"background: #070B1A; border: 1px dashed var(--msoul-border); border-radius: 8px; padding: 14px; text-align: center; margin-bottom: 16px;\">\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px;\">PRE-TITLE EYEBROW<\/span>\n                    <div style=\"font-size: 1.1rem; font-weight: 800; color: #FFF; margin-top: 4px;\">Convert Visitors <span style=\"background: linear-gradient(135deg, #2EB4FF, #7C5CFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">Faster<\/span><\/div>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--msoul-border); padding-top: 14px;\">\n                <span style=\"font-size: 0.8rem; color: var(--msoul-muted);\">JS Payload: <strong>0 KB<\/strong><\/span>\n                <button class=\"msoul-copy-btn\" data-code=\"aisthetic_dual_heading\" style=\"background: rgba(46, 180, 255, 0.1); color: var(--msoul-primary); border: 1px solid var(--msoul-primary); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;\">Copy ID<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- 2. Dual Button Group -->\n        <div class=\"msoul-card msoul-widget-item\" data-cat=\"hero\" style=\"display: flex; flex-direction: column; justify-content: space-between;\">\n            <div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <span class=\"msoul-tier-badge msoul-tier-free\">Core Included<\/span>\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-cyan); font-family: monospace;\">aisthetic_dual_button<\/span>\n                <\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px;\">Dual Button Group<\/h3>\n                <p style=\"color: var(--msoul-muted); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5;\">Primary and secondary action buttons grouped side-by-side with hover 3D lifts, badge tags (\"Popular\"), and SVG icons.<\/p>\n                <div style=\"background: #070B1A; border: 1px dashed var(--msoul-border); border-radius: 8px; padding: 14px; display: flex; gap: 10px; justify-content: center; align-items: center; margin-bottom: 16px;\">\n                    <span style=\"background: var(--msoul-primary); color: #FFF; padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 700;\">Get Started<\/span>\n                    <span style=\"border: 1px solid var(--msoul-border); color: #FFF; padding: 6px 14px; border-radius: 6px; font-size: 0.8rem;\">Live Demo<\/span>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--msoul-border); padding-top: 14px;\">\n                <span style=\"font-size: 0.8rem; color: var(--msoul-muted);\">JS Payload: <strong>0 KB<\/strong><\/span>\n                <button class=\"msoul-copy-btn\" data-code=\"aisthetic_dual_button\" style=\"background: rgba(46, 180, 255, 0.1); color: var(--msoul-primary); border: 1px solid var(--msoul-primary); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;\">Copy ID<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- 3. Tech & Logo Marquee -->\n        <div class=\"msoul-card msoul-widget-item\" data-cat=\"hero\" style=\"display: flex; flex-direction: column; justify-content: space-between;\">\n            <div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <span class=\"msoul-tier-badge msoul-tier-annual\">Annual & Agency Pro<\/span>\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-cyan); font-family: monospace;\">aisthetic_tech_marquee<\/span>\n                <\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px;\">Tech & Partner Marquee<\/h3>\n                <p style=\"color: var(--msoul-muted); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5;\">GPU-accelerated infinite horizontal scroll ticker for client logos, technology badges, and customer trust proof with pause-on-hover.<\/p>\n                <div style=\"background: #070B1A; border: 1px dashed var(--msoul-border); border-radius: 8px; padding: 14px; overflow: hidden; margin-bottom: 16px;\">\n                    <div style=\"display: flex; gap: 20px; animation: marqueeScroll 8s linear infinite; white-space: nowrap; font-size: 0.85rem; color: var(--msoul-cyan); font-weight: 700;\">\n                        <span>&bull; Google Cloud<\/span> <span>&bull; Elementor Pro<\/span> <span>&bull; WooCommerce<\/span> <span>&bull; Stripe<\/span> <span>&bull; OpenAI<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--msoul-border); padding-top: 14px;\">\n                <span style=\"font-size: 0.8rem; color: var(--msoul-muted);\">CSS Hardware Accelerated<\/span>\n                <button class=\"msoul-copy-btn\" data-code=\"aisthetic_tech_marquee\" style=\"background: rgba(46, 180, 255, 0.1); color: var(--msoul-primary); border: 1px solid var(--msoul-primary); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;\">Copy ID<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- 4. Stats Animated Counter -->\n        <div class=\"msoul-card msoul-widget-item\" data-cat=\"hero\" style=\"display: flex; flex-direction: column; justify-content: space-between;\">\n            <div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <span class=\"msoul-tier-badge msoul-tier-free\">Core Included<\/span>\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-cyan); font-family: monospace;\">aisthetic_stats_counter<\/span>\n                <\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px;\">Stats Animated Counter<\/h3>\n                <p style=\"color: var(--msoul-muted); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5;\">Lightweight vanilla IntersectionObserver counter animating numbers when scrolled into viewport with prefixes, suffixes, and custom easing.<\/p>\n                <div style=\"background: #070B1A; border: 1px dashed var(--msoul-border); border-radius: 8px; padding: 14px; display: flex; justify-content: space-around; margin-bottom: 16px;\">\n                    <div style=\"text-align: center;\"><div style=\"font-size: 1.3rem; font-weight: 800; color: var(--msoul-green);\">99\/100<\/div><div style=\"font-size: 0.7rem; color: var(--msoul-muted);\">PageSpeed<\/div><\/div>\n                    <div style=\"text-align: center;\"><div style=\"font-size: 1.3rem; font-weight: 800; color: var(--msoul-cyan);\">0.4s<\/div><div style=\"font-size: 0.7rem; color: var(--msoul-muted);\">LCP Time<\/div><\/div>\n                    <div style=\"text-align: center;\"><div style=\"font-size: 1.3rem; font-weight: 800; color: var(--msoul-primary);\">100%<\/div><div style=\"font-size: 0.7rem; color: var(--msoul-muted);\">Vanilla ES6<\/div><\/div>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--msoul-border); padding-top: 14px;\">\n                <span style=\"font-size: 0.8rem; color: var(--msoul-muted);\">JS Payload: <strong>1.4 KB<\/strong><\/span>\n                <button class=\"msoul-copy-btn\" data-code=\"aisthetic_stats_counter\" style=\"background: rgba(46, 180, 255, 0.1); color: var(--msoul-primary); border: 1px solid var(--msoul-primary); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;\">Copy ID<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- 5. Image Comparison Slider -->\n        <div class=\"msoul-card msoul-widget-item\" data-cat=\"creative\" style=\"display: flex; flex-direction: column; justify-content: space-between;\">\n            <div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <span class=\"msoul-tier-badge msoul-tier-annual\">Annual & Agency Pro<\/span>\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-cyan); font-family: monospace;\">aisthetic_image_comparison<\/span>\n                <\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px;\">Image Comparison Slider<\/h3>\n                <p style=\"color: var(--msoul-muted); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5;\">Interactive draggable Before & After split slider with touch support, custom divider handle, and badge labels for clinics, aesthetics, and retouching.<\/p>\n                <div style=\"background: #070B1A; border: 1px dashed var(--msoul-border); border-radius: 8px; padding: 14px; position: relative; height: 50px; overflow: hidden; margin-bottom: 16px; display: flex; align-items: center; justify-content: center;\">\n                    <div style=\"width: 100%; height: 100%; background: linear-gradient(90deg, #121A2E 50%, #2EB4FF 50%); border-radius: 4px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 0.75rem; font-weight: 700;\">\n                        <span>BEFORE<\/span>\n                        <div style=\"width: 20px; height: 20px; background: #FFF; border-radius: 50%; box-shadow: 0 0 8px rgba(0,0,0,0.5);\"><\/div>\n                        <span>AFTER<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--msoul-border); padding-top: 14px;\">\n                <span style=\"font-size: 0.8rem; color: var(--msoul-muted);\">Touch & Mobile Ready<\/span>\n                <button class=\"msoul-copy-btn\" data-code=\"aisthetic_image_comparison\" style=\"background: rgba(46, 180, 255, 0.1); color: var(--msoul-primary); border: 1px solid var(--msoul-primary); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;\">Copy ID<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- 6. Interactive Hotspots -->\n        <div class=\"msoul-card msoul-widget-item\" data-cat=\"creative\" style=\"display: flex; flex-direction: column; justify-content: space-between;\">\n            <div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <span class=\"msoul-tier-badge msoul-tier-annual\">Annual & Agency Pro<\/span>\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-cyan); font-family: monospace;\">aisthetic_hotspots<\/span>\n                <\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px;\">Interactive Image Hotspots<\/h3>\n                <p style=\"color: var(--msoul-muted); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5;\">Pulsing radar pins overlaid onto product photographs, floor plans, and schematics with interactive rich tooltips and buy links.<\/p>\n                <div style=\"background: #070B1A; border: 1px dashed var(--msoul-border); border-radius: 8px; padding: 14px; display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 16px;\">\n                    <div style=\"width: 16px; height: 16px; border-radius: 50%; background: var(--msoul-primary); animation: pulseDot 2s infinite;\" title=\"Feature Hotspot\"><\/div>\n                    <span style=\"font-size: 0.8rem; color: var(--msoul-muted);\">Click pin for technical specification<\/span>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--msoul-border); padding-top: 14px;\">\n                <span style=\"font-size: 0.8rem; color: var(--msoul-muted);\">Smart Tooltip Positioning<\/span>\n                <button class=\"msoul-copy-btn\" data-code=\"aisthetic_hotspots\" style=\"background: rgba(46, 180, 255, 0.1); color: var(--msoul-primary); border: 1px solid var(--msoul-primary); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;\">Copy ID<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- 7. Booking Calendar Picker -->\n        <div class=\"msoul-card msoul-widget-item\" data-cat=\"commercial\" style=\"display: flex; flex-direction: column; justify-content: space-between;\">\n            <div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <span class=\"msoul-tier-badge msoul-tier-annual\">Annual & Agency Pro<\/span>\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-cyan); font-family: monospace;\">aisthetic_booking_calendar<\/span>\n                <\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px;\">Booking Calendar Picker<\/h3>\n                <p style=\"color: var(--msoul-muted); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5;\">Interactive appointment booking widget with time-slot reservation, client contact form, and Google Calendar export support.<\/p>\n                <div style=\"background: #070B1A; border: 1px dashed var(--msoul-border); border-radius: 8px; padding: 12px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 0.75rem; margin-bottom: 16px;\">\n                    <span style=\"color: var(--msoul-muted);\">M<\/span><span style=\"color: var(--msoul-muted);\">T<\/span><span style=\"color: var(--msoul-muted);\">W<\/span><span style=\"color: var(--msoul-muted);\">T<\/span><span style=\"color: var(--msoul-muted);\">F<\/span><span style=\"color: var(--msoul-muted);\">S<\/span><span style=\"color: var(--msoul-muted);\">S<\/span>\n                    <span style=\"padding: 4px; border-radius: 4px; background: rgba(46,180,255,0.2); color: var(--msoul-primary); font-weight: 700;\">14<\/span>\n                    <span style=\"padding: 4px; border-radius: 4px; background: var(--msoul-primary); color: #FFF; font-weight: 700;\">15<\/span>\n                    <span style=\"padding: 4px; border-radius: 4px; background: rgba(46,180,255,0.2); color: var(--msoul-primary); font-weight: 700;\">16<\/span>\n                    <span style=\"padding: 4px; color: var(--msoul-muted);\">17<\/span><span style=\"padding: 4px; color: var(--msoul-muted);\">18<\/span><span style=\"padding: 4px; color: var(--msoul-muted);\">19<\/span><span style=\"padding: 4px; color: var(--msoul-muted);\">20<\/span>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--msoul-border); padding-top: 14px;\">\n                <span style=\"font-size: 0.8rem; color: var(--msoul-muted);\">Email Lead Hook<\/span>\n                <button class=\"msoul-copy-btn\" data-code=\"aisthetic_booking_calendar\" style=\"background: rgba(46, 180, 255, 0.1); color: var(--msoul-primary); border: 1px solid var(--msoul-primary); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;\">Copy ID<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- 8. WooCommerce Offcanvas Cart -->\n        <div class=\"msoul-card msoul-widget-item\" data-cat=\"woo\" style=\"display: flex; flex-direction: column; justify-content: space-between;\">\n            <div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <span class=\"msoul-tier-badge msoul-tier-annual\">Annual & Agency Pro<\/span>\n                    <span style=\"font-size: 0.75rem; color: var(--msoul-cyan); font-family: monospace;\">aisthetic_woo_offcanvas_cart<\/span>\n                <\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px;\">Offcanvas Slide-out Cart<\/h3>\n                <p style=\"color: var(--msoul-muted); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5;\">AJAX-driven slide-out mini-cart with dynamic free shipping progress bar, cross-sell recommendation sliders, and 1-click checkout.<\/p>\n                <div style=\"background: #070B1A; border: 1px dashed var(--msoul-border); border-radius: 8px; padding: 14px; margin-bottom: 16px;\">\n                    <div style=\"font-size: 0.8rem; color: var(--msoul-cyan); font-weight: 700; margin-bottom: 6px;\">Dynamic Shipping Tier:<\/div>\n                    <div style=\"height: 6px; background: #1A243D; border-radius: 999px; overflow: hidden;\">\n                        <div style=\"width: 85%; height: 100%; background: linear-gradient(90deg, #2EB4FF, #10B981);\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--msoul-border); padding-top: 14px;\">\n                <span style=\"font-size: 0.8rem; color: var(--msoul-green); font-weight: 600;\">+24% Checkout Speed<\/span>\n                <button class=\"msoul-copy-btn\" data-code=\"aisthetic_woo_offcanvas_cart\" style=\"background: rgba(46, 180, 255, 0.1); color: var(--msoul-primary); border: 1px solid var(--msoul-primary); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;\">Copy ID<\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- Final CTA -->\n    <div style=\"margin-top: 60px; text-align: center;\">\n        <div class=\"msoul-card\" style=\"padding: 40px; background: radial-gradient(circle at 50% 0%, rgba(46, 180, 255, 0.15), transparent 70%), var(--msoul-surface); border: 1px solid var(--msoul-primary);\">\n            <h3 style=\"font-size: 1.8rem; margin: 0 0 12px;\">All 47 Widgets Included. No Bloated Addon Packs.<\/h3>\n            <p style=\"color: var(--msoul-muted); font-size: 1rem; max-width: 600px; margin: 0 auto 24px;\">Upgrade to Aisthetic Pro to access every widget, unlock commercial licenses, and speed up your WordPress builds.<\/p>\n            <a href=\"https:\/\/msoulpro.com\/aisthetic\/pricing\/\" class=\"msoul-btn-primary\" style=\"padding: 14px 32px; font-size: 1rem;\">Unlock All 47 Widgets ($59\/yr) &rarr;<\/a>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const filterBtns = document.querySelectorAll('.msoul-widget-filter-btn');\n    const items = document.querySelectorAll('.msoul-widget-item');\n    const searchInput = document.getElementById('msoulWidgetSearch');\n\n    function applyFilters() {\n        const activeBtn = document.querySelector('.msoul-widget-filter-btn.active');\n        const activeCat = activeBtn ? activeBtn.getAttribute('data-cat') : 'all';\n        const query = (searchInput ? searchInput.value.toLowerCase().trim() : '');\n\n        items.forEach(function(card) {\n            const cardCat = card.getAttribute('data-cat');\n            const cardText = card.innerText.toLowerCase();\n            const catMatch = (activeCat === 'all' || cardCat === activeCat);\n            const searchMatch = (query === '' || cardText.includes(query));\n\n            if (catMatch && searchMatch) {\n                card.style.display = 'flex';\n            } else {\n                card.style.display = 'none';\n            }\n        });\n    }\n\n    filterBtns.forEach(function(btn) {\n        btn.addEventListener('click', function() {\n            filterBtns.forEach(b => {\n                b.classList.remove('active');\n                b.style.background = 'rgba(255,255,255,0.06)';\n                b.style.color = 'var(--msoul-text)';\n            });\n            this.classList.add('active');\n            this.style.background = 'var(--msoul-primary)';\n            this.style.color = '#FFF';\n            applyFilters();\n        });\n    });\n\n    if (searchInput) {\n        searchInput.addEventListener('input', applyFilters);\n    }\n\n    document.querySelectorAll('.msoul-copy-btn').forEach(function(btn) {\n        btn.addEventListener('click', function() {\n            const code = this.getAttribute('data-code');\n            navigator.clipboard.writeText(code).then(() => {\n                const orig = this.innerText;\n                this.innerText = 'Copied!';\n                this.style.background = 'var(--msoul-green)';\n                this.style.color = '#FFF';\n                setTimeout(() => {\n                    this.innerText = orig;\n                    this.style.background = 'rgba(46, 180, 255, 0.1)';\n                    this.style.color = 'var(--msoul-primary)';\n                }, 1500);\n            });\n        });\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>0 JQUERY \u2022 NATIVE ELEMENTOR BASE Why Aisthetic Native Widgets Outperform 3rd-Party Addon Packs Popular addon packs like Essential Addons or Ultimate Addons force your site to load 1.2MB+ of bloated jQuery libraries on every single page. Aisthetic Pro widgets are built directly into Elementor&#8217;s native Widget Base with modular script loaders that only enqueue [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"aisthetic_meta":{"styles_descriptor":{"styles":{"desktop":"[data-prefix=\"single_page\"] {background-image:none;}","tablet":"","mobile":""},"google_fonts":[],"version":9}},"_links":{"self":[{"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":0,"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"wp:attachment":[{"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}