How to Add a Link to a Column in Elementor (without Add-on)

For a certain reason, you might want to add a link to a column in Elementor. For instance, you are designing a call-to-action on a page and want all elements on the column associated with the call-to-action point to the same link. Instead of adding the links to each element one by one, it would a great idea to add the link to the column. Unfortunately, Elementor has no default option to add a link to a column (or section). Link can only be added to a widget.

If you want to add a link to a column in Elementor, there are at least two ways to do so. First, you can use an Add-on. Second, you can use custom CSS. This article will show you the second method. If you prefer to use an add-on, one of the add-ons that you can use is Happy Addons. The add-on comes with a wrapper link feature to allow you to add a link to both column and section.

To be able to apply this method, you need to use Elementor Pro as the custom CSS feature is only available on the pro version. Once you are ready, select a column where you want to add the column to and edit it.

Go to the Advanced tab on the settings panel and add the CSS class clickable to the CSS Classes field under the Advanced settings block.

Next, open the Custom CSS block and paste the following CSS snippet.

The CSS snippet.

.clickable {
position: relative;
}

.clickable a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}

In order to make the CSS above work, you need to have at least one clickable widget within the column. You can use any widget. From Image, Text, Heading, Button, to HTML widget. If you want to use a Heading widget, for instance, you can simply add the link to the Link field.

The CSS above works by taking the available link on the column and creating a clickable overlay over the entire column.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2013. He is responsible of all content published on this website. Learn more
Want to start a profitable blog with WordPress? OF COURSE!

7 thoughts on “How to Add a Link to a Column in Elementor (without Add-on)”

  1. I added an icon box element inside the column, then added this custom CSS. I confirm that this worked. Thank you for the tutorial.

    Reply
  2. It’s not working. I did the custom CSS and added the link to a text within the column. For some reason, the text is the only clickable element within the column. Any suggestions? Were any changes that needed to be made to the code after adding the link to a component?

    Reply

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Haven’t used Elementor Pro yet?
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.