EverWeb Logo


Linking to a Popup Window

Video Transcript:

Version 1.9 of EverWeb introduced a new feature which allows you to link to a popup window that you create in EverWeb. This might be useful when you want to link to something instead of having it right on your page. For example, a contact form, a download, or further information on a product or service.

As an example, I will show you how to set up a contact form using EverWeb’s built in contact form.

The first thing I will do is add a new page to the site. The design of this page can be whatever you want, but in this example, I am just going to use a blank white design. I am going to rename this page and make sure it is not included in the navigation menu.

Next, I will drag and drop the contact form widget on to the page. What I have right now is a regular looking page with just this small contact form on it. But since this is a popup window and not a full page, I only want a small portion of the page to be shown. More specifically, I want the contact form and a bit of white space to be seen when the popup appears.

What I am going to do now is click on the Metrics tab to check on the size of the contact form. This will help me later on when specifying how large I want the popup to be. I see that my contact form is 300x265. I will make a note of this and move on to the next step.

Now I will click on the Page Settings tab, and scroll down to the Page Layout section. Since I don’t have anything in the header and footer, I am going to set these values to zero. Next, I am also going to change the content width value to be slightly higher than the width of my contact form. So since my contact form was 300 pixels wide, I will set this value to be 350. Likewise, I will change the content height value to be a bit higher than the contact form as well. Then I will just adjust the form so that it fits nicely in this page.

So now that my contact form popup is complete, I still need to link to it. On the page that I want to have the link, I will select the object or text that I want to be hyperlinked. Then I will click on the Hyperlinks tab and Enable as Hyperlink.

From the Link To menu, I will ensure that ‘One of my pages’ is selected. For the Behaviour menu, I am going to select Open in Popup window. A field for width, and a field for height will appear. I’m just going to enter the values that I had put in earlier for content width and content height. Then, in the Page menu, I am going to select my contact form popup page that I had just created.

When I publish my website, I will be able to click on this link and view the link to the popup window.

And that is how you create a link to a popup window in EverWeb. Once again, make sure you have version 1.9 or higher installed on your computer in order to be able to utilize this feature.

I am going to go through another example of how you can utilize this popup feature.

Let’s say I have this e-commerce website in which I sell clothing. When my customers see the products that I have for sale, they usually want to learn a bit more about it before adding it to their cart. As a result, they usually click on the learn more button, which might take them to another page that contains more information about the product.

Rather than make the customer go to another page, I can add the information into a popup window. This will allow the customer view more information about the product, add it to their cart, and easily return to the previous page to continue shopping.

So those are a just couple of examples of how you can use the new link to a pop up feature in EverWeb.