Design Guide
Pretty Simple Popup comes with clean, modern templates to build a popup. Our interface was streamlined with uncomplicated settings to make it fast and frustration free. The standard plugin provides free templates to create a basic text popup or image popup. The Premium plugin provides designer templates to create something more sophisticated.
Compare the Standard and Premium Plugin
PLEASE NOTE: When no content is entered into the template you will see an empty popup on preview. For example, if the Free Image Popup template is missing an image it looks like a floating close button. Every field is not required but it does require something.
Background Color
From the plugin settings page you'll find background settings under Premium template design options. To edit the background color select or enter a HEX#. The transparency can be adjusted using % opacity drop down menu.
Create a Fullscreen Background
A fullscreen opaque background can be created with the Premium plugin. Here's how to o create a fullscreen look.
Fullscreen Text Popup (Premium)
Using the Designer Text Template, set the background color to 100% opacity to block out the entire web page. For a seamless look, make the modal box color the same as the background.
Fullscreen Image Popup (Premium)
Using the Designer Image Template, set the background color to 100% opacity to block out the entire web page. For a seamless look, use an image with the same color background or a transparent .PNG to layer a graphic on top of the background color.
Background image is planned in a future update to the Premium plugin.
Image: Fullscreen background with transparent PNG image using the Designer Text Popup template on mobile.
Text and Button Design Options
To keep things simple, SMARTtext automatically sets font, size and color. It detects fonts used on your site. Text changes to black or white to best contrast against the background it sits on. The text size is responsive to display best across various screen sizes.
Button colors can be customized. Button styles are planned in a future update of the Premium plugin.
Designing a Text Popup
The text popup templates help you design an HTML popup that performs best in various mobile screens. The built-in CTA button is responsive rather than part of a static image. If you have a quick message to get out, it’s the simplest template that does not require images. Just enter a headline and body text, name the button and enter a URL. Done!
The text popup displays in a modal window against an opaque color background to help it stand out. The modal window color (text box) can be customized. The background behind the box cannot be edited in the free template. The background can be edited or turned into a fullscreen with the Premium Designer template.
Add An Image
An image is optional. The Designer Text template holds a smaller image (meant for a logo or icon) or you can use the edge-to-edge option for large images. The image can be linked or unlinked. Add a logo or other smaller image to support the message. Or use the checkbox option for an edge-to-edge image (see screenshot below).
Designer Text Popup Image Sizes
Default centered image (logo or icon) best displays a 1:1 image that compliments the written messaging.
600 x 600 pixels recommended
350 x 200 or 300 x 300 pixels minimum
Edge-to-edge image option best displays a 2:1 image that will stretch to the edge of the modal box (or max native dimension).
1200 x 600 pixels recommended and will display to the edge on the majority of devices
2560 x 1280 to optimize for extra large screens (gaming)
800 x 400 pixels minimum
If your image appears too large for your taste on the largest screen tested, adjust the width down. It will display up to the native width. For example, 2560 wide looks huge on standard desktops but normal on extra large screens. That's why we recommend 1200 as a standard. You can try different dimensions using the 2:1 aspect ratio without breaking edge-to-edge.
Tip: Keep the edge-to-edge look with narrow images, such as 1200 x 200 pixels. The image width, if wide enough, will not be affected by height under 600 or 700 pixels. If the height is too tall, 1200 x 900 for example, the width shrinks in order for the height to be responsive, leaving gaps at the edges.
Image: Edge-to-edge image 1200x600 pixels on 100% opaque blue background, white modal box, using the Designer Text Popup template on desktop.
Designing an Image Popup
If you have a banner read to go this is the fastest, easiest way to get it into a popup. The free template is straight-forward: upload the image and paste in a link (optional). The image will show at the maximum width or height for responsive display. This means that smaller screens will show the image at the largest possible size and very large screens will show the image up to the actual size.
The Premium Designer Image Template provides options to add a CTA button and/or a supporting text link.
Standard/Designer Image Popup Sizes
Square(ish) Ad
600 x 600 or 1200 x 1200 pixels
600 x 500 or 1200 x 1000 pixels
Vertical Banner
600 x 1200 or 500 x 900
Horizontal Banner
800 x 450 pixels or 1200 x 850 pixels
Have you seen our design gallery? Get inspired
General Image Guidelines
The popup will not stretch, crop or skew the image shape or size. Use high quality images that are cropped to the dimensions you want it to display at, and optimized in size for web display.
Dimensions
The popup will take any image dimension. The responsive display will automatically scale it up to the native maximum size according to various screen sizes, from a large desktop to mobile retina display. See recommended dimensions for each template in the chart.
Tip: Small images will appear small on large screens. Double the pixels for responsiveness and retina display, for example 600 x 600 = 1200 x 1200
File Type & Size
Keep your file size low for fast loading screens. For example, a 1MB image is way too unnecessarily big. Ideally the image is optimized to less than 100KB or max 300kb.
Use a .PNG for designs that require a transparent background image, logo or image containing words. Keep in mind that PNG file size tends to run higher.
Use a .JPG / .JPEG to optimize to the smallest file size. Recommend medium to best quality 70-95%.
Tip: Lower images to web resolution 72dpi (versus 300dpi for print) to reduce size.Image: Image size chart
