{"id":2532,"date":"2016-07-28T22:52:34","date_gmt":"2016-07-29T03:52:34","guid":{"rendered":"http:\/\/www.ragesw.com\/blog\/?p=2532"},"modified":"2018-04-10T02:16:19","modified_gmt":"2018-04-10T07:16:19","slug":"pdf-file-downloads-using-popup-windows","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2016\/07\/28\/pdf-file-downloads-using-popup-windows\/","title":{"rendered":"PDF File Downloads Using Popup Windows"},"content":{"rendered":"

EverWeb\u2019s popup window hyperlink feature is an extremely useful and versatile website design tool.\u00a0It’s great for keeping visitors focused as the browser background is greyed out when the popup window is in use. That’s useful when you want your visitor to concentrate on filling out a Contact Form or anything else that may require a ‘call to action’. Popup windows are also good to use for additional information that’s useful, but not essential, to the main message, or theme, of your page e.g. clicking on an image of a person shows\u00a0a popup biography, clicking an address link shows a map etc. There are almost unlimited ways to use a popup window. \u00a0In the example below we show how you can use to use a popup window for downloading a PDF file. A fictional company, ‘iPicture’, wants to offer it’s customers a free download of their photography e-book ‘Point, Shoot, Share’. Their website uses EverWeb’s built in ‘Software’ Theme Template.<\/p>\n

 <\/p>\n

1. Firstly, a PDF file should be made ready. A PDF file is a good choice for downloads as it’s file format is operating system independent. That makes PDF’s easy to access almost anywhere. Many apps, such as Microsoft Word and Apple Pages, \u00a0can convert their own native document formats to PDF file format.<\/p>\n

2. Once you have created your PDF file, convert it into a ZIP file. A ZIP file will compress the file making it quicker to download for your visitor. Locate the PDF file in OS X’s Finder, then right click on it. Select the option to \u2018Compress\u2019 the file. This will produce a new file with the same name as the original but with a ZIP extension added at the end. You may edit the name of the new file to remove the ‘PDF’ extension. Remember to keep the ‘ZIP’ extension though.<\/p>\n

2. With the ZIP file ready, open your EverWeb Project file. If you haven’t done so already, create the page that will contain the hyperlink to the popup widow. The hyperlink can be a piece of text, an image or a button. Often a button is best as it acts as a \u2018Call To Action\u2019, i.e. something that is clearly visible and gets your visitor to respond, to take action!<\/p>\n

3. If you want to use a button, you can easily create on by drag and dropping a rectangle shape on to the Editor Window. Next, style the rectangle as you want. Double click inside the rectangle to add the button text, in the same way you do for a text box. Use the Fonts Panel to style and size the text. To center the button text, highlight the text itself. Use the horizontal and vertical alignment buttons in the Text Inspector to center the text. If the button does not align properly, make sure \u00a0sure that \u2018After Paragraph\u2019 is set to zero.<\/p>\n

4. After creating your download link button, you need to create the popup window. This is just another page that is suitability sized and styled. Start by adding a new\u00a0page. In our example, we used the blank page style of the \u2018Software\u2019 Theme Template. Name the page appropriately to\u00a0indicate it\u2019s function e.g. ‘Popup PDF Download’.<\/p>\n

5. As this is a popup window, it will only part of the page. In this example we will make it 400 x 400 px. To achieve this effect, go to the Page Inspector tab and use\u00a0the following settings:<\/p>\n