5

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

Vladimir Rosca
  • 377
  • 1
  • 2
  • 15
  • There should be an option to add link on the Elementor builder no? – m4n0 Feb 11 '19 at 09:10
  • No. I don't see any option like that. My first instinct was to look for something like that also due to the intuitive nature of elementor. – Vladimir Rosca Feb 12 '19 at 06:08
  • This is how I get. https://prnt.sc/mjwg5k and for button: https://prnt.sc/mjwgud I suggest you deal with the plugin issue first, if any. Or else you can also try a temporary jQuery hack like this: `jQuery('[data-id=62f0f1fd] .elementor-column-wrap .elementor-widget-wrap').wrap('')` – m4n0 Feb 12 '19 at 07:05

2 Answers2

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.

mhdi
  • 90
  • 2
  • 11
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/27121736) – Domino Sep 09 '20 at 07:20
  • He is looking for a way to add javascript in elementor. The only way to do so (without a plugin) is what I mentioned. I don't see how you found the answer as "not answer"! – mhdi Sep 11 '20 at 14:55
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;
}
mhdi
  • 90
  • 2
  • 11