By One of the major highlights of the new EverWeb 4.5 release is the new Popup Windows feature! If you’ve already with EverWeb, you may be aware that there’s a feature already in existence in the Hyperlinks Inspector. The addition of the new Popup Windows feature makes the existing feature redundant and it’s kept mainly for ‘legacy’ purposes. Our recommendation is to always use the new Popup Windows feature. It’s more feature rich and uses EverWeb’s Container tech giving you incredible design flexibility..
What a Popup Windows Does and Why Use Them?
A Popup Window does just that, it pops up on top of the page’s content and you have to interact with it before you can continue to interact with the site you’re visiting. Typically you’ll see a Popup Window when you enter, or exit, a site. There can be other times as well when you can add a Popup Window to your site for specific uses. For example, clicking on a button on a page may trigger a Popup Window. In many respects, Popup Windows are useful as they force the visitor to interact with it before they can do anything else.This means that Popup Windows are ideal to couple with another new EverWeb 4.5 feature – On Click Actions. This feature triggers one or more actions, when your visitor clicks on a button in the Popup Window, so you can direct what happens.
In short, a Popup Window provides focus and a Call To Action.
Popup Windows Customization Options
One of the best things about EverWeb’s Popup Windows is that they are highly customizable. As you just read, you can combine them with On Click Actions. But there’s more.. For a start, it doesn’t matter which type of page you designing, either fixed with or responsive (OK, we encourgage you to go responsive if you can!) You can even use them in Master Pages as well, but be careful here as you may have the Popup Window appearing everywhere which doesn’t create a great User Experience! And speaking of user experience, you can also get to a situation of having too many Popup Windows on one page, which again can be more frustrating to your visitor than useful, so plan in advance where you think Popup Windows will have most impact in your site.
A Popup Window is essentially a specialised type of Container, so you can customize it as if you were customizing a Container. You can even nest Containers within the Popup Window. Popup WIndow’s Container tech means that you cab take advantage of the wealth of options available in the Shape Options tab. And don’t forget that if you want you can add different fills (e.g. map and video fills), and even widgets.
Designing Your First Popup Window
Creating a Popup Window on your page is easy, just click on the Popup Window button in the Toolbar. Choose ‘New Popup Window’. If you’ve already created Popup Windows for the page you’re on, you’ll see them listed here. If you want to edit an exiting Popup Window, just click its name in the list to do so.
If you chose the ‘New Popup Window’ option, you’ll see a brand new. empty. Popup window on the page!
Popup Window Feature Guide
Before you start to customize your Popup Windows it’s useful to get to know its default features. For a start, the Popup Window has a Container Column layout.If this is not what you want, change the Layout to either Row or Free Flow in the Popup Window Settings. You can either use the Widget Settings button in the Inspector, or the Settings Log in the Popup Window’s Object Label Toolbar to access these settings.
You can also change the default placement of the Popup Window on screen using one of the 12 available placement options. Popup Windows positions to choose from.In the Widget Settings, go to the ‘Popup Window Settings’. Click on the Position field’s dropdown menu to choose the Popup Window position you want.
To set the color and opacity of the page background that the Popup Window overlays, use the Background Browser Settings section in the Widget Settings. In this section you will also be able to control whether the Popup Window closes if the visitor clicks on the background. You can also enable or disable background scrolling as well. The default is set to disable background scrolling.
Note that when you’re editing the Popup Window, if you click on the background, editing ends and you’re returned to the Editor Window. If this happens, click on the Popup Windows button in the Toolbar, and choose your Popup Window to edit it again.
Most objects in the Editor Window in EverWeb 4.5 come with a context sensitive Object Label Toolbar. When using a Popup Window, the Object Label Toolbar usually appears at the top of bottom pf the window. When using a full height Popup Window, however, the Object Label Toolbar is not available because of the type of Popup Window selected. In this case, you’ll need to go to the Inspector Window and click on. the Widget Settings button to access the Widget Settings features..
When you first add the Popup Window to the page, in its centeryou’ll see the Add button. This allows you to quickly start adding your first object in to the Popup Window.
All About The Close Window Button
The Close Popup Window button appears in the top right hand corner of the Popup Window. You can move this to where you want it located within the Popup Window. The button is there to close the Popup Window when it’s pressed. You can use EverWeb’s Pin Settings feature in the Metrics Inspector if you want to change the the Close Button’s relationship with the edge of the Popup Window. Guide Lines relative to the edges of the Popup Window change will show you relative horizontal and vertical pinning.
If you prefer a different image for the Close button, or a different color that’s also possible as the image used is an SVG file. To change the Close button’s color use the Fill section of the Shape Options tab. If you want to change the image used for the button, scroll down to the Background Mask section of the Shape Options tab. Click on the image that’s displayed in this section. You will then have access to a library of SVG images. Choose the image you want, and the button will be updated with the new image.
When To Trigger The Popup Window
As well as editing the Popup Window as you want, you will also want to decide when it should appear, or be triggered. In the Widget Settings, go to the Popup Windows Settings section. Here you will find the Popup Trigger settings: Immediately, Delay, Scroll, On Page Exit Intent or Manual. These triggers are obvious as to when they will be activated, The ‘On Page Exit Intent’ is not so obvious, but means that the visitor is ‘captured’ when they try attempt to leave the page. The other option of note is ‘Manual’ that’s used together with On Click Actions.
Popup Window Frequency
How often you want the Popup Window to appear is also important to consider, and EverWeb covers this with using Cookies to monitor when the Popup Window was last displayed so it can time when it should next be displayed. Simply enter a name for the Cookie and set the number of days between showing the Popup Window in the Cookie Expiration (days) field. In this way, you won’t annoy your visitors with Popup Windows constantly appearing every time the interact with the page.
There’s a lot to explore with the new Popup Window feature. We’ve covered the basics, but there is more to explore which we will do in future posts!
Loading ...
Comments