Create a perfect post grid with Elementor

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

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

Post grid query source taxonomies and tags
Select post type and taxonomy

Query filter 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.
Settings section
Enter the count of posts to be displayed.
You can enable pagination, in which case the posts will be displayed without reloading the page.

Post grid settings
Select post count and/or paging

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.

Post grid layout
Configure grid layout

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, 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.

Post grid content
Configure content and link

Apply styles to grid and button

Post grid global style
Apply styles to the grid

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.

Apply styles to the button

Leave a Comment