Grider – Grid of Content and Products for Elementor is a premium Elementor add-on designed for building responsive grids from WordPress posts, pages, WooCommerce products, images, custom post types, and manually created content. It provides a flexible visual workflow for organizing different types of website content into attractive grid or masonry layouts without requiring custom coding.
Whether you want to create a blog post grid, product showcase, portfolio, gallery, news section, or custom promotional layout, Grider gives you control over the content source, grid structure, item elements, responsive behavior, and visual styling directly inside the Elementor editor.
Build Flexible Layouts with Grider – Grid of Content and Products for Elementor
Grider adds a dedicated grid widget to Elementor, allowing you to create structured content displays while continuing to work within Elementor’s familiar drag-and-drop interface. A single widget can be configured for several content types, making it useful for websites that need more than a basic post listing or product archive.
Supported content sources include:
- WordPress posts and pages
- WooCommerce products
- Custom post types
- WordPress media gallery images
- Manually created custom grid items
- Content selected by categories, taxonomies, or terms
This flexibility makes the Elementor grid plugin suitable for blogs, online stores, creative portfolios, business websites, magazines, directories, and content-heavy portals.
Choose Between Standard Grid and Masonry Layouts
Grider supports both traditional grid layouts and responsive masonry arrangements. A standard grid is ideal for presenting content in consistent rows and columns, while masonry mode helps display items with different content lengths or image proportions in a more dynamic format.
You can control important layout properties such as:
- Maximum number of columns
- Initial number of displayed items
- Spacing between grid items
- Item width and height
- Item wrapping behavior
- Horizontal alignment
- Vertical content alignment
- Responsive column settings
These options help you create anything from compact product displays to spacious portfolio sections and editorial post grids.
Responsive Controls for Different Devices
The plugin provides separate layout controls for desktop, tablet, and mobile displays. You can adjust the number of columns, item spacing, margins, padding, widths, and alignment according to the visitor’s screen size.
Responsive customization helps ensure that your Elementor content grid remains readable and visually balanced across large monitors, tablets, and smartphones. Instead of relying on a single layout configuration, you can refine the presentation for each device category.
Display Posts, Pages, and Custom Post Types
Grider can generate dynamic grids from existing WordPress content. You can select a post type, filter content using categories or taxonomies, and define how the results should be ordered.
Available ordering criteria include common WordPress properties such as:
- Publication date
- Modification date
- Title
- Author
- Comment count
- Post ID
- Parent content
- Random order
This functionality is useful for creating recent article sections, category-based post grids, resource directories, project archives, and other automatically updated content areas.
Create WooCommerce Product Grids
For online stores, Grider – Grid of Content and Products for Elementor can display products from selected WooCommerce categories. Product information can be arranged inside customizable grid cards, allowing you to present details such as product images, titles, descriptions, prices, and buttons.
The plugin also includes an option to limit the display to products that are currently in stock. This can help store owners build focused product showcases, featured category sections, promotional collections, or custom shop layouts without relying entirely on the default WooCommerce archive design.
Design Custom Grid Items
Grider is not limited to automatically generated WordPress content. Its custom content source allows you to build individual grid cards manually.
Each custom item can include elements such as:
- Image
- Title
- Description
- Price
- Date
- Button
- Custom link
This option is useful when the content does not come from posts or products. You can create service grids, team highlights, feature comparisons, promotional cards, visual menus, destination showcases, or other structured content sections.
Customize the Grid Item Structure
The layout builder lets you choose which elements appear inside each grid item and arrange them in the required order. Elements can be added, copied, removed, reordered, and configured according to the purpose of the grid.
You can also decide whether the primary link should be applied to the entire card, the title, or the button. This provides additional control over how visitors interact with each item.
For example, a product card may place the image first, followed by the title, price, description, and purchase-related button. A blog grid may instead prioritize the image, publication date, heading, excerpt, and read-more button.
Detailed Elementor Styling Controls
The plugin includes extensive styling settings for both the grid container and individual card elements. You can customize the appearance directly from Elementor without writing CSS.
Styling controls include:
- Text and background colors
- Typography settings
- Text shadows
- Box shadows
- Borders and border radius
- Solid, gradient, or image backgrounds
- Element width
- Margin and padding
- Text alignment
- Grid item spacing
- Image presentation
- Normal and hover states
Separate normal and hover settings allow you to create interactive grid cards that visually respond when visitors move their cursor over an item. These effects can make product collections, portfolios, and featured content sections feel more polished and engaging.
Grid Appearance Animations
Grider includes animation options for the appearance of grid content. You can enable or disable animations, choose an available effect, and configure the transition delay.
Used carefully, these animations can add visual interest while keeping the focus on the content itself.
Create Multiple Grids Across Your Website
The plugin allows multiple grids to be added to the same page or used throughout different areas of a website. This means you can create separate layouts for recent posts, featured products, portfolio projects, image collections, and custom promotional content while maintaining control over each section.
Because the grids are configured through Elementor, each instance can have its own source, structure, style, and responsive settings.
Ideal Uses for the Grider Elementor Plugin
Grider can support many website layouts and content strategies, including:
- Blog and magazine post grids
- WooCommerce product showcases
- Portfolio and project galleries
- Photography or media collections
- News and editorial sections
- Service and feature cards
- Custom post type archives
- Category-based content displays
- Promotional landing page sections
- Business resource directories
A Versatile Premium Grid Add-On for Elementor
Grider combines dynamic WordPress content, WooCommerce integration, custom grid items, masonry layouts, responsive controls, animations, and detailed styling in one Elementor widget. It is particularly useful for website owners who need more flexibility than a standard post or product listing provides.
Grider – Grid of Content and Products for Elementor is a practical choice for bloggers, designers, agencies, store owners, publishers, and Elementor users who want to present content in organized, responsive, and visually customizable layouts. Use Grider to transform posts, products, images, and custom information into engaging grid sections that complement your website design.
