Make Elementor Section a Clickable link without additional plugin
ฝัง
- เผยแพร่เมื่อ 7 ม.ค. 2019
- Hey, folks welcome back to another Elementor Hacks tutorial in which you can make an entire Section/Column/Widget clickable.
► Get Elementor Pro - wpalgoridm.com/elementor
Make Multiple Sections and columns clickable[LATEST VIDEO]:
• Make Clickable Element...
You can find the code in the first comment.
Header tutorial: • WordPress header tutor...
Elementor basics tutorial: • Elementor basics : In-...
WordPress theme used in the video [Mandatory]: wordpress.org/themes/generate...
Get Elementor Pro here: elementor.com/pro
Make sure you subscribe and never miss out on a single amazing design tutorial.
Happy designing! Peace.
*Some Important Links*
Elementor Custom Breakpoints Tutorial:
• Elementor custom break...
Join the Facebook Group: / designschoolwp
Design your website: • Design WordPress website
Build your website: • Build WordPress Website
Customise your website:
• Customize WordPress we... - แนวปฏิบัติและการใช้ชีวิต
Find The Code Below:
document.getElementById("clickable").onclick = function() {myFunction()};
function myFunction() {
window.open("wpexperimentor.com", "_blank");
}
try posting the code in the video discription
Design School by Wpalgoridm is there a way to copy this code? 😅😬
when using this in Elementor on a template for an archive, how to I change the URL, which is in your case from Apple, to the dynamic post URL?
write only CSS ID = clickable there is no need for CSS class = clickable, and script code could be like this:
document.getElementById("clickable").onclick = function() {
window.open("wpexperimentor.com", "_blank");};
@@shreyjain3562 Do you know how to make it so that it doesn't open in a new window?
Good trick! Thanks! I also include the following CSS to change the cursor pointer to the traditional hand icon.
.clickable {
cursor: pointer;
}
Best regards!
exactly this was missing for user experience
Sorry I'm new to Elementors, php and etc2. I tried added it but failed. I don't understand the language yet.
how do you add this to the given html code? I tried this but didn't work.
document.getElementById("clickable").onclick = function() {myFunction()};
function myFunction() {
window.open("[placeholder].com/");
}
.clickable {
cursor: pointer;
}
@@siddiqhh Hi, I added this CSS code in the advanced CSS tab. They should be in different places in the Elementor.
Where in the script do I add this?
@@cata5407 Hi, I added this CSS code in the advanced CSS tab. Not in the script. They should be in different places in the Elementor.
Perfect! Just what I was looking for! Thanks for the video!
Great to hear!
That is brilliant, thanks. I knew a solution like this existed but I was finiding it hard to find it. Well done for making the video!!
Glad it helped
Exactly what I needed. Thank you!
You're welcome!
Thank you so much! exactly what I've been trying to figure out. You are awesome!
You are so welcome!
many thanks! I was wondering how we can do this to change the mouse pointer into a pointing hand icon when we hover it over to the actual section itself? it only changes to a pointing hand on the actual links itself and not the whole section.
Watch this cursor change video th-cam.com/video/PJfFsYgPXCc/w-d-xo.html
Hello! Thanks for the awesome tutorial. I'd really like your feedback on an issue albeit different from this tutorial; please how can i make a section unresponsive such that the horizontal layout on desktop view is the same across mobile view? Thanks in advance
Swap "window.open" with "location.href" To open in same tab!
Thanks Brother! Awesome
You're welcome :)
I am learning elementor from ur tuts only.. Thank you bro
You're welcome :)
THANK YOU VEEEEEEERY MUCH!!!! I was looking exactly for that!!! thank you thank you
Glad I could help!
This is amazing! Is there a way to change the cursor to a hand through the html area? I don't have the PRO version of elementor - so can't use the Custom CSS box that you used in the other video (about changing cursor). Thanks so much!!!
Elementor free custom css -> th-cam.com/video/EEq5EGlEQds/w-d-xo.html
simple and to-the-point. Good solution!
Glad you liked it!
Hi.
I am using the translatepress plugin.
I have 2 languages on my site.
English and Portuguese.
When I make the column clickable and I am, for example, in the Portuguese language, I click on the column and it always takes me to the default English url.
Any solution?
Is it possible to use this to go to the url of the current page? I want to use is for a listing template.
Thank you that was really helpful!
Glad it was!
This is great and it worked. I made a column clickable but when I tried to make another column on the same page clickable it wouldn't work and it made the previous column stop linking. I made sure the I changed the name on CSS ID and CSS Classes. Does anyone have any advice?
this is great! to think i was gonna make an invisible button over everything. Thank you
Thank you brother, this is very helpful to me
Glad it helped
on the front page of my site there is a column and a image in it, with elementor by the way. also I have a background image in that column that covers whole page. Can I a give a link to that background image like clickable.
Hey there, first off thanks for this video! I'm building a landing page with full-screen fixed images, where each image is a section background. I'd like each section to be clickable and REDIRECT (more than open a new tab) to another page of the site. How can I achieve that? Also, since this example is taking into account just 1 section, I was wondering what should I change in the code/flow if I'm going to use it with more images. I imagine that for each section I could use as a CLASS ID: clickable1, clickable2, etc. but do I need to modify anything in the code itself? Thanks!
To open in the same window you can replace "_blank" with "_self". But be careful to disable this code when editing the template itself with Elementor.
**If you're using it for multiple elements here's how your whole code should look like**:
var ele=document.getElementById("clickable");
var str=window.location.href;
if(ele!=null&&str.indexOf("elementor-preview")==-1){
ele.onclick = myFunctionSuper;
}
function myFunctionSuper() {
window.open("example.com”,”_blank”);
}
var ele1=document.getElementById("clickable1");
var str1=window.location.href;
if(ele1!=null&&str1.indexOf("elementor-preview")==-1){
ele1.onclick = myFunctionSuper1;
}
function myFunctionSuper1() {
window.open("example1.com”,”_blank”);
}
var ele2=document.getElementById("clickable2");
var str2=window.location.href;
if(ele2!=null&&str2.indexOf("elementor-preview")==-1){
ele2.onclick = myFunctionSuper2;
}
function myFunctionSuper2() {
window.open("example2.com”,”_self”); /* Here Self will open element2 in the same window*/
}
/*similarly replace 2 with 3 and so on and "example2.com" with Complete URL of any page you want to link.*/
@@wpalgoridm Thanks so much for the quick answer! I'll give it a try!
@@wpalgoridm I was thinking so long why this code isn't working and finally spotted there are tilted quotaiton marks ” here instead of straight ones " :D
Hi! Nice video, I did exactly how you said, however I used this html code for many different background objects, the problem that I'm struggling now is that every background is pointing to just one site (although I set different classes/id and site links to the other ones). Any idea why is this happening? Peace!
I explained all that in this video th-cam.com/video/e65zjgzwalg/w-d-xo.html
Thanks much for the help!
You’re welcome!
@@wpalgoridm I also did this and it did not work for me I don't have a direct image widget it is a column with a image as background does that make a difference?
It screw up my entire site! Great job.
Another option, for editing and not get the link to open in a new tab after you paste the code in HTML widget,t is to just use the navigator to select the widget and then the options appear on the left. As long as you don't select the section, column, or widget you are editing directly, you should be good to go.
Hello, thank you for this video. I'm encountering this problem: I have one section with three columns inside, I'm trying to make each column clickable and leading to a different url each. I named CSS ID and class differently "clickable1" for column 1 and so on. However, when I click on any of the columns I'm taken directly to the last link I added, "clickable3". Can I fix this? Thank you!
You need to change both function name from "myFunction" to "myFunction1" "myFunction2" and also the IDs as well.
I'll make a video on this soon. I think a lot of people want to make multiple columns clickable.
Bundle of thanx too much helpful
Happy to help
This method only seems to work when I am logged in to my wordpress account. Is there a fix for getting it to work when others view the site too?
Thank you for this. Great videos.
You’re welcome and thank you!
Thank you sooooo much!!!! Its so GREAT!!!!
Really glad it helped and you’re welcome ☺️
Thanks a lot for your tutorial! How can I use a pointer cursor in this clickable areas?
Under custom css of any section/column/widget put this code, within the selector class:
cursor:pointer;
@@wpalgoridm This isn't working for me. Am I doing something wrong? I'm putting the code you provided inside custom css of the widgets I have in the column.
this video helped me out
th-cam.com/video/PJfFsYgPXCc/w-d-xo.html
Hey how do you click on a button and have that take you to a different section that you have hidden?
But if I have a page and I want to link the first part (e.g button in slider) to the next section on the same page (e.g blog posts) and blogpost is not a link then how to do that?
Thanks for the video, the solution worked for me. There is only one "problem". How can the hand (click) appears when the user goes over the image? Is there any code bro? Thanks again a lot!
Watch this video for cursor change th-cam.com/video/PJfFsYgPXCc/w-d-xo.html
Great video! In Elementor Gallery, is there a way to show a main image whenever a gallery tab is selected?
Not available in elementor, you can check out crocoblock's suite for such functions bit.ly/designcrocoblock
Hello and thank you for your video. I would ask you , if these yava scrip not bead for the speed a website?? Thank you for you answer
When you need custom functionality you need script, you can use a plugin for this though.
I've made a menu from the text ... how can I make it clickable ?? I tried adding your code in it (in each text) but it's not working that way
Great tutorial! Only one question, how can I make a normal link to go to another page in the same window, without opening a new window? What should I change in the CSS?
replace _blank with _self in the script. Also you can learn more about clickable columns in this latest video th-cam.com/video/e65zjgzwalg/w-d-xo.html
@@wpalgoridm Thank you so much too to both of you. It was the question I was going to ask :-)
@@wpalgoridm Exactly what I needed, THANK YOU!
Hey great video quick question does this work within the website if i want to link it to another page on my site, I tried it and when I hit the back button it does not take me back to the page I was on previously ,is there a solution?
This particular code opens a new blank tab, so there's no question of back button here. You can change _blank to _self and that'd open the link in the same tab but it gets complicated while you're editing the page in Elementor.
nice worked perfect
Can you please help me how to link image element to one of the slide show in right next to below section
Can you have multiple clickable zones on one page ? Everytime I make another css class with other url, the new clickable zones links me to my first installed URL
I explained how to do that here th-cam.com/video/e65zjgzwalg/w-d-xo.html
very helpful, thankyou
Glad it was helpful!
Thank you very much! =)
You're welcome!
Hi, would it be possible to do this with the elementor sliders, for each featured image - to be able to add a clickable link to each slider image?
Yes you need to get each slider image by ID and then apply the same logic. Javascript works flawlessly with any visual element on the page.
Hello! I'd like to make clickable each card of the Posts Archive widget of Elementor. Each card would link to the corresponding post. For now you can only link the post title or the card image to the corresponding post, not the entire card.
Try that Elementor custom skin plugin. A tutorial on that will be live on the channel soon.
@@wpalgoridm Elementor Custom skin plugin doesn't have this feature yet. Although the developer told me it should be in the next update in 2 weeks. He doesn't know if it's gonna be in the free or pro version.
For the time being, I found z workaround. I use Elementor Add-on elements plugin that has the feature to make columns clickable, as explained here (it's free).
www.elementoraddons.com/tutorial/make-section-column-clickable-elementor/
Then I make a custom skin for the loop with Elementor Custom skin. And I set it (the column containing the loop element) as clickable with the EAE Wrapper link option of Elementor Add-on elements. The link target is set to the post link.
And it works very well!
Although I hope it's gonna be added in Elementor Custom Skin so I won't have to keep an extra plugin buddy to click a simple column of element. Such a basic stuff should just be added to Elementor, as well as infinite scrolling of posts by the way.
I tried with another plugin called Make column Clickable Elementor, but it doesn't work properly. wordpress.org/plugins/make-column-clickable-elementor/
Don't use it.
Sir can you please tell me how you make this text animation on your website
As text change into anothet text ??
this is not working for me. is it because my website is not yet published online. if i take the link of the page into the address bar it works however. so the clickable section should also work right?
The link should be in the format “yoursite.com”. Also see if your security plugin is blocking the script.
How can I show elementor section on another page by using link?
I want to show only section not full page.
How do we open this on the same tab not on a different window?
Great tutorial - thank you very much! Is there any way to make the link no-follow? I have tried to add rel="nofollow", but it doesn't seem to work.
You can use JavaScript add attribute method to add that to the link.
@@wpalgoridm Thank you for the answer! I am not great at coding or javaScript. Would it be possible for you to give me the complete code that I have to add?
It would help me a lot.
Thanks! Is it possible to make it open in the same tab though?
Replacing _blank with _self will do that, but you need add additional check to prevent it from happening in the elementor editing screen itself.
@@wpalgoridm OK thanks! What's the additional check?
It doesn't work. When you add the html it creates a new cell. The video I am trying to link canot seem to be linked. Help.
Thats great thank you. I have three columns though. It only allows you to do it for one.
This video may help th-cam.com/video/e65zjgzwalg/w-d-xo.html
Thanks for sharing I was still puzzle how come nobody and Elementor think of it!!
You’re welcome!
Thank you
You’re welcome!
You rock! Thanks!
You're welcome!
thank you brother
You’re welcome!
Looking to do this but make it NOT open new window or tab but to simple scroll down to menu anchor? is that possible?
Yes there are multiple ways to do it, just watch this video th-cam.com/video/IrAlRBNk178/w-d-xo.html
Hi! Thank you so much for your video!
I'm having a problem though: I tried adding this code to one column (I changed the css id and classes and matched it with the code). It worked. Then, I repeated the procedure with a different css id and classes and matched with the code in a different column. The result is that now both columns are linked to the second link I added, and I don't know why? I erased and repeated the process a couple of times and the error continued. could you please help? Thank you!!!
Other than just changing CSS ID or class, you must also change the function name wherever it is used. I explained all of that here th-cam.com/video/e65zjgzwalg/w-d-xo.html making multiple clickable columns and sections
@@wpalgoridm Hi! I did change the function name as well to coincide with the css id and class, but it wouldn't work
thank you for such a quick response by the way! and I hope you guys are safe and sound :)
@@bernarda.cutfilms4650 hey I just saw your comment and found a solution to your problem as I came across the same problem. To change the name of the function, edit the code and change "MyFunction" in the code to a different name. you must change this in 2 parts of the code as one is the function name and the other is where that function name is being called. Hope that helps. The link should now be unique for each column/section
@@shutterst6223 THANNNNNNKS!!!!!
This is what i need! But got a concern. What if i want to link this to # and popup, what should i write for the link?
You can follow this video th-cam.com/video/tJLPJOfesLY/w-d-xo.html or use this plugin wordpress.org/plugins/popup-trigger-url-for-elementor-pro/
Thanks a lot! Will watch it in detail later! And to link to other sections on the same page, should we just write #(link-name) for the link? Or needs additional steps before that?
Just the name would be enough to link it on the same page. You're welcome!
@@wpalgoridm Thanks! that's helpful!
How to link one of slide show while clicking
Hi sir im new in using elenentor..can you make a video about linking a blogpost to another blogpost?
Linking a blogpost as in ? It can be done using post navigation widget available with Elementor Pro.
Hello,
I have tried everything exactly as you did it in the video, but mine does not work. I also noticed that the code in the first comment is not the same as the one in your video. Please help?
Make Sure you're actually changing the CSS ID under advanced tab to "clickable"
Just see if your browser is blocking multiple windows or popups, also try deleting browser cache, preview might get buggy at times. Don’t forget to update the URL.Just paste the following code and try again:
document.getElementById("clickable").onclick = function() {myFunction()};
function myFunction() {
window.open("wpexperimentor.com", "_blank");
}
@@wpalgoridm IT WORKED!! Clearing the cache duh :)
The only thing is that the mouse does not change to the hand sign to let the user know that they are able to click there :/
Is there a coding element for this?
@@ericbrenner2310 it did not work for me as well
thank you!
You’re welcome!
NICE!!! thanks
You’re welcome!
How come I get clickable cursor instead of editing cursor while hovering on link. many Thanks
This will help th-cam.com/video/PJfFsYgPXCc/w-d-xo.html
My links don't update on the front end even though I changed them. I deactivated wordfence but it won't work. Any idea how to fix this?
Might be caching or CDN issue.
Thanks. Should I install a caching plugin to clear my cache? Which one do you recommend?
Thanks alot.
You're welcome!
I can't see any js code in the link
Hey hii
How u do that ain't it better n all this thing??
Can u ple help me with that
I didn’t get what you’re saying. Can you please be a bit more clear?
How would you set the link to be an advanced custom field rather than hard-coded?
I'll update you on this soon.
@@wpalgoridm Any update?
What about making a mailto: link. I am going crazy trying to add mailto: links to my Elementor stuff. It will not work for that.
If you have Elementor Pro, you can use the dynamic field for any link and link to contact URLs such as mail, text Whatsaap and more. A feature called action links already a part of Elementor Pro.
It is not applying on the frontend. Any ideas? I have deleted cache
Maybe script is blocked on that browser or your security plugin is blocking it.
How do we make it so it doesn't click the url while editing that column later in elementor?
Open navigator on that page and delete the HTML widget that has the code or simply remove the code within HTML widget and click on that section normally[Also clear the cache or view the actual page].
thank u sir
Welcome
Why you give the clickable class when not using it?
If you add CSS class, you can target all similar sections once. However for the method shown, ID is enough and each section should have unique ID and unique URL that it should open.
code plz
Why not using a "ghost" button?
You place a button inside the column and add some styles so it overlaps everything and make it transparent. I am doing it this way.
Not good for seo and accessibility using buttons as overlapping structures. Plus might need some weird tweaking.
@@wpalgoridm Really? Because I think it's otherwise. It's basic html, works on screenreader and without js. Additionally the user can see the link, copy it and open it the way he/she wants (new tab, new window, same window). Its not worse for seo than a js redirection. Both have no positive or negative impact.
Great ! How to not open a new tab ? Just open a new page in the current tab .
after the link in the html code add: ,"_self" make sure the link is also in quotation marks
How to go to an anchor at the same page? Thanks!!!
Replace blank with self
@@wpalgoridm that works! Also replacing with location.href = "#"; big Thanks!!!
OMG my page is damaged. Elementor says the page is not found.
Don't panic! In your Wordpress dashboard, click edit , below the page[Not Edit with Elementor]. Below you must be able to see the revisions of your page. Choose the last working version and hit update. Check this latest video to add links to columns th-cam.com/video/e65zjgzwalg/w-d-xo.html
It works, but your client will never be able to modify a piece of javascript, it's better to find another solution to make the site administration 100% ok for the customer
Yes, maybe but there are better solutions too th-cam.com/video/e65zjgzwalg/w-d-xo.html
Hi. i have a problem. i set the code for 3 columns in a page, with 3 different linked - websites. But only referred to one website. How to fix? Thanks
I recommend duplicating the HTML widget with code 3 times and your code in each should look like this:
document.getElementById("clickable").onclick = function() {myFunction1()};
function myFunction1() {
window.open("URL1, "_blank");
}
**SECOND LINK**
document.getElementById("clickable").onclick = function() {myFunction2()};
function myFunction2() {
window.open("URL2", "_blank");
}
**THIRD LINK**
document.getElementById("clickable").onclick = function() {myFunction3()};
function myFunction3() {
window.open("URL3", "_blank");
}
and so on
This doesn't work on the actual site. Only works when in elementor editor.
Clear cache and see if any security plugin is blocking the code.
Hmmm... this did not work for me.
Master Addons Plugin now has a wrapper link function
Great to know that!
Sure, it works, BUT...
1) It opens in a new tab. I don't want that.
2) When you hover over the area, the mouse pointer remains the same, so it doesn't appear to be clickable unless you click it. I want the pointer to change to that pointing finger
UPDATE - Make these changes:
1) Change _blank to _self
2) In the advanced tab of the HTML box, scroll down to Custom CSS, then add"
.clickable {
cursor: pointer;
}
This video may help th-cam.com/video/PJfFsYgPXCc/w-d-xo.html
what if you dont want to open a new window
Replace _blank with _self but this applies in preview as well so you need to remove the HTML widget or the code before you edit that section in Elementor.
@@wpalgoridm thank you it worked :)
❤❤❤❤❤
DINT WORK FOR ME.
This doesn't work. Seems a step or two have been left out.
Check if Wordfence is blocking the code. It's pure Javascript, it'll work flawlessly.
Use this script instead to turn off clicking while editing:
jQuery("#clickable").not(".elementor-element-edit-mode").click(
function() {
window.open("wpexperimentor.com", "_blank");
}
)
Thank you for the optimised code :) that'll help everyone !
Crap, its hard to follow with that damn animation working
I CAN'T USE COUPLE OF THEM IN THE SAME PAGE AS ITS GETTING ERROR AND MIX THINGS UP
Disregard, I figured it out. I didn't change the name in the script LMAO
this is so stupidly over-complicated...those stuff is much better solved in UXBuilder...telling the people they dont need javascsript skillz and then messing this up with such a workaround...incredible (not fault of Wpalgoridm...)
You now have a free plugin to make columns clickable, but yeah its bit of an overkill.
Your voice is so low, why don't you guys watch this yourself and than uploaded... voice is the secondary priority