Сreate a great grid of content using Grider WordPress plugin 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.
The plugin provides a custom layout and you can manage(create, delete, reorder, copy) each of the box elements such as Image, Title, Description, Button, Price. Different types of grid animations available in the Grider will add attractiveness to your website. The flexible settings allow you to adjust the width and number of columns for different devices(mobiles, tablets, and desktops) so your post grid will always look perfect. The item can be useful for different types of sites like personal blog, portfolio, gallery, online store, news portal and many others. Any page can be made more attractive to users with Grider WordPress plugin.
WP Posts, Gallery and Custom Content as a source14 awesome Animation effectsIncludes Grid and Masonry modeFully compatibility with WoocommerceIncludes Templates for ElementorCrafted for Elementor BuilderSuitable for all kinds of Layouts and TemplatesPerfect for Popular Elementor ThemesCompletely Cross-Browser support
The item package includes 5 prepared templates to help you get started quickly with the Grider and will inspire you to create your unique project.
Flexible and straightforward settings will help you set up the display of each element in accordance with your requirements and wishes. Change the color, typography, background color, border, margins, padding or apply CSS filter for images to get the unique result. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.
Grider for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.
Features of the Grider WordPress plugin for Elementor
Supports WP Posts, WooCommerce products, Gallery as a source
Supports Custom content
Сustom posts layout
Includes Grid and Masonry mode
14 awesome Animation effects
Support fixed width and height
Gapless mode
Instagram view mode
Perfect for Elementor 2.5 and higher
Flexible style settings
Customizable columns number for different devices
Works well with all WordPress themes built on Elementor
Totally Seo Friendly
Included pot file for quick translation on any language
Perfect for RTL direction
Fast and smooth installing
Tested and compatible up to WordPress 5+
Lightweight and Fast
All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
Easy to use and customize with modern User Interface
Installation Guide and detailed Users Manual
Six months Included Support for CodeCanyon buyers
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.
Installing
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:
Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )
STEP 1
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin
STEP 2
Go to Plugins > Add New
Add New Plugin to WordPress
STEP 3
Click Upload Plugin Button
Upload New Plugin to WordPress
STEP 5
Choose archive with Plugin and press Install Now Button
STEP 6
After Installing go back to the Plugins page and click Activate below plugin title
Activate Installed Plugin
Installation the plugin through FTP or build-in File manager
STEP 1
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
STEP 2
Upload archive with plugin to /wp-content/plugins
STEP 3
On next step Unzip the archive with the plugin
STEP 4
Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.
Activate Installed Plugin
After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.
Settings
С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:
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 – an option allows you to create custom grid boxes with the necessary content for each of them. 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 – an option that allows you to display the grid of certain posts category. To do this, you need to create posts, fill in the appropriate fields and assign it to a specific category. After that, select the category in the current settings.
WooCommerce – an option that 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.
Gallery – an option allows displaying the image gallery from the WordPress media library.
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.
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).
Masonry – the 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.
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 –
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 –
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 height 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.