EverWeb 1.9’s new Popup Window feature is an incredibly flexible and versatile addition to the product.
What Is The Popup Window Feature?
EverWeb’s Popup Window feature is a hyperlinking option in the Hyperlinks tab. When a visitor clicks on a hyperlinked object such as an image or text, an independent window ‘pops up’ on top of original page (see screenshot below). The visitor can only interact with the Popup Window as the original page underneath is greyed out. When the visitor closes the Popup Window, they are returned to the original page. Popup Windows can hyperlink to other pages in your website, to an external page or to a file.
Why Use Popup Windows?
Popup Windows are great for focusing attention on the content you want your visitors to see or interact with, such as using a contact form. They are also ideal where you may want to include extra information on your web page without it being a distraction or in the way e.g. in the above screenshot, when the visitor clicks on the picture of the pills, a Popup Window displays information about the drug Penicillin. If the visitor clicked on the picture of the doctor, a popup with the doctor’s bio would be displayed, and so on.
EverWeb’s Contact Form, Image Slider, Google Maps and Video widgets can all be used to great effect within a Popup Window but the way in which you can apply Popup Windows is almost endless and imaginative use of them can take your website to a new level of design flexibility and creativity.
Creating Your Own Popup Window
- Create a new web page and name it appropriately e.g. .’Medicine Page Popup1′.
- On the Page Settings Tab of the Inspector, set the ‘Top Margin’, ‘Header Height’ and ‘Footer Height’ all to zero.
- Next set the height and width dimensions of the popup using ‘Content Height’ and ‘Content Width’ settings e.g. 400 by 300.
- Add the content you want in the popup page. Use the Arrange-> Align Objects menu to centre and middle the content within the popup
- When finished, go to the page where the Popup Window Hyperlink is to be triggered from. Select the object you want to hyperlinks e.g. an image.
- Go to the Hyperlinks tab in the Inspector and tick ‘Enable as Hyperlink’ to activate the hyperlinking options.
- The first option ’Linked To’ is where the Hyperlink will be directed to, either ‘One of My Pages’, ‘An External Page’ or ‘A File’. In this example select ‘One of My Pages’.
- Set the ‘Behaviour’ drop down to ‘Open in Popup Window’. The ‘Width’ and ‘Height’ should be set to a size just a little bigger than the ‘Content Height’ and ‘Content Width’ settings used earlier, e.g. 425 x 325 provides the 400 x 300 popup window with enough margin on all sides.
- Select the pop up page you want to use in the ‘Page’ drop down, or enter the URL required if you selected ‘An External Page’. If you selected ‘A File’ use the ‘Choose…’ button to locate and use the file of your choice.
- Your Popup Window has been set up. Test your Popup using Preview before publishing it as you may need to adjust the size of the popup window or the placement of the contents within it.
Popup Window Hints and Tips
- When you create Popup Windows check to see if it contains any hyperlinks within it. If it does, the result is that your visitor could remain in the Popup Window following other links within it. It’s advisable not to include other hyperlinks within a Popup Window.
- Avoid creating Popup Windows within Popup Windows. It’s possible to do this but again, it’s one to avoid!
Be careful when linking to a file. If you try to open a file that has no associated program the Popup Window may not function as desired. Always use Preview to test your popup before publishing your website.
- If your pages are going to be using a large number of popups, consider organising your popups with in directories in the Web Page List to more easily manage them.
What are you using Popup Windows for? We would love to hear how you are using this feature to enhance your website! Let us know in the comments section below!