How to display ACF Relationship posts in a grid

ACF Relationship component for Elementor free version is a very useful widget with which you can build posts grid with the ACF relationship field which is valued on the current post.
The ACF Relationship/Post objects are fields that allow you to create ‘Parent/Child’ type relationships, establish related content link or share data of the same nature.

The component also works fine with the ACF ‘Post object’ field.

Table of Contents

How to activate ACF Relationship grid

The ‘Elementor‘ plugin is installed and active.

The ‘ACF‘ plugin is installed and active. 

The ‘EAC components‘ plugin is installed and active.

From the settings panel you have to drag & drop the ‘ACF Relationship‘ icon on the panel preview.

Select the source and filter the post types

As you can see, you can select any of the Relationship or Post objects field as the source.
These fields support ‘Post object‘ or ‘Post id‘ formats.
You can filter what post types will be displayed.

ACF relational select field

Select the content you want to display

The field ‘Posts count‘ lets you to select how many posts you want to display in the grid.

Very useful if you want to display, for example, the first three posts as related posts.

Content: Select what parts you want to add for each post.

Title: Select the title tag.

Excerpt: limit the number of words exposed for the summary.

Layout: Select the number of columns per row that will be showed for each device.

ACF relational content

Styling the post grid

Global section: Select the desired style who will be applied to the posts and the bottom margin.

Title, Date and Excerpt sections: Change font size and font color.

By default the Image ratio feature is enabled and you can position the image vertically.

ACF relational style image

Leave a Comment