Ania, all I can say is a huge thanks. You are simply amazing and gifted with Divi. We appreciate the time it took to create this tutorial as well as generously providing the json file. 💚
Guess I searched the WHOLE internet for finding a tutorial like this tiny and amazing one! Thanks a lot. It works perfectly and is simple as that. NAd btw: I like your way of expaining and teaching. Gorgeous! =)
Hi Ania, that's what I call a great content which really gives a value to audience.. I liked dividing the video into two parts and I appreciate the efforts you have put preparing not only the video, but also the 3 premade layouts.. Thanks a lot :)
Any plans for feature updates on your Divi Toolbox plugin. You have great ideas that would work well in the plugin. Also some extra options for the custom men would be good. Divi menus are mostly forgotten about with it comes to plugins.
Yes Divi menus are forgotten about. The plugins that are available are a bit OTT. More focus on Menus with Divi Toolbox would be welcomed as far as I am concerned anyway.
Thank you for your feedback and I hear you! To be honest, I did think about this issue and finally decided this feature could not be added to the Toolbox. Divi Toolbox is supposed to make the design process easier and there is no way to include this functionality without making it much more complicated than it is now, so this is why it won't be added - and why I made this tutorial instead.
The video helped me a lot. I am working on making a language switcher popup. I only want to show it once per session. I also want the popup to close after the user has clicked on the desired language. Do you know the solution for this? Thanks in advanced
Thank you Ania for the tutorial. Please can the same concept be applied to making a "Quick View" popup for Woocommerce products? Would love to learn your approach to it 🙂
Hi, yes, it could, but everything would need to be contained in a PHP function that uses Woo action hooks and pulls the inner popup content dymanically. A bit more complex than plain Divi modules ;-)
Thank you for such a thoughtful and thorough tutorial. I wonder if you might be able to tell me if i am doing something wrong? When I click the trigger, it opens the section, but the row is empty (just a white box). I have a text module in the box with a lot of text, that is styled in the module to be black... Sorry to be a pain, I've started over from scratch and get the same result - a white box with the close icon (which works ;-)). Thanks so much (ps, i have also just dowloaded the layout and the buttons don't do anything on the layout page - You can see there is a target but nothing happens when you click them)
I'm sorry you had trouble getting it to work. It sounds like it could be a plugin or js confict (if the layout doesn't even work). We would need to see the URL to advise..
Hello Ania, your Video is Awesome. its really help me out. but i am facing a issue by using auto load Popup code in my website. it basically running on all pages by default. and due to this my website getting freeze. can we make it to run only specific page,
In case you still need it, I just figured out it myself, you just need to create a Code module in the pop-up section and copy the jQuery code to that Code module. Remember to remove the jQuery code in the Divi Integration.
Hi Ania, thank you for your helpful tutorial. :) It works for me when I create one button/CTA, but when I add another or multiple buttons in one row, it messes up. Hope you can help me.
Hi Joy! If you're having trouble following the step-by-step instrucitons, please feel free to download the JSON layout included in the tutorial - it has three different popups on a single page - you can use it as a starting point: divilover.com/divi-popup-without-plugins-tutorial/
Thank you so much for this valueble tutorial. It works perfect with a button but when I try to applied to an image didn't work by any chance you know why?
To connect the trigger to the section, the code looks for the href attribute of the element with the trigger class: SectionID = $(this).attr('href'); But in the Image module, the href attribute is inside, and not on the module container. Try replacing this line with: SectionID = $(this).find('a').attr('href');
Great video. How can I trigger the popup from within a separate JQuery function? I have a function that uses $(window).on ('scroll') that shows an alert at the right place. What jQuery do I use to trigger the popup? $('#email-optin').show(); ?
I'm afraid it's not as straightforward as you described. The trigger element and the click event on that trigger is directly connected with the overlay ID. If you want to show one specific overlay ID then something like: $('#contact').closest('.dl-popup-wrapper').addClass('popup-is-visible'); could be a good start 🤔
Ania, I love the functionality of this code but am experiencing a weird issue, I am using a series of blurbs with images as a list in the light box but some of them do not show. If I select inspect on the page the images that are in frame show if I scroll more are missing if I close the inspect then those on screen load. Back and forth it goes. Any clue on how to resolve this. It seems like it has to do with the JavaScript hiding. Also this does not seem to work on mobile view. Any suggestions?
@@aniaromanskacom thanks for the reply. So I figured out the image issue I have to turn off the animation on blurbs since it was not being trigger by scrolling the light box. I suspect since it is hiding the section on the page until you scroll to it they just were not rendering.
@@aniaromanskacom the issue with mobile is another issue all together not sure why it is not working for that. I had to install another plug to get it to work.
Thanks again Ania, Just I have a question, I tried to do the same for calling the popup section through an ICON click instead of BUTTON. Unfortunately, I couldn't. Is there any limitation? thanks
The Icon doesn't use a standard URL field like buttons do, that is why this wouldn't work. JS will not find the connection between the icon and the section, so the code and the approach would need to be modified for this to work with the Icon module.
I would like to know as well. It opens great and as intended but there isn't a way to close it. Clicking outside of the module doesn't do anything and we don't have an X to click on either. I'm using this pop up a form.
When I try the opt-in form module, why does the opt-in form module not appear, only the title and description appear, anyone know why and what the solution is?
![Working with Custom CSS in Divi: Beginner Guide [2022]](http://i.ytimg.com/vi/k7Vy_MY080I/mqdefault.jpg)
![Working with Custom CSS in Divi: Beginner Guide [2022]](/img/tr.png)
![Divi Child Themes: Beginner Guide [2022]](http://i.ytimg.com/vi/zAP9PYYOMIs/mqdefault.jpg)
Ania, all I can say is a huge thanks. You are simply amazing and gifted with Divi. We appreciate the time it took to create this tutorial as well as generously providing the json file. 💚
Thank you so much, I am so glad you found it useful!
Guess I searched the WHOLE internet for finding a tutorial like this tiny and amazing one! Thanks a lot. It works perfectly and is simple as that. NAd btw: I like your way of expaining and teaching. Gorgeous! =)
I am so happy to hear that and that I could help, thank you!
Hi Ania, that's what I call a great content which really gives a value to audience.. I liked dividing the video into two parts and I appreciate the efforts you have put preparing not only the video, but also the 3 premade layouts.. Thanks a lot :)
That is so good to hear, thank you! I'm glad you found it helpful!
Beautifully crafted walk-through. I learned so much following along step-by-step. You are a gifted programmer and teacher. Thanks for sharing this!💯
You are too kind! Thank you, I'm so happy you found this helpful!
Any plans for feature updates on your Divi Toolbox plugin. You have great ideas that would work well in the plugin. Also some extra options for the custom men would be good. Divi menus are mostly forgotten about with it comes to plugins.
Yes Divi menus are forgotten about. The plugins that are available are a bit OTT. More focus on Menus with Divi Toolbox would be welcomed as far as I am concerned anyway.
Thank you for your feedback and I hear you! To be honest, I did think about this issue and finally decided this feature could not be added to the Toolbox. Divi Toolbox is supposed to make the design process easier and there is no way to include this functionality without making it much more complicated than it is now, so this is why it won't be added - and why I made this tutorial instead.
This was amazing, and so helpful! Thank you!
Many thanks Ania! Love the design and tutorial!
Glad to hear it!
The video helped me a lot. I am working on making a language switcher popup. I only want to show it once per session. I also want the popup to close after the user has clicked on the desired language. Do you know the solution for this? Thanks in advanced
I like all your tutorial very much, but I specially learn a lot from this. Thank you very much
I am so glad to hear this! Thank you
Many thanks Ania. Excellent tutorial
Thank you! I'm glad it was useful!
very good video, it helped me a lot, thank you very much Ania.
Hello Ania, Well Done! It was really helpful... Thanks a lot...
Glad it was helpful!
Really awesome pop-up. thanks!
Glad I could help!
What a nice tutorial, love that 💛
Thank you!
Thank Ania you very much for your content. Could you do it with posts, like on Neil Patel blog?
Thank you Ania for the tutorial. Please can the same concept be applied to making a "Quick View" popup for Woocommerce products? Would love to learn your approach to it 🙂
Hi, yes, it could, but everything would need to be contained in a PHP function that uses Woo action hooks and pulls the inner popup content dymanically. A bit more complex than plain Divi modules ;-)
Thank you for such a thoughtful and thorough tutorial. I wonder if you might be able to tell me if i am doing something wrong? When I click the trigger, it opens the section, but the row is empty (just a white box). I have a text module in the box with a lot of text, that is styled in the module to be black... Sorry to be a pain, I've started over from scratch and get the same result - a white box with the close icon (which works ;-)). Thanks so much (ps, i have also just dowloaded the layout and the buttons don't do anything on the layout page - You can see there is a target but nothing happens when you click them)
I'm sorry you had trouble getting it to work.
It sounds like it could be a plugin or js confict (if the layout doesn't even work). We would need to see the URL to advise..
Hello Ania, your Video is Awesome. its really help me out. but i am facing a issue by using auto load Popup code in my website. it basically running on all pages by default. and due to this my website getting freeze. can we make it to run only specific page,
In case you still need it, I just figured out it myself, you just need to create a Code module in the pop-up section and copy the jQuery code to that Code module. Remember to remove the jQuery code in the Divi Integration.
Hi Ania, thank you for your helpful tutorial. :) It works for me when I create one button/CTA, but when I add another or multiple buttons in one row, it messes up. Hope you can help me.
Hi Joy! If you're having trouble following the step-by-step instrucitons, please feel free to download the JSON layout included in the tutorial - it has three different popups on a single page - you can use it as a starting point: divilover.com/divi-popup-without-plugins-tutorial/
Thank you so much for this valueble tutorial. It works perfect with a button but when I try to applied to an image didn't work by any chance you know why?
To connect the trigger to the section, the code looks for the href attribute of the element with the trigger class: SectionID = $(this).attr('href'); But in the Image module, the href attribute is inside, and not on the module container. Try replacing this line with: SectionID = $(this).find('a').attr('href');
@@aniaromanskacom Thank you so much Ania!
Siemasz, nie działa na mobile, znaczy jak w mobile masz menu rozwijane to nie działa pozycja z rozwijanego menu
Thanks, fantastic.
Glad you liked it!
Good work
Thank you so much 😀
Great video. How can I trigger the popup from within a separate JQuery function? I have a function that uses $(window).on ('scroll') that shows an alert at the right place. What jQuery do I use to trigger the popup? $('#email-optin').show(); ?
I'm afraid it's not as straightforward as you described. The trigger element and the click event on that trigger is directly connected with the overlay ID. If you want to show one specific overlay ID then something like:
$('#contact').closest('.dl-popup-wrapper').addClass('popup-is-visible');
could be a good start 🤔
@@aniaromanskacom Thank you. I will try that.
Ania, I love the functionality of this code but am experiencing a weird issue, I am using a series of blurbs with images as a list in the light box but some of them do not show. If I select inspect on the page the images that are in frame show if I scroll more are missing if I close the inspect then those on screen load. Back and forth it goes. Any clue on how to resolve this. It seems like it has to do with the JavaScript hiding. Also this does not seem to work on mobile view. Any suggestions?
Hi Rod, I'm sorry, but it's hard to advise anything without seeing the issue live. Can you share your website URL?
@@aniaromanskacom thanks for the reply. So I figured out the image issue I have to turn off the animation on blurbs since it was not being trigger by scrolling the light box. I suspect since it is hiding the section on the page until you scroll to it they just were not rendering.
@@aniaromanskacom the issue with mobile is another issue all together not sure why it is not working for that. I had to install another plug to get it to work.
Thanks again Ania, Just I have a question, I tried to do the same for calling the popup section through an ICON click instead of BUTTON. Unfortunately, I couldn't. Is there any limitation? thanks
The Icon doesn't use a standard URL field like buttons do, that is why this wouldn't work. JS will not find the connection between the icon and the section, so the code and the approach would need to be modified for this to work with the Icon module.
use a button module, hide the text and make the icon button always visible
@@maxriko8964 that's a great idea! Thanks ;-)|
Please create video about adding mask to contact form Divi
I'll add it to my list of ideas, thank you for your feedback!
how to close the popup?
I would like to know as well. It opens great and as intended but there isn't a way to close it. Clicking outside of the module doesn't do anything and we don't have an X to click on either. I'm using this pop up a form.
Mine is not showing.
When I try the opt-in form module, why does the opt-in form module not appear, only the title and description appear, anyone know why and what the solution is?
You'd have to connect it to your email marketing platform. Otherwise it's only visible in the Visual Builder.
amazing
Glad you think so!
GRACIAS
You're welcome 😊
Its incomlete, not working on mobile so kinda useless