ZapNap separates the full-page overlay from the information card shown to visitors. Start with the message, then style the surrounding page so the result remains clear on both large and small screens.
Choose the overlay background
The overlay can use a color, gradient, or background image. A linked image must remain publicly available after publishing. Check that text and controls keep enough contrast over every part of the image.
Style the information card
Use the layout controls to adjust fill, margin, and padding. The card can have its own background, border color, border width, and rounded corners. Keep the card narrow enough for comfortable reading while leaving useful space around it on phones.
Write the visitor message
The information area can include an icon, headline, and supporting text. Prefer a simple headline such as “Maintenance” or “We’ll be back shortly,” followed by a specific explanation. Avoid vague messages when only one service or page is unavailable.
Use animation carefully
An optional overlay animation can add emphasis, but the message should remain readable without motion. Keep animation subtle and avoid using it as the only way to communicate that the page is unavailable.
Configure the editor information popup
ZapNap can show an information popup in the editor. Its headline, text, font, background, and border can be styled separately from the public maintenance card, making the current state easier to recognize while editing.
Preview before publishing
Enable Show Preview to inspect the design, then check the published page at narrow and wide viewport sizes. For the complete activation workflow, see Getting started with ZapNap.