Making the entire Grid Item clickable

  • Special Note:
    Click here for more detailed information about hyperlinking options.

 

 

For this article, we’ll be working inside the plugin’s Item Skin Editor.

If you haven’t familiarized yourself with this part of the plugin’s admin yet, click here before continuing.

 

 

When hyperlinking a Grid Item, it’s first important to understand the CSS z-indexing of a Grid Item. If you aren’t familiar with the term “z-index”, Click here to learn more about this term, and how it applies to HTML elements.

A Grid Item has 3 core parts. The following screenshot is a z-index representation of these parts, and are described in the list below:

grid_element_index

 

  • 1) Media:
    – The grid item’s main image or video.
    – Hyperlinks applied from: Item Skin Editor -> Layout Composition -> Link/SEO
  • 2) Cover:
    – The element that gets displayed when the user hovers their mouse over the Grid Item.
    – Hyperlinks applied from: Item Skin Editor -> Layout Composition -> Link/SEO
  • 3-9) Layers:
    – Text, buttons and icons that display on top of the “Cover”.
    – Hyperlinks applied from: Item Skin Editor -> Layer Settings -> Link/SEO

When setting up hyperlinks, it’s important to understand how “click events” work in relation to CSS z-indexing. The general rule is, if your mouse is hovering over an element, that element is “clickable”, while any content beneath it (i.e., has a lower “z-index” than the hovered element), will not be clickable (even if the element beneath is hyperlinked). Let’s take a look at some examples:

screen_1
screen_2

 

From the screenshots above, because a “Cover” is being used, adding the hyperlink to the “Media” has no effect. For this example, adding the link to the “Cover” is better:

screen_3
screen_4

 

Even though the hyperlink is applied to the “Cover”, if our “Layers” aren’t hyperlinked, because the “Layers” have a higher z-index than the “Cover”, this results in non-clickable functionality:

screen_5

 

In the above example, applying the hyperlink to the “Cover” is not enough. We also have to add a hyperlink to the “Layer” as well:

screen_6

 

Now both the “Cover” and “Layer” are both clickable.

screen_7

 

So in this example, to make the entire Grid Item “clickable”, add a link to each individual “Layer”.


Technically your “Cover” can be completely transparent, and the same process above would apply:

screen_7
screen_3
screen_8


But what if you don’t want to use a “Cover” or “Layers”, and instead, just want to hyperlink to the Grid Item’s main “Media” instead? First, delete all the layers from your Item Skin (including line-break layers).

screen_9

 

Once you’ve deleted all the skin’s layers, your “Layer Settings” section should look like this:

screen_8

 

Next, from the “Layout Composition” section, inside the “Cover” tab, set the “Cover Type” to “Content Based”.

screen_9

 

The setting above instructs the “Cover” to only surround the skin’s “Layers”, but because we previously deleted all of our layers, the “Cover” will render as if the “width” and “height” were “0”, which means that the “Media” will now be clickable.

And finally, from “Layout Composition -> Link/SEO”, set the “Add Link To” to “Media”:

screen_10
screen_10