Open an Elementor Popup on Hover

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 พ.ย. 2022
  • Learn how to make a Elementor popup that triggers on hover instead of click. → Copy the code from here: lifeonablock.com/get-javascri...
    Get Elementor Pro: lifeonablock.com/elementor
    In this video, we answer some common questions about Elementor Pop up. I’ll show how you can trigger a pop op by hover without using a pluing.
    When you hover over the trigger element a popup will appear, and when you remove the cursor the popup closes.
    People og found this video helpful was searching for:
    - Learn how to open an Elementor popup on hover or how to make pop-up appear on hover.
    - Elementor pro pop-up hover effect
    This video was inspired by: element.how/elementor-hover-p...
    Owner of code used in this video: Maxime Desrosiers from Element.how
    #elementor #elementorwordpress #popup #wordpresstutorial #elementortutorial #elementorpagebuilder #elementorpro
  • แนวปฏิบัติและการใช้ชีวิต

ความคิดเห็น • 48

  • @nicopalmkvist
    @nicopalmkvist  3 หลายเดือนก่อน

    Code snippet: lifeonablock.com/get-javascript-code/

  • @JustinRampley
    @JustinRampley 7 หลายเดือนก่อน +3

    For people asking about multiple elements and popups. '.showpopup' under let element in the javascript code needs to be unique for each pop-up. That needs to match the CSS Class under advanced in the element you are using to trigger the pop-up. So let's say the class used is named larry. In the javascript under let element replace '.showpopup' with '.larry' instead. Then, use only one shortcode, the shortcode of the current pop-up. Hope this helps : )

    • @blueelink5444
      @blueelink5444 4 หลายเดือนก่อน +1

      Hello please I need your help, I want the popup to show on click instead of hover, what custom code can I use to make the pop-up show on click instead of hover please help me thanks

    • @simonmuhr8934
      @simonmuhr8934 15 วันที่ผ่านมา

      @@blueelink5444 You dont need code for that. You can set a button in elementor to trigger a popup

  • @musikathsch
    @musikathsch ปีที่แล้ว +1

    What a great tutorial. Works perfectly fine, thank you so much for solving my problem!

  • @sagaraperera456
    @sagaraperera456 ปีที่แล้ว +6

    4th subscriber. Good content. Solved my Problem. Wish you all the best. Hope to watch more content in the future. This is to motivate you. You will be a success soon. Keep creating.

    • @nicopalmkvist
      @nicopalmkvist  ปีที่แล้ว

      Thank you @sagaraperera9145!
      More elementor / wordpress tutorials are on the way 💪

  • @timtom4762
    @timtom4762 10 หลายเดือนก่อน +1

    Still working fine, THX!

  • @toufikgroenendijk1717
    @toufikgroenendijk1717 ปีที่แล้ว +1

    10/10 good vid very helpful !

  • @rogerio6892
    @rogerio6892 ปีที่แล้ว +1

    Thank you! Very helpfull

  • @Jebesniper
    @Jebesniper 7 หลายเดือนก่อน

    Thank you so much my man! Appreciate a lot. Just what i needed :))) Thanks again!! :))

    • @nicopalmkvist
      @nicopalmkvist  7 หลายเดือนก่อน

      I'm glad I could help! Let me know if there's anything else you need!

  • @Checklogic
    @Checklogic ปีที่แล้ว +1

    18th subscriber here. Finnaly getting in on something good early on. DG is great. Thanks

  • @aqsatariq6186
    @aqsatariq6186 11 หลายเดือนก่อน +1

    Great Video sort out my problem in few minutes 😍

  • @gregorkoprivc1474
    @gregorkoprivc1474 8 หลายเดือนก่อน

    Thank you so much .. if I need more differnet popups? Must i change popup ID and change selector in script?

  • @Drumers
    @Drumers ปีที่แล้ว +1

    Thank you so much for this! Really helpful!
    One question: how would you use it if you wanted to hover different buttons and each text to trigger another popup?

    • @nicopalmkvist
      @nicopalmkvist  ปีที่แล้ว

      Thanks for your question @Drumers
      You can insert multiple shortcodes that cause other popups to open. Just remember that there must be a comma between them. Check out 03:30 and add your shortcode number here.
      Alternatively, you can also repeat the whole process with a new shortcode

  • @user-kv7wv9sm1e
    @user-kv7wv9sm1e 7 หลายเดือนก่อน

    Hello, Your tutorial is very helpful. I have read all the comment section. I am having a problem the first hover popup is working fine but the second one I made just on the next column it doesn't stay on screen even the cursor position is static on the trigger point it keeps opening and closing. can you please give me short answer that what might be the cause?

  • @DaisyAlleno-Powell
    @DaisyAlleno-Powell 9 หลายเดือนก่อน

    Great Video, I'm wondering how I can achieve the same but with multiple buttons that trigger multiple different popouts? And whether the buttons can be small images? Thank you.

  • @khondang6000
    @khondang6000 9 หลายเดือนก่อน

    This is great thanks, Do you have tutorial how to on-click image Popup rather automation Popup on Hover?

  • @jinuvarghese671
    @jinuvarghese671 ปีที่แล้ว +1

    Great video. 16th subscriber

  • @ecommerce9926
    @ecommerce9926 9 หลายเดือนก่อน +1

    life saver

  • @masho50000
    @masho50000 ปีที่แล้ว +3

    Hey! Great tutorial thank you i found it really helpful. I have an issue that i need the pop up to stay active while hovering it and not just the button that's triggering it as the pop up is a part of a mega menu. Can you help me i would really appreciate it. Thanks!

    • @nicopalmkvist
      @nicopalmkvist  ปีที่แล้ว

      Hey @mashi50000
      If you want your pop-up to be activated from your menu, you should just use the same procedure as Shown in the video here.
      You just add the class 'showpopup' in your WordPress control panel-->theme-->menu

  • @user-qu1gy2cw5e
    @user-qu1gy2cw5e 4 หลายเดือนก่อน

    Hi I loved the tutorial, I would like some help tweaking this code, when I hover over the trigger element (button) it opens the pop up, but I would like it such that when my mouse hovers over the pop up, after I open it using the trigger element, the pop up should stay open. currently when I move mouse off the button the pop up closes

    • @DonArtemon
      @DonArtemon 4 หลายเดือนก่อน

      Hello, I have the same question, did you manage to do this?

  • @blueelink5444
    @blueelink5444 4 หลายเดือนก่อน

    Hello please I need your help, I want the popup to show on click instead of hover, what custom code can I use to make the pop-up show on click instead of hover please help me thanks

  • @dkass465
    @dkass465 ปีที่แล้ว +1

    great video! I have one question... if i was using it for my menu, i got it to work... but how do I get the popup to stay while i have my mouse hoovering over the popup, so the user can click a link on the popup?

    • @nanincv
      @nanincv 11 หลายเดือนก่อน

      did ypu manage to solve this?

  • @videoxyz24
    @videoxyz24 ปีที่แล้ว +1

    great tutorial. if I have several popups on the same page using different triggers can I combine all of them into one script?

    • @nicopalmkvist
      @nicopalmkvist  ปีที่แล้ว

      Yes thats possible. Just Enter the popup id’s with comma.separated numbers. For example “998,999”

  • @alvinco.virtual8821
    @alvinco.virtual8821 ปีที่แล้ว +1

    Thanks alot, just what I needed!
    btw, I just have 1 question, really hope you can help..
    1. how can i move the pop up from left to right?
    Thanks alot..

    • @nicopalmkvist
      @nicopalmkvist  ปีที่แล้ว

      Thank you alvinco.virtual8821 !
      You can change the position of your pop-up in the settings and then chose position.
      Edit pop-up with elementor-->settings (The small little gear icon in the bottom of the elementor editor panel) --> change position

  • @a.t.5150
    @a.t.5150 9 หลายเดือนก่อน

    Hey, loved your video! It did work on my website, too. I have a quick question. I want to make a function that triggers a second popup when a customer hovers over a popup menu. Unfortunately, your code did not work when I tried to make the function. Can you tell me how to tweak it, please?

    • @nicopalmkvist
      @nicopalmkvist  9 หลายเดือนก่อน

      So it did not work when you wrote the shortcode pop-up like this [988,999]? In my code?

    • @JustinRampley
      @JustinRampley 7 หลายเดือนก่อน

      @@nicopalmkvist If you use the showpopup class for each element you want to trigger, every trigger element will bring up the same pop-up. The comma separators for the shortcodes do nothing. Is there a way to use something other than showpopup for the class so you can have multiple popups work with this javascript?

  • @user-nu3tj3fq2m
    @user-nu3tj3fq2m 10 หลายเดือนก่อน

    how do I get this to work on multiple elements on a page, so that a new popup window opens every time I go to the next button?

  • @martingunis4393
    @martingunis4393 ปีที่แล้ว +1

    Hello, great tuturial, thanks! But What if I need as a trigger popup button, which is on entire site... 😊

    • @nicopalmkvist
      @nicopalmkvist  ปีที่แล้ว

      I'm not quite sure what you mean.
      If you want the button to trigger a pop-up on the entire page, you just have to change your pop-up in the display settings to do that!

  • @Checklogic
    @Checklogic ปีที่แล้ว +1

    finally

  • @israeloladipo9629
    @israeloladipo9629 ปีที่แล้ว

    whats instrunmental did u use for the background music

    • @nicopalmkvist
      @nicopalmkvist  ปีที่แล้ว

      'In Dreamland ' background music. Search for it on youtube ;)

  • @abdullahshah2258
    @abdullahshah2258 11 หลายเดือนก่อน

    hey I love your work but the issue is when popup opens on hover , I try to to hover over the popup it closes ,how do I get the popup to stay while i have my mouse hovering over the popup, so the user can click a link on the popup? Please solve this issue so that it only closes popup when i hover out of poup not on section

    • @nicopalmkvist
      @nicopalmkvist  11 หลายเดือนก่อน

      Hi @abdullahsshah2258,
      Did you solve this problem or should I guide you?
      - Michelle

    • @satazaki7011
      @satazaki7011 11 หลายเดือนก่อน

      @@nicopalmkvist I also encountered this problem. Could you please guide me. Thank you very much.

    • @abdullahshah2258
      @abdullahshah2258 10 หลายเดือนก่อน

      @@nicopalmkvist hoping to get a quick reply because the deadline is coming v soon , thanks in advance

  • @healthadvisor6969
    @healthadvisor6969 ปีที่แล้ว

    The code link is not Working you are providing the description

    • @nicopalmkvist
      @nicopalmkvist  ปีที่แล้ว

      lifeonablock.com/get-javascript-code/
      Try this and let me know if it’s still not working