{"id":10204,"date":"2024-11-07T01:43:42","date_gmt":"2024-11-07T01:43:42","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=10204"},"modified":"2026-04-22T16:45:09","modified_gmt":"2026-04-22T16:45:09","password":"","slug":"popup-modal-filters-advanced-query-loops","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/popup-modal-filters-advanced-query-loops\/","title":{"rendered":"How to use Popup Modal Filters with Advanced Query Loops"},"content":{"rendered":"\n<p>The <strong>Advanced Query Loop Block<\/strong> provides a variety of filtering options through the <strong><em>Query Loop Filter Blocks<\/em><\/strong>. For an enhanced user experience, consider placing these filters inside a <strong>Modal<\/strong> <strong>Block<\/strong> to create an off-canvas filter menu. This approach works well for both desktop and\/or tablet\/mobile users.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10204_42dc56-c5, .wp-block-kadence-advancedheading.kt-adv-heading10204_42dc56-c5[data-kb-block=\"kb-adv-heading10204_42dc56-c5\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10204_42dc56-c5 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10204_42dc56-c5[data-kb-block=\"kb-adv-heading10204_42dc56-c5\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10204_42dc56-c5 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10204_42dc56-c5[data-kb-block=\"kb-adv-heading10204_42dc56-c5\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading10204_42dc56-c5 wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading10204_42dc56-c5\">The\u00a0<strong>Advanced Query Loop<\/strong> and <strong>Modal<\/strong> <strong>Blocks\u00a0<\/strong>are part of\u00a0<strong>Kadence Blocks Pro<\/strong>, available as a\u00a0<a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">stand-alone purchase<\/a>\u00a0or included in our\u00a0<a href=\"https:\/\/www.kadencewp.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Plus<\/strong>,\u00a0<strong>Ultimate<\/strong>, and\u00a0<strong>Lifetime<\/strong>\u00a0<strong>Ultimate Plans<\/strong><\/a> for the best value and flexibility.<\/p>\n\n\n<style>.kb-row-layout-id10204_0ace17-a7 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10204_0ace17-a7 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10204_0ace17-a7 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}.kb-row-layout-id10204_0ace17-a7 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10204_0ace17-a7 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}}@media all and (max-width: 767px){.kb-row-layout-id10204_0ace17-a7 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10204_0ace17-a7 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-right-golden kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10204_fccc66-68 > .kt-inside-inner-col,.kadence-column10204_fccc66-68 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10204_fccc66-68 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10204_fccc66-68 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10204_fccc66-68 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10204_fccc66-68 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10204_fccc66-68{position:relative;}@media all and (max-width: 1024px){.kadence-column10204_fccc66-68 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10204_fccc66-68 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10204_fccc66-68\"><div class=\"kt-inside-inner-col\"><style>.kb-image10204_7dc7d7-77 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_7dc7d7-77 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"871\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Mobile-Modal.gif\" alt=\"Mobile Modal\" class=\"kb-img wp-image-10242\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column10204_796660-f5 > .kt-inside-inner-col,.kadence-column10204_796660-f5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10204_796660-f5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10204_796660-f5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10204_796660-f5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10204_796660-f5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10204_796660-f5{position:relative;}@media all and (max-width: 1024px){.kadence-column10204_796660-f5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10204_796660-f5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10204_796660-f5\"><div class=\"kt-inside-inner-col\"><style>.kb-image10204_fabd61-e8 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_fabd61-e8 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1698\" height=\"1020\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Desktop-Modal-Filters.gif\" alt=\"Desktop Modal Filters\" class=\"kb-img wp-image-10241\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id10204_94a342-a9 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id10204_94a342-a9 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id10204_94a342-a9 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id10204_94a342-a9 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10204_135254-50, .wp-block-kadence-advancedheading.kt-adv-heading10204_135254-50[data-kb-block=\"kb-adv-heading10204_135254-50\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10204_135254-50 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10204_135254-50[data-kb-block=\"kb-adv-heading10204_135254-50\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10204_135254-50 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10204_135254-50[data-kb-block=\"kb-adv-heading10204_135254-50\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading10204_135254-50 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10204_135254-50\">Using the Modal Block<\/h2>\n\n\n\n<p>To get started, create a new Query Loop or edit an existing one. Inside the <strong>Main Query Loop Block<\/strong>, you can add a <strong>Modal Block<\/strong> within a <strong>Section Block<\/strong>. The Modal Block must be placed inside a Section Block, whether it is a stand-alone Section Block or a nested Section Block within a Row Layout Block. The Modal Block will not be available if placed outside of a Section Block or outside of the Main Query Loop (Adv) Block.<\/p>\n\n\n<style>.kb-image10204_cb9647-b8 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_cb9647-b8 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2051\" height=\"1096\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Adding-a-Modal.gif\" alt=\"Adding a Modal\" class=\"kb-img wp-image-10243\" \/><\/figure>\n\n\n\n<p>Once the Modal Block is added to the Query, use the Modal Block Settings to customize and style your Modal. <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/modal-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Click here to learn more about customizing the Modal Block.<\/a><br><br>Once the Modal is styled, click the <strong>Show Modal Content<\/strong> button to open the Modal within the Editor. Here, you can add the Filtering Blocks you want to display in the Modal popup.<\/p>\n\n\n<style>.kb-row-layout-id10204_cef779-6a > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10204_cef779-6a > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10204_cef779-6a > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);grid-template-columns:minmax(0, calc(34% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)))minmax(0, calc(66% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)));}.kb-row-layout-id10204_cef779-6a > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10204_cef779-6a > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10204_cef779-6a > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10204_cef779-6a alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10204_8ce69c-7b > .kt-inside-inner-col,.kadence-column10204_8ce69c-7b > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10204_8ce69c-7b > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10204_8ce69c-7b > .kt-inside-inner-col{flex-direction:column;}.kadence-column10204_8ce69c-7b > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10204_8ce69c-7b > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10204_8ce69c-7b{position:relative;}@media all and (max-width: 1024px){.kadence-column10204_8ce69c-7b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10204_8ce69c-7b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10204_8ce69c-7b\"><div class=\"kt-inside-inner-col\"><style>.kb-image10204_cd957a-72 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_cd957a-72 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"849\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-1024x849.jpg\" alt=\"Show Modal Content\" class=\"kb-img wp-image-10250\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-1024x849.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-300x249.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-768x637.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-360x299.jpg 360w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content.jpg 1454w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column10204_238cd8-2c > .kt-inside-inner-col,.kadence-column10204_238cd8-2c > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10204_238cd8-2c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10204_238cd8-2c > .kt-inside-inner-col{flex-direction:column;}.kadence-column10204_238cd8-2c > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10204_238cd8-2c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10204_238cd8-2c{position:relative;}@media all and (max-width: 1024px){.kadence-column10204_238cd8-2c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10204_238cd8-2c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10204_238cd8-2c\"><div class=\"kt-inside-inner-col\"><style>.kb-image10204_528efe-1b .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_528efe-1b size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"979\" height=\"602\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Adding-Filter-Blocks.gif\" alt=\"Adding Filter Blocks\" class=\"kb-img wp-image-10251\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p>Additionally, you can add other blocks, such as Advanced Text and Advanced Image Blocks to further customize your Modal Contents.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading10204_4e78ac-cb, .wp-block-kadence-advancedheading.kt-adv-heading10204_4e78ac-cb[data-kb-block=\"kb-adv-heading10204_4e78ac-cb\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading10204_4e78ac-cb mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading10204_4e78ac-cb[data-kb-block=\"kb-adv-heading10204_4e78ac-cb\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading10204_4e78ac-cb img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading10204_4e78ac-cb[data-kb-block=\"kb-adv-heading10204_4e78ac-cb\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading10204_4e78ac-cb wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading10204_4e78ac-cb\">Using Normal Filters for Dekstop and Modal Filters on Mobile<\/h2>\n\n\n\n<p>One of the primary uses of Off Canvas Modal Filtering is to provide a user-friendly experience, especially on mobile devices. For example, if you use a Sidebar Filtering Layout with many filters, it may not be ideal for mobile users due to limited screen space. In such cases, using a Modal Button to open a Modal Filter List can significantly improve the overall user experience.<br><br>This can easily be done using a <strong>Query Loop (Adv) Sidebar Layout<\/strong> and making a few customizations. You can also start from a different initial layout or a blank template if preferred.<\/p>\n\n\n<style>.kb-image10204_ae7fb7-bd .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_ae7fb7-bd size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1515\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Sidebar-Layouts-scaled.jpg\" alt=\"Sidebar Layouts\" class=\"kb-img wp-image-10244\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Sidebar-Layouts-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Sidebar-Layouts-300x177.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Sidebar-Layouts-1024x606.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Sidebar-Layouts-768x454.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Sidebar-Layouts-1536x909.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Sidebar-Layouts-2048x1212.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Sidebar-Layouts-360x213.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>In this example, the <strong>Sidebar<\/strong> <strong>Left<\/strong> <strong>Layout<\/strong> was selected. The first step will be to add two Sections above the original Filter Blocks. The first Section will be for mobile devices and the second Section for desktop devices.<\/p>\n\n\n<style>.kb-image10204_a2ebaf-46 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_a2ebaf-46 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2050\" height=\"1146\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Adding-Sections.gif\" alt=\"Adding Sections\" class=\"kb-img wp-image-10245\" \/><\/figure>\n\n\n\n<p>Afterward, move the <strong>Filter<\/strong> <strong>Blocks<\/strong> to the inside of the <strong>Second<\/strong> <strong>Section<\/strong> that was just added above the <em>Filter Blocks<\/em>.<\/p>\n\n\n<style>.kb-image10204_7b447c-3d .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_7b447c-3d size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1384\" height=\"849\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Moving-Filter-Blocks.gif\" alt=\"Moving Filter Blocks\" class=\"kb-img wp-image-10246\" \/><\/figure>\n\n\n\n<p>Select the second Section, then go to the <strong>Block Settings<\/strong> &gt; <strong>Advanced Tab<\/strong> and expand the <strong>Visibility Settings<\/strong>. Here, you can control which device types can view this Section. To hide the filters on mobile devices, enable the option labeled <strong>Hide On Mobile<\/strong>.<\/p>\n\n\n<style>.kb-image10204_f309ac-f9 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_f309ac-f9 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1392\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Visibility-Settings-scaled.jpg\" alt=\"Visibility Settings\" class=\"kb-img wp-image-10247\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Visibility-Settings-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Visibility-Settings-300x163.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Visibility-Settings-1024x557.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Visibility-Settings-768x418.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Visibility-Settings-1536x835.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Visibility-Settings-2048x1114.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Visibility-Settings-360x196.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>Then, inside the First Section, add a new <strong>Modal<\/strong> <strong>Block<\/strong>.<\/p>\n\n\n<style>.kb-image10204_21700d-55 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_21700d-55 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1742\" height=\"993\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Adding-a-Modal-Mobile.gif\" alt=\"Adding a Modal Mobile\" class=\"kb-img wp-image-10248\" \/><\/figure>\n\n\n<style>.kb-row-layout-id10204_83f398-05 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10204_83f398-05 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10204_83f398-05 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id10204_83f398-05 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10204_83f398-05 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10204_83f398-05 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10204_83f398-05 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10204_ffa683-00 > .kt-inside-inner-col,.kadence-column10204_ffa683-00 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10204_ffa683-00 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10204_ffa683-00 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10204_ffa683-00 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10204_ffa683-00 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10204_ffa683-00{position:relative;}@media all and (max-width: 1024px){.kadence-column10204_ffa683-00 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10204_ffa683-00 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10204_ffa683-00\"><div class=\"kt-inside-inner-col\">\n<p>Use the Modal Block Settings to fully style your Modal Popup and Button Styles. <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/modal-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Click here to learn more about customizing the Modal Block.<\/a> When customizing the Modal Block Settings, ensure you modify the Mobile Responsive Settings.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column10204_2fab18-e8 > .kt-inside-inner-col,.kadence-column10204_2fab18-e8 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10204_2fab18-e8 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10204_2fab18-e8 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10204_2fab18-e8 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10204_2fab18-e8 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10204_2fab18-e8{position:relative;}@media all and (max-width: 1024px){.kadence-column10204_2fab18-e8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10204_2fab18-e8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10204_2fab18-e8\"><div class=\"kt-inside-inner-col\"><style>.kb-image10204_2566aa-f6.kb-image-is-ratio-size, .kb-image10204_2566aa-f6 .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image10204_2566aa-f6.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image10204_2566aa-f6 .kb-image-is-ratio-size{align-self:unset;}.kb-image10204_2566aa-f6 figure{max-width:250px;}.kb-image10204_2566aa-f6 .image-is-svg, .kb-image10204_2566aa-f6 .image-is-svg img{width:100%;}.kb-image10204_2566aa-f6 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image10204_2566aa-f6\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"242\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Mobile-Responsive.jpg\" alt=\"Mobile Responsive\" class=\"kb-img wp-image-10252\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Mobile-Responsive.jpg 532w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Mobile-Responsive-300x136.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Mobile-Responsive-360x164.jpg 360w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-image10204_342838-34 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_342838-34 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2047\" height=\"1167\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Modal-Block-Settings.gif\" alt=\"Modal Block Settings\" class=\"kb-img wp-image-10249\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p>Below the <strong>Modal Block<\/strong>, click the <strong>View Modal Content<\/strong> button. Here, you can add the Filter Blocks specifically for mobile devices.<\/p>\n\n\n<style>.kb-row-layout-id10204_8c24fb-df > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id10204_8c24fb-df > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id10204_8c24fb-df > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, calc(34% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)))minmax(0, calc(66% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)));}.kb-row-layout-id10204_8c24fb-df > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id10204_8c24fb-df > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id10204_8c24fb-df > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id10204_8c24fb-df alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column10204_7e1a73-b5 > .kt-inside-inner-col,.kadence-column10204_7e1a73-b5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10204_7e1a73-b5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10204_7e1a73-b5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10204_7e1a73-b5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10204_7e1a73-b5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10204_7e1a73-b5{position:relative;}@media all and (max-width: 1024px){.kadence-column10204_7e1a73-b5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10204_7e1a73-b5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10204_7e1a73-b5\"><div class=\"kt-inside-inner-col\"><style>.kb-image10204_f70591-a3 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_f70591-a3 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"849\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-1024x849.jpg\" alt=\"Show Modal Content\" class=\"kb-img wp-image-10250\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-1024x849.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-300x249.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-768x637.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content-360x299.jpg 360w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Show-Modal-Content.jpg 1454w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column10204_93f89c-35 > .kt-inside-inner-col,.kadence-column10204_93f89c-35 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column10204_93f89c-35 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column10204_93f89c-35 > .kt-inside-inner-col{flex-direction:column;}.kadence-column10204_93f89c-35 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column10204_93f89c-35 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column10204_93f89c-35{position:relative;}@media all and (max-width: 1024px){.kadence-column10204_93f89c-35 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column10204_93f89c-35 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column10204_93f89c-35\"><div class=\"kt-inside-inner-col\"><style>.kb-image10204_c717ab-69 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_c717ab-69 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"979\" height=\"602\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Adding-Filter-Blocks.gif\" alt=\"Adding Filter Blocks\" class=\"kb-img wp-image-10251\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p>Once finished, select the <strong>Section<\/strong> with the <strong>Modal<\/strong> <strong>Block<\/strong>, go to the <strong>Visibility<\/strong> <strong>Settings<\/strong>, and enable the option to <strong>Hide on Tablet<\/strong> and <strong>Hide on Desktop<\/strong>.<\/p>\n\n\n<style>.kb-image10204_a05d96-87 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_a05d96-87 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1188\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Hide-on-Desktop-scaled.jpg\" alt=\"Hide on Desktop\" class=\"kb-img wp-image-10254\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Hide-on-Desktop-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Hide-on-Desktop-300x139.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Hide-on-Desktop-1024x475.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Hide-on-Desktop-768x356.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Hide-on-Desktop-1536x713.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Hide-on-Desktop-2048x950.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Hide-on-Desktop-360x167.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>As a finished result, the <strong>Modal<\/strong> will show on <strong>Mobile<\/strong> <strong>Devices<\/strong>, while the <strong>Sidebar<\/strong> <strong>Filtering<\/strong> <strong>System<\/strong> will show up on <strong>Desktop<\/strong> and <strong>Tablet<\/strong> <strong>Devices<\/strong>.<\/p>\n\n\n<style>.kb-image10204_fe4fcc-e4 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image10204_fe4fcc-e4\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"970\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/11\/Finished-.gif\" alt=\"Finished\" class=\"kb-img wp-image-10262\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Advanced Query Loop Block provides a variety of filtering options through the Query Loop Filter Blocks. For an enhanced user experience, consider placing these filters inside a Modal Block to create an off-canvas filter menu. This approach works well for both desktop and\/or tablet\/mobile users. The\u00a0Advanced Query Loop and Modal Blocks\u00a0are part of\u00a0Kadence Blocks&#8230;<\/p>\n","protected":false},"author":148263,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[417],"doc_tag":[],"knowledge_base":[7],"class_list":["post-10204","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":574,"total_views":"3730","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":417,"label":"Block Tutorials"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/10204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=10204"}],"version-history":[{"count":13,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/10204\/revisions"}],"predecessor-version":[{"id":15064,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/10204\/revisions\/15064"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=10204"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=10204"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=10204"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=10204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}