View Categories

Creating A Query Loop Using Kadence

Query cards are dynamic design elements and are used to display content such as blog posts, portfolio items, or custom post types in a visually appealing and organized format.

Each card represents an individual piece of content, typically showcasing elements like featured images, titles, excerpts, and links. They are commonly used in grid or list layouts, allowing users to browse through content effortlessly. Query cards are powered by a query loop that dynamically fetches and displays content based on specified criteria, such as categories, tags, or custom fields.

Benefits of Query Cards

Query cards enhance website usability and aesthetics by presenting content in a structured and visually engaging manner. They save time by automatically pulling data from your content library, ensuring updates are reflected instantly without manual adjustments.

With customizable layouts and responsive design options, query cards improve user experience across devices. They’re an excellent tool for keeping your site dynamic and interactive, making it easy for visitors to discover and engage with your content.

Follow this step-by-step guide to create and customize a Query Card:

Adding A Query Card

  • Navigate to Kadence > Query Card.
  • Click on ‘Add New Query Card’ for it to open up.
  • Choose a title that helps you easily identify your search, such as “Simple Shop” or “Post Search.”
  • Publish and Close.

Once your query loop is configured, you will see it displayed under Queries. The image below is an example of what you’ll eventually see once everything is set up… let’s proceed to create and customize a Query Card:

Setting Up the Query Loop Block

  • Navigate to Kadence > Queries.
  • Click on ‘Add New Query’, and it will open up.
  • Choose a title that helps you easily identify your page.
  • The Advanced Query Loop will preload so you don’t need to search for it.
  • Choose a pre-designed layout or start from scratch. Popular layouts include grids, lists, or masonry.

Configure Query Settings

  • Access Query Settings: Select the Query Card, then navigate to the block settings panel on the right side of your screen.
  • Adjust Query Parameters:
  • Set the post type (e.g., blog posts, custom post types, etc.).
  • Filter content by categories, tags, or custom taxonomies.
  • Specify the number of posts to display per page.
  • Enable pagination if desired.
  • Order and Sort Posts:
  • Choose the order of posts (e.g., ascending or descending).
  • Sort by date, title, or custom criteria.

Customize the Query Card Design

  • Edit Card Template: Inside the Query Loop, click on the first card template. This is the card to edit all card elements.
  • Add and Customize Elements: Use Kadence blocks like Image, Heading, Text, Buttons, or Meta Data (e.g., post date, author) to design your card. For example:
  • Adjust margins, padding, borders, and background colors for a cohesive look.
  • Use Kadence’s design options to set hover effects, box shadows, and spacing.

The image above is the final design which can be used in a post or page. *The &#038 displayed in the image does not show on the frontend.

Fine-Tuning A Responsive Design

Kadence’s responsive view is generally highly effective; however, it’s always a good practice to review it to ensure no adjustments are needed.

  • Switch to Responsive View: Use the responsive design controls in Kadence to preview how the Query Cards look on different devices (desktop, tablet, mobile).
  • Adjust Settings: Modify font sizes, grid columns, or spacing for each device to ensure an optimal viewing experience.

Publish and Display the Query Cards

  • Add the Query Loop Block to Your Page: Once satisfied with the design, place the Query Loop Block on your page or post.
  • Preview and Test: Preview the page to ensure the Query Cards display content correctly and check for responsiveness and functionality, including pagination and links.
  • Publish Your Page: When ready, click “Publish” to make your Query Cards live.

Adding Query Cards To A Post

To add query cards to a post, use the Query Loop Block from Kadence. Position it within the post editor where you want the cards to appear. You might want to configure the query to fetch content based on specific filters, like category, tags, or custom fields, ensuring relevance to the current post. Or, you might want to leave it. By doing so, you will create a seamless user experience, helping readers explore more content without navigating away from your post or page.

You can also create your query straight from the post or page by dragging the query block where you want the cards to appear. Follow the instructions (as a guide because it’s slightly different via a post) above to achieve the content and design you want.

NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.

Join The Party For Fun Updates & Big Discounts!