EverWeb’s Hyperlink Popup Updated!

The recently released EverWeb version 3.3 has a lot of ‘under the hood’ improvements to make your website development, and final published result, faster and more responsive than ever. As part of the update some older code has been replaced with newer code resulting in some updated features such as the Image Gallery Widget Lightbox that we featured recently.

The Hyperlink Popup window is another feature to get a code update in EverWeb 3.3.

How To Get the Latest Version of EverWeb or Try It for Free!
If you’re already an EverWeb user with an active support and product update plan, you’ll automatically get a notification that there is a new update to install when you launch EverWeb. If you do not own a copy of EverWeb, you can try a full version (except for publishing) absolutely free from the EverWeb website.

All About Hyperlinks
We use Hyperlinks almost every time we interact with a page in a browser. A hyperlink is simply a link to somewhere else. This could be to another page in your own website, a page in another site, to a file for downloading or to an email.

The hyperlink itself can be either a piece of text, a shape, button or image. You can choose whether the hyperlink takes you to specific place on your current page, the top of another page, or to a specific place on another page. Furthermore, you can have the link open either in the current browser window, a new browser window or in a popup window.

The Hyperlink Popup Window
A Hyperlink Popup is a window that displays only the contents of the window itself within the browser. The rest of the browser window is greyed out so you have to dismiss the popup in order to see and interact with the contents of the browser behind the popup.

The Hyperlinks Popup window is a great tool to use for more ‘in-depth’ content that you don’t necessarily want on the page itself or in a blog post. In EverWeb 3.3 the old code has been replaced so that the popup can be used easily with both fixed width and responsive page layouts. The new code also resolves issues that the old hyperlink popup had with scrolling content.

Creating a Hyperlinks Popup Window
Creating a Hyperlinks Popup Window is easy. The following example shows you the steps that you need to create a hyperlink popup window that displays a long piece of text located on another page in your site.

1. First make sure that you have the latest version of EverWeb installed so that you have the up to date Hyperlink Popup feature!
2. Next, decide on what content you want in the popup and how big you want the pop up window to be when displayed on screen. For example, you may have some long form text you want to display. Bear in mind that you may have users on mobile devices so the Hyperlink popup should fit comfortably within the dimensions of a mobile phone display. For example, an iPhone SE has dimensions of 568 pixels high x 320 pixels wide so in my example I will be make my hyperlink popup 500 pixels high and 300 pixels wide.
3. Now create a new page in your website. This will be the page that has the content of the popup window. The page can be either fixed width or responsive. There are a few settings that are good to apply to the page. First go to the Page Settings tab of the Inspector Window. In the Page Layout section set a small Top Margin so that the contents of the popup window will not be right at the top of the popup window, e.g. 30 pixels.
4. Set the Minimum Content Height to 100. Using a low value will mean that when you scroll the popup window you will not have a vast amount of white space at the bottom of the popup window.
5. If using a fixed width page, make sure that the Content Width value is lower than the value you are going to be using for the width of the popup window itself. Setting this value properly will stop the contents spilling over the sides of the popup!
6. Consider adding a small left and right margin so that your content does not go edge to edge in the popup window! In my example, I set a 30 pixel left and right margin for my TextBox in the Metrics Inspector.
7. The popup window is complete. Style the contents as you want.
8. Now go to the page where you want to add the Hyperlinks Popup link. Select the object that you want to hyperlink to e.g. a piece of text or a button.
9. Go to the Hyperlinks Inspector and check ‘Enable as Hyperlink’. The hyperlink options become available for use.
10. As I am linking to a page in my site, I do not need to change the ‘Link To’ field. I do, however, need to change the ‘Behaviour’ field to ‘Open in Popup Window’.
11. A Width and Height field now appear directly beneath the ‘Behaviour’ field. Enter in the values that you decided upon earlier for the size of the popup window. In my example that’s 300 pixels wide and 500 pixels high.
12. In the ‘Page’ field set the dropdown to be the ‘popup’ page that we created earlier.

Your Hyperlink Popup is now complete! Preview the page to test the Hyperlink. Check to make sure that the contents of the popup fits properly within the window. If necessary, adjust the size of the popup window, or the page margins of the popup page so that the contents fit properly.

EverWeb’s updated Hyperlinks Popup window makes creating popup windows in your site easier than ever!

If you have a question or comment about this blog post please do let us know in the Comments Section below!