# Grider - Posts Grid for Elementor

- created: 12/13/2021
- latest update: 12/13/2021
- by: merkulove
- elementor.merkulov.design/grider/

WordPress plugins Documentation

### Overview

С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 source
14 awesome Animation effects
Includes Grid and Masonry mode
Fully compatibility with Woocommerce
Includes Templates for Elementor
Crafted for Elementor Builder
Suitable for all kinds of Layouts and Templates
Perfect for Popular Elementor Themes
Completely 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:

- Content
- Style
- Advanced

## 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 – 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.

Update page in the Elementor