Add a link to an element using Elementor

Add a column / section link for the free version of Elementor is a new feature that allows to create a clickable element to open a new page.

Turn on / off link element

In the admin panel select ‘EAC components’ link and ‘Features’ tab then activate / deactivate the option ‘Link Element’ entry and save settings.

EAC components settings
Configure features

Add a link to an element to make it clickable

The link will only be loaded into the DOM in preview or front-end mode.

Select the properties of the container / section / column you want to add a link.

You can add a link to any URL (external or on your site) simply by typing it into the field or by selecting the Dynamic Tags wrench icon.

There are also additional settings if you click the ‘gear’ ⚙️ icon. This allows you to no-follow the link, open it in a new window.

The “HTML tag” drop-down list can be set for any value.

Configure the item to be linked

Since the stack order of the link wrapper is set to 99, if you want to add a link in an element of the container, you must give it a ‘z-index’ greater than 99.
Select the properties  of the element then ‘Advanced’ tab ‘Z-index’

Section advanced zindex
Change the z-Index property of the element
The link does not break the styles that are applied to the column or section…

8 thoughts on “Add a link to an element using Elementor”

  1. Wrapper link doesn’t show up in Column Edit / Layout pane. I’m using Elementor Cloud hosting; Elementor free and pro plugins are provided by the hosting service: Elementor v3.8.0-cloud4 and Elementor Pro v3.8.0-cloud4 (special versions for cloud hosting?). Running Kadence Theme with Kadence Pro; Other Elementor-related plugins: Elementor Header & Footer Builder, Essential Addons for Elementor,

    Reply
    • Hi Bob,
      First: enter your URL in the text field or use dynamic tags (Right wrench icon).
      The link will not be active in the editor but in the frontend.
      This mode of operation allows you to have other links inside the column by modifying the ‘z-index’ of each internal link.
      Second input ‘a’ appears only with Elementor pro but we don’t use it.
      Reconsult the doc which is sufficiently explicit.
      Hoping that we were of help to you…
      Rgds

      Reply
  2. Using the EAC link feature now works for me, even though the Edit Column panel still shows “The link is not active in the editor.”
    SO THANKS FOR THIS FUNCTION!!!! 😉
    Meanwhile, there is still no “a (link)” option in the Edit Column -> HTML Tag in Elementor/Elementor Pro v3.8.0-cloud4. (Elementor says there should be, but they’re confused on a lot lately.))

    Reply
  3. UPDATE: The “a (link)” option appears to be an experimental Elementor function called Flexbox Containers. Here’s the response I got from Elementor Tech Support on the issue:
    –START–
    Thank you for using Elementor. I’m Rica from Tier 2 Technical Support Specialist team. I’d be glad to help you today.
    I’ve read through your conversation and I see what you mean. First, I would like to apologize for the confusion. Let me explain the situation. The feature makes the column clickable via the HTML tag “a” which is only available to “Flexbox Container”. Currently, you are still using Section widgets on your website, not Container widgets.
    With that in mind, I turned on the Flexbox Container under Elementor> Settings> Experiments.
    See: https://www.screencast.com/t/W1belYWtW
    As you can see in the video, the existing “Section” widgets are still there however on the widget panel, you will now see the “Container” widget. If you decide not to use the Containers, all you need to do is turned off the Flexbox Container under Elementor> Settings> Experiments. Please note that if you turned off the Flexbox Containers, all elements that used the Container widget on the site will disappear.
    — END —
    I misunderstood the difference between section and container widgets so the Elementor article on clickable containers you referenced it turns out didn’t apply. There’s a lot of backend detail to learn!

    Again, I’m happy with the functionality EAC provides — something that in this case Elementor should have been providing all along.

    Reply
  4. Hi guys,
    Column linking is working great for me, but there’s an issue with drop-down menus. On my site’s home page at https://arizonamasterworks.com, four columns with only background images link properly to other pages on the site. But the drop-down menus in the header just above are *behind* and obscured by the columns. Per your direction, the Z-index is set to 100 in all the columns, making them front-most on the page (as I understand it). Is that something I just have to live with?
    Thanks.

    Reply
    • Hi Bob,
      This is indeed an issue, but in your case you don’t need to put a ‘z-index’ on each column.
      Delete the four ‘z-index’.
      If you had, for example, a button or another clickable element inside the column, you should position a ‘z-index’ so that this element is accessible to the click.
      Look at the example documentation. I have a button with a link and this on this button i put ‘z_index’, otherwise it would not be clickable.
      Rgds

      Reply

Leave a Reply to chichille Cancel reply