What you’ll learn:
- Benefits of full-screen pop-ups
- Best practices for effective popups
- Step-by-step instructions for creating a full-screen pop-up in Digioh
Full-screen pop-ups are an effective way to capture attention and drive important actions, such as newsletter sign-ups or special promotions. Like banners, they help highlight key messages, showcase new products, and make major announcements that might otherwise go unnoticed.
Additionally, full-screen pop-ups can serve as a soft age-gating measure for restricted products when age verification is required.
It’s crucial to use them strategically. Proper timing, relevance, and an easy way to close the pop-up are crucial to maintaining a positive user experience. When implemented correctly, full-screen pop-ups can enhance engagement and help you achieve your business goals.
Follow these steps to create a full-screen pop-up:
From your main dashboard, click “Create New Box” or navigate to the Boxes dropdown in the header and select “Create New Box”.
Choose a theme. You can use the quick start themes for full-screen pop-ups; these themes are ready to go!
Or once you can select any of our themes and modify them to be full-screen, by going to Layout and toggle the Full-Screen setting.
Under Box Background, you can a color or toggle on the image option to upload a background image.
Adjust the Image Repeat / Size setting to “Cover” for a full background effect. A good starting point for Image Position is “Center/Center”.
Click Preview to see how your pop-up will appear on your website. Note that the editor does not fully reflect the final display, so previewing is essential. (We’re working on improving this—thank you for your patience!)
Once you’ve seen this layout in preview mode, you’ll get an idea of the adjustments you may want to make in Window Settings, Box Border, Box Background, or other places. Digioh gives you the ability to really fine-tune how your popup behaves on site.
Next, let’s design the mobile version. For better readability on mobile, consider changing the full-screen background type to “Split Top” or another format that suits your layout.
Once you’re satisfied with both the desktop and mobile versions, click Save and Publish.
Full-screen pop-ups are high-converting and can be a powerful way to grab the attention of your website visitors. Be sure to use them sparingly, however, as they can become overwhelming to your customers if they see them too often.
Alternative method:
Another way to create a full-screen “welcome wall” is by using the Screen Overlay Background setting. This method is ideal if you only need a solid color, gradient, or full-image background.
To create a full-screen welcome wall in Digioh using the old method, follow these steps:
- Go to the Box Settings
- Toggle on Screen Overlay Background and choose a background color, gradient, or image.
- Preview your pop-up to see how it looks.
For additional tips and best practices, check out the video at the top of this article or reach out via the Contact Us form on the right.