Simple Overlay Solution is a third-party plugin for Divi that makes it simple to create full-screen overlays, popups, and mega menus with the Divi Builder. Upload more than one overlays to any web page. Choose from a click on or an automated timed prolong cause, a mild or darkish loader, and a mild or darkish background. Taste the shut button, or create your personal background and buttons with the Divi Builder. Every overlay has a 30-day cookie.
Easy Overlay Answer
Add and turn on the plugin as customary. Then, you’ll want to turn on the license. Within the dashboard menu, pass to Settings > Divi SOS Activation and input your API key and e mail.
Import SOS Samples
The SOS plugin comes with a suite of demos as a JSON record that you’ll be able to import into the SOS library. First, unzip the obtain record to get admission to the JSON record. Those are nice to get you began.
Within the dashboard menu, pass to Divi > SOS. Make a choice Import & Export.
Import the JSON record like several format.
You presently have 5 demos within the SOS library. You’ll be able to see the demos on the developer’s website online.
Developing SOS Layouts
SOS Layouts also are created within the SOS library. Move the library and click on Upload New.
Identify the format one thing that is smart to you. Select Structure for the Structure Kind.
Make a choice SOS Layouts for the class.
I selected a premade format after which decided on the Touch web page from the Hotel format pack. To the correct (or on the backside should you’re viewing with visible mode) is the format settings. This provides you with the HREF code for the format so you’ll be able to cause it on any web page (anyplace that permits for a URL). That is the hyperlink you’ll use for buttons, textual content, and so on., to cause the overlay.
You’ll be able to even have it to turn routinely (this opens a atmosphere for time and to permit a cookie so it is aware of the customer has noticed the overlay or popup). Set the transition to vanish, slide, or none. Select a mild, darkish, or no background. Make a choice a mild or darkish loader colour. Make a choice whether or not or to not display the shut button. You’ll be able to taste the button and its background.
The loader may also be mild or darkish. Right here’s the darkish loader over a mild background.
Instance SOS Overlays
I’m developing an overlay that may display reserving knowledge when the customer clicks at the E book Your Getaway button. Upload the hyperlink in your button URL with a view to cause the overlay.
I set the phase’s background to clear, selected a mild background within the SOS settings, and custom designed the format to make use of best one of the vital sections. Clicking at the E book Your Getaway button opens the phase to ebook the keep. The background comprises the white overlay. I’ve additionally added the shut button and styled it to check the format. The format is positioned on the best of the display screen and takes the overall width. This may also be custom designed with padding.
I’ve added somewhat little bit of padding to the highest of the phase. I’ve additionally disabled the background so I will keep watch over it with the Divi Builder.
For this one, I’m the usage of the touch shape from the similar format. This time, I’ve added a field shadow to the ground row so it’ll stand proud of the overlay’s background.
I added the hyperlink to a button at the identical web page as the primary overlay (you’ll be able to upload as many as you wish to have). This one opens a touch shape after they click on at the Message Us button.
The end result seems attention-grabbing. I didn’t upload a detailed button to this one. The customer can click on anyplace off of the shape to near the overlay. I’ve added a background to the row and set the opacity so just a bit of the background presentations thru.
This one makes use of a bit from the Funding Corporate format. I need to create a popup with a decision to motion. I’ve set it to turn routinely with a 1000 millisecond prolong. When appearing routinely, you don’t have so as to add the hyperlink anyplace. It routinely presentations on each and every web page. I’ve additionally set the cookie to simply display the popup as soon as each and every 30 days.
The popup presentations 1 2nd after the web page rather a lot. This creates a CTA as a popup, and it’ll best display as soon as each and every 30 days. You’ll be able to’t inform on this symbol, however I additionally gave it a parallax background, simply because. This lets you be as ingenious with popups as with every web page design.
I’m shifting the shut choice from the button within the best proper nook to a button created with the Divi Builder. I cloned the button from the format, modified the textual content, and added the shut hyperlink to the URL.
The result’s a blank design that works nice as a CTA.
I went again to the design and added a brand new background and a button that opens some other web page.
For this one, I created a publication popup in response to the Esports format. I’ve set the popup to open routinely after 30 seconds. The background is ready to darkish and the loader is ready to mild. I will be able to additionally come with a detailed button the usage of colours from the format.
The subscribe popup seems nice and suits completely throughout the web site’s design as it’s in truth from the web site’s design. I love that it could possibly use common Divi layouts to create the popups.
Mega Menus
You’ll be able to additionally create mega menus with SOS. Create a customized hyperlink as a menu merchandise after which upload the overlay’s hyperlink to the menu merchandise’s URL.
I’ve added the overlay to the About hyperlink in my slide-in menu. You’ll be able to have a distinct overlay for each and every hyperlink within the menu if you wish to have, and they may be able to be anything else you’ll be able to construct with Divi.
Easy Overlay Answer Value
There are two licenses for SOS. Each have a one-time rate and come with lifetime updates.
- 1 website online and 1 dev web site – $25
- Limitless web sites – $45
You’ll be able to acquire SOS from the developer’s website online.
Finishing Ideas
Easy Overlay Answer is straightforward to make use of. The controls easy and intuitive. Development the overlays is sort of the similar as development a web page with Divi. If you’ll be able to use the Divi Builder you’ll be able to use SOS. The Divi pages load speedy for the reason that overlays don’t seem to be preloaded. Overlays and popups additionally load speedy.
I love that it has a cookie. This provides you with some keep watch over over your popups so the similar customer received’t have to peer the be offering each and every time they consult with the website online. I’m positive it wouldn’t be simple to do, however I’d like to peer a couple of cookie choices. As an example, perhaps set it to turn as soon as every week, as soon as in line with day, two times monthly, and so on. A couple of loader choices could be great, too. Possibly other alternatives and colour customizations. I’d additionally like the facility to exclude a web page from appearing the automated overlays.
I love that a normal Divi button can be utilized for the shut button. This opens up a large number of design chances and also you’re no longer restricted to the usage of the integrated button. In the event you do need to use the button, it does have a large number of colour choices.
SOS is a straightforward plugin to suggest. In the event you’re concerned with a very easy option to create overlays, popups, and mega menus with the Divi Builder, Easy Overlay Answer (SOS) may well be the plugin you want.
We need to listen from you. Have you ever attempted the Easy Overlay Answer plugin to create overlays and popups? Tell us what you consider it within the feedback.
Featured Symbol by means of Bakhtiar Zein / shutterstock.com
The publish Divi Plugin Highlight: Simple Overlay Solution gave the impression first on Elegant Themes Blog.
WordPress Web Design