The Post Grid component has been developed for Elementor with the aim of helping you to share your posts or custom post type without any prior programming knowledge, and with just a few clicks.
You can display your posts as a grid, masonry or slider.
Take advantage of a multitude of options, such as filters on categories or tags, selection of content elements and the number of posts to be displayed for each device to satisfy Responsive mode.
Take advantage of fine-tuned image management to accelerate grid loading speed and more.
Accessibility for post grid widget
Tab / Shift-Tab keyboard keys to navigate between filter labels
Enter / Space keyboard keys to activate a filter
aria-label text 'Filter results by + filter label'
Tab / Shift-Tab keyboard keys to navigate between links
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
Use the port grid component
The ‘Elementor‘ plugin is installed and active.
The ‘EAC components‘ plugin is installed and active.
From the panel settings you have to drag & drop the ‘Post Grid’ icon on the panel preview.
Select the source taxonomies tags and configure global settings
Settings section
Select the post type you wish to display.
Select one or more taxonomies and tags.
If you don’t select a taxonomy or tag, you won’t be able to filter the grid.
Sort
Apply sorting
Posts
Enter the count of posts to be displayed (0, -1 to display all posts).
You can enable Paging AJAX, in which case the posts will be displayed without reloading the page (Button Read more).
You can also enable Paging, in which case posts will be displayed with page reloading (Feature WordPress).
Configuring the grid layout
Layout section
You will choose the display mode (Masonry, Gris or Slider) as well as the number of columns per row for each device.
Image layout
Select resolution, delay loading and apply image ratio and vertical position.
Content layout
Side by side
You can determine the best type of display of the content of each post, in column (default) or side by side.
Alignment
Select vertical and horizontal alignment for the content.
Configure the content of each grid item
Content section
Filters activate or deactivate filters
Post select the items to be displayed
Meta tags
Select the categories or tags associated with the post, its creation date, the author’s name and avatar, and finally the number of comments.
Links
You can activate the ‘Read more’ button if you have enabled the ‘Paging AJAX’ option in the Settings section.
The post link can be on the title or on the image.
Apply the previously selected link to the entire item. This option is only visible if you have selected a link before.
Apply styles to grid and button
Apply general styles for each post and its background color.
Adapt the design of filters, title and summary to your needs.
In the next section, configure the button skin in normal and hover modes.
Hi Can you preselect a category to show by default instead of ALL ?
I mean I have category 1 2 and 3 and the widget shows all by default and I’d like to show Cat 1 as first view…
Thanks
Hi Fernando,
Sorry, but the three lists (Post types & Taxonomy & Tags) are dynamically linked.
I can’t prejudge whether a category has been selected or not.
Rgds