Hyperlinking Options

  • Special Note:
    Click here for information about hyperlinking an entire Grid Item.

 

 

This article will focus on the different types of hyperlinks that can be applied to a Grid’s Item Skin.

 

 

Before getting started, click here to learn about the difference between applying hyperlinks to “Media”, “Cover” and “Layers”. This article will focus on linking from the Item Skin’s “Cover” and “Layers”, and explain the following common Link options:

  1. 1) Post: Link to the individual item’s “Post” url.
  2. 2) URL: Apply a single, global hyperlink that all Grid Items will link to.
  3. 3) Meta: Set your Grid Items to hyperlink to individual, custom urls that you set via Custom Meta Data.
  4. 4) Lightbox: Open lightbox content inside the Grid’s default lightbox (see this article for important information about avoiding duplicate lightbox content).

Essential Grid has two main setups (listed below). Each part of this tutorial will cover both setups.

  1. 1) Post Based Grid: Grid based on WordPress posts/pages (including the “Ess. Grid Posts” Custom Post Type)
  2. 2) Custom Grid: A grid based on items you create manually inside the Grid’s main admin.

 

Link to “Post”

 

Link from “Cover”:

screen_1

 

Link from “Layer”:

screen_2

 

For Post-Based Grids, because the item is based on a page/post, the url of that page/post will automatically be used when linking to the Grid Item’s “Post” url.

However, for “Custom Grids”, the link needs to be manually applied as the Grid Item’s “Post Link” as shown in the following screenshot:

screen_3


 

All Grid Items will link to a single URL. Useful for when hyperlinking to social networks.
Link from “Cover”:

screen_4

 

Link from “Layer”:

screen_5


 

Used with Custom Meta Data to allow for custom hyperlinks defined individually per Grid Item.

To use this option, first head over to the plugin’s Custom Meta section and click “Add New Meta”.

meta-data-handling
add-new-meta-2

 

Next, create a new Custom Meta item. For this example, we’ll use the name “My Custom URL”, with the handle “my-custom-url”.

meta-edited
screen_9

 

Once the Custom Meta Data has been created, it can now be applied as a hyperlink inside our Item Skin Editor:

 

Link from “Cover”:

screen_10

 

Link from “Layer”:

screen_11

 

Apply Custom Meta Link to Post-Based Grid Item:

screen_12

 

Apply Custom Meta Link to Custom Grid Item:

screen_13


 

A “lightbox” link should only be applied once to an Item Skin (otherwise you may encounter duplicate lightbox items). Click here for important information about avoiding duplicate lightbox content.
Apply Lightbox Link to “Cover”:

screen_14

 

Apply Lightbox Link to “Layer”:

screen_15

 

Make sure at least one “Source” is selected in the Grid’s “LightBox” settings:

screen_15