Click here to check out the full product documentation.
Note:
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.
