How to create an engaging full-screen popup

Interested in enhancing your WordPress site’s user engagement with full-screen popups? It’s a satisfying challenge. The good news is you won’t need any coding skills!

Such popups are effective tools for captivating visitors and boosting ad engagement. They occupy the entire screen, guiding visitors toward a specific call to action. Imagine entering a dimly lit room and encountering a dazzling fireworks display lighting up the sky through a large window. It demands your complete attention, drawing you in as you enjoy the awe-inspiring moment and momentarily disconnecting you from the outside world.

The main obstacle to creating full-screen popups is the coding skill requirements. Crafting them manually from scratch involves working with HTML, CSS, JavaScript, and setting up show triggers, which can be daunting.

But here’s the solution! In this detailed guide, I will show you a more straightforward approach. I will demonstrate how you can use Advanced Ads to set up an impactful full-screen popup on your WordPress site in under 5 minutes without the need for any coding skills. Let’s get started!

What is a full-screen popup?

Think of a full-screen popup as an advertisement that theatrically takes up the entire screen space on your website. A visitor’s focus automatically shifts to the popup, blurring the rest of the website for that moment.

Here’s an example:

Full-screen popup ads are versatile. You can utilize them in various ways to:

• offer a warm welcome to new site visitors
• highlight specific ads or promos
• reveal discount coupons
• gather newsletter subscriptions or leads
• guide visitors toward top content

What to consider when using full-screen popups?

Full-screen popups can be a potent tool in your advertising arsenal, but they fall into the more aggressive category of promotional techniques. They demand full attention by momentarily engulfing the entire screen, disrupting the user’s browsing flow. This interruption guarantees that users will inevitably notice the displayed ad.

However, many users perceive this interruption as an unwarranted disturbance while engaging with your website. Limiting the impressions of such popups with frequency caps is critical to mitigate this possible annoyance. Doing so ensures the user experience (UX) remains as undisturbed as possible.

Additionally, publishers can reduce the disturbance if they target such ads well within the context of their website’s content—contextual advertising, to be precise. For instance, a full-screen popup on a gardening blog could alert readers to a discount from one of your affiliate partners.

Moreover, the power of popups extends beyond mere advertisements. You can bring similar attention using full-screen popups for contact forms, promo messages, and more. 

Implement full-screen popups with Advanced Ads

Before you start, ensure your site has both Advanced Ads Pro and the Popup and Layer Ads add-on installed and activated.

Creating the Popup ad

Let’s begin by creating the ad unit, which should appear as a full-screen popup. While this guide focuses on an image ad, feel free to use any other ad format that suits your needs. However, the method presented in this tutorial may not work with different ad codes or forms, and you may need to customize the CSS I will provide below.

To get started, set up a new ad and give it a descriptive title for easy reference later. In this case, I’ll opt for an image ad and choose a banner from our media library. Alternatively, you can select the Plain text and code ad format to incorporate different ad codes.

Pay attention to the design so that the image ad displays smoothly across the entire page without any visible transitions between the image and background. Ensure that the ad’s background color matches the color of the popup that will ultimately overlay the screen (background-color: white). 

If these two background colors align, it may result in a more-than-appealing look. To achieve this effect, scroll down to the custom code meta box and insert the following custom code:

<style>
#fullscreenpopup {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index:11000 !important;
}

#fullscreenpopup img {
  object-fit: contain;
  width:100%;
  height:100%
}

#fullscreenpopup .setup-close-button {
   transform-origin: top right;
   transform: scale(3.5);
}
</style>Code language: HTML, XML (xml)

This CSS code affects the element ID #fullscreenpopup. There is one final step left to apply these CSS style adjustments specifically to your full-screen popup ad. In the Layout/Output meta box, insert “fullscreenpopup” into the “Container ID” field. Advanced Ads will now apply the custom CSS code to the full-screen popup.

Once you’ve completed this step, save and publish your ad. Congratulations—your popup ad is now ready to go!

Setting up a full-screen popup placement

Next, navigate to Advanced Ads > Placements and create a new placement. Choose the PopUp and Layer Ads placement and assign the full-screen ad you just created to it. Leave the popup’s position setting at its default value.

You can fine-tune the placement settings once you’ve established the initial setup.

Triggers and effects

Decide on the trigger for the popup. Here are a few triggers that Advanced Ads provides.

• instantly
• after a few seconds
• when a user stops scrolling
• when the user scrolls halfway down the page
• when the user is about to leave the page

If you want to add an effect when the full-screen popup appears, choose between Fade in and Slide.

Close button and auto-close

Add a close button to enhance usability. Additionally, consider enabling the auto-close function, which makes the ad disappear after a set time, such as 3 seconds. This way, you ensure your users have seen the ad but don’t force them to click the close button to make it disappear.

Ad targeting and frequency capping

While tweaking the placement settings, it is advisable to add Display and Visitor conditions. This approach will help you fine-tune your popup’s target audience, leading to a less intrusive experience for your users. It will also improve your ad’s click-through and conversion rates.

Lastly, setting a frequency cap for these full-screen popups is prudent to prevent user annoyance and overexposure. You can handle this risk by adding the Max. Ad Impressions Visitor condition to the entire placement, ensuring visitors aren’t overwhelmed by your popups.

Conclusion on full-screen popups

Full-screen popup ads are powerhouses for online advertising. They offer a unique ad format that attracts significant attention and can deliver impressive performance. However, their commanding presence can be a double-edged sword. They can disrupt the user experience and demand their complete attention.

Hence, it’s crucial to deploy popups carefully and measuredly. When used judiciously, with good targeting and effective frequency capping, full-screen popups can become vital to your site’s monetization strategy.

Advanced Ads will help you on this mission. If you already have the All-Access license, you don’t require any additional plugins like OptinMonster or Popup Maker. The plugin provides all the tools to design and launch a full-screen popup on your website in just a few minutes. Take your time to test the power of such popups on your website and expand your monetization strategy!