Getting Started With Essential Grids

Before going ahead and ask a question in the forums and wait in the row for an answer, please, please make sure you have read the documentation of the plugin. Please download all the files from themeforest and unzip the Essential Grid plugin and read the thorough docs that comes with the plugin, I am sure you can find many of your answers there.

Essential Grid is a premium plugin for WordPress that allows you to display various content formats in a highly customizable grid. Possible applications range from portfolios, blogs, galleries, WooCommerce shops, price tables, services, product sliders, testimonials and anything else you can imagine.

After installing an activating the Essential Grid plugin, on your admin panel click on the ESS. Grid to go to the settings panel for the essential grids:

getting-started-1

On this page, click on the Create New Ess. Grid button to start creating your first grid system.

At this point, if you have already imported the import file for the ess. grid you will have some grids already made for you to use.

getting-started-2

If you want to go with the imported grids, just copy the shortcode you see in front of the grid and paste it anywhere you want or use the Visual Composer module to add them in a row anywhere on a page. Click on the settings buttons to start customizing the grids.

getting-started-3

As you can see in the image above in the first tab you can start naming your grid, the alias is what makes the shortocode, right after giving it an Alias you can see the shortcode. But at this stage you can not yet save the grid, although you can see the preview of your blog posts as gird but you need to set the source before you can save the grid and use it.

To do so, click on the Source tab and start selecting the source. I am going to choose the WooCommerce products as my source to create grids out of my already published products.

getting-started-4

I have chosen Product as my post type and in the Post Categories I select the categories I want, but you can choose between tags and other options. These are the filters used in the front-end.

getting-started-5

It is time to set the grid layout:

getting-started-6

Here in this tab, You can choose between 3 different grid layouts, flat, masonry and Cobbies. In this case we are going to choose Cobbies.

One of the advantages of using Cobbies is that you can set the height and width of every individual grid items. On the back end, scroll down to see the preview of your grid and click on the green gear icon on each of the items and change the height and width of the item:

getting-started-ess-grids

Set the number of items in rows for different devices to make it even more responsive. It is time to set our Navigation options.

getting-started-7

And right in this tab we can choose which sorting options we can have on the front end

getting-started-8

Ok, now we can choose the skin. Remember, you can either use one of the available pre designed skins, or create your own skin, or duplicate one of the skins and customize it to make it your own. What we have done here is exactly this. Click on the Skins tab and select the skin you want:

getting-started-9

Choose the rest of the options in the rest of the tabs to your likings and save your settings. You can always see the preview of the grids below the settings tabs.

Now it is time to put this grid in a page. While it is easy to just copy and paste the shortcode the grid has auto generated. But in Une Boutique since it is featuring Visual Composer too, you can easily drag and drop the Essential Grid module into a row on any page or post or product.

getting-started-10

getting-started-11