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:
- 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:
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:
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:
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:
Now both the “Cover” and “Layer” are both clickable.
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:
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).
Once you’ve deleted all the skin’s layers, your “Layer Settings” section should look like this:
Next, from the “Layout Composition” section, inside the “Cover” tab, set the “Cover Type” to “Content Based”.
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”: