4 Ways to make your entire loop card clickable in Elementor

Introduction

In UX design, the common belief is that linking the entire blog cards can improve the overall user experience. Kevin Geary has been a strong advocate for using pseudo-elements to achieve this effect. In this article, we will explore the various approaches to linking entire cards and discuss the advantages and disadvantages of each method.

An article by CSS Tricks came up with a checklist for the best block-linked cards:

1. The whole card should be linked and clickable
2. It should be possible to add multiple links within the card
3. The content should use proper semantic tags for assistive technologies.
4. The text should be selectable like a regular link
5. It should be keyboard accessible. Right-click and keyboard shortcuts should work and it should be tab-focusable.

This article assumes that you have your card template already designed using the loop builder. In the YouTube Video, I go through quickly creating a loop grid template using Elementor Pro ‘s Loop Grid widget.

Method 1: Wrapping the entire container in an <a> link

To implement this method, make sure you have the Elementor Flexbox Container feature active. Assuming you already have the loop template created, simply edit the parent container, then under the Layout tab, navigate to Additional Settings and change the HTML tag to “a (link)”.

One limitation of this approach is that it will announce all elements within the card, from the image to the excerpt, before declaring it as a link to assistive technologies. To address this issue, you can apply either aria-labelledby = "[post_title_id]" or aria-label = "[post_title]" to the link. To achieve this, go to the Advanced tab of the container under Attributes, apply the dynamic tag for Post Title, click on the wrench icon and set the “before” input to aria-label |

Pros

1. Easy to implement
2. The entire card is clickable
3. Works with right-click and keyboard shortcuts

Cons

1. Doesn’t allow multiple links within the card.
2. The content lacks semantic structure, potentially affecting assistive technologies.
3. The text is not selectable

Method 2: Link individual items

A compromise between accessibility and UX design involves linking only specific items within the card instead of the entire card.

Simply change the container html tag to <article> then add links to each individual item, such as the featured image, post title, and any other items that require a link.

Pros

1. Allows multiple links within the card
2. Maintains semantic structure, although duplicate links may exist.
3. The texts within the card are selectable
4. Right-click and keyboard shortcuts work

Cons

1. The entire card is no longer linked

Method 3: Using pseudo-elements

This is by far the most popular method among WordPress content creators. It involves linking the post title and applying custom CSS to absolutely-position a ::before or ::after pseudo-element to cover the entire card.

This is a bit complicated to implement in Elementor (and many other page builders) because they apply position: relative to most widgets. So, to use this method, only the container should have position: relative and ensure that all descendants before the link should have a position: static.

Add the necessary class names

To achieve this, assign the post title a class name of "dd-main-link" and the parent container a class name of "dd-link-card".

Exclude other absolutely positioned elements

If you have other elements that are using absolute positioning, under the Advanced tab for those elements, add a CSS Class Name of "dd-link-card--excluded"

Custom CSS

Finally, add this custom CSS to your Site Settings or your preferred CSS location:

.dd-link-card{
    position: relative;
}

.dd-link-card :not(.elementor-element-overlay, .elementor-element-overlay *, .elementor-shape, .ui-resizable-handle, .dd-link-card--excluded) {
    position: static;
}

.dd-link-card .dd-main-link a::after {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer!important;
    display: flex;
    z-index: 99;
}

If we want to add multiple links, we need to apply a z-index to those links, so that they sit atop the pseudo-element.

Pros

1. Maintains semantic structure
2. Right-click and other keyboard shortcuts function as expected
3. Allows for multiple links by applying z-index to individual links.

Cons

1. Text within the card remains unselectable
2. Applying CSS Transforms on the main link would produce unexpected results
3. Focus state is applied to the heading alone, but the entire card is clickable (minor issue).

Method 4: Using JavaScript

This method builds upon Method 2, except applying links to the featured image. By using JavaScript, an event listener can be added to trigger the link from the post title whenever any part of the card is clicked.

For the JavaScript code, please refer to CSS-Tricks

Pros

1. Preserves semantic structure
2. Makes the entire card clickable
3. Allows multiple links without requiring z-index
4. The entire card is focusable, supporting accessibility
5. Texts within the card are selectable.

Cons

1. Dependency on JavaScript

Conclusion

There are usually multiple ways to achieve a design but thought should be taken to identify the pros and cons, so you can make an informed decision based on your requirements. Let me know in the comment section if you have a better solution.