Full-page overlay

  • 13 November 2019
  • 1 reply
  • 108 views
D

Hi!

Something I’ve been wondering about is the ability to create full-page overlays, similar to what Neil Patel & many others use - for example here: https://neilpatel.com/consulting/.

(See attached image)

Capture222

The ideal is that it would work on already-existing content on our website that wouldn’t have been made in Unbounce itself. So, popups & stickybars sort of idea.

I’m sure I could probably create this relatively easily within Unbounce landing pages themselves, but the fact they’re already existing content on our site might make it a little more interesting!

But would taking up the whole page like the attached image.

I’m curious to test whether this would have an impact on the stuff we provide.

Any ideas?

1 reply

Kyle.C
Userlevel 5

Hey @danmocks this has come up before and a nifty trick has been made by @Luis_Francisco
You can see it in action at this URL https://success.unbounce.com/o-saas-1/

In order for this to work…

1️⃣ Add the style to the parent page. It can be your own page or an Unbounce page.

<style>
.ub-emb-overlay .ub-emb-iframe-wrapper .ub-emb-iframe {
box-shadow: none !important; /*this will remove the pop-up shadow so it blends with the background*/
}
.ub-emb-overlay .ub-emb-backdrop {
background: #0098db !important; /*use the same color code here that you used on the pop-up 
background */
}
.ub-emb-iframe-wrapper .ub-emb-close {
background-color: transparent !important;
color: white !important; /*change this to the desired color for the close button*/
font-size: 40px !important; /*change this to the desired size for the close button*/
right: -30px !important; /*this is for positioning the close button*/
top: -30px !important; /*this is for positioning the close button*/
} 
</style>

2️⃣ Use Unbounce Pop-Ups
Make it look however you want. The background styling will work on both desktop and mobile.

3️⃣ Place the popup script on the parent page, publish them. And done.

Let me know if you have any other questions 🙂 Happy to help if I can.

Reply


Terms & ConditionsCookie settings