A Quick Guide to Essential Grid

Refer to the guide below to setup a grid and identify the available options in Essential Grid.

Click here to check out the full product documentation.


If you require assistance, contact us over at our support center or by email at help at themepunch dot support and a member of our team will attend to you asap!

1. Register your Purchase Code

Note: Getting “Destination folder already exists” error? Refer to this article

For this tutorial, we’ll assume you’ve already installed and activated the plugin. The next step after that is to unlock the “Grid Template Library” by registering your purchase code. To do that, first grab your purchase code from here, and next to where Essential Grid is listed, click “Download > License Certificate”

Then open the purchase receipt, and inside, copy the Purchase Code and paste it into plugin’s registration section, and click the “Activate” button

Related Articles

2. Import a Demo Grid Template from the Grid Template Library

Once the plugin is activated, you’ll be able to import demo grid templates from the Grid Template Library. Click on the “Create from Grid Templates” button on the Essential Grid Overview page as shown in the screenshot below and import the “My Handmade Blog” Grid Template for this tutorial.

In the Grid Template Library, locate the “My Handmade Blog” Grid Template and click on “Install Grid”

The imported “My Handmade Blog” Grid Template will be displayed on the Essential Grid Overview page.

Related Articles

3. Editing the Grid Template

Next, click the “Settings” button to adjust the content for the template such as the title, image, description and hyperlinking the “Read More” link. You will also learn how to configure the grid to auto-populate your blog posts.

Each item in the “Handmade Blog” template includes an image, a title, a description and a “Read More” link, which can be changed by clicking the “Edit Element” icon for the Grid Item.

The “Media” section of the grid element allows you to change the grid item image.

Scroll down to the “Item Data” section of the grid element to change the grid title and contents(Description).

Navigate to “Item Settings” and insert custom links into “Link To” to hyperlink the “Read More” link.

Note: If you with to display filters for your custom grid, you can refer to this article

To configure the grid to auto-populate your blog posts. Navigate to the grid “Source” tab and select “Post, Pages, Custom Posts” option as shown below.

Select “Post Categories” from your blog posts that you’d like to use on your grid. Hold the Ctrl key or the Command key on Mac to select multiple categories. The “Post Categories” can also be configured as your Grid Filters.

Related Articles

4. Editing the Grid Skin

Editing the Grid Skin allows you to change the design, stylings and apply animation to the grid layers. The Item Skin Editor would allow you to add/remove the social icons, change font types, font sizes and reposition the existing grid layers. To do this, navigate back to the Essential Grid Overview page and click on “Edit Skin”.

To configure the “Read More” link to hyperlink to the custom link or blog posts, select the “Read More” layer and navigate to “Link/SEO” tab. Then, configure the “Link To” option to “Post” as shown in the screenshot below.

Related Articles

5. Displaying the Grid on Your Web Page

There are a few methods to display the Essential Grid on your Web pages. If you’re using the “WordPress Gutenberg” Editor, you can display the grid by following the instructions here. If you’re using the “Classic Editor”, you can refer to the instructions here. For this tutorial, we will be using the basic shortcode method. Navigate back to the Essential Grid Overview page and copy the grid shortcode shown in the screenshot below.

Paste the shortcode directly on a page and publish it.

Related Articles

A Quick Guide to Essential Grid

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author


Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!