Divi Popup: No Plugins Required! [Ultimate Guide]

Ania Romańska (Divi Lover)
Ania Romańska (Divi Lover)
8.3 هزار بار بازدید - 2 سال پیش - Welcome to the ultimate tutorial
Welcome to the ultimate tutorial about creating custom popups in Divi. No plugins are required, and we will only be using CSS and jQuery - no other scripts! If you have a Divi website, you're all set! It is all we need :) You can choose between 3 options here: easy, intermediate, and advanced. The easy option is to download my free layout with the Divi popup, and you can get it here: divilover.com/divi-popup-without-plugins-tutorial/ The intermediate option will be using a copy and paste method. The explanation is at the beginning of this video tutorial, and the snippets are available in the article linked above. The advanced option guides you through creating a popup in Divi step by step, showing you how to do this on your own with just CSS and jQuery. This is also the option that allows for the most customization because I will show you many variations of this popup so you can find the perfect one! It starts here: 00:08:29 I hope you find this tutorial useful, and also easy to understand and accessible. If you have any questions, you can ask them in the comments, and I'll do my best to answer. You can also join the Divi Lovers Facebook group where it's easier to discuss web design problems :) www.facebook.com/groups/divilovers Please, let me know if this tutorial was helpful - and also if you'd like to watch more content like this! I'm always looking for new Divi tutorial ideas. This is a long, comprehensive, very detailed tutorial, so here is the table of contents for your convenience: 00:01:41 - Copy & Paste Method 00:07:10 - Free JSON File - Divi Page Layout with Popups 00:08:29 - Step-by-step Method - Setting up elements in the Builder 00:10:06 - Wrapping the Popup Section with additional HTML containers 00:13:03 - Initial Position and Hiding the wrappers with CSS 00:19:55 - Setting up Button trigger with jQuery 00:24:05 - Closing the Popup with jQuery 00:26:11 - Adjusting the Overlay for Admin Bar 00:29:31 - Centering the content inside the Popup 00:33:10 - Changing the cursor for the Close trigger 00:33:53 - Preventing the Body Scroll behind the Popup 00:36:11 - Fixing the Top Navigation z-index Issue 00:41:51 - Adding Animation 00:47:02 - Working with Video inside the Popup 00:56:05 - Closing the Popup on background click 00:58:36 - Triggering the Popup from the Menu 01:01:24 - Triggering the Popup automatically on page load #divitutorial #divilover #csseffect #divitheme
2 سال پیش در تاریخ 1401/03/25 منتشر شده است.
8,368 بـار بازدید شده
... بیشتر