11 Dec 2015

Enhance your Website with EverWeb’s Popup Windows

No Comments EverWeb, Tips and Tricks, Web Design

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.

EverWeb Popup Window

An Example Popup window with the original page greyed out in the background

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

  1. Create a new web page and name it appropriately e.g. .’Medicine Page Popup1′.
  2. On the Page Settings Tab of the Inspector, set the ‘Top Margin’, ‘Header Height’ and ‘Footer Height’ all to zero.
  3. Next set the height and width dimensions of the popup using ‘Content Height’ and ‘Content Width’ settings e.g. 400 by 300.
  4. Add the content you want in the popup page. Use the Arrange-> Align Objects menu to centre and middle the content within the popup
  5. 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.
  6. Go to the Hyperlinks tab in the Inspector and tick ‘Enable as Hyperlink’ to activate the hyperlinking options.
  7. 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’.
  8. 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.
  9. 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.
  10. 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

  1. 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.
  2. 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.
  3. 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!

20 Nov 2015

10 Ways to Work Smarter in EverWeb

3 Comments EverWeb, Tips and Tricks, Web Design

One of the great things about EverWeb is that everything is usually just one mouse click away. Take that ease of use one step further with these 10 tips that will help you work smarter and improve your workflow…

  1. Chosen the wrong shape? If you decide that the shape you selected is not the right one you can easily change it by selecting a different shape from the ‘Shape’ drop down menu in the Shape Options tab. Any styling you used for the original shape is kept so you save time and effort!
  2. The ‘Rotate’ button in the Toolbar turns the selected object 90 degrees clockwise. Hold down the ‘Alt’ Key and click on the Rotate button to turn the object 90 degrees counter clockwise.
  3. Easily replace one image with another without losing any styling attributes. Just drag and drop your replacement image on top of the original image. The new image retains the original’s styling attributes such as opacity, stroke etc…
  4. Quickly delete a Project file in the Projects Window. Select the Project file you want to delete and press the backspace key rather than submenu. You’ll still get the confirm deletion message before deletion using this method.
  5. Create a Master Page from a regular page. Just drag the regular page from the grey area of the Web Page List in to the blue area then drop it in place. The regular page remains in the grey area of the Web Page List with a Master Page ‘copy’ added in to the blue area.
  6. Quickly access an object that’s underneath another object. Just right two finger tap (or secondary) click on the top object and use ‘Pick layer’ to select the object beneath it.
  7. Quickly view an asset in the Assets List without using Quick View. Just start dragging the asset out of the Assets List to see an image thumbnail. Drop the asset back in it’s starting place if you don’t want to use it in the Editor Window.
  8. Add a new page or new Master Page just by right clicking in the empty grey or blue space of the web page list.
  9. Sort your Project files alphabetically by name in the Projects Window. Click on the up/down arrows to the right of the ‘Recent Projects’ label in the Projects Window. By default Projects are listed by their last opened date.
  10. Quickly add a new Master Page using the new ‘+’ button to the right of the Master Page drop down box in the Inspector Window. This is a new EverWeb 1.9 feature that saves you going to the Web Page List then back again to the Inspector tab when you create a new Master Page!
  11. All of the following shapes have Widget Settings available to them in addition to Shape Options:
    • Rounded rectangle
    • Single Arrow
    • Double Headed Arrow
    • Speech bubble
    • Star
    • Polygon
    • Jagged Box

Know a quick tip that you want to share with others? Let us know in the comments section below!

15 Jul 2015

Give Your EverWeb Site A Favicon

2 Comments EverWeb, Tips and Tricks

When EverWeb 1.8 was released, many new features came out at one time, and I think as a result, some highly requested features have been overlooked by those same users who were requesting those features.

One feature in particular that I believe gets overlooked is the Favicon feature. In case you are unfamiliar, a favicon is a small little icon that is associated with a website. If you are using Safari 8, just click in the address bar, and any website that has a favicon assigned to it will appear next to the URL. If you are using another web browser such as Chrome or Firefox, just look at the very top of the tabs in the browser and you will be able to see the favicon.

In EverWeb, you can add your Favicon simply by going to File > Edit Publishing Settings, and scrolling down to the Favicon menu. Click the Choose button and then select the image you want to use.

Here is a video tutorial released by EverWeb to show you exactly how you can do this.

08 Jul 2015

EverWeb’s Image Slider Widget Is Even More Powerful!

No Comments EverWeb, Tips and Tricks, Widgets

With the release of EverWeb 1.8, the Image Slider widget received an update that included the ability to add captions to each slide, as well as adding a link to each slide. These new features allow users to make an even more professional looking image slider for their website.

Image sliders on websites became popular several years ago, and allow webmaster’s to display several photos showcasing their products/services with minimal effort from the website visitor. Image sliders can often be seen on photographer’s websites, as well as other sites such as online newspapers, and retailers like Amazon.

With the responsive design features released in EverWeb 1.8, we can now make our image sliders fill the entire width of the browser, and respond to changes made to the size of the browser.

The video tutorial below will illustrate how to use the Image Slider widget, as well as how to make the slider span the entire width of the browser. Enjoy!

24 Jun 2015

EverWeb 1.8 – Image Optimizations Part 2

No Comments EverWeb

In my last post I had a ‘Special Tip’ at the bottom. I got a lot of emails about this feature so I want to clarify what these new features in the preferences can be used for.

 

Optimize JPEG and PNG files

Optimize JPEG and PNG fiels on publishing with EverWeb

 

There are 3 image optimization settings here;

 

1. JPEG Image Quality

This option controls the optimization level of your JPEG files. The smaller this number, the smaller the JPEG files will be, however the lower the quality of your JPEG image files. The best bet is to keep it at it’s default of 80%, unless the JPEG image quality is very important to you. For example if you include high quality photos. But keep in mind, the 80% optimization usually provides very high quality images anyways

2. Optimize PNG Files

This option will reduce the file size of your PNG files without affecting the quality. This is a fantastic option to reduce your PNG images by up to 40%, sometimes even more. However, it does have the draw back of slowing down publishing since each PNG needs to be run through an optimizer.

3. Use Color Profile

This is a complex option but an important one. All web browser’s and devices (such as desktop, laptops, tablets and mobile devices) have different settings based on colors they can actually display to you. What you see on one device may not be the exact same color you see on another device. This all has to do with color profiles which can be modified from your system settings.

By using this option, you guarantee that your images will, for the most part, appear the same on all devices or browsers (or close to it). However, including this information increases the size of your images. If making sure your images look the same on all devices is important to you, keep this option selected. If slight variations in the color of images is OK, you can unselect this option to reduce the file size of your images.

You won’t see large differences with this option turned off, but if you are a professional photographer you will definitely notice it. If you are trying to match your logo image color to your page background color for example, without this option selected the colors may appear different in your browser, or on another device.