Table of Contents
Divi Overlays and Popups Introduction
Designing custom overlays and popups can be a tedious task. Fortunately, with Divi Builder’s extensive library of modules, creating these features is easier than ever before. In this post, we’ll cover 20 tutorials that will help you master the art of building overlays and popups with Divi. Whether you’re looking for a way to add an overlay to your contact form or make a popup appear when someone clicks on an image gallery, there are plenty of creative examples in here to inspire your next design project! But first, to make sure we’re all on the same page, let’s explain what popups and overlays are and what they are used for.
Give superpowers to Divi theme with the UDBA plugin
What are Popups in Web Design?
A popup is an element that appears when a specific trigger condition is met; this can happen when you scroll down a page, click an internal link, or even just move your mouse cursor over a section. It works by creating a trigger (a code) that fires off and establishes a javascript event that then displays a new window.
It’s a good way to capture the attention of your visitors and get them involved. It can be used in many different ways but is commonly seen when there is an option to subscribe or register for something. Adding this kind of new level of interactivity helps readers feel as if they are fully invested in what they’re reading.
What is an Overlay in Web Design?
An overlay is an element that covers the entire area of your web page in other to highlight essential or promotional information; it completely isolates the page’s content with a traditional semi-transparent container. Overlays are often used on websites with lots of information where scrolling could get very tiresome, such as when you look at email inboxes, or social media feeds.
Adding widgets like Email opt-in forms and social media handles to Overlays increases the rate of audiences taking action. Traditionally, a user has to scroll down on a website before seeing your call to action, but you can get it across much more effortlessly and earlier with overlays.
Overlay design typically includes one large image and text overlaid over it; this means that visitors won’t see any content until they scroll past the general background image first. However, if done correctly, images like navigation menus will still remain visible even when the rest of the content is hidden, making it easier for visitors to go back and forth between pages.
After getting familiar with this web design technique lets now explore the 20 Divi tutorials that we think are the best uses of these effects.
- We have mentioned in the heading if the tutorial discuss about [Overlays] , or [Popups].
20 best practical use cases of Overlays and Popups in Divi
1. Create Custom Image Overlays With Divi Visual Builder [Overlays]
Using image overlays on your site lets you present information in an aesthetic manner that improves user experience. If you’ve had difficulties using plugins to create image overlays, this article from Elegant Themes on designing image overlays with Divi’s visual builder will greatly help. This Divi tutorial wil teach you how to combine CSS and Divi’s default functionalities to create a nice looking image overlay.
2. How to Use Divi’s New Filter Options to Beautify Your Images [Overlays]
The writer here explains how the Divi filter effects could potentially replace the need for photo editing software like photoshop to beautify images for websites. Some of the image filters available include; Black & White (Bright), Black & White (Subtle), Low Contrast, Color Change, Warmer, Darker, Slightly Sepia, Gray Toned, and Sepia & Semi-Transparent. The article features comparisons of images before and after effect was applied on them. If you’re looking to add some cool filter effects to images for an existing or new Divi website, you’ll find this an exciting read.
3. Add a Scroll Triggered Popup to Divi Blog Posts [Popups]
Unlike traditional popups, scroll-triggered pop-ups appear when the user scrolls the page. For example, you can create an opt-in email form that appears when readers reach the bottom of a page. With scroll-triggered popups, you can bolster conversion rates and generate new leads. This is because they allow you to control the timing of popups to make CTA more effective. Think your blog needs scroll-triggered popups? Read this tutorial from Elegant Themes to learn how to add nice looking scroll-triggered popups. The writer uses the Divi Builder for this effect, although activating scroll triggers require writing a tiny jQuery snippet.
4. Create a Sticky Email Optin in Divi That Draws Attention [Popups]
Divi’s sticky position options allow you to make any element on your page stick with the user as they scroll down. This allows for meaningful content that is more likely going fall below the fold to stay visible, like an email opt-in form or a popup window where users can subscribe without even having to unhook their eyes from what’s in front of them.
This tutorial by Elegant Themes will show you how to add a sticky email opt-in to your Divi blog posts to keep the necessary form at the forefront. It’ll also show you how to add popup so it doesn’t distract or annoy readers when they scroll through their posts on mobile devices and tablets – because sometimes those popups can be really annoying! This tutorial does not require any CSS or third-party plugins, just inbuilt Divi features.
5. Design a Login Popup Form in Divi [Popups]
Login popup forms make it easier for your users to log into your site. This tutorial provides steps for using the Divi Login Module and other elements to design a functional, smooth login process from scratch. Go through and start creating fantastic login popup forms for your site.
6. Design a Welcome Gate [Overlays]
This tutorial from Elegant Themes walks you through the basics of creating a custom welcome gate for your web site. A welcome gate is an overlay that prevents users from accessing your site until they interact with it. Fortunately, you don’t have to install extra plugins on your site to add welcome gates in Divi. Here, the author has shown the process behind designing a custom welcome gate popup in Divi using the native visual builder.
7. Add a Fixed Contact Form Corner Popup [Popups]
Contact forms are essential to site owners since they are instrumental in maintaining relationships with people who are interested in website offerings. A fixed contact form corner popup follows site visitors as they navigate the site. This means site visitors have quick access to the contact form whenever they want to send a message.
8. Add Tooltips that Overlay a Background Image [Popups]
Tooltips are popup trigger elements that display a hint message when a user hovers over them. In this article, you’ll learn to use Divi’s hover effects to design tooltips that provide extra information about your product to site visitors. The author uses the Fitness Gym landing page to demonstrate the process, but you can use the same technique in any other layout.
9. Create an Image Overlay with Split Text Shutter Animation [Overlays]
Overlays make viewing images more fun and engaging. In this tutorial the writer will show you how easy it is to create an image overlay with split text shutters using Divi’s built-in transform options for three completely unique designs.
10. Add Popup Modals to Divi With PopupMaker plugin [Popups]
This tutorial published by Dividezigns guides you through how you can make a Divi popup modal for free with the aid of a third-party plugin called Popup Maker. The writer explains, step by step, how you can create the popup modal from the backend of WordPress and integrate it with Divi builder using generated shortcode. This tutorial and straightforward and hardly requires much experience to complete.
11. Design Background Image Overlays for CTA Module [Overlays]
In this tutorial by Divibooster, the writer shows how to display a semi-transparent overlay on a background image with the Divi CTA (call-to-action) module. With the help of a Divi Builder row module, you will learn how to assign a background image separately to the row section and semi-transparent solid color to the main CTA module.
12. Create Popup Contact form without plugins [Popups]
In this tutorial, the writer will show you how to create an interactive Divi popup window without using any third-party plugins. A button click opens a contact form in a modal that pops up and then closes when clicked again. You can add anything within the modal; a newsletter can form, a banner, etc.
13. Add Locked Corner Content Popups [Popups]
Locked opt-in compel users to provide their details in exchange for access to hidden content. You can use a closed opt-in form to share discounts and freebies with users while building up your email list. This in-depth article by ET writer Donjete breaks down the creation of locked corner content popups in Divi. She utilize the Bloom plugin to get this done.
14. Create Gradient Background Overlays [Overlays]
The Elegant Themes team has published this handy guide to teach you how to properly create gradient background overlays using the Divi’s background design feature update. You’ll learn how to use the Divi visual builder to tweak section background settings without writing a line of code. By mastering this technique, You can explore the limits of your creativity and design unique background gradient designs for different areas of your site.
15. Create Pop-up Video on Mouse Click [Popups]
A clickable video that pops up on mouse click is better than adding a video popup on page load, as the latter is more intrusive and turns off visitors. It also creates meaningful interactions with visitors, as it doesn’t force them to watch the video. The author relies on the Divi builder and Video PopUp plugin to create the final result.
16. Design Gradient Background Animations [Overlays]
Gradient background animations are excellent alternatives to static background images or glitchy background videos. This post is a guide for using CSS to create color transitions to bring gradient backgrounds to life. You get to learn two techniques for creating background animations in this tutorial. While the first use CSS to animate gradient colors, the other animates modules with a radial background. The author has provided detailed instructions for using the two approaches, making it easy for even novices to grasp.
17. Design Slide-In Call to Actions [Popups]
Slide-in call to action (CTA) popups are not intrusive compared to full-screen popups, interstitials, and the likes. This makes a sliding CTA effective for attracting customer attention without disrupting their experience. This well-written tutorial contains information for adding slide-in CTAs to page corners on your site. If you can master the steps, the possibilities for promoting products on your site are endless. Think discount codes, one-time offers, rebates – everything!
18. Design Slide-down Push Menu [Popups]
You might want to consider a slide-down push menu for many reasons. The first and most important is that regular sliding menus may conceal certain sections of your site. Sliding push menus are better since the page moves down before the slider appears, so the content remains in view.
19. Design inline scroll reveals [Popups]
Adding inline scroll reveals to your site is an effective method for making tedious, static element come live. In particular, the inline scroll show helps attract readers to specific areas on your website. In this tutorial, You’ll get to learn exciting things like how to integrate hover effects with scroll reveals to make elements highlight in the page. The JSON file is also available for download for free.
20. Build Slide-In Menu with Divi Theme Builder [Popups]
When designing websites, the usual method is to add a horizontal menu to the site’s upper area. However, this can increase how much space the site header uses. In this tutorial, you’ll learn how to add a slide-in menu to your site instead of the typical horizontal menu bar. Unlike the latter, a slide-in menu bar appears when users click a specific icon. A slide-in menu bar on your site increases user interaction and gives it a clean look.
Conclusion
The tutorials we’ve covered in this list will give you inspirations to design creative popup or overlay on your Divi site. If we have missed anything then feel free to add other tutorials you have found useful in the comments below.
NEXT: 30 Divi Theme Builder Tutorials to Design Each Section of the Web page Creatively >