Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Core Anatomy of an Essential Grid

A brief overview of some of the core parts of an an Essential Grid.

1.1 Post-based Grid

One of the most common uses of Essential Grid is to have a grid based on your website’s posts.  It’s almost like creating a super-awesome “blog home page”, where instead of a traditional list of post titles and excerpts, each post is represented briefly as an Essential Grid Item.

A post-based grid works by first assigning a Grid a post-type source:

post-based-grid

To simply pull in all of posts from the selected “Post Type”, do not select anything from the “Post Categories” section.

Or, assign a combination of one of more categories/tags to narrow down what posts from the selected “Post Type” get pulled into the Grid.

categories-tag-selection

And then choose the “Category Relation”.

AND:  A post will only be included in the Grid if it includes ALL of the selected categories/tags.

OR:  The post only needs to have at least one of the selected categories/tags to be included in the Grid.

category-relation

The categories and/or tags will need to already be assigned to the posts you want to pull into the grid.  Chances are, your blog posts already have categories and tags assigned:

cat-tag-view

You can easily add categories and tags by selecting the “Quick Edit” for your posts:

quick-edit
quick-edit-cat-tags

Or you can edit categories/tags from within the post itself:

edit-post
categories-tags
  • Quick Tip:
    View this article for a list of additional possibilities for customizing which posts are added to your Grids.

Custom Grids are manually generated grids that are not based on posts; i.e. you create the items right from within the plugin’s admin.

custom-grid

When building a Custom Grid, you add items individually, starting with what type of item you wish to add:

custom-add-items

As shown above, you can add items based on video, SoundCloud, or no media at all (i.e. “Simple Content”), but the most common usage is to add items based on images from your WordPress main media gallery.  And when creating Image-based items, you can easily select several images at once with the “Bulk” option.

single-bulk
bulk-select

2. Main Media

back to menu

The main media for an Essential Grid item is usually represented by an image, but can also be other media content such as video.

Whether you’re using a post-based grid or a custom grid, in order for the main media to appear, it needs to be officially selected as one of the “Media Sources”:

media-source

When using a post-based grid, the image will be drawn from the post itself.  There are three possible ways an image can be pulled from a post:

media-source-options
Only one of these sources are needed, so you can choose what's most convenient for you. Each option pulls the image from the individual post:
1. Featured Image:
featured-image
2. Alternative Image:
alternative-image-source
3. First Content Image:
first-content-image

And for some reason if an image isn’t assigned to a post in one of the three ways listed above, when editing your grid, in the “Source -> Media Source” section, you can also set a “Default Image” that will be displayed in these cases.

default-image

And finally, whenever you upload an image to WordPress, multiple versions of the image are created automatically (thumbnail version, etc.).  Because sometimes images can be quite large, and you may not need such a large image when it’s placed inside an Essential Grid item, you can use the “Set Image Source Type” option to choose which version of your images you’d like to load into Essential Grid.

image-size
  • Using Video?
    CLICK HERE to learn how video works with Essential Grid.

3. Skin Template

back to menu

Essential Grid comes with over 40+ prebuilt hand-crafted designs that you can choose from.  These designs can be viewed and customized by visiting the “Item Skin Editor” section of the plugin:

skin-templates

Every new grid will have the “Washington” skin assigned to it by default.  To assign a different template skin to your grid, visit the “Skins” tab, and select a new skin of your choice:

skins-tab

An “Even” skin typically has content that’s displayed on top of the main media:

even-skin-example

A “Masonry” skin will often have content on top and also below the main media:

masonry-skin-example

When a “Masonry” skin is chosen, its behavior will vary based on the the grid’s main layout:

grid-layout
1. "Masonry" skin combined with "Even" grid layout

The content below the main media will only appear on mouseover, and will also “float” on top of any grid items below it.

even-layout-masonry-skin
2. "Masonry" skin combined with "Masonry" grid layout

The content below the main media will always be displayed by default, and the content does not “float” on top of other grid items like the previous example.

masonry-layout-masonry-skin

In closing, any skin can be chosen regardless of the grid’s main layout.  But when a “Masonry” skin is chosen, its view will vary based on your grid’s main layout.

Essential Grid includes several layout options that can be found inside the “Grid Settings” tab.

The most common main layout is “Boxed”, which means the grid will always inherit the same width as the rest of the page’s main content.

layout

The actual width of the items will be based on the total width of the grid itself (for “Boxed”, this would be the same width as the rest of the page’s content), divided by the number of columns chosen.

For example, if your theme’s main content area is normally 1000px at full size (i.e. “Desktop Large”), and the grid’s “Desktop Large” columns were set to “4”, each grid item’s width would be 250px wide.

  • Grid Item Width = Total Grid Width / Number of Columns

Columns can be set per screen size, as shown in the following screenshot:

columns

There are three main “Grid Layouts” that can be chosen from.  “Even”, “Masonry” and “Cobbles”:

grid-layout-options

When an “Even” layout is chosen, all grid items will be 100% symmetrical.  This means they’ll always be the exact same size as one another like the following example:

grid-layout-even

For an “Even” grid layout, the height of the grid item is based on the individual grid item’s width, in relation to the “Items Ratio X:Y” setting.

So if our individual grid items have a width of 250px, and an “Items Ratio” of “4×3”, the grid item’s height would be around 188px tall.

items-ratio

Calculations used to determine the grid item’s actual size for an “Even” grid layout:

  • Grid Item Width = Total Grid Width / Number of Columns
  • Grid Item Height = Grid Item Width * (Items Ratio Y / Items Ratio X)
  • Special Note:
    When using an "Even" grid, in order to achieve perfect symmetry images will often be cropped. But if showing the entire image is of the utmost importance, edit the element from the Grid's preview, and choose "Contain" for the "Media Fit" option. Just keep in mind that this will often create blank space on the top/bottom or sides of the image, so you may want to consider using a Masonry Layout instead.
edit-element
esg-media-size-options
Result:

No parts of the image are cropped anymore, but this also results in blank space on the top and bottom of this particular image.

media-size-contain

When a “Masonry” grid layout is chosen, the height of the items can vary:

masonry-layout

The main difference between an “Even” grid layout and a “Masonry” grid layout, is that “Even” layouts use the “Items Ratio X:Y” to determine grid item height.  But “Masonry” layouts have the option to use the image’s original size ratio instead, via the “Media Ratio X:Y -> Auto” option:

masonry-auto-height

For example, let’s say an image is originally sized at 1000×500 (which would be a 2×1 ratio).  When a “Masonry” layout is combined with “Media Ratio: Auto”, the grid item will always conform to this exact ratio.  And because different images sized differently to begin with, this is how “Masonry” layout grid items end up with varying heights.

  • Special Note:
    Image cropping will never occur when using a "Masonry" grid layout combined with an "Auto" Items Ratio.

Calculations used to determine the grid item’s actual size for a “Masonry” grid layout with an “Auto” Items Ratio.

  • Grid Item Width = Total Grid Width / Number of Columns
  • Grid Item Height = Grid Item Width * (Image Original Height / Image Original Width)
  • Quick Tip:
    To achieve "Even" sized grid items with a Masonry Layout, uncheck "Auto" for the Items Ratio, and then enter a fixed ratio to be used for the Grid's image sizing as shown below.
masonry-even-grid
4.3 Grid Layout -> Cobbles
back to menu

A “Cobbles” layout is similar to an “Even” layout, in that a symmetrical grid will be drawn based on the same size calculations that are used for an “Even” grid layout.

But when a “Cobbles” layout is chosen, you have the ability to spread each individual item across multiple columns or rows, which allows for creating some really cool custom layouts like the following example:

cobbles

When “Cobbles” is chosen as the grid’s layout, you can assign a “Cobbles Pattern” in two ways.  The first is to create a global pattern (global pattern shown below is the exact pattern used to create the example above).

cobbles-pattern

Or you can assign a pattern manually to each individual item:

edit-post-meta
cobbles-edit

Here’s a visual of each Cobbles pattern applied to our original example:

cobbles-visualized
  • Special Note:
    Similar to an "Even" layout, image cropping will also sometimes occur when a "Cobbles" layout is used.