What is a pop-up? Pop-up overlays are a very common tool to create some kind of interaction with your audience. You can use them to display messages, ask to subscribe to a newsletter, etc. In layman’s terms, it is a box that pops up, with some degree of opacity, taking center stage and directing your attention to whatever message is contained within the box. This works particularly well with a call-to-action, due to the increased visibility and prominence of the desired action. Pop-ups can also be used as captions for images, explaining in further detail by using text you may not want to place on the actual page in an effort to preserve a clean look.
Pop-ups typically will cover part or all of the screen, and the user will (again, typically) have to close them to make the pop-up go away. Examples: ● Interaction
The example above comes from our own homepage, Readz.com. It is a full page overlay, in which we added some forms, connected with Mailchimp. The pop-up is hidden until a user performs a certain action such as in this case clicking the “talk to us”-button. ● Lightbox
A lightbox is when you highlight a specific part of the screen. This is most often used for videos and images. An example of where it’s been used is on one of our client’s publications. At the bottom of the publication, there is an image gallery. Clicking on one of the image thumbnails opens a lightbox, where you can then see the image in higher resolution and a caption of the photographer.
A tooltip is a message or tip that appears above or to the side of an object when the cursor is either hovering over it or actually clicking on it. Tooltips are positioned relative to their parent element, as opposed to lightboxes, which pop up as independent entities, demanding all of your attention. Tooltips come in handy when an object, word or concept might benefit from deeper explanation. Here is an example of a tooltip on a page built on the Readz platform:
Unpublished project, in the Readz editor
A popup action is a popup that darkens the background and has a white X button which lets viewers close the popup when they are done viewing it. A lightbox popup also prevents scrolling up and down on the main page while the lightbox popup is open. A best practice for using a lightbox popup is when you want to present additional content to your viewers, and take the focus off of the main content on the page. The darkened background helps bring focus to the content presented in the lightbox popup. The lightbox popup is created through the Readz actions. Some element, designed to be a call-to-action can have an OPEN LIGHTBOX/POPUP action on it. On that element, create a OPEN LIGHTBOX/POPUP action with an ON CLICK as the trigger. This means when the element is clicked on, a lightbox popup will open. When the lightbox popup is open, you’ll immediately see a darkened background, and a single box element with a close button in the upper-right side of the box. The darkened background color and transparency cannot be changed. The X button cannot be changed. The single box element you see cannot be deleted, but you can move it around the page and change its size. The single box element must contain the contents of the lightbox popup. This means add your image elements, text elements, etc. into the area of that box element with the close button.
● Through a custom built popup using Readz animations.
If the look and feel of the lightbox popup and tooltip action aren’t quite what you’re looking for, don’t fret! You can create some really awesome popups using a variety of Readz animations. Here’s a great example we use on our own website (yes, readz.com is in fact built using Readz).
Here is how you can quickly make a pop-up in Readz ● Through a popup action
● Through a tooltip action A tooltip is a popup that’s similar to a lightbox popup, but it doesn’t darken the background and it scrolls with the page. A best practice for using a tooltip with when you want to provide supplementary content but not take attention away from the main content on the page. The tooltip is created through the Readz actions. We recommend an element designed to be a call-to-action is created on the page. On that element, create a OPEN TOOLTIP action with an ON CLICK as the trigger. This means when the element is clicked on, a tooltip will open. When the tooltip is open, you’ll immediately see a box element with a close button in it appear on the page. This box element cannot be deleted and the close button cannot be changed. You can change where on the page is sits and you can change the size of the box. Place elements inside of the box element that you want to appear when the tooltip appears.
Style the background of the box element to your liking. In the example we shared above, there’s a background image with scaling set to “fill” on the box element. Second, add any element into the box element. This is the content of your popup. The information you want to present to your viewers. In our example, we’ve added a form. More about creating forms. 2. Create the close button Next, we need to give the viewer a way to close this popup so they can continue reading the page. We recommend you have a clear button or call-to-action to close this popup. In our example, we use an image of an X button. This was made in Photoshop, but a Google image search for “close button” yields good results. If possible, download or save the image as a PNG file type. PNG images allow for transparency on the image. Create an image element, upload your close button image and make sure that image element is inside of our popup box. Place it where you desire. Now let’s give it the close animation! We’ll use the animations UI for this one.
- Select the popup box, then open the animation tab.
- Choose the Fade Out option
- When you’re asked “What triggers the Fade Out?”, select “Click”
- The next step will let us assign another element, that when clicked, will fade out our popup box. Hit “Choose Trigger Element”, then select the close button image. Now our close button image has the animation to fade out our popup box.
If you’re interested in more options for this animation, select the close button element, open the actions/animations tab, and click on Advanced. You’ll see your On Click animation there. Clicking on the Animate button will let you change some settings about the animations, such as changing the animation effect, the duration, etc.
3. Create the animation to fade in the popup This covers how to hide the popup box, and create the animation to show the popup box. The popup is meant to not be shown until the view clicks on a call-to-action. Therefore, we need to hide this popup box. To hide the popup box, we’ll use the page index. The page index can be accessed from the page menu. The page index contains a list of all our elements on our page. It is where we can name elements (for organizational purposes) and set elements to be hidden, shown, or collapsed initially. All elements are set to “shown” by default, but we’ll need to hide our popup box element. While you have this element list open, why don’t you give the box element that is our popup box a proper name. To quickly see which element it is in the list, select the popup box element on the page. With the element list open, selecting the element on the page will also highlight it in the element list. Now that you see which element it is in the element list, mouse-over it, click on the pencil icon to rename it. Click the check to set the name. Now that it’s named, let’s hide it. You’ll need there’s an eye icon. Click it so that the icon changes from an open eye icon to a close eye icon. The popup box should also have disappeared on the page. See the screenshot below.
Somewhere on your page, clear call-to-action element that when clicked, makes the popup appear on screen. For example, this call-to-action can be a textbox element with “CLICK HERE” as the text. On the element acting as your call-to-action, we’re going to create an animation, that when the element is clicked on, will fade in our popup box.
- Select the element acting as your call-to-action.
- Click on the element’s action/animations tab.
- Add an action under the On Click category.
- Action type should be Animation
- Set the animation to be a fade in
- From the “Or Select From Element List:” drop-down, search or find your popup box element. The name you gave it in the element list is the how it’ll appear in this list.
- Save and preview your page to see how your animation looks and feels!
We’re going to create the popup, create the close button, and create the action that shows the popup.
1. Creating the popup First create your box element and size to fill as much of the screen as you need. In our example, we’ve set the box element to be 100% of the width, and 100% of the height, and starting on 0 for the X-axis, and 0 for the Y-axis. Another useful option is to set this box to be “fixed position”. Fixed position means the element is always on screen. This is great because you can always guarantee that this popup element is covering your viewer’s screen, no matter how far down they may have scrolled the page. You can set all of these options in the Layout menu for that box element. Here’s an example of all those settings in the Layout menu for our box element.
How to create a pop-up overlay
DELIVER BETTER EXPERIENCES
Back to Menu
DELIVER BETTER CONTENT EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES