Essential Grid - for WordPress

### Welcome to ThemePunch’s latest product "Essential Grid"

"Essential Grid" is an all-purpose grid building solution for WordPress that allows you to display different kinds of content in a highly customizable grid. Possible applications range from portfolios, blogs, galleries, services, product sliders, testimonials and anything else you can imagine. With it's various supported media types like images, youtube & vimeo videos, html5 self- hosted videos and even iframe content, "Essential Grid" will breathe life into your WordPress site!

- created: 04/13/2014
- latest update: 04/13/2014
- by: ThemePunch

FAQ's Videos Support

### Quick Links

- Shortcode
- 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

### 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:

Then select Browse, and choose the essential-grid.zip file from your computer.

Next, click the Install Now button:

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:

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:

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:

### Username:

This is your CodeCanyon username. It should be the same thing you type in to login to your CodeCanyon account:

### 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

From there, choose the My Settings tab:

and then choose the API Keys option at the bottom of the tab menu:

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:

###
Purchase Code:

To get your purchase code, head over to the following page:

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:

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:

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:

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).

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

### 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:

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.

## Source

Next, click the Source Tab, and choose either Post, Pages, Custom Posts, or Custom Grid:

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:

If you've chosen Post, select a post category:

If you wish to include more than one category, hold down the Ctrl key to select an additional category:

If you've chosen Page for your Post Types option, select the + icon in the Select Pages section:

Next you'll see a popup modal that where you can select the pages you wish to include in the grid:

And then you'll see your chosen pages listed. If you decide you want to delete a page from the list, click the trash can icon next to the listed page.

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.

This Custom Post Type will represent the posts from the Ess. Grids menu item in your WordPress main menu. We'll cover creating custom posts a bit later when we start to setup our grid items.

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:

- Image
- YouTube
- Vimeo
- HTML5 Video
- SoundCloud
- No Media

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:

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.

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:

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.

### 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:

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

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" Custom Post Type
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:

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. 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/

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.

The next Alternative Source Types are YouTube and Vimeo:

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:

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:

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).

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

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.

Of course, these posts can be titled anything. Here's what each one looks like for now:

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.

And if you scroll down to the bottom of the Grid Settings page, you should now see a preview of your first Essential Grid:

Note: You'll notice that each Grid item has its own toolbar. These options will be covered in detail in the Grid Item Options section.

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:

Note: It's always good practice to frequently save your Grid throughout the customization process:

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

#### 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. Keep in mind that even though your site's template may be inside a boxed container, this option will essentially force the grid to break out of the template's boxed container.

#### 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:

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 -> Even

Chose this option for a perfectly symmetrical grid, where items will always be the same size as each other Some images will be cropped if not all images are the same size ratio.

#### 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. Images may be resized but will never be cropped.

#### 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. Image cropping may occur to achieve layout symmetry.

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":

##

### Columns

Quick Note:

Columns refer to the amount of items that will be displayed horizontally next to each other side by side. Rows refer to sets of columns stacked vertically on top of one another. So for example, if your grid were 5x3, 5 would equal the number of columns, and 3 would equal the number of rows.

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:

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:

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.

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:

Pagination -> Enable means your new items will be loaded in traditional WordPress Pagination format (with numbered buttons that toggle new sets of items).

Pagination -> Disable allows for two options. The first is to load in additional Grid items with a traditional Load More button, and the second option is an Infinite Scroll option, which will load in new items as the user scrolls to the bottom of the Grid (no navigation buttons are used for the Infinite Scroll option).

#### 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.

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:

### 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.

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.

### 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:

### Navigation Settings

The Navigations section contains the options for building custom buttons and other navigation elements that will appear in your Grid.

### Navigation Layout

The first section, Navigation Layout, is a WYSIWYG editor for setting up your custom navigation controls:

Here you'll see two sections:

1. Available Modules - The buttons/controls that can be added to one of the Available DropZones.
2. Available DropZones - The sections available for adding an Available Module.

To add an Available Module to a DropZone, drag the click and drag the button with your mouse into the DropZone:

There are six Available Modules, and six Available DropZones. But 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":

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:

### Drop Zones Layout

Now that we've added our buttons and controls to the Grid, we can begin to customize their positioning. For demonstration purposes, I've moved the Cart module back to the left column, and set the Navigation WSYIWYG to the following:

Next, I applied the following settings to the Drop Zone Layout:

.. then clicked Refresh Preview, and here's what our updated Grid looks like:

### 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:

### Filtering

The Filter module allows us to filter the Grid based on the Category set for each of our item's posts:

The Filtering section is for customizing the "Filter" module's behavior. If the Filter module is used in our navigation setup, here you can change the Filter- All button text, and you can also set the Filter Type, which has the following two options:

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:

### Sorting

The Sorting section is for customizing the "Sort" module's drop-down list. Here you can 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.

Note: Clicking Sort by Title will activate the drop-down list. Clicking the arrow will toggle Ascending/Descending order.

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".

### 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!)

### 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).

### Navigation

The Navigation section is for editing the different skins available for your Grid's navigation:

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).

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:

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.

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:

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:

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:

#### 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).

#### 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

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.

#### 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: This section is for the global Video settings. If you want to learn how to add videos to your Grid Items, visit Grid Item Options.

### Video

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.

### 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.

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".

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:

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. Just keep in mind that this is a GLOBAL change, meaning the skin will no longer be available for any of your Grid's you may have previously created.

Once we've decided which skin we wish to use, we can customize it by clicking the green cog icon:

Then we'll be taken to the item's individual skin editor:

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:

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:

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

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.

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:

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:

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:

.. and then lets remove the right-margin that was previously applied to our Link button, so our 3 buttons are perfectly centered:

Finally, lets add a Read More button from our Available Layers section to the bottom Drop Zone in our Item Layout:

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:

Finally, let's see how our changes look on the frontend:

### 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.

###

### 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:

Choose Masonry if you'd like your Grid's items to have a flexible height (non-symmetrical Grid).

#### 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:

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:

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:

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:

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:

Then repeat the process for the Learn More link, and here's our updated Item Layout with everything now left-aligned:

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:

#### 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:

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:

####

#### Cover -> Background Color

Now let's adjust the cover's background color:

#### Cover -> Opacity

And lastly, let's adjust the cover's transparency:

#### 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.

Note: Paddings, Border and Border Radius are listed in the usual CSS shortcut order of Top, Right, Bottom, Left.

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)

#### Spaces -> Content

For a good example of this option, I've switched back to the Coolidge skin:

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:

and here's a quick view of our changes on the front-end:

#### Shadow

The Use Shadow options are Media, Content and Both. For the following example, I've chosen Both:

#### Animation

The Animation section is where you can customize the hover effect animation for your Grid Items:

### 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.

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:

#### Layer Settings -> Source

The Source dropdown has 3 choices. Icon, Post and HTML:

When Icon is chosen, you'll have the option to change the icon:

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:

When Post is chosen as the Source type, you'll then have the option to limit the post-based content by characters or words:

When HTML is chosen as the Source type, you'll see a text area box where you can enter custom HTML:

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.

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.

####

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:

#### 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:

#### Layer Settings -> Style -> BG

Edit the background color of your element, and also the background color's transparency level:

#### Layer Settings -> Style -> Shadow

Apply a CSS shadow to your element:

#### 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.

#### 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.

#### Layer Settings -> Link/SEO

The Link/SEO section is where you can hyperlink your elements, and also apply HTML attributes for SEO:

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.

#### 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.

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:

### Plugin Global Settings

Essential Grid comes with some "Global Settings" that are specific to the plugin itself.

##### 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:

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:

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:

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:

Finally, add the new Custom Meta Data to your Grid in the Item Skin Editor:

### 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:

Copy this shortcode, and then paste it into one of your site's pages:

##### 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:

    <div id="main-content" class="main-content">

    <?php
        // 23 = the ID of your page
        if(get_the_ID() == '23') {
            // Ess. Grid shortcode is placed inside the "do_shortcode" method, wrapped in single quotes
            echo do_shortcode('[ess_grid alias="my_first_grid"]');
        }
    ?>

### Google Fonts

Inside the WordPress menu, you'll see a menu item named Punch Fonts. ThemePunch is also the author of several other 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:

- 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).

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:

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:

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:

### 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 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.

Note: When exporting from one site and importing to another, it's always best to make sure that both sites are using the same version number of Ess. Grid. To ensure this, update the plugin on both sites to the latest available version before beginning the export/import process.

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 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.

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:

- Try a different method of adding the Grid to your page.
- 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.