Create a Grid

Introduction#Introduction

A grid is a powerful tool that enables you to query and present content in a structured grid layout. In this comprehensive guide, we will delve into all the grid settings, providing you with the necessary knowledge to create a fully functional and visually appealing grid for your website.

Query#Query

Content#Content

To begin, you need to specify the WordPress content you wish to query and display in your grid. Under Query panel, you’ll encounter three content types:

• Posts : posts, pages, media, or custom post types
• Terms : categories, tags, or custom taxonomy terms
• Users : WordPress users

You will find options common to all content types for managing numbers and order:

Depending on the content type selected, you will find different settings for customizing the query and the results displayed in your grid. Each content type has its own settings for refining the queried content.

Query Posts#Query Posts

Here are the setting options available to query posts:

Query Terms#Query Terms

Here are the setting options available to query terms:

Query Users#Query Users

Here are the setting options available to query users:

Layout#Layout

Once you have configured the content to query, you’ll need to choose the layout type for your grid. There are three types of layouts available:

• Masonry: This layout assigns a certain number of columns to each item and maintains natural heights based on the image aspect ratio and content length.
• Metro: This layout assigns a specific number of columns and rows to each item. As a result, it may crop images in most cases and truncate overflowing content.
• Justified: This layout assigns an average row height to each item in a row and maintains the natural width of images. It preserves the image aspect ratio but may cut off overflowing content.

To summarize, if you intend to display content in a grid format, it’s advisable to use the Masonry layout. However, if you’re only showcasing images with minimal accompanying content, such as just a title, you may opt for a Metro or Justified layout. It’s important to note that using a Metro and Justified layouts are not recommended if you plan to display content above or below the card thumbnail.

Behaviour#Behaviour

Each layout type comes with its own settings that allow you to fine-tune the arrangement of cards. For instance, if you’re using a Masonry layout, you can enable the Equal Height Columns option to create a “perfect” Masonry layout where each row contains cards with the same height.

Here are the setting options available for the Masonry layout.

Here are the setting options available for the Justified layout.

Sizing#Sizing

In this settings panel, you will also find options to configure the layout’s behavior, including the number of columns and rows based on the selected layout. You can add multiple size configurations per browser width to customize according to your requirements.

In preview mode of a grid, you will be able to set the number of columns and rows of each post/user/term. These settings will be used in all grids because it’s attached to a post/user/term custom field.

Builder#Builder

This builder primarily serves as a backward compatibility feature since V2. It is primarily intended for adding navigation elements such as carousel prev/next buttons and page dots. It offers limited support for adding facets in the grid layout. For enhanced flexibility, we strongly recommend utilizing the WordPress editor (Gutenberg) or a dedicated page builder instead of relying solely on the current builder.

Carousel#Carousel

A carousel for WP Grid Builder is a feature that enables the grid layout to display content horizontally and be scrollable. Instead of all the content being displayed at once on the screen, the carousel allows users to navigate through the grid horizontally, typically by swiping or clicking navigation buttons. This creates a dynamic and interactive way to showcase content, especially when space is limited.

Behaviour#Behaviour

In this settings section, you will be able to fine-tune the behavior of the carousel, including arranging slides.

Appearance#Appearance

In this panel section you can define the appearance of carousel navigation elements such as previous/next buttons and page dots.

Carousel navigation elements (previous/next buttons and page dots) can be added in the Layout panel under advanced settings.

Physics#Physics

The physics of the carousel correspond to how the carousel behaves when scrolling and interacting with slides, which can be achieved through mouse input, finger touch, or navigation elements.

Cards#Cards

To showcase data from posts, terms, or users in a grid, it’s necessary to assign cards to the grid. If no cards are explicitly assigned, WP Grid Builder will automatically designate a default card, which will display only the post thumbnail or user avatar if they are available.

Cards can be assigned conditionally depending on the current data queried in the grid. For example, you can assign cards to posts having specific terms or custom fields. The possibilities are nearly endless.

Because conditions are processed on the backend and impact the frontend, to ensure proper functionality, it’s recommended not to use a caching solution. Otherwise, you may cache certain conditions and render them incorrectly.

Depending on the layout used for the card, you will only be able to use cards with the same type of layout. If you use a Masonry layout, you will be able to use any card type. However, if you use a Metro or Justified layout, you will only be able to assign cards with the same type of layout (Metro or Justified). This is due to the way the layout works and the overflow issue it may generate.

Sizing#Sizing

In this panel, you can globally override the number of rows and columns used for all cards within the grid. These settings exclusively affect Masonry (columns) and Metro (columns/rows) layouts. This feature can be particularly useful for overriding sizes across the entire grid, especially if individual sizes have been assigned to posts, terms, or users.

Animation#Animation

As the page is scrolled, animations dynamically reveal cards within the grid, enhancing the content’s visual appeal and user engagement. These animations add a layer of dynamism, making the content more attractive and captivating for the user.

You will find several animations preset to reveal cards:

Loading#Loading

In this section, you can define a grid loader that appears while content is loading (during actions like filtering, sorting, paging, etc.) within the grid. This loader serves to reduce the perceived loading speed, providing users with visual feedback that the system is actively processing their request. Implementing such a loader helps enhance user experience by managing expectations and creating a smoother interaction flow.

Colors#Colors

WP Grid Builder incorporates a color system within its cards. This means that each card comes with default color schemes, which are customizable both at the individual card level via the card editor, and at a global level within a grid. This enables you to modify primary card colors, such as content and overlay background colors, as well as the text color scheme used within these containers. For example, you can effortlessly transition from a card with a white background and dark text color scheme to one with a dark background and white text color scheme.

Media#Media

In this panel, you can configure the media display behavior based on the query.

Under Media panel, you can specify which media formats are permitted in your cards. This allows you to enable or disable gallery, audio, or video formats.

Behaviour#Behaviour

WP Grid Builder has the capability to automatically retrieve the first media item from the post content based on the post format. If you desire this behavior, you can enable the First Media Content option.

Otherwise, you can set media format and media content in preview mode in your grid settings. In preview mode, each grid item has a settings button to edit the post, user or term.

When you set up a media format in preview mode this applies to the post, term or user. So, these settings will be used in all grids because it’s attached to the post, term or user custom field.

Thumbnails#Thumbnails

In this section, you can configure the display of thumbnails (featured images) in cards. Customize thumbnail sizes to enhance grid loading speed and override aspect ratios for consistent image height. This feature is especially beneficial when paired with the Equal Height Columns option in a Masonry grid layout.

Loading#Loading

To expedite grid loading times, you can implement lazy loading for the thumbnails displayed in cards. This technique defers the loading of images that are not currently visible in the viewport, thereby reducing the initial page load time, especially if a grid is visible upon page load.

Advanced#Advanced

In this panel, you have the ability to personalize the messages, appearance, and functionalities of the grid to suit your specific preferences and requirements.

Customization is not covered by the scope of the support included with the plugin.
If you are looking for customization service, we recommend Codeable.io.

Messages#Messages

Custom CSS#Custom CSS

In this section, you have the option to input your own CSS code. You can assign a custom CSS class for convenient targeting of the grid, or utilize the automatically generated class assigned to the grid (note: the grid must be saved at least once to generate a class name).

Custom JavaScript#Custom JavaScript

In this section, you have the option to input your own JavaScript code. You can incorporate various JavaScript events or methods available in the JS APIs of WP Grid Builder to customize and enhance the functionality of your grid or facets attached to your grid.