The Pop-Up Pro widget for Adobe Muse lets you place a popup window onto your site page, which overlays and freezes the page, capturing your visitors’ attention.
The widget is easy to set up and fully configurable with options to display the popup after a time delay once the page has loaded, or triggered from a page item, such as a button or text. There are 16 animated appearance effects to choose from and the option to prevent the popup being displayed to visitors who have already closed it.
*Note: IE 8 & 9 do not support animation effects
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
Start by dragging the Popup Pro - Blank Template preset onto the design canvas from the Creative Muse - Popup Pro folder in the Library panel. The background is just a placeholder; you can remove it or replace it with your own image or a solid colour using the Fill Panel.
By default, the widget container has a graphic style named popup-pro-blank assigned to it.
We'll rename the style, prize-register for the example. This can be done by either double-clicking the entry, or right clicking and choosing Rename. You could also assign a new graphic style of your choice, especially if you're going to have more than one popup on the page/site.
Important: You must make sure that the new name matches the setting in the widget's option panel (more on this later).
Next we'll add the artwork for the design. This can be done inside or outside the widget template, although it's far easier to create it elsewhere on the page and drag it straight onto the widget, as we've shown here. The elements can be multi-selected or grouped to make them easier to drag - notice the blue outline on the widget frame, this shows that the elements are being placed inside.
The assets for the demo are available in the widget package if you want to follow along.
We've created a close button as part of the popup content. This needs to have its own style assigned for it to work with the widget.
With the button selected, click the New Style icon at the base of the Graphic Styles panel. Name the new style. This can be anything but it's good practice to associcate it with the rest of the content. We've named it prize-register-close.
With our design in place, we can start setting up the popup options. Click the blue disclosure arrow next to the widget. The widget options panel appears.
The first setting is the Popup Container Name. As we mentioned before, this must match the graphic style you applied to the widget container, prize-register in the example content.
The next option is the animation effect for when the popup appears on the page. There are 16 effects to choose from. We've chosen Spin, which zooms and rotates the popup as it appears. It's a fitting effect for this gaudy ad!
Next we can choose the position where the popup appears on the page. There are nine options. We're leaving it at the default of Centre for the example.
Tip: You can fine-tune the position of the of the popup by expanding the width or height of the widget's outer countainer.
Next we have options to control the page overlay. We can opt to turn it off completely, set the colour and alter the opacity. We've changed the colour to a darker orange to complement the bright content background. We'll leave the Opacity at the default of 0.8.
Next we have options to control how the popup is triggered. The first setting is Auto Open. This is the default and will open the popup after a set period of time after the page has loaded.
Popup Delay determines the number of seconds before the popup is shown. This can be set between 0 seconds (appear immediately) to 9999 seconds.
If auto open is disabled, we have the option to set a trigger to manually open the popup. This can be a graphic, paragraph or character style. They must match exactly.
Note: style names must be unique: e.g. there cannot be a graphic style with the same name as a paragraph style.
Choose the popup closure options
We have four options to determine how the popup can be closed. By default, the Overlay Close Button and Esc Key options are enabled. We can close it by clicking outside the popup - this can be done whether the overlay is visible or not.
The final option is Custom Close Button, which we'll use here. We've disabled the other options, so the popup can only be closed with its button. Enter the close button style we set up earlier, prize-register-close in the example.
The final options are for enabling visit tracking. This gives us the ability to stop the popup displaying to people returning to the page. We can set the number of days before the popup is displayed again, 30 in this example.
The last thing we need to do is test the popup to make sure it appears correctly and we're happy with the settings. To do this, we just need to preview the page, either within Muse or in the browser.
Remember: if you have enabled tracking, you'll need to clear the cookie set by the widget so you can test the widget again if you decide to change the settings.
Click the button to see the popup in action