Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How to turn elementor section into clickable button

Link: http://up8.431.myftpupload.com/services/

I need to turn the section on the page above into clickable buttons. I’m using WordPress with the elementor plugin installed.

I’ve already added some extra CSS to make the sections appear to clickable. I just need to add the actual functionality. I understand this is done with javascript. I haven’t tried adding any javascript code yet. I’m a little hesitant too because I don’t think I have the skill and knowledge to do it properly. I don’t want to just start adding code everywhere. Past experience has thought me that’s a bad idea.

I’m hoping someone experience with elementor can help me out. Here’s where I’m stuck:
Where do I add the javascript? There’s nowhere for me to add javascript like there is a section for CSS for each element. Should I add it in the customizer (Appearance –> Customize –> Custom CSS/JS)? Should I get a plugin for custom javascript? I’ve already given each element a custom class. I could attach some JS to these classes.

EDIT: Thought about it a little more. I don’t think adding the JS in the Customizer is the way to go. I’m thinking any CSS/JS I add there should be exclusive for the topbar, header, and footer. My reasoning is because these are the sections that will show up the exact same way on each page.
That leaves me with the option of getting a JS plugin. Is this the best way?

What would be the best way to accomplish what I need to. I definitly don’t have the skill to understand the Elementor Developer Docs. It’s way too advanced for me. That’s why I’m asking here.

Thx in advance

Tags:

2

Answers


  1. 0

    if you know how-to and it’s through javascript you can do it this way:
    Drag and drop HTML widget-> insert your js between script tags.

    I recommened using html in your footer(made with elementor) so the script will be available in entire site.

    Login or Signup to reply.
  2. 0

    I managed to find a way to do so without any plugin or js, just CSS:

    First we need to set a minimum height for our Section/Column (I set 50vh);

    then we have to add an element which has link/a tag (e.g. Title Widget) and set a CSS class for that (in my example .mhdizmni_title);

    now we have to write a bit of css:

    .mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search