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.
Accessibility for ACF relationship grid widget
Tab / Shift-Tab keyboard keys to navigate between links
Enter / Space keyboard keys to open link
Home keyboard key to move focus to the first link
End keyboard key to move focus to the last link
Escape keyboard key exit the grid
aria-label text 'View post + post title' on each link
How to activate ACF Relationship grid
The Relationship field provides a dual-column component to select one or more posts, pages or custom post type items.
You have created the group and the ‘Relationship’ type field in ACF.
You have selected the posts / pages / CPTs and saved the post.
Open it in the Elementor editor.
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.
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.
With the section Layout you can select the rendering mode between a grid or a slider the number of columns per row that will be showed for each device.
For the Slider mode you will find in this post the description of the elements and their behavior.
Select the content you want to display
In the Content section you will select what parts you want to show for each post and add the post link on the picture.
By default il the grid layout mode the Image ratio feature is enabled and you can position the image vertically.
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.
For the Image you can add a border radius and stylize the border.