Go to athemes.com

Blocks – Post Grid Block

The Post Grid Block allows you to display custom post types (CPTs) in a visually appealing layout anywhere on your page. It includes advanced taxonomy controls to filter content by categories or tags, and offers predefined controls for displaying elements like the featured image, excerpt, author, and more.

Explore the sections below to learn how to use the Post Grid Block with aThemes Blocks.

How to Use the Post Grid Block

To get started:

  1. Enable the Post Grid Block from the Blocks Dashboard.
  2. Once enabled, add the Post Grid Block to your page.
  3. After adding it, you can begin customizing your Post Grid settings.

General Settings of the Post Grid Block

When the Post Grid Block is selected, go to the General tab in the settings sidebar. Here, you can configure the following:

Presets

  • Choose from four different layout options.

Query Settings

  • Select the Post Type (e.g., Posts, Pages, CPTs).
  • Choose Taxonomy and specific Terms (categories or tags).
  • Set Posts Per Page.
  • Include or exclude Sticky Posts.
  • Exclude Current Post if needed.
  • Set Offset Starting Point.
  • Choose Order By and Order (e.g., date, title, ascending, descending).
  • Enable or disable the carousel feature.

Pagination

  • Enable or disable pagination.

Image

  • Show or hide the featured image.
  • Set the image size, aspect ratio, and position.

Content

  • Display or hide the following:
    • Title (with selectable title tag)
    • Author
    • Date
    • Comments
    • Taxonomy
    • Meta icon
    • Excerpt (with customizable excerpt length)

Button

  • Show or hide a Read More button.
  • Choose whether the button opens in a new tab

Styling Options for the Post Grid Block

In the Style tab, you can customize the look and feel of different elements:

Layout

  • Set the number of columns
  • Adjust column gap and row gap
  • Set background color
  • Choose a border style
  • Control vertical and horizontal alignment
  • Adjust card padding
  • Choose whether to apply padding to content only

Image

  • Set border radius
  • Add overlay effects
  • Adjust bottom spacing

Title

  • Customize color, typography, and bottom spacing

Meta

  • Set meta text color, icon color, typography, and bottom spacing

Excerpt

  • Customize color, typography, and bottom spacing

Button

  • Set:
    • Text color
    • Typography
    • Background color
    • Button style
    • Padding
    • Bottom spacing

Advanced Settings of the Post Grid Block

In the Advanced tab, you’ll find more customization options:

  • Layout: Adjust padding, margin, and Z-index.
  • Background: Set a background color for the entire block.
  • Animation: Add entrance animations such as slide in, fade in, zoom in, rotate in, flip in, and more.
  • Responsive: Control visibility by choosing to hide the block on desktop, tablet, or mobile.
  • Advanced: Add custom CSS classes or CSS IDs for additional styling.
image_print