Use Grid widget of Elementor to add posts grid

Сreate a posts grid using Grid widget for Elementor. Posts, Woocommerce products, simple images, or custom items can be used as content. This responsive and easy to use plugin allows adding multiple grids on one page and throughout your site to make your site more orderly, convenient and keep visitors engaged.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content tab

On the Content tab of the Grider widget, you can manage the basic settings of the posts grid such as the number of columns, source, navigation, layout, etc.

General

Source

Select which type of source you want to use for the grid:

Custom

The option allows you to create custom grid boxes with the necessary content for each of them via TinyMCE editor. Once you select this source, a new “Content” section with settings is displayed on the Content tab, where you can add and configure the required number of elements.

Posts

The option that allows you to display the grid of posts, pages, products content as well as custom post types. Filtering and sorting options are also available for this source type.

Settings for the source “Posts”
  • Post type – select the available post type from the list. The field includes custom post types.
  • Category/Taxonomies for Products – depending on the post type, you will see a field for choosing a category (for regular WP posts) or for choosing a taxonomy (for custom post types).
  • Terms of Product tags taxonomy – select taxonomy terms for the current post type. It can be tags or other terms.
  • Terms relation – a relation between term sets. Select OR to display all items from the specified terms. Select AND to display the items assigned to each of the specified terms.
  • Order by – allows to order the result by Publish date, Date of modified, Title, Slug, Comments count, Author, Content, Post ID, Parent, Random order.
  • Order – select Descending or Ascending order.
  • Button Text – a field to enter the button text for the grid items.
WooCommerce

The option allows you to display the grid of certain WooCommerce products category. To do this, you need to create products, fill in the appropriate fields and assign it to a specific category. After that, select the category in the current settings. To start to work with the products – get your own API key.

Only in stock – the toggle to display only the products that are in stock.

Gallery

The option allows displaying the image gallery from the WordPress media library. Once you select this source, a new “Content” section with settings is displayed on the Content tab, where you can add the required number of elements.

Grid

  • Amount items in grid – required for dynamic content. Initial number of items in the container.
  • Gutter – specify an interval between grid items for different devices(desktops, tablets, mobiles)
  • Max columns – specify the maximum number of columns in one row for different devices(desktops, tablets, mobiles).
  • Masonrythe toggle to apply masonry grid display.
  • Animate – a toggle to enable/disable the animation for the grid appearing. When animation is enabled you can select one of the available animation types and transition delay.

Layout

The section where all elements of the grid box layout can be added, configured and ordered.

Link Type

The option allows you to apply a link to a specific box element. The available types are Box, Title, Button. Select Note to disable the link.

Priority

Add layout elements and order them according to your needs.

Elements layout settings of the Grider

To add a new box element, click “Add Item” and select one of the available item types:  Image, Title, Description, Price, Date, Button.

Layout item settings

Content

Add and manage the grid item with the necessary content. The section is available when the source “Custom” is selected in the general Grider widget settings.

To add a new box, click “Add Item” and fill or edit all the fields.

Custom grid item settings
  • Title – a field to enter the title of the item.
  • Choose Image – select an image from the media library for a new item.
  • Description – a text area to enter the description of the item.
  • Button Text – a field to enter the button title of the item.
  • Link – a field to enter the link which will be applied depending on the setting you chose in the setting General>Link type.

Style tab

On the Imager widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

Grid

The section of the Grider widget with item styles will be applied to each layout element of the grid item. You can configure separate box elements like title, description, image, or other.

Static Width
Static width settings
  • Static width – the toggle to enable the width settings.
  • Wrap grid items – a toggle to wrapping the grid items.
  • Width – specify the width of each grid item using the slider.
  • Justify items – specify the alignment of the grid items: Stretch, Left, Center, Right, Space Around, Space Between, Space Evenly.
  • Ignore max columns number – build the grid based on block width ignoring max column number.
Static Height
Static height settings
  • Static height – the toggle to enable the height settings.
  • Min-height – specify the width of each grid item using the slider.
  • Align content – specify content alignment: Top, Center, Bottom, Space Around, Space Between, Space Evenly.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
NORMAL/HOVER

The grid items style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Title/Description

  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Image

  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • CSS filter – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.

Button

  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
NORMAL/HOVER

The button style settings for different states.

  • Color – specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Advanced Tab

The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Was this article helpful to you?