Create a Grid

IntroductionIntroduction

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.

QueryQuery

ContentContent

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
Grid Query - Content
Query – Content and numbers

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

OptionDescription
Per pageNumber of posts, terms or users to display per page
OffsetNumber of posts, terms or users to displace or pass over
Order BySort retrieved posts, terms or users by parameters
OrderAscending or descending order of the order by parameter

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 PostsQuery Posts

Here are the setting options available to query posts:

Grid Query - Posts
Query – Posts
OptionDescription
Post TypesRetrieves posts by post types
Post StatusRetrieves posts by post status
Post AuthorsShow posts associated with certain author
Include PostsSpecify posts to retrieve (sticky posts will be included)
Exclude PostsSpecify posts not to retrieve
Ignore Sticky PostsIgnore post stickiness
TaxonomiesShow content associated with certain taxonomies
Custom FieldsShow posts associated with certain custom fields

Query TermsQuery Terms

Here are the setting options available to query terms:

Grid Query - Terms
Query – Terms
OptionDescription
TaxonomiesTaxonomies to which results must be limited
Include TermsSpecify terms to retrieve
Exclude TermsSpecify terms not to retrieve
Hide Empty TermsWhether to hide terms not assigned to any posts
Childless TermsLimit results to terms that have no children
Custom FieldsShow terms associated with certain custom fields

Query UsersQuery Users

Here are the setting options available to query users:

Grid Query - Users
Query – Users
OptionDescription
User RolesRole names that users must match to be included in results
Include RolesMatched users must have at least one of these roles
Exclude RolesUsers matching these roles will not be included in results
Include UsersSpecify users to retrieve
Exclude UsersSpecify users not to retrieve
Has Published PostsFilter results to users who have published posts
Custom FieldsShow users associated with certain custom fields

LayoutLayout

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.
Grid Layout
Layout

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.

BehaviourBehaviour

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.

OptionDescription
Horizontal OrderArrange cards from left to right instead of top to bottom
Fit into RowsArrange cards into rows. Rows progress vertically
Equal Height ColumnsEqualize column heights in each row

Here are the setting options available for the Justified layout.

OptionDescription
Equal Height RowsEqualize row heights. This option will crop images
Fill Last RowForce the last row to be completely filled. This option will crop images.
Center Last RowCenter cards in the last row.

SizingSizing

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.

Grid Layout - Sizing
Layout – Sizing
OptionDescription
BrowserMaximum browser width (px) to apply current size
ColumnsNumber of columns (Masonry & Metro layout)
Row HeightAverage line height used for Justified page layout
SpacingX/Y spacing in px between cards
Aspect RatioRatio used for cardin the Metro layout

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.

Grid Layout - Sizing preview
Layout – Preview

BuilderBuilder

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.

Grid Layout - Builder
Layout – Builder

CarouselCarousel

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.

BehaviourBehaviour

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

Grid Carousel - Behaviour
Carousel – Behaviour
OptionDescription
Carousel ModeArrange the grid in a horizontal layout with scrollability
Slides aligmentAlign slides within the carousel element
Initial SlideZero-based index of the initial selected cell
Group CardsGroups cards together in slides
Rows NumberNumber of rows in the carousel (Metro/Justified layout)
Auto PlayAutomatically advances to the next slide
Contain SlidesContains slides to prevents excessive scrolling at the beginning or end

AppearanceAppearance

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.

Grid Carousel - Appearance
Carousel – Appearance
OptionDescription
Buttons ColorText color used in prev and next buttons
Buttons BackgroundBackground color used in prev and next buttons
Dots ColorColor used for carousel page dots
Dots Selected ColorColor used for selected carousel page dots
Buttons SizeSize of prev and next buttons

PhysicsPhysics

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.

Grid Carousel - Physics
Carousel – Physics
OptionDescription
DraggableEnables dragging and flicking thanks to a pointer (mouse, fingers)
Free ScrollEnables content to be freely scrolled and flicked
AttractionAttracts the position of the carousel to the selected slide
FrictionSlows the movement of carousel
Friction (Free)Slows the movement of carouselwhen Free Scroll is enabled

CardsCards

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.

Grid Cards - Conditions
Cards – Conditions

SizingSizing

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.

Grid Cards - Sizing
Cards – Sizing
OptionDescription
Columns NumberNumber of columns to be applied to all cards within the grid
Rows NumberNumber of rows to be applied to all cards within the grid

AnimationAnimation

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:

Grid Cards - Animation
Cards – Animation
OptionDescription
TypeType of animation used to reveal cards
EasingDefines how the animation progresses during each cycle
DurationAnimation cycle duration
DelayAnimation delay between cards

LoadingLoading

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.

Grid Cards - Loading
Cards – Loading
OptionDescription
TypeType of loader used during content loading
ColorColor of the loader
SizeSize of the loader

ColorsColors

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.

Grid Cards - Colors
Cards – Colors
OptionDescription
Content BackgroundCard head and body background color
Overlay BackgroundCard overlay background color
Content Color SchemeText color scheme for card header and body
Overlay Color SchemeText color scheme for card overlay

MediaMedia

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.

Grid Media - Formats
Media – Formats

BehaviourBehaviour

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.

OptionDescription
First Media ContentFetch first media in post content if missing.
Gallery SlideshowCard overlay background color
Content Color SchemeText color scheme for card header and body
Overlay Color SchemeText color scheme for card overlay

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.

Grid Media - Formats preview
Media – Formats Preview

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.

ThumbnailsThumbnails

Grid Media - Thumbnails
Media – 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.

OptionDescription
Desktop SizeImage size used for desktop devices
Mobile SizeImage size used for mobile devices
Aspect RatioOverride the aspect ratio of thumbnails in maps
Default ThumbnailAssign a default image if the thumbnail is missing

LoadingLoading

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.

Grid Media - Loading
Media – Loading
OptionDescription
Lazy Load ImagesDefer the loading of images until there are visible in the viewport
Loading SpinnerShow a loading animation until the image is loaded
Blurred ImageOverride the aspect ratio of thumbnails in maps
Default ThumbnailDisplay a blurred image during loading
Background colorBackground color of the thumbnail placeholder
Spinner ColorColor of the loading spinner if enabled

AdvancedAdvanced

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.

Grid Advanced
Advanced – Settings

MessagesMessages

OptionDescription
No ContentMessage displayed when the grid query has no content
Loading SpinnerMessage displayed when there are no results after filtering

Custom CSSCustom 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 JavaScriptCustom 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.