Search

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 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

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

  1. 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
  2. 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

Leave a Comment

Haven’t used Elementor Pro yet?