Essential Grid - For WordPress

Essential Grid - for WordPress
http://essential.themepunch.com/documentation/
WELCOME TO THEMEPUNCH'S LATEST PRODUCT "ESSENTIAL

GRID"
(http://codecanyon.net
/item/essential-grid-wordpress-plugin/7563340?ref=ThemePunch)
created: 04/13/2014 latest update: 04/13/2014 by: ThemePunch
1 of 182
FAQ's (http://www.themepunch.com/home/category/plugins/wordpress-plugins/essential-grid-responsive-wordpress-plugin/)
Videos (http://themepunch.com/essential/videoguides/)
Support (http://themepunch.ticksy.com/)
QUICK LINKS
Quick Grid in 2 steps
Add to Web Page
Grid Layout
Grid Columns
Even Grid
Masonry Grid
Cobbles Grid
Custom Grid: Bulk Upload
Pagination / Load More
Spacings / Paddings
Edit Grid Content
Grid Item Hovers
Changing an Icon
Lightbox Social Buttons
Setting Hyperlinks
Video / Soundcloud
Front-end not working
6/29/2016 2:30 AM
2 of 182
HELPFUL FAQ'S
Quick Grid in only two steps (http://www.themepunch.com/home/plugins/quick-grid-two-steps-recent-posts-popular-posts-etc/)
Hyperlinking Options (http://www.themepunch.com/home/plugins/wordpress-plugins/hyperlinking-options/)
Making the entire Grid Item clickable (http://www.themepunch.com/home/plugins/wordpress-plugins/hyperlinking/)
Avoiding Duplicate Lightbox Content (http://www.themepunch.com/home/plugins/wordpress-plugins/hyperlinking/)
Setup Social Icon Links (http://www.themepunch.com/home/plugins/wordpress-plugins/setup-social-icon-links/)
Social Sharing Alternative (http://www.themepunch.com/home/plugins/social-sharing-alternative/)
Show Video in Items (http://www.themepunch.com/home/plugins/wordpress-plugins/show-video-in-items/)
Open Video in Lightbox (http://www.themepunch.com/home/plugins/wordpress-plugins/open-video-lightbox/)
Remove Button/Icon from Grid (http://www.themepunch.com/home/plugins/wordpress-plugins/how-to-remove-a-buttoniconfrom-a-grid-item/)
Custom Item Ordering (http://www.themepunch.com/home/plugins/wordpress-plugins/grid-custom-order/)
Load More & Lazy Loading (http://www.themepunch.com/home/plugins/wordpress-plugins/load-more-lazy-loading/)
Set number of columns per screen size (http://www.themepunch.com/home/plugins/wordpress-plugins/variable-columns/)
Add Custom Post Based Content to Grid (http://www.themepunch.com/home/uncategorized/add-my-own-post-based-contentto-essential-grid/)
HTML5 Video Playback in one browser does not work (http://www.themepunch.com/home/plugins/html5-video-playbackin-one-browser-does-not-work/)
ADVANCED FAQ'S
Add Autoplay Functionality for Pagination (http://www.themepunch.com/home/plugins/wordpress-plugins/add-autoplayfunctionality-pagination/)
Remove unwanted left padding/margin from Grid (http://www.themepunch.com/home/plugins/wordpress-plugins/removeunwanted-left-paddingmargin-grid/)
How to Update the Plugin Manually (http://www.themepunch.com/home/plugins/wordpress-plugins/update-plugin-manually/)
Where to add custom CSS/JavaScript (http://www.themepunch.com/home/plugins/wordpress-plugins/where-to-add-customcss-javascript/)
Remove "Filter All" Button (http://www.themepunch.com/home/plugins/wordpress-plugins/remove-filter-option/)
Deep-linking for Grid Filters (http://www.themepunch.com/home/plugins/wordpress-plugins/deep-linking-grid-filters/)
Purchase Activation Section is Missing (http://www.themepunch.com/home/plugins/wordpress-plugins/revolution-sliderwordpress/purchase-activation-section-is-missing/)
Show only featured products from WooCommerce (http://www.themepunch.com/home/plugins/wordpress-plugins/showonly-featured-products-from-woocommerce/)
Custom Filter Button Order (http://www.themepunch.com/home/plugins/wordpress-plugins/custom-filter-button-order/)
Load More & Lazy Loading (http://www.themepunch.com/home/plugins/wordpress-plugins/load-more-lazy-loading/)
Set number of columns per screen size (http://www.themepunch.com/home/plugins/wordpress-plugins/variable-columns/)
Add Custom Post Based Content to Grid (http://www.themepunch.com/home/uncategorized/add-my-own-post-based-contentto-essential-grid/)
Build Search Shortcode for Essential Grid (http://www.themepunch.com/home/plugins/wordpress-plugins/build-searchshortcode-essential-grid/)
6/29/2016 2:30 AM
INSTALLATION
If you're reading this, it means you've successfully unzipped the download zip from CodeCanyon. At the root folder of this zip,
you'll find several other folders and files. The zip that can be installed will be located here, and is named essential-grid.zip . Once
you've located this zip file, you're ready to upload it to your WordPress plugins page and install the plugin.
First, visit the Plugins page from your WordPress main menu, and select the Add New button shown in the screenshot below:
Next, choose the Upload button:
3 of 182
6/29/2016 2:30 AM
Then select Browse , and choose the essential-grid.zip file from your computer.
Next, click the Install Now button:
4 of 182
6/29/2016 2:30 AM
Finally, choose the Activate Plugin link:
Now that the plugin has been installed, you'll see it listed in your WordPress Plugins page, and you'll also see a new menu item in
the WordPress main menu titled Ess. Grid :
5 of 182
6/29/2016 2:30 AM
And that's it! You've successfully installed Essential Grid, and are ready to start building your first grid :)
PURCHASE CODE REGISTRATION
SPECIAL NOTE: Purchase Code Registration is only available if you purchased the plugin directly from CodeCanyon. If
the plugin came packaged with your theme, you can acquire a valid Purchase Code by purchasing a copy of the plugin
separately from CodeCanyon (see Need Premium Support and Auto Updates below).
Once you've installed the plugin, click the Ess. Grid shown in the WordPress main menu, and you'll be brought to the plugin's
main admin page. Toward the middle of the page, you'll see the following:
6 of 182
6/29/2016 2:30 AM
Scroll down to the following section, and let's register the plugin. But first, let's check out the benefits of registration:
Next, let's take a quick look at the three fields needed for activation/registration:
7 of 182
6/29/2016 2:30 AM
USERNAME:
This is your CodeCanyon username. It should be the same thing you type in to login to your CodeCanyon account:
8 of 182
6/29/2016 2:30 AM
ENVATO API KEY:

This is a special "key" that you can generate from your CodeCanyon account page. To get your API key, login to CodeCanyon and
then click this link:
http://codecanyon.net/downloads (http://codecanyon.net/downloads)
From there, choose the My Settings tab:
and then choose the API Keys option at the bottom of the tab menu:
9 of 182
6/29/2016 2:30 AM
Next, to generate an API key, give it a label (anything will do), and click the Generate API Key button:
Finally, you'll see your newly generated API key. Paste this into the Envato API Key section of the Essential Grid activation form:
10 of 182
6/29/2016 2:30 AM
PURCHASE CODE:
To get your purchase code, head over to the following page:
http://codecanyon.net/downloads (http://codecanyon.net/downloads)
Choose the Download button, and then choose License certificate & purchase code from the drop-down menu that appears:
Next, you'll be prompted to open/download a text file. Inside this file is where you'll find your purchase code. Paste this into the
Purchase Key section of the Essential Grid activation form:
11 of 182
6/29/2016 2:30 AM
Now that you've gathered your Username , Envato API Key , and Purchase Code , enter it into the form and click the green
Activate button. When activation is successful, the section will change from red to green:
12 of 182
6/29/2016 2:30 AM
And that's it! You've now successfully activated the plugin and can now benefit from update notifications as well as premium
support :)
IMPORTING DEMO GRIDS
Sometimes the easiest way to learn is to start with an example that's already built and then modify it. To do that, we can import the
demo examples shown in the CodeCanyon Preview. To get started, from the WordPress main menu, click the Import/Export
option:
13 of 182
6/29/2016 2:30 AM
Then click the Import Full Demo Data button:
You'll then see a popup message asking you to confirm
Once the process is complete, from the main WordPress menu, click Ess. Grid and you'll then see the imported examples (32
total).
14 of 182
6/29/2016 2:30 AM
If you haven't already decided which example you'd like to start with, visit the demo site, and view the different examples from
Usage Examples drop down menu item:
Once you've decided which examples you want to use, you can delete the examples you don't plan to use by clicking the red trash
can icon button.
The content used for the examples will be imported to the Ess. Grids Custom Post Type
15 of 182
6/29/2016 2:30 AM
CREATE QUICK GRIDS INSIDE YOUR PAGES/POSTS
Add Shortcode from Pre-defined Grid

Create a Grid from the plugin's main admin
Create new "Quick Grid"
Essential Grid includes a shortcode generator inside the page/post editor. To use this option, visit a page or post where you'd like
to add a Grid, and then click the "Quick Grids" button from the WordPress WYSIWYG editor:
16 of 182
6/29/2016 2:30 AM
Generate a shortcode for a Grid that has already been created:
^ back to Quick Grid menu
If you've already created a Grid, or imported one of the examples, and would like to generate a shortcode for that Grid, select the
Grid from the drop-down as shown in the following screenshots:
17 of 182
6/29/2016 2:30 AM
Create a Grid from the plugin's main admin:
This button is a shortcut for creating a Grid normally from within the plugin's main admin.
Create a "Quick Grid" from within the current shortcode generator:
Create quick "Custom Grid":
18 of 182
6/29/2016 2:30 AM
For a complete explanation of all options, review the Creating your First Grid section of
the documentation.
1. Choose Grid: Choose pre-defined settings from a pre-existing Grid.
2. Grid Skin: Choose Item Skin to be used for the Grid.
3. Layout: Choose the main page layout. Options are "Boxed" or "Full Width".
4. Grid Layout: Select the "Grid Layout". Options are "Even", "Masonry" or "Cobbles".
5. Item Spacing: Choose the spacing to be used between the Grid items (in pixles).
6. Pagination: Choose to use Pagination for the navigation (number of items must be larger than "Columns" multiplied by the
amount of "Max Visible Rows").
7. Columns: Choose the number of columns that the Grid should display.
8. Max Visible Rows: Choose the number or rows that should be displayed (additional content could be shown with
"Pagination").
9. Start & Filter Animations: Select the animation type for when the Grid first loads and also when the grid's filter navigation is
19 of 182
6/29/2016 2:30 AM
used.
10. Choose Spinner: Select the preloader to be used for the Grid.
Once you've chosen your Grid's main settings, click the "Add Items" button, and add some items to the Grid. For this example, we'll
choose "Image" as the grid item's main media source.
20 of 182
6/29/2016 2:30 AM
21 of 182
6/29/2016 2:30 AM
Finally, click the "Generate Shortcode" button:
22 of 182
6/29/2016 2:30 AM
And here's an example of what the generated shortcode will look like:
Create a Quick Grid based on "Popular Posts", "Recent Posts" or "Related Posts":
The process for creating one of these Grids is the same as creating a "Custom Grid" as described above. The only difference is
that the Grid items will automatically be added to the Grid as opposed to adding them manually. So when selecting one of these
options, you'll have the ability to choose your custom settings for the Grid itself, but the "Add Items" part won't be needed, as the
items will automatically be added based on based on whether you chose "popular", "recent" or "related" posts.
23 of 182
6/29/2016 2:30 AM
Edit your custom generated shortcode:

If you've created a custom shortcode using the steps above, and would like to make edits, copy the shortcode you previously
generated, click the "Edit Custom" button, and enter your shortcode into the "Analyze Shortcode" section:
24 of 182
6/29/2016 2:30 AM
25 of 182
6/29/2016 2:30 AM
CREATING YOUR FIRST GRID
To create your first Essential Grid, head over to the plugin's main admin page (WP Main Menu -> Ess. Grid). Then click the blue
button titled Create New Ess. Grid :
Naming
Next, give your new grid a Title and an Alias :
26 of 182
6/29/2016 2:30 AM
The Title can be anything you choose to help you organize your grids (if you choose to create more than one).
The Alias is the keyword that will be used in the grid's "Shortcode". A general rule for "Alias" names is to avoid using special
characters, and to keep things nice and organized, it's also helpful to avoid using uppercase letters and spaces between letters.
The Shortcode section will be populated automatically based on your Grid's "Alias"
The CSS ID is optional in case you want to add some custom CSS for the Grid that target's this ID.
Source
Posts
Pages
Custom Grid
Next, click the Source Tab , and choose either Post, Pages, Custom Posts , or Custom Grid
27 of 182
6/29/2016 2:30 AM
Choose Post, Pages, Custom Posts if you want your Grid's content to be pulled from one of those sources. Choose
Custom Grid if you wish to build a custom grid from scratch that isn't based on your site's pages or posts.
If you've chosen "Post, Pages, Custom Posts", select a Post Type from the list:
^ back to Grid Source menu
If you've chosen Post , select a post category:
28 of 182
6/29/2016 2:30 AM
Special Note: Click here to learn how you can use the "Additional Parameters" section (http://www.themepunch.com
/home/plugins/wordpress-plugins/grid-custom-order/)
If you wish to include more than one category, hold down the Ctrl key to select an additional category:
29 of 182
6/29/2016 2:30 AM
If you've chosen Page for your Post Types option, select the + icon in the Select Pages section:
30 of 182
6/29/2016 2:30 AM
Next you'll see a popup modal that where you can select the pages you wish to include in the grid:
31 of 182
6/29/2016 2:30 AM
And then you'll see your chosen pages listed.
32 of 182
6/29/2016 2:30 AM
If you've chosen Ess. Grids for your Source Option , this is a Custom Post Type that's automatically created when you install
and activate the Essential Grid plugin.
33 of 182
6/29/2016 2:30 AM
This Custom Post Type will represent the posts from the Ess. Grids menu item in your WordPress main menu.
34 of 182
6/29/2016 2:30 AM
If you've chosen Custom Grid for your "Source" option:
.. at the bottom of the page, you're preview will look like this:
Hover your mouse over the item, and then start hovering your mouse over the icons that appear. Each icon represents a type of
item you can add. The options are:
35 of 182
Image
YouTube
Vimeo
HTML5 Video
SoundCloud
No Media
6/29/2016 2:30 AM
Click any of the icon options, and you'll see a custom popup for each media type. If you click the Image icon, you'll have the
option to create multiple Grid Items automatically by choosing the Bulk option:
If you've chosen the "Bulk" option, you'll have the opportunity to select multiple images. Then afterward, new Custom Grid Items
will be created automatically for each image you've chosen:
36 of 182
6/29/2016 2:30 AM
If you've chosen Single , here's an example of what the Image popup looks like:
A custom Grid item essentially mimics the content you'd be able to add if you're Grid were based on regular WP posts. Add all the
custom data you wish to add, and then click the Add Element button to officially add the item to your Custom Grid.
37 of 182
6/29/2016 2:30 AM
Once your Grid Item is added, it will show up in the preview with it's own toolbar for further editing:
Once you're finished choosing your Source Option , click the green button titled Save Grid , and now you've officially created your
first Essential Grid :)
MEDIA SOURCE
The Media Source is found inside the Source section of your first grid:
38 of 182
6/29/2016 2:30 AM
39 of 182
6/29/2016 2:30 AM
As you can see, there are several options you can choose from. We'll be working with the Featured Image for now. We'll cover
this as well as the other media source options in more detail in the Essential Grid Items section of the documentation.
Options: Maximum Entries

Choose a maximum number of items to include in your Grid. For example, if your Grid is pulling in posts from a category named
"Animals", and this category has 100 posts, yet you only want to show the most recent 10 posts from this cateogry in your Grid,
enter the number "10" here. Otherwise, to load all available items into the Grid, use the number "-1".
Media Source: Default Image

Choose a default image to use for a Grid Item in case the item doesn't include one of the "Media Source" choices. For example, if
your Grid's main media source is "Featured Image", when a post doesn't actually have a "Featured Image" set, the default image
set here will be used instead.
Media Source: Set Image Source Type

Whenever you upload an image to your WordPress site, WordPress automatically creates multiple versions of the image, based on
the values in your WordPress Media Settings :
40 of 182
6/29/2016 2:30 AM
Depending on your Grid, it may be more efficient to load in the "Medium" or "Thumbnail" version for your Grid items as opposed to
the image's "Original" or "Large" version. Nevertheless, there are four options you can choose for your Image Source Type , and
they'll apply to both the Featured Image and the First Content Image options shown in the following screenshot:
GRID ITEM OPTIONS
41 of 182
6/29/2016 2:30 AM
Once you create or import a Grid, you can start populating the content for each individual Grid Item . Grid's can be based multiple
source types. Click here to review how you can set the Source Type for your Grid. The four options are:
1. Posts
2. Pages
3. Ess. Grids Posts
4. Custom Grid Items
Let's start with options 1-3 above. Inside the post/page for each of these options, below the WYSIWYG editor, you'll see some
custom options for Essential Grid. This is where you can set any Custom Meta Data you've created for your Grid.
After the Custom Meta Data section is the Alternative Sources section. Alternative Sources are for when you want to include
custom media for your Grid Item's Media Source. The "Media Source" is chosen from your Grid's main settings page. The
screenshot below shows the media source types that apply to the "Alternative Sources" section:
42 of 182
6/29/2016 2:30 AM
If "HTML5 Video" is selected as our Grid's main Media Source, the "Alternative Sources" section is where the video's url can be
entered:
Enter the full url of your videos into these fields. An MP4 version is required and will be used for most browsers. OGV and
WEBM are alternative videos that will be used when "mp4" is not supported, such as for Firefox on Macs
(https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats). The following link is to a free video converter which is
great for creating "ogv" and "webm" versions of your videos.
http://www.mirovideoconverter.com/ (http://www.mirovideoconverter.com/)
If you've created "ogv" and "webm" versions of your video, and it's still not working in Firefox, it's possible your server doesn't
support the "ogv" and "webm" file-types. But this can be fixed by updating your site's ".htaccess" file (http://voice.firefallpro.com
/2012/03/html5-audio-video-mime-types.html).
The next Alternative Source Types are YouTube and Vimeo:
43 of 182
6/29/2016 2:30 AM
Here, you can enter the video's ID into either field. To get your YouTube or Vimeo's video ID, visit the video on Youtube.com or
Vimeo.com, and the video's ID will be part of the url shown in the browser's address bar:
YouTube ID
Vimeo ID
The next Alternative Source Type is SoundCloud
To get your SoundCloud song's "track" ID, visit the song on SoundCloud, and click the "Share" button:
44 of 182
6/29/2016 2:30 AM
Then click the "Embed" tab, and copy the embed code to your computer's clipboard:
Next, open your favorite text editor, and paste the iframe code into it. Then copy the url's "ID", which will be right after the "tracks/"
part of the url:
45 of 182
6/29/2016 2:30 AM
The next "Alternative Source" option is the "Alt Image". This is a good option for when you don't want to use an image from
the actual post, such as the post's "Featured Image" or the post's "First Content Image":
The last Alternative Source option is for including an iframe. Paste your iframe's code into this field if you wish to load an
iframe as your media source. Here's an example:
The last part of the custom options is the Custom Post Based Skin Modifications section. Here you can create custom skin rules
that will apply specifically to the Grid Item itself. To create a Custom Skin Rule, click the Add New Custom Skin Rule button, and
then select the skin you're using from the first dropdown (1). Then select the layer you wish to modify from the second drop-down
(2), and then choose the style you wish to change from the third dropdown (3).
46 of 182
6/29/2016 2:30 AM
Lastly, if you're using a Custom Grid for your Grid's "Source Type", your Grid Items won't be based on pages or posts, and instead
will be created manually inside the Grid's settings. Alternative Media sources are not needed for Custom Grid Items, as the media
source will be directly chosen when creating your Custom Grid Items.
GENERAL GRID SETTINGS

Layout
Columns
Pagination & Smart Loading
Spacings & Paddings
Now that we've created a new Essential Grid , we're ready to get started adjusting the look of the grid. For this example, I've
chosen Posts as the Source Type , and have created 8 posts, all with a Featured Image and some dummy text.
47 of 182
6/29/2016 2:30 AM
Of course, these posts can be titled anything. Here's what each one looks like for now:
48 of 182
6/29/2016 2:30 AM
Later on, we'll discuss customizing the content for a grid item based on a post. But for now, to start customizing the grid itself, all
we need are some posts that all have a Featured Image and some dummy text as shown in the screenshot above.
If you've been clicking around the Grid's admin, you've probably noticed that most of the options have tooltips. These tooltips will
help you navigate through the large array of settings Essential Grid has to offer.
49 of 182
6/29/2016 2:30 AM
And if you scroll down to the bottom of the Grid Settings page, you should now see a preview of your first Essential Grid:
50 of 182
6/29/2016 2:30 AM
51 of 182
6/29/2016 2:30 AM
Now we can start adjusting the settings on the page, and after each adjustment, clicking the blue Refresh Preview button will then
reflect the settings change in the preview:
52 of 182
6/29/2016 2:30 AM
53 of 182
6/29/2016 2:30 AM
Some settings, such as Smart Loading -> Lazy Load , are best previewed when the Grid is live on a page. But because we're still
setting up our grid, create an unpublished "test" page for your live preview. Skip over to the Adding the Grid to a Web Page section
if you want to quicky do that, and then come back here to continue learning about the different Essential Grid Settings :)
Ok, got your previews setup? Great! Let's discuss the different Grid Settings and what they do.
LAYOUT
54 of 182
^ BACK TO GRID SETTINGS MENU
6/29/2016 2:30 AM
Layout -> Boxed

Choose this setting if you want the Grid to always fit inside your site. This option is usually best for most sites, and since Essential
Grid is responsive by default, if your site happens to be reponsive , the grid will always resize along with your site.
Layout -> Fullwidth

Choose this setting if you want the Grid to span across the entire screen's width, no matter what the screen size.
Layout -> Fullscreen

Choose this option if you want the Grid to consume the entire screen when the page first loads. When the Grid is displayed this
way, any content placed below it will automatically be pushed off the screen, forcing the user to scroll the page to view the rest of
your page's content.
When this option is chosen, you'll see a new option appear directly underneath that's titled Offset Container . Because the Grid is
going to consume the entire screen, you may want to account for other elements on the page that will also be visible, such as your
theme's header , nav or footer . If so, enter these elements into the Offset Container field:
55 of 182
6/29/2016 2:30 AM
The Offset Container should be anything that can be used as a jQuery selector . For example, if you want the Grid to account for
your site's navigation menu, the Offset Container could be the navigation element's tag name (if unique such as nav ), or it could
be the navigation element's ID , or its class name. Here are some examples:
nav - tag name
#navigation - ID
.navigation - class
Grid Layout
56 of 182
6/29/2016 2:30 AM
Grid Layout -> Even

Choose this option for a perfectly symmetrical grid, where items will always be the same size as each other
57 of 182
6/29/2016 2:30 AM
Grid Layout -> Masonry

Essentially a non-symmetrical grid, where the width of the items will always be the same, but the height of each item will vary
depending on the original image's size ratio.
58 of 182
6/29/2016 2:30 AM
Grid Layout -> Cobbles

A symmetrical grid, with uneven Grid Item sizes. For example, a grid item can take up exactly 2 columns and 1 row, 1 column and
2 rows, etc.
59 of 182
6/29/2016 2:30 AM
When using Cobbles , the number of columns and rows an item takes up is set individually per item. This can be done by editing
the item's "Post Meta":
60 of 182
6/29/2016 2:30 AM
61 of 182
6/29/2016 2:30 AM
Additional Grid Layout Options
62 of 182
6/29/2016 2:30 AM
Content Push - Applicable for "Even" Grids

If the Grid's skin is designed to show additional content below the Grid Item on mouse-hover, for the last row of items, the content
would appear on top of other page content below the Grid. This options prevents this overlap, and adds extra space between the
bottom of the Grid and other page content, to make sure that the content never overlaps.
Items Ratio X:Y - Applicable to "Even" and "Cobbles" Grids

The ratio for which your Grid items will be displayed. Depending on the original size ratio of the images displayed inside your Grid,
adjusting these values can often improve the image's display. For example, if the majority of your images are 500x300 in size, a
5x3 "Items Ratio" would work best.
RTL - The Grid's main flow direction

Every Grid has a display order (most recent posts first, etc.). Choosing the "RTL" option will reverse this order, so the first item
meant to be displayed in the Grid will start from the top right of the Grid instead of the top left.
COLUMNS
63 of 182
6/29/2016 2:30 AM
Quick Note:
The Columns section will allow you to designate a specific column number based on the current screen width. If you're rather just
use the default sizes, choose Simple , and adjust the number of columns you'd like your Grid to display based on each listed size:
If you'd like more control, choose the Advanced option, and you'll be able to designate a specific width for each viewport:
64 of 182
6/29/2016 2:30 AM
Using the Advanced option, you'll also notice a new option toward the top right, that will allow you to set different column numbers
based on a different set of rows. Clicking the blue + button will add another set of row options you can add to your advanced
columns settings:
65 of 182
6/29/2016 2:30 AM
And you can add even more sets of rows settings by clicking the blue + button more than once. This allows you to get creative in
the way your grid is displayed. In the screenshot below, notice how I've set the same number of columns for the odd numbered
sets (Rows 1-5-9 and 3-7-11), and the same number of columns for the even numbered sets (Rows 2-6-10 and 4-8-12).
Here's an example of what these jagged numbered rows would look like in a Tablet Landscape viewport. Notice how the images
resize per row based on the number of columns to fit the available width.
66 of 182
6/29/2016 2:30 AM
Lastly, if you add a new Set or rows, and what to delete it, click the blue - (minus) button and that will delete the last row in the
set.
PAGINATION
Quick Note:
67 of 182
6/29/2016 2:30 AM
Pagination -> Enable

If your Grid happens to include a large number of items, you may not want to show them all at once when the page first loads. This
is where the Pagination option comes in handy. Choosing Enable will only show the Max Visible Rows set by you, and then if
your Grid has more items, they'll be shown when your website visitor clicks the Pagination numbered buttons.
If you've set Pagination to Enable , but aren't seeing any Pagination numbered buttons in your preview, it means they need to be
added to your Navigation Skin (Essential Grid Settings -> Navigation -> Navigation Layout). Setting up your Navigation Skin is
covered in more detail here.
68 of 182
6/29/2016 2:30 AM
When choosing your Pagination option, you'll see there are different options for the Smart Loading section for when Pagination is
enabled and when it's disabled. When it's enabled, you'll have the option of Lazy Loading your additional images when the
Pagination buttons are used to click over to a new set of items:
Lazy Load basically means that the additional Pagination items that aren't immediately visible on the page are loaded
on-demand . This option is quite useful when your Grid has a large amount of items, and you don't want your web page to load as
fast as possible when a user first visits your web page.
Choose Off for Lazy Load if you'd rather load all your item's images as soon as the page loads. This is usually a good option
when you don't have a lot of items, and want the pagination transition to happen as seamlessly as possible (the images will
essentially be preloaded , meaning they'll appear instantly when the Pagination buttons are clicked).
Lastly, if you're using the Lazy Load option, the Lazy Load Color will represent the placeholder color that will be shown until the
image is loaded on-demand. When you click the Select Color button, you can choose a color from the color wheel, or enter a hex
color manually into the text field as shown in the following screenshot:
69 of 182
6/29/2016 2:30 AM
Pagination -> Disable

If you don't want to use Pagination for your grid, when its set to Disable , you'll see a different set of options for the
Smart Loading . In this section, you'll have the option to use a More button, or an Infinite Scroll (where items will load when the
user scrolls the page).
When either the More or Infinite Scroll options are used, you'll also see the options Nr. of Items Start and Nr. of Items More .
Use these options for setting how many items you want to load initially, and how many items you want to load each time the More
button is clicked.
70 of 182
6/29/2016 2:30 AM
These options won't show up in your back-end preview, but here's an example of what the above settings would look like on the
font-end:
Lastly, if you just want to show all your available grid items no matter what, set the Pagination to Disable , and the
Smart Loading -> Load More option to None .
71 of 182
6/29/2016 2:30 AM
SPACINGS AND PADDINGS
The Item Spacing will represent the space between the items themselves, and the Padding values will represent the space
between the Grid itself and its immediate HTML parent element. Here's an example:
NAV-FILTER-SORT
72 of 182
Navigation Positions
Grid Internal Controls Position
Module Spaces
Pagination Settings
Filter Groups
Sorting
6/29/2016 2:30 AM
NAVIGATION POSITIONS
^ BACK TO NAV-FILTER-SORT MENU
The first section, Navigation Layout , is a WYSIWYG editor for setting up your custom navigation controls:
Available Modules - The buttons/controls that can be added to your Grid.

Controls Inside Grid - The sections available for adding an Available Module as part of the Grid itself.
To add an Available Module to the Grid, drag the click and drag the button with your mouse into one of the available "Drop
Zones":
73 of 182
6/29/2016 2:30 AM
You can add multiple modules to the same DropZone. In the screenshot below, I've added both the "left" and "right" arrows to
"DropZone Top 2":
74 of 182
6/29/2016 2:30 AM
Let's go ahead and all the modules to the DropZones, and then click Refresh Preview to see an example of how these elements
will look when added to our actual Grid:
75 of 182
6/29/2016 2:30 AM
Add navigations controls anywhere on the page via ShortCode

Attach a navigation element to the Grid, but instead of adding it to the Grid itself, create a shortcode for the navigation element so
you can place it somewhere else on the page. For example, you could add a navigation shortode to your page, then add some
custom text, and then add the Grid's shortcode.
76 of 182
6/29/2016 2:30 AM
INTERNAL CONTROLS POSITION
Now that we've added our buttons and controls to the Grid, we can begin to customize their positioning. For this example, I've
used the following navigation setup:
77 of 182
6/29/2016 2:30 AM
Next, I applied the following settings to the Internal Controls Layout :
78 of 182
6/29/2016 2:30 AM
.. then clicked Refresh Preview , and here's what our updated Grid looks like:
79 of 182
6/29/2016 2:30 AM
MODULE SPACES
The Module Spaces option is for when you have two or more "Available Modules" placed in the same DropZone. In our example,
this applies to our "DropZone Top 2", where we have both the Filter and Sort modules placed next to each other. So if we apply
a 35 value to the Module Spacing field:
.. and then clicked Refresh Preview , we'd see a 35px space between our Filter and Sort modules:
80 of 182
6/29/2016 2:30 AM
PAGINATION SETTINGS
Scroll to Top: When set to "On", the page will scroll back to the top of the Grid when a pagination button is clicked. If set to "Off",
no scrolling will take place.
Scroll to Offset: If "Scroll to Top" is set to "On", you can enter an offset value here in pixels to better control the actual page scroll
position.
FILTER GROUPS
The Filter module allows us to filter the Grid based on the Category set for each of our item's posts:
81 of 182
6/29/2016 2:30 AM
The Filtering section is for customizing the "Filter" module's behavior if it's being used in the Grid's navigation.
Filter Type:
1. Single - Choose this for traditional "buttons", where only one category can be selected at a time.
2. Multiple - Choose this if you'd like the ability to select multiple categories at the same time.
In our example so far, we've been seeing the default Filter Type setting which is Single . Let's take a look at how our Grid looks
with the Filter Type set to Multiple :
.. then after clicking Refresh Preview , here's what our new Filter buttons look like:
82 of 182
6/29/2016 2:30 AM
In this section, you'll see a "Filter Group" named "Filter 1" as shown here:
This "Filter Group" corresponds to the navigation element in the WYSIWYG section of the same name:
83 of 182
6/29/2016 2:30 AM
A Grid can have multiple filter groups, that each correspond to their own unique set of post categories. To create an additional
Filter Group , click the "+" button below the currently listed Filter Group(s):
You'll then see a new Filter Group listed:
84 of 182
6/29/2016 2:30 AM
And then you'll see a new navigation element in the WYSIWYG editor that corresponds to the newly created "Filter Group 2":
85 of 182
6/29/2016 2:30 AM
Filter Group Settings:

Filter "All" text: Choose the text to be used for the default button that will show all items.
Layout Option: Choices are "Inline" and "Dropdown". "Inline" will display the filters as buttons next to one another, and
"Dropdown" will display the filter choices in a traditional drop-down menu.
Dropdown Start Text: If "Dropdown" is chosen as the "Layout Option", the text entered here will the drop-down menu's main
text (i.e. "Choose a Filter", etc.).
Available Filters in Group: The options listed here will represent the list of post categories being used for the Grid. Here you
can select all categories, or just a few, and can also set a custom order by dragging and dropping the filter categories on top of
one another with your mouse.
SORTING
The Sorting section is for customizing the "Sort" module's drop-down list.
86 of 182
6/29/2016 2:30 AM
The first option, Sort By Text is for choosing the text that will be shown as the drop-down menu's title:
87 of 182
6/29/2016 2:30 AM
Next, choose what sorting options you want to include by using Ctrl-Select for each Available Sortings option:
Once you've chosen the items you wish to include, click Refresh Preview , and you'll see them listed in your Grid's Sort module.
88 of 182
6/29/2016 2:30 AM
Lastly, the Start Sorting By option is for what sorting option should be used when the Grid first loads, and the Sorting Order
options are Ascending and Descending , which will determine the order in which the items are sorted. For example, if you were
to "Sort by Title", with an "Ascending" sorting order, the items would be sorted from "A-Z", and "Descending" would be would be
"Z-A".
89 of 182
6/29/2016 2:30 AM
SKIN SETTINGS
The Skin Editor consists of 3 parts:

1. Background - The main background color of your Grid
2. Navigation - The CSS skin used for your navigation elements
3. Item Skins - The layout used for the individual Grid items (30 different choices!)
Special Note: A Grid can have only have one Item Skin (i.e. the selected skin will be used for ALL items in your grid). However,
you can make "Skin Modifications" per grid item inside the "Custom Post Based Skin Modifications (see the last part of this
section).
BACKGROUND
Here you can set the main background color for your Grid. Use the color picker, or you can also enter a hex color manually into the
text field.
Choose Default for no background color (transparent).
90 of 182
6/29/2016 2:30 AM
NAVIGATION
The Navigation section is for editing the different skins available for your Grid's navigation:
91 of 182
6/29/2016 2:30 AM
We've been using the Minimal Light skin in the documentation so far, but let's take a look at what the different default skins look
like (For better contrast between colors, I've adjusted the Grid's background-color in some of the examples).
92 of 182
6/29/2016 2:30 AM
93 of 182
6/29/2016 2:30 AM
94 of 182
6/29/2016 2:30 AM
The CSS for any of the above skins can be edited by selecting the skin from the drop down, and then clicking the Edit Skin button:
95 of 182
6/29/2016 2:30 AM
You can also create a new custom Skin. This is a great option in case you want to modify a skin, but at the same time, preserve
the original default skin for later usage.
96 of 182
6/29/2016 2:30 AM
After clicking the Ok button, you'll see a popup of a CSS template where you can edit the CSS for your new custom skin:
97 of 182
6/29/2016 2:30 AM
Click the Save button, and then you'll see the new skin in the drop-down list:
You may have noticed the the default template used when creating your custom skin was Flat Light Buttons . If you want to use
another template for your custom skin, just choose it from the drop down, click Edit Skin , copy its entire CSS, and then replace
the CSS in your new custom skin with the CSS from the other template.
If you've created a custom skin but no longer need it, you can delete it from the drop down list by clicking the Delete Skin button:
You'll then see a popup alert asking you to confirm your choice. The message in the popup explains that this is a GLOBAL
change, and if you proceed to delete the skin, it will no longer be available for ANY other Essential Grids you may have previously
created (so always delete with caution!)
ITEM SKINS
There are 30 prebuilt Item Skins that you can choose from. An item with a blue toolbar equals an unselected skin. The item with
a green toolbar is your currently selected skin:
98 of 182
6/29/2016 2:30 AM
Use the pagination to view all 30 skins. Skins have a preset default view, and a preset hover view. Hover your mouse over each
skin to preview the item's hover view.
You can also filter the skin view using the filter buttons, directly above the pagination:
The filter buttons are:

Filter - All: View all skins
Selected Skin: View only the currently selected skin
Favorites: Filter skins you've designated as a Favorite inside the Item Skin Editor.
Masonry: View the skins that have a Masonry layout (where the items' height will often vary)
Even: View skins where each item is meant to be evenly aligned (same width & height, symmetrical view)
Once you've chosen a default Item Skin , it can be customized inside the Item Skin Editor.
MAIN ANIMATIONS
The Animations section of the Grid Item Settings is where you can customize the main animation for the Grid itself. This
includes when the Grid first loads into the page, or when the Grid is filtered by using one of the category filters or with pagination.
Grid Animations -> Start And Filter Animations

Choose from one of the 11 available animation types:
99 of 182
6/29/2016 2:30 AM
Grid Animations -> Animation Speed

Set a speed for your chosen animation (in milliseconds)
Grid Animations -> Animation Delay

Use this option for creating a delay between the items themselves when they animate in. For example, if you have a Grid with a
large amount of items, animating them all at the same exact time will decrease the animation performance. So for a Grid with a
large amount of items, increasing this number will effectively space out the item animations, which will result in increased
animation performance (animations will appear smoother).
100 of 182
6/29/2016 2:30 AM
Hover Animations -> Hover Animation Delay:

This setting will add a delay to your hover animations:
LIGHTBOX SETTINGS
In this section, you can choose the default media source you wish to open inside the lightbox, as well as several other custom
settings for the lightbox itself.
Shown Media Orders -> Set Source Order
Lightbox Gallery -> Gallery Mode

101 of 182
6/29/2016 2:30 AM
Options for this are:

Single Mode: Open only that item inside the lightbox
All Items: Show a mini-gallery showing all items from your Grid
Filter based all Pages: Show a mini-gallery based on your Grid's pagination
Filter based current Page: Show a mini-gallery based on the currently selected pagination page only
Lightbox Layout
In this section, you have the option to display a title for the item shown in the lightbox, and can also choose to use social buttons
such as Facebook and Twitter:
Lightbox Spacing
In this section, you can set the padding for both the title (is used) and media content. Padding values are based on pixels.
102 of 182
6/29/2016 2:30 AM
Effects
The Effects section is where you can choose the animation settings for when the lightbox opens and closes, and also when the
lightbox navigates to a new item:
Navigation
In the Navigation section, you can choose to use Navigation Arrows and also choose to show optional Mini Thumbnails (both
options only apply to when the lightbox has more than one item).
In addition, you can also set the desired width and height for your thumbnails (in pixels).
VIDEO / SPINNER
Note:
Video
103 of 182
6/29/2016 2:30 AM
The Video section in the Essential Grid Settings is where you can set where your video's poster content is pulled from, and in
what order.
Spinner
The Spinner section in the Essential Grid Settings is where you can set the main preloader for your Eseential Grid. Here you can
also choose to Hide Markups before load , which will essentially hide all navigation elements until the Grid Items have loaded.
104 of 182
6/29/2016 2:30 AM
ITEM SKIN EDITOR
The Item Skin Editor is where you can customize any of the 30 available item skins. At the top of each skin, you'll see a toolbar
which will allow you to Favorite a skin for easier preview filtering, duplicate any given skin, delete a skin, and lastly, customize the
skin's content, layout and styles.
105 of 182
6/29/2016 2:30 AM
When you "Favorite" a skin, it will begin to show up in the Favorites preview filter. Once you "Favorite" a skin, the star symbol in
the toolbar will show up as a solid color. Then selecting the Favorite filter button will now show the list of skin's you've marked as
"Favorite".
106 of 182
6/29/2016 2:30 AM
The duplicate option is a good option for preserving the original skin in case wish to use it later. That way you can make edits to
the duplicated skin, while leaving the original intact in case you wish to use the original later, or in case you make a mistake editing
and wish to start over.
If you choose to duplicate a skin, it will be titled Item Skin 1 , and will show up last in the list of skins. Use the pagination to
navigate to your new, duplicated skin:
107 of 182
6/29/2016 2:30 AM
Always delete with caution!

If you've duplicated a skin and no longer wish to use it, you can click the delete icon in the item's toolbar.
Once we've decided which skin we wish to use, we can customize it by clicking the green cog icon:
108 of 182
6/29/2016 2:30 AM
Then we'll be taken to the item's individual skin editor:
109 of 182
6/29/2016 2:30 AM
Now that we're on the individual Item Skin editor, you'll see a small toolbar fixed to the right side of the screen. Let's quickly review
the buttons in this toolbar:
110 of 182
6/29/2016 2:30 AM
At the beginning of the page, you'll see that you can rename the skin for easier reference. The name of the skin will always be
used for the prefix applied to the skin's CSS class rules. So in the following example:
.. the Class Prefix is now based on our item's skins' new name: My Custom Item Skin . So if we wanted to add some custom
CSS for the skin into the Global Custom CSS box (button shown in screenshot above), we can now use the prefix for the
element we want to target, making it so the CSS is only applied to the current skin being edited. Here's an example:
111 of 182
6/29/2016 2:30 AM
The individual Item Skin Editor consists of 4 main sections:

1. Item Layout: WYSIWYG/Preview of your current item skin
2. Available Layers: Prebuilt text styles, icons and buttons that can be inserted into the Item Layout
3. Layout Composition: General look and positioning of elements
4. Layer Settings: Set custom styles the individual item elements
Now that we've reviewed the page, let's start editing our skin! Once you begin to make edits, the Item Layout section will begin to
reflect your custom settings.
ITEM LAYOUT
112 of 182
6/29/2016 2:30 AM
The Item Layout section is the WYSIWYG preview for your Item Skin. As you make changes to the skin using the other sections
of the Item Skin Editor, you'll see the changes reflected in this section.
Inside the Item Layout section, we can add/remove items, and then click and drag them around the preview canvas for proper
placement. Here's a quick overview of the Item Layout section:
From the above screenshot:

1. Button to Play the hover animation in real-time. This option is particularly useful when customizing your Item Skin's animation
settings.
2. 3D view of your Grid Item layers. Great for getting a better visualization of the Grid Item's layers.
3. Button to hide preview architecture. Provides a more authentic look of what you'll be seeing on the front-end.
4. Top Drop Zone . A "fixed" area within the Grid Item Skin. Anything "dropped" here will be automatically positioned at the top.
5. Facebook icon element. The purple star next to the element means that it's currently the selected item in our Item Layout .
6. Line Break which serves as a separator for content. Content can be dragged and dropped above or below a line break.
7. Text block based which will display the item's Post Title .
8. Bottom Drop Zone . A "fixed" area within the Grid Item Skin. Anything "dropped" here will be automatically positioned at the
bottom.
Clicking any of the elements inside the Item Layout will designated it as the "selected" item. Go ahead and click on the
Layout Settings tab, and then click an element inside the Item Layout. After doing so, you'll see the current item selected in the
Layout Settings will be the same as the element you just selected in the Item Layout. This allows for quick and easy styling of
individual elements.
113 of 182
6/29/2016 2:30 AM
Let's go ahead and reposition some of our elements, starting by dragging and dropping the Post Title into the top Drop Zone :
After moving the Post Title element, you'll now see we have two Line Breaks , directly on top of one another. Let's go ahead and
remove one of them by selecting one and then clicking the red Remove button:
114 of 182
6/29/2016 2:30 AM
Next, let's replace the cog wheel icon with a Twitter icon instead. Select the cog wheel from the Item Layout , and then click on
the icon graphic shown in the Layer Settings to select a new icon:
115 of 182
6/29/2016 2:30 AM
116 of 182
6/29/2016 2:30 AM
117 of 182
6/29/2016 2:30 AM
Next, I went ahead and moved our new Twitter button so it's placed between our Facebook and Link buttons. But we now have
some awkward spacing between out Twitter and Link buttons, as shown in the following screenshot:
Let's go ahead and fix that real quick by adding a 10px right-margin to the Twitter icon:
118 of 182
6/29/2016 2:30 AM
.. and then lets remove the right-margin that was previously applied to our Link button, so our 3 buttons are perfectly centered:
119 of 182
6/29/2016 2:30 AM
Finally, lets add a Read More button from our Available Layers section to the bottom Drop Zone in our Item Layout :
120 of 182
6/29/2016 2:30 AM
And to center our new Read More button, let's set the element's Float to None , and also give it a 10px bottom-margin for a
better appearance:
121 of 182
6/29/2016 2:30 AM
Finally, let's see how our changes look on the frontend:
122 of 182
6/29/2016 2:30 AM
AVAILABLE LAYERS
The Available Layers section is where we can drag and drop elements into our Item Layout section:
Here's a description for the listed numbers in the above screenshot:

1. Drag & Drop Line Break element.
2. Buttons for filtering the available layers
3. Drag an item here to delete it from the list (this is permanent so delete with caution!)
4. One of the Drag & Drop elements
5. Pagination for the Available Layers . Click the #2 to see more Available Layers .
123 of 182
6/29/2016 2:30 AM
LAYOUT COMPOSITION
Layout -> Grid Layout
Choose Even if you want your items to all have the exact same height (symmetrical grid).
If Even is chosen, you'll see a Ratio X and Ratio Y option. These options will be used for the content spacing in the
Item Layout :
124 of 182
6/29/2016 2:30 AM
Choose Masonry if you'd like your Grid's items to have a flexible height (non-symmetrical Grid).
125 of 182
6/29/2016 2:30 AM
Layout -> Content
This option is for any content that will be shown outside the image container. For a good example, click the blue back button in
the top-right-hand toolbar, and let's select the Coolidge skin:
126 of 182
6/29/2016 2:30 AM
Now that we've selected the Coolidge skin, we'll see it in the Item Layout section. The content part of the skin is shown in the
following screenshot:
127 of 182
6/29/2016 2:30 AM
Now we can use the Content options to position our content in different ways. The screenshot above has Bottom Center
selected. Let's take a quick look at what Top Left would look like:
128 of 182
6/29/2016 2:30 AM
You may notice that even though we set the content to be Top Left , some of the elements are still centered. This is because the
elements themselves have a text-align: center applied to them. Lets left align these elements.
Hover your mouse over the element named Post Title , and then left-click your mouse. After doing so, you'll notice a purple star on
the same line as the selected element:
129 of 182
6/29/2016 2:30 AM
This purple star means the Post Title has been designated as the Selected / Editable element. Now that it's selected, we'll now
see it listed in Layer Settings dropdown:
Select the arrow toward the right, and this will open up the editor for the Post Title . Use the options shown in the following
screenshot to left-align the text:
130 of 182
6/29/2016 2:30 AM
Then repeat the process for the Learn More link, and here's our updated Item Layout with everything now left-aligned:
131 of 182
6/29/2016 2:30 AM
Click the blue back button, and lets see how the Coolidge skin looks in our general skins page (I've marked the skin as a
Favorite for easy filtering view)
And let's take a quick look at how this would look on the front-end of our site:
132 of 182
6/29/2016 2:30 AM
Cover -> Cover Type

For a good example of this setting, let's switch back to the default Washington skin. Then to view the item's Cover in action, click
the blue play button in the Item Layout section:
133 of 182
6/29/2016 2:30 AM
Now let's switch the Cover Type to Content Based . Here's how our preview would look now. Notice the content's background no
longer fills the entire area, and only covers the area where the actual hover content is:
134 of 182
6/29/2016 2:30 AM
Cover -> Background Color

Now let's adjust the cover's background color:
135 of 182
6/29/2016 2:30 AM
Cover -> Opacity

And lastly, let's adjust the cover's transparency :
136 of 182
6/29/2016 2:30 AM
Spaces -> Full Item

In this section, you can designate the item's padding, border, and corresponding colors to give the item a customized frame look.
137 of 182
6/29/2016 2:30 AM
Here's an example of the above settings on our front-end. To accentuate the frame , I've given the grid items some spacing (Grid
Settings -> Spacings -> Item Spacing -> 5px)
138 of 182
6/29/2016 2:30 AM
Spaces -> Content

For a good example of this option, I've switched back to the Coolidge skin:
139 of 182
6/29/2016 2:30 AM
In the above screenshot, you'll notice that adjusting the background color of the content didn't change the background color of
everything. Let's go ahead and fix that by adjusting the individual element styles:
.. and then repeat the process for the Learn More hyperlink as well. Now we have a nice solid colored background for our entire
content section:
140 of 182
6/29/2016 2:30 AM
and here's a quick view of our changes on the front-end:
141 of 182
6/29/2016 2:30 AM
Shadow
The Use Shadow options are Media , Content and Both . For the following example, I've chosen Both :
142 of 182
6/29/2016 2:30 AM
Animation
The Animation section is where you can customize the hover effect animation for your Grid Items:
143 of 182
6/29/2016 2:30 AM
LAYER SETTINGS
This section is for the individual Grid Item elements. This includes text, icons, buttons and hyperlinks. Essentially all of the
elements visible in your Item Layout section (right side of screenshot below), will become editable in the Layer Settings section.
144 of 182
6/29/2016 2:30 AM
Before you begin to make your edits, if you want to preserve the element's original settings, you can use the Save As Template
button to essentially duplicate the current element, and then save the duplicated element under a new, unique name:
145 of 182
6/29/2016 2:30 AM
Layer Settings -> Source

The Source dropdown has 3 choices. Icon , Post and HTML :
146 of 182
6/29/2016 2:30 AM
When Icon is chosen, you'll have the option to change the icon:
147 of 182
6/29/2016 2:30 AM
148 of 182
6/29/2016 2:30 AM
Use the Post option if you want to pull in post-based content from the post that each item is based on. The screenshot below
shows the list of available options:
149 of 182
6/29/2016 2:30 AM
When Post is chosen as the Source type, you'll then have the option to limit the post-based content by characters or words:
150 of 182
6/29/2016 2:30 AM
When HTML is chosen as the Source type, you'll see a text area box where you can enter custom HTML:
151 of 182
6/29/2016 2:30 AM
Custom Meta Tags can also be used when Post and HTML are chosen.
Layer Settings -> Style

This section is where you can apply styles such as font and color to the element. If you're styling an icon, adjust the font-size to
increase or decrease the size of the icon. Font-Family is not needed for icons.
152 of 182
6/29/2016 2:30 AM
Each option in the Layer Settings has both an "Idle" and a "Hover" setting. For any given section, click the Hover tab to apply
specific hover styles for that element.
If you do not wish to apply a hover effect, un-check the Hover checkbox and the hover styles will be ignored.
153 of 182
6/29/2016 2:30 AM
To use the default styles from another element from the Available Layers section, drag and drop the layer into the
Drop Style for Change box:
154 of 182
6/29/2016 2:30 AM
Layer Settings -> Style -> Spacing

Inside the Spacing section, you set custom styles for the elements' CSS position, display, float, clear, margin and padding
properties:
Layer Settings -> Style -> Border

In this section, you can customize the available border settings for the element:
155 of 182
6/29/2016 2:30 AM
Layer Settings -> Style -> BG

Edit the background color of your element, and also the background color's transparency level:
156 of 182
6/29/2016 2:30 AM
Layer Settings -> Style -> Shadow

Apply a CSS shadow to your element:
157 of 182
6/29/2016 2:30 AM
Layer Settings -> Show/Hide

In this section, you can choose to hide the layer based on the Grid Item's current width. This option is particularly useful when you
want to hide an element on mobile. For example, entering a number such as 640 into the Hide Under Width field will hide the
element whenever the Grid Item's width falls below 640px.
You can also check the Hide if Media is Video box to hide the element if it happens to be a video.
158 of 182
6/29/2016 2:30 AM
Layer Settings -> Animation

In this section, you can set the custom animation for the individual layer. The Transition drop-down has 25 choices. After
selecting an option, click the blue play button in the Item Layout section to see a preview of the animation. You can also set a
delay for the transition to setup sequenced transitions between your item's elements.
159 of 182
6/29/2016 2:30 AM
Layer Settings -> Link/SEO

The Link/SEO section is where you can hyperlink your elements, and also apply HTML attributes for SEO:
160 of 182
6/29/2016 2:30 AM
Link To options:
None: No hyperlink applied
Post: Link to the post that represents the Grid Item
URL: Link to a custom URL that you enter
Meta: Link to a custom post-meta
JavaScript: Enter JavaScript to execute when the element is clicked
LightBox: Open content in the lightbox when clicked
Play Embedded Video: Play your video content if available
The Use Tag option is the HTML element that will be automatically wrapped around your hyperlink. This allows for more flexibility
with styling. If you aren't sure what tag is best, or don't plan on utilizing the tag for styling purposes, use the default div option.
161 of 182
6/29/2016 2:30 AM
Layer Settings -> Link/SEO -> Fix: !important

WordPress themes usually apply global styles to HTML hyperlinks, and sometimes this can cause conflicts with custom styles you
wish to use for a module such as Essential Grid. When customizing your skin elements, if you find the styles you've selected aren't
showing up correctly, check the Fix: !important box, and that will apply !important declarations to your Grid Item's hyperlink
styles. Choosing this option will then override your theme's default hyperlink styles.
162 of 182
6/29/2016 2:30 AM
Lastly, for SEO purposes, you can enter a title into the Attribute field, and also assign a class name and rel attribute to the
hyperlink:
163 of 182
6/29/2016 2:30 AM
PLUGIN GLOBAL SETTINGS
Essential Grid comes with some "Global Settings" that are specific to the plugin itself.
164 of 182
6/29/2016 2:30 AM
Here's a breakdown of the options listed in the Global Settings:

View Plugin Permissions: Choose who can access the plugin's admin when logged into WordPress
Admin
Editor & Admin
Author & Editor & Admin
Advanced Tooltips: Enable/Disable tooltips when hovering over parts of the plugin's admin
Wait for Fonts: Wait for Google Fonts to load before rendering text on the page
Output Filter Protection: Combat custom theme filters that often break a WP plugin's HTML output markup. Only use this
option if your Grid isn't working on the front-end of your site. Try either available option if this is the case.
CUSTOM META DATA
The content for your Grid Items is always going to be based on Meta Data such as a post's Title or Excerpt . This data can be
set inside the Item Skin Editor. Here's a screenshot of the default meta data that's available:
165 of 182
6/29/2016 2:30 AM
If you want to add additional information that isn't listed in the screenshot above, this can be done inside the Custom Meta Data
section:
166 of 182
6/29/2016 2:30 AM
To add a new Custom Meta option, click the Add New Meta button:
You'll then see a popup modal, where you can name your new meta data, and also choose whether it should be based on text, an
image, or a select list. For this example, we'll choose the text option:
After clicking the Add Meta button, you'll then see the new item listed:
167 of 182
6/29/2016 2:30 AM
If your Grid is based on posts, you'll now see the new Custom Meta Data in the Essential Grid Custom Settings section:
Or if your using a Custom Grid for your Grid's Source , the new Meta Data will show up in your Custom Item:
168 of 182
6/29/2016 2:30 AM
Finally, add the new Custom Meta Data to your Grid in the Item Skin Editor:
169 of 182
6/29/2016 2:30 AM
ADDING A GRID TO YOUR SITE
There are three different ways you can add a grid to your pages. Each are listed below.
Shortcode Method
Visit the plugin's main admin page where your Grid is listed, and you'll see your Grid's Shortcode :
170 of 182
6/29/2016 2:30 AM
Copy this shortcode, and then paste it into one of your site's pages:
171 of 182
6/29/2016 2:30 AM
Widget Method
From WP Menu -> Widgets , drag and drop the Essential Grid widget into one of the widget sections your theme offers:
PHP Method
It's always best to use the first two options if possible. The reason is because the PHP Method involves editing your theme's php
files, and sometimes this is a bit complex, and it also means if you decide to update your theme, your custom edits will be lost
(you'll need to re-add the Grid each time you update your theme). Having said that, this is sometimes the best option when you
want to control exactly where the Grid appears within your theme. All theme's are different, so the process will vary for everyone,
but for this example, we'll add the Grid to the TwentyFourteen's page.php file, directly after the "main-content" div's opening tag:
GOOGLE FONTS
Inside the WordPress menu, you'll see a menu item named Punch Fonts . ThemePunch is also the author of several other
172 of 182
6/29/2016 2:30 AM
WordPress plugins, and the new "Punch Fonts" section is the new way you can include Google Fonts for all your ThemePunch
plugins (Slider Revolution, ShowbizPro, etc.).
After clicking the Add New Font button, a popup modal will appear where you can enter your Google Font information:
173 of 182
Handle - This is essentially the font's "WordPress Alias" that will be used for loading the font. Use your font's name, all
lowercase with no spaces.
Parameter - This is the Google Font's "loading parameter" (instructions for this below).
6/29/2016 2:30 AM
To get your Google Font's loading Parameter , visit Google Fonts, and find the font you wish to use:
Then click the "Quick Use" icon shown in the screenshot above, and on the next page, scroll down to section #3 named
Add this code to your website :
174 of 182
6/29/2016 2:30 AM
When copying this code, it's important to make sure you don't include the = sign or the single quote '
After adding your Google Font, you'll see it listed as one of the Punch Fonts :
Finally, to apply the new font to your Essential Grid, from the Item Skin Editor, the new Google Font will be listed in the editor's
Font Family drop-down, where it can then be applied to one of your Grid Item Skin's layers:
175 of 182
6/29/2016 2:30 AM
And here's our new font applied to the Grid Item's Title layer. To make sure the new font is officially applied, click the Save button
in the toolbar on the top-right part of the page:
176 of 182
6/29/2016 2:30 AM
IMPORT/EXPORT
To learn about importing the demo Grids, click here.
From the WordPress main menu, under the Ess. Grid menu item, you'll find the Import/Export section:
The Import/Export is useful for when you want to transfer a Grid or Grid Skin from one domain to another. If you need to update
the plugin, you won't need to export/import any of your Grid data, as updating the plugin will not override your existing Grids or Grid
177 of 182
6/29/2016 2:30 AM
Skins. However, in addition to performing regular database backups of your WordPress installation, you can also export your Grid
data as a secondary backup if you wish.
To create a full export, click the Export tab, and click the Export Selected button:
When exporting, you can choose what you want to export by toggling the checkboxes on and off from an entire category or items
178 of 182
6/29/2016 2:30 AM
within a category:
When clicking the Export Selected button, you'll be asked to save a ".json" file. This is the file that will contain all your export
information. Save it in a safe place so it can be imported at a later time.
179 of 182
6/29/2016 2:30 AM
After creating an export file, it can be imported by clicking the Import tab, then selecting the Browse button and choosing the
".json" file you previously created, and then clicking the Read File button:
Next you'll have thue opportunity to choose which parts of the exported data file you wish to import. All will be selected by default,
but you can toggle the categories globally or toggle an item inside a category as well. Once you've selected what data you wish to
import, click the Import Selected Data button to complete the import process:
TROUBLESHOOTING
If you've created a Grid and added it to one of your pages, but it isn't showing up, here's a list of things you check:
180 of 182
Try a different method of adding the Grid to your page.

6/29/2016 2:30 AM
Try choosing "By Compressing Output" or "By Echo Output" for the Output Filter Protection option in the Global Settings.
Update to the latest version of WordPress.
See if there's a conflict involved with another plugin or your theme. Temporarily switch to another theme and disable
your other plugins one by one and test the page throughout the process.
View your page's HTML source to see if the page is loading in more than one copy of jQuery's main script (a page should
always only load one copy of jQuery). Usually when a page is loading two copies of jQuery, it's because the theme is loading in
a custom copy of jQuery as opposed to the default jQuery that normally comes packaged with WordPress.
Troubleshooting FAQ's
Remove unwanted left padding/margin from Grid (http://www.themepunch.com/home/plugins/wordpress-plugins/removeunwanted-left-paddingmargin-grid/)
Visual Composer Tabs Compatibility (http://www.themepunch.com/home/plugins/wordpress-plugins/visual-composertabs-compatibility/)
Avoiding Duplicate Lightbox Content (http://www.themepunch.com/home/plugins/wordpress-plugins/hyperlinking/)
HTML5 Video Playback in one browser does not work (http://www.themepunch.com/home/plugins/html5-video-playbackin-one-browser-does-not-work/)
Purchase Activation Section is Missing (http://www.themepunch.com/home/plugins/wordpress-plugins/revolution-sliderwordpress/purchase-activation-section-is-missing/)
Copyright ThemePunch 2014 made with the Documenter v2.0 (http://rxa.li/documenter)
181 of 182
6/29/2016 2:30 AM
182 of 182
6/29/2016 2:30 AM

Essential Grid - For WordPress

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Essential Grid - For WordPress

Încărcat de

Drepturi de autor:

Formate disponibile

Essential Grid - for WordPress

WELCOME TO THEMEPUNCH'S LATEST PRODUCT "ESSENTIAL