Essential Grid: A Detailed Overview and Review

Last Updated on December 21, 2022 by 14 Comments

Editorial Note: We may earn a commission when you visit links on our website.
Essential Grid: A Detailed Overview and Review
Blog / Resources / Essential Grid: A Detailed Overview and Review

ThemePunch makes some of the most popular plugins out there for WordPress.ย Essential Grid is one of the top earners in their library, right alongside Slider Revolution.ย Over time, Essential Grid has become one of the most sought-after and most successful plugins on CodeCanyon. So we wanted to give the plugin a highlight and let you folks decide if itโ€™s something that could improve your sites.

Essential Grid

Grid plugins arenโ€™t uncommon. In fact, our own Divi builder has a Portfolio module that serves this purpose. But Essential Grid goes far beyond what most other grid plugins have done, which is why even after many themes are including their own custom grid templates, folks are still buying EG licenses every single day.

Essential Grid by ThemePunch Overview and Review

Simply using the original sales blurb will tell you what you can do with EG:

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

But what their blurb doesnโ€™t tell you is just what all that customization consists of. Thatโ€™s our job, and we intend to do it. So letโ€™s dig in and see what all the fuss is about.

Getting Started

First of all, remember that this is a premium plugin. You will need to head over to CodeCanyon and snag the download for $27 USD. Then go through the manual installation process (Plugins โ€“ Add New โ€“ Upload).ย  At this point, you will have 3 new items in your WordPress admin dashboard:ย Ess. Grid, Punch Fonts,ย and Ess. Grid Example Posts. To begin with, letโ€™s look at the simpleย Ess. Grid.

The first menu item is where you put in your activation code, check for updates, changelogs, that sort of thing. They do give some simple instructions on how to use the plugin which boil down to: use a shortcode or drag the widget to a sidebar.

Essential Grid by ThemePunch Overview and Review

This page will also be where you come to create any new grids you want to use, so get used to clicking that button.

Essential Grid by ThemePunch Overview and Review

Item Skin Editor

Underย Item Skin Editor, you have all the basic templates that Essential Grid comes with. You can edit these on a skin-by-skin basis, changing whatever you want to about it. Or using it as is. You can even create your own from scratch.

Essential Grid by ThemePunch Overview and Review

In here, EG gives you the option to sort via tab for different types of grid items. (Even spacing, Masonry design, Posts, or WooCommerce product grids.) As you hover over each one, it will animate and display titles, excerpts, color overlays, etc. that you can customize by clicking on theย green gear icon.

Inside this options panel, every single element can be edited. From the spacing between elements, the icons that show up, animation style and duration, links, shadows, media types and fit, everything.

Essential Grid by ThemePunch Overview and Review

I would like to call your attention to the fact that Essential Grid has the CSS Classes in plain view for you to manipulate however you want. If for some reason you canโ€™t find the perfect design option within the options here, you can add it yourself via custom CSS.

At the bottom of the page, you get a birdโ€™s eye view of every layer you have access to and how it is currently styled.

Essential Grid by ThemePunch Overview and Review

Meta Data and Search Settings

The skin editor is probably the most robust individual part of Essential Grid, but EG doesnโ€™t shirk those options elsewhere. You can create custom meta boxes underย Meta Data Handling that gives you the option to place boxes for custom functionality that you may need out of the plugin.

Essential Grid by ThemePunch Overview and Review

You can do pretty much the same thing underย Search Settings, but for (you guessed it) searches. EG works as a search results page, too, so if youโ€™re not happy with the way your normal archives and such look, this is a great way to fix them up quick.

Essential Grid by ThemePunch Overview and Review

Global Settings

Just like they sound like, theย Global Settings cover all your bases. You can set permissions for who can change and edit grids, how the fonts and JavaScript load, what you do for caching, where you get icons from, setting a default image for grid elements, and so on. If it applies to the whole plugin instead of a single element like skins-only, youโ€™re going to be able to find it here. The impressive part is the control you get โ€” many plugins donโ€™t give you an option for choosing what kind of query you use, but EG lets you choose ifย get_posts()ย orย WP_Query() works best for your site (and if you donโ€™t know what that means, just leave it default. Itโ€™s good how it is.

Essential Grid by ThemePunch Overview and Review

Import/Export

When youโ€™re first setting up the plugin, you should definitely check out theย Import/Export page. If you click theย Import Full Demo Data and Import Social Media Demo Grids, you will have a huge array of initial templates that you can start with. Theyโ€™re good, too, so just click the button and the import/download is almost instant.

Essential Grid by ThemePunch Overview and Review

The imported grids will appear at the bottom of the list when you navigate back toย Ess. Grid. Your new library of grids will meet you there.

Essential Grid by ThemePunch Overview and Review

Ess. Grid Example Posts

The second of the new admin menu options is theย Ess. Grid Example Posts.ย Itโ€™s an odd choice to make for a menu title, as this is where your templated grid items will probably live. You see, all of those posts that are listed on this page are actually the contents of the boxes contained within the grids under theย Ess. Grid overview.

Essential Grid by ThemePunch Overview and Review

When you use the shortcodes that you get from the overview page in whatever post or page you want to display the grid, these are the individual items that pop up.

Essential Grid by ThemePunch Overview and Review

Creating a post for a new grid is easy, too. It works just like adding a new post of any other type. Just hit theย Add New button under this heading and set your parameters.

Essential Grid by ThemePunch Overview and Review

Using a Saved Essential Grid

Whether youโ€™re using the templates or make your own, you need to know how to use them. Everything revolves around shortcodes with Essential Grid. If you have a specific grid that you want to use over and over, you will need to click on Create New Ess Grid underย Ess. Gridโ€˜s overview page in your admin panel. Inside, you choose everything from how you can sort the items in the grid, what loading animation it has, where its elements actually come from, and you get to name it.

When you name it, you also get to choose its shortcode alias. That alias is only used to call this particular grid using the Essential Grid shortcode. I also chose to use the same ID for the CSS ID just in case in the future, I wanted to make external tweaks.

Essential Grid by ThemePunch Overview and Review

Just put the shortcode in a post or pageโ€™s text editor, next.

Essential Grid by ThemePunch Overview and Review

And voila!

Essential Grid by ThemePunch Overview and Review

Using a One-of-a-Kind Essential Grid

If you know you just need to display something on one page or in one post, there may not be any reason to go through the trouble of setting up a whole new grid, making new posts for its content as templates, and making aliases and all that. You can instead simply generate a dynamic shortcode from within the post editor itself. Just press theย Essential Grid Shortcode Creator button in the toolbar.

Essential Grid by ThemePunch Overview and Review

Then you will need to go through the steps to tell this shortcode what content you want it to render. You can choose one of the predefined ones from the overview menu (without having to go copy/paste its shortcode manually), or you can make your own based on the options presented.

Essential Grid by ThemePunch Overview and Review

You will go through pages to choose all the same options that you have elsewhere (animations, layout, etc.), and when youโ€™re ready to go, press the Generate Shortcode button.

Essential Grid by ThemePunch Overview and Review

As you can see, the shortcode that is dynamically generated is far more complex because it holds all of the information about the grid itself.

Essential Grid by ThemePunch Overview and Review

But when itโ€™s rendered, thereโ€™s no difference. Especially if you chose to apply a skin during creation.

Essential Grid by ThemePunch Overview and Review

Essential Grid Widget

Finally, you have the option of putting any Essential Grid that youโ€™ve created in a widget. This one is easier than any of the others to set up because itโ€™s literally drag-and-drop. Go intoย Appearance โ€“ Widgets, select the Essential Grid widget and drag it to where you want it to render. If you want it on the homepage alone, you can set that, or you can pick any of your premade grids. However, you cannot create a dynamic grid this way as you could above. These must be pre-generated.

Essential Grid by ThemePunch Overview and Review

One thing to keep in mind, however, is that not all of the layouts look good in a sidebar. You might get some of your content rendered very strangely, but donโ€™t freak out. If that happens, just go change the settings so that it will display differently โ€” boxed instead of fullscreen maybe or Even instead of Masonry, maybe. Experiment until it looks the way you want it to. Itโ€™s probably a good idea to make a sidebar-specific grid for this. (You can just duplicate the one you want there and tweak it instead of the original.)

Essential Grid by ThemePunch Overview and Review

Punch Fonts

And finally, thereโ€™s the last bit of customization you get with Essential Grid.ย Punch Fonts is a simple interface for using Google Fonts in EG. Thatโ€™s it.

Essential Grid by ThemePunch Overview and Review

You can choose which fonts you want to be installed by pressing the well-titledย Add New Font button. If you follow the link in the modal to Google Fonts, you will find the parameters you need, and the plugin will pull the font into your site.

Essential Grid by ThemePunch Overview and Review

And when it says theย tp- moniker is for internal use only, that just means itโ€™s basically the same as the alias earlier. You will see that when youโ€™re applying the fonts to things. So name them appropriately.

Essential Grid by ThemePunch Overview and Review

Final Thoughts

Overall, Essential Grid is one of the most robust and powerful grid plugins out there. If youโ€™ve ever used Slider Revolution, then the layouts and layers work very similarly to that, and you should feel right at home. If not, there may be a bit of a learning curve as you figure out which pieces fit together. But once you do, you will be able to create some truly beautiful pages.

If you donโ€™t need this level of customization, you may not want to pay the premium price. There are plenty of other grid plugins out there that may suit your needs. Additionally, depending on how heavy you make the grids, site speed could become an issue. I mean, youย can customize your loading animation for a reason.

However, if both necessary and done correctly, the plugin really shines. There is a reason Essential Grid is the number 1 seller in its category. And if you check ratings and the support threads, ThemePunch is quick to reply and help.

So for $27, it is probably worth the price of admission. Plus, if youโ€™re a theme designer, you can purchase their extended license and include it as a pack-in for your own themes. Which is pretty cool.

Do you use Essential Grid? Let us see some of your creations in the comments!

Article featured image by Bloomicon / shutterstock.com

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Top Features Of Divi Dash For Busy WordPress Agencies

Top Features Of Divi Dash For Busy WordPress Agencies

Posted on October 17, 2024 in Resources

Running a WordPress agency isn’t a walk in the park. It’s a juggling act of keeping clients happy, staying on top of changes, managing your team, building killer websites, and maintaining them โ€” all while trying to stand out in a crowded market. But what if you had a tool to help...

View Full Post
9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Updated on January 23, 2023 in Resources

There are lots of nonprofit organizations across the globe. Just about every one of them needs a well-designed website to tell their story and receive donations to help their causes. Divi is an excellent theme for nonprofits such as charities. Fortunately, you donโ€™t have to start from scratch for...

View Full Post

14 Comments

  1. I just want to say how much I respect a company (Elegant Themes) for promoting a product (Essential Grid) that you feel is best in class, even when it competes somewhat with your own product. I already am a lifetime member of Elegant Themes – Divi is best in class as far as website themes go! – and now have an even higher level of respect for your team.

  2. Can we use it with elementor visual builder??
    Your themes are superb by the way.

  3. Can you use this plugin multiple times for the 27$, or do you have to buy a license for every site you use it on?

  4. New version doesn’t work well with divi. If you use new version, animations in divi don’t work. Older version works ok.

  5. The biggest problem with ES Grid is that it is terribly laborious and taxing on the server and can slow a site down. It can also crash browsers on older Windows machines because it takes so much to run on the site as well. I have had a number of times that people can’t even see the features of ES Grid because their browser doesn’t support the code or simply can’t process it. Not to mention, ThemePunch has had a ton of bugs that have been listed in Sucuri over the recent years making me steer clear of ES Grid and Rev Slider. I haven’t used any of their products in well over a year because of these few reasons. Though they’re a great product, they just aren’t worth the headache when everything their plugin does can be achieved through hand building the code into the site and it won’t cost you the runtime and security issues.

    • Good point – have any of their plugin updates improved this situation? Or is this the current situation? Thanks

  6. Will we be able to build similar grids when the Theme Builder is released? Will we be able to use any combination of modules with dynamic data to create a layout displaying information about a single post etc, then loop that layout into columns/rows etc? Is that how the Theme Builder is going to work?… I certainly hope so.

    Will the Theme Builder allow us to build grids that can be inserted into any page, not just build archive pages? The Blog module should be replaced by a generic Grid Module that allows us to build a layout using any combination of modules and dynamic data, then loop that layout into grid form. This could be used to display blogs or any dynamic content we wish.

  7. How does it work with the Visual Builder? If I built a page using the Visual Builder can I still use this plugin on that same page?

    • Yeah, you absolutely can. Since it’s shortcode based, you can just put that into any space that renders a shortcode. Like a Text module, for instance. You’d just have to work within the confines of the page for spacing (which is the case, regardless).

  8. We’ve been using Essential Grid for years now, it’s on everyone of our 9 sites and on many of our clients sites. It’s way more than a blog feed, we use it for our holiday cottage sites, it’s the backbone to these.

    Sure it’s a little bit complicated at first, however once you get the hang of it, it surpasses any other gird system we’ve trialed. Robust and totally flexible and can do ‘just about’ anything. Support is great too.

    Worth every penny and the effort. Recommended.

  9. Or ET can update the blog module. Only a few options can make that module really useful. Right now it’s just nothing(!?!)

    Essential Grid has way too many options, enough for confusing a person. In real world nobody needs that much options altogether.

    If ET just update “The (backdated) Blog Module” with some minor features then it can solve the real world scenario (well, most of the cases) without bloating the site with enormous amount of features(!) like Essential Grid.

    • I am with you on the options. There are so many that it takes a while to sort them all out. Most people really don’t need that many options, but it’s nice to have them when you do. Admittedly, when it comes to stuff like Slider Revolution, I’ve opted for simpler solutions because the number of options far exceeded my needs, but I know there are lots of sites out there who use EG as the cornerstone for displaying their content. It just has a huge learning curve because of the crazy number of options.

      • However on the other side of the coin, with so many options, a person can choose one thing, another person can choose something different, and so on down the line, and guess what, chances you see any two grid patterns looking like they are cookie cutter, follow the leader kind of patterns is reduced substantially with so many options. Many options, in my opinion, that have the people who are confused, well, the world is full of different kinds of people, and some can choose without confusion, and some need time to choose, and some just can’t make up their mind, my vote is for the creative process that gives us all the options we need to make the choice we want to make, if that’s OK with it’s too many and nobody needs all those options groups.

  10. Great post!
    I might consider giving EG a try, but up until now, I’ve been using The Grid which I really like.
    From the outside they look a lot alike.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today