Divi Popup: No Plugins Required! [Ultimate Guide]
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: https://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 :) https://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
Видео Divi Popup: No Plugins Required! [Ultimate Guide] канала Ania Romańska
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: https://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 :) https://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
Видео Divi Popup: No Plugins Required! [Ultimate Guide] канала Ania Romańska
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
CSS Snippets for Buttons in Divi [Easy Tutorial]Webdesign Playground #06 - Custom Script & Mobile Adjustments in DiviHow to Edit Divi Blog Archives and Categories Without a PluginCanvas: All-in-One Layout Kit for Divi: Video WalkthroughHow to Edit Header on Divi Blog Categories Using Hooks and Conditional LogicWebdesign Playground #07 - Building a Divi Community PageHow to Align Divi Blurb Module Icon/Image to the Right + Free Features & Timeline LayoutWebdesign Playground #04 - Divi Child Theme and Footer TemplateIdentity: Premium One-Page Child Theme for DiviWebdesign Playground #03 - Creating Single Post Template in DiviManage Projects Post Type in Divi ~ Divi Toolbox ⚙️💙Animated SVG Waves as Section Dividers in Divi: Step-by-step GuideCustomize WordPress Login Page ~ Divi Toolbox ⚙️💙Ask Me Divi! Episode 2: Divi Header & MenuHow to use CSS Grid in Divi + Free Layout SetDisplay Divi Layouts using a Shortcode ~ Divi Toolbox ⚙️💙Free Divi Layout: Hero Section with Animated Wave DividersMilly: Premium Child Theme for DiviHow to Create Floating Overlapping Images in Divi + Free Opt-in Page Layout!How to Create a Custom Cursor Effect in Divi Theme + Free Landing Page Layout!How to Create a Smooth Slide-in Sidebar Section in the Divi Theme