--- title: "How to use Popup Modal Filters with Advanced Query Loops" source: "https://docs.nexcess.com/software/kadence/blocks/popup-modal-filters-advanced-query-loops/" description: "The Advanced Query Loop Block provides a variety of filtering options through the Query Loop Filter Blocks. For an enhanced user experience, consider placing th…" vertical: "Software" area: "Kadence Blocks" date: "2024-11-07" last_modified: "2026-07-02" --- # How to use Popup Modal Filters with Advanced Query Loops 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 **Advanced Query Loop** and **Modal** **Blocks** are part of **Kadence Blocks Pro**, available as a [stand-alone purchase](https://www.kadencewp.com/kadence-blocks/pro/) or included in our [**Plus**, **Ultimate**, and **Lifetime** **Ultimate Plans**](https://www.kadencewp.com/pricing/) for the best value and flexibility. ![Mobile Modal](https://docs.nexcess.com/wp-content/uploads/2026/06/Mobile-Modal.gif) ![Desktop Modal Filters](https://docs.nexcess.com/wp-content/uploads/2026/06/Desktop-Modal-Filters.gif) Using the Modal Block To get started, create a new Query Loop or edit an existing one. Inside the **Main Query Loop Block**, you can add a **Modal Block** within a **Section Block**. 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. ![Adding a Modal](https://docs.nexcess.com/wp-content/uploads/2026/06/Adding-a-Modal.gif)Once the Modal Block is added to the Query, use the Modal Block Settings to customize and style your Modal. [Click here to learn more about customizing the Modal Block.](https://docs.nexcess.com/software/kadence/modal-block/) Once the Modal is styled, click the **Show Modal Content** button to open the Modal within the Editor. Here, you can add the Filtering Blocks you want to display in the Modal popup. ![Show Modal Content](https://docs.nexcess.com/wp-content/uploads/2026/06/Show-Modal-Content-1024x849-1.jpg) ![Adding Filter Blocks](https://docs.nexcess.com/wp-content/uploads/2026/06/Adding-Filter-Blocks.gif) Additionally, you can add other blocks, such as Advanced Text and Advanced Image Blocks to further customize your Modal Contents. Using Normal Filters for Dekstop and Modal Filters on Mobile 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. This can easily be done using a **Query Loop (Adv) Sidebar Layout** and making a few customizations. You can also start from a different initial layout or a blank template if preferred. ![Sidebar Layouts](https://docs.nexcess.com/wp-content/uploads/2026/06/Sidebar-Layouts-scaled-1.jpg)In this example, the **Sidebar** **Left** **Layout** 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. ![Adding Sections](https://docs.nexcess.com/wp-content/uploads/2026/06/Adding-Sections.gif)Afterward, move the **Filter** **Blocks** to the inside of the **Second** **Section** that was just added above the *Filter Blocks*. ![Moving Filter Blocks](https://docs.nexcess.com/wp-content/uploads/2026/06/Moving-Filter-Blocks.gif)Select the second Section, then go to the **Block Settings** > **Advanced Tab** and expand the **Visibility Settings**. Here, you can control which device types can view this Section. To hide the filters on mobile devices, enable the option labeled **Hide On Mobile**. ![Visibility Settings](https://docs.nexcess.com/wp-content/uploads/2026/06/Visibility-Settings-scaled-1.jpg)Then, inside the First Section, add a new **Modal** **Block**. ![Adding a Modal Mobile](https://docs.nexcess.com/wp-content/uploads/2026/06/Adding-a-Modal-Mobile.gif)Use the Modal Block Settings to fully style your Modal Popup and Button Styles. [Click here to learn more about customizing the Modal Block.](https://docs.nexcess.com/software/kadence/modal-block/) When customizing the Modal Block Settings, ensure you modify the Mobile Responsive Settings. ![Mobile Responsive](https://docs.nexcess.com/wp-content/uploads/2026/06/Mobile-Responsive.jpg) ![Modal Block Settings](https://docs.nexcess.com/wp-content/uploads/2026/06/Modal-Block-Settings.gif)--- Below the **Modal Block**, click the **View Modal Content** button. Here, you can add the Filter Blocks specifically for mobile devices. ![Show Modal Content](https://docs.nexcess.com/wp-content/uploads/2026/06/Show-Modal-Content-1024x849-1.jpg) ![Adding Filter Blocks](https://docs.nexcess.com/wp-content/uploads/2026/06/Adding-Filter-Blocks.gif) Once finished, select the **Section** with the **Modal** **Block**, go to the **Visibility** **Settings**, and enable the option to **Hide on Tablet** and **Hide on Desktop**. ![Hide on Desktop](https://docs.nexcess.com/wp-content/uploads/2026/06/Hide-on-Desktop-scaled-1.jpg)As a finished result, the **Modal** will show on **Mobile** **Devices**, while the **Sidebar** **Filtering** **System** will show up on **Desktop** and **Tablet** **Devices**. ![Finished](https://docs.nexcess.com/wp-content/uploads/2026/06/Finished-.gif)