Hyperlinks in EverWeb: Everything You Need to Know!

Hyperlinks are something you’ll probably use on almost every page of your site, but there’s more to hyperlinking in EverWeb than just adding links to a page. Getting your hyperlinks right will make a real difference to how your site looks and how easy it is for your visitors to get around.

In this post we’ll look at what you can link, how EverWeb’s Hyperlinks Inspector works, how to style your link states, and some of the things that trip you up along the way.

The Hyperlinks Inspector
To use a hyperlink in your page, start by selecting an object you want to add a hyperlink to, or some text within a TextBox. Next, click on the Hyperlinks tab, the chain link icon, in the Inspector Window. At the top of the Hyperlink settings is the ‘Enable as Hyperlink’ checkbox. You’ll need to check this box to activate the hyperlinking options. Once you’ve done this, the hyperlink settings will be displayed for you to use.

The first option is the ‘Link To’ dropdown menu. This is where you choose what you’re linking the selected object to. In the next section, you’ll find the Hyperlink Formatting section. If you selected text to add a hyperlink to, use this section to style it. Most EverWeb users will probably stop with hyperlinking here, but let’s go back to the ‘Link To’ dropdown menu as it’s worth spending some exploring its other options.

What You Can Link To in The Hyperlinks Inspector
The ‘Link To’ dropdown gives you four options:

1. One of My Pages
   As you’ve already seen, this option links to another page within your EverWeb project. Select the page you want from the ‘Page’ dropdown menu. Use the ‘Position’ dropdown to either link to the top of the selected page, or to a Scroll Position, which is a link to a specific point on that page rather than at the top of it.
2. An External Page
   This option is used to link to other websites. Type or paste in the full URL, including `https://`. There’s also a ‘Nofollow’ link option in the Additional Settings section which tells search engines you’re not vouching for validity of the linked page. This is worth using when linking to sites you don’t actively recommend or trust completely.
3. A File
   This type of link is used for linking to downloadable content such as PDFs, ZIP files, or other documents. Click on the ‘Choose…’ button to select the file from your computer that you want to link to. EverWeb will add it to your Assets and will upload it to your server when you publish your site. By default the file will open on screen when clicked on. If you’d rather it downloads directly to your visitor’s computer, check the ‘Force Download’ option in the Additional Settings section. Note that this feature is not supported by all browsers and remember the implications for your visitors regarding this feature.
4. An Email Message
   When a visitor clicks on this type of link, their default email client opens with their address already in the ‘To’ field. You can also pre-fill a subject line using the ‘Subject’ field.

Using the Behavior Options
For all of the ‘Link To’ options except ‘An Email Message’, you can choose what happens when the link is clicked on using the ‘Behavior’ dropdown menu:

• Default — opens in the current browser window
• Open in New Window — opens in a new browser tab, leaving your site open in the original
• Open in Popup Window — opens in a popup window

For links within your own site, ‘Default’ is usually the right choice. For external links, ‘Open in New Window’ is usually recommended so that your visitor keeps your site in the background. The last option, ‘Open in Popup Window’, works best for when you want to show a page or file without taking the visitor away from where they are.

Link States: Normal, Mouse Over, and Visited
EverWeb lets you control how a hyperlink looks in three states:

1. Normal — the default appearance before the visitor does anything
2. Mouse Over — how it looks when the visitor moves their cursor over it
3. Visited — how it looks after the visitor has already clicked it

You’ll find these settings in the Hyperlink Formatting section. For each state you can set the color and whether the linked text is underlined or not.

Setting a Mouse Over color gives visitors a clear signal that something is clickable, whilst the Visited state is particularly useful on pages with lots of links such as blog index pages, resource lists and so on, where visitors benefit from knowing which pages they’ve already been to.

Don’t forget that if you leave these settings at EverWeb’s defaults (blue underlined text), they may clash with your site’s design, so it’s good to set up your own defaults here.

Setting Default Hyperlink Colors for Your Whole Site
Rather than setting link colors every time you add a new link, you’re better off defining your link defaults for the whole project upfront. To do this, go to the Format-> Default Styles…. menu option. In the Default Styles dialog box, you’ll find the hyperlinking entries in the Default Settings section in the top left hand corner:

• Link Color Normal: The Normal state
• Link Color Mouse Over: The Mouse Over state
• Link Color Visited: The Visited state

For each of these states, you can also choose whether to set Underline on or off. Set the color and underline options for each state, then click ‘Save’ when finished. Every new hyperlink you create from that point on will use the updated settings automatically. Remember though, that any change to Default Styles will only apply to new links going forward. Any links you’ve already created before updating the settings will need to be updated manually.

Hyperlinking Text vs. Objects
The way you apply a hyperlink depends on what you’re linking. Usually you’ll see this difference when setting up a button, using a TextBox as its basis.

• Linking a whole TextBox
  Single-click the TextBox to select it, then enable the hyperlink. The entire box becomes clickable.
• Linking specific words inside a TextBox
  Double-click inside the TextBox to select it. Next, select only the words you want to link, then enable the hyperlink. Only that text will be the link.

This distinction matters because the formatting works differently between the two. When you link a whole TextBox, the Hyperlink Formatting colors apply to the entire object. When you link text within a TextBox, the formatting applies only to that selected text. Look out for EverWeb 4.5 which looks to make things in this respect clearer and easier.

Linking Shapes and Images
Single-click the shape or image, then enable the hyperlink. It’s the same process as for TextBoxes. If you’re creating a clickable button from a shape that contains clickable text, you should link the text. You can also link to the button itself if you prefer. In the upcoming EverWeb 4.5 it looks as if the way in this works will be improved as this can cause designer/user confusion about where to click. At present, it’s usually best for the user to click on the button text, but you may prefer to add the hyperlink to the button itself instead.

Hyperlinking Tips
Here are some good to know tips for effective Hyperlinking in EverWeb:

1. Don’t Forget to check Enable as Hyperlink
   The most common reason a link doesn’t work. The checkbox must be checked and the Link To dropdown must have a valid destination.
2. Linking a whole TextBox when you only meant to link part of the text
   Single-clicking a text box and enabling a hyperlink makes the whole box a link. If you only want certain words to be the link, double-click into the TextBox first, then select those words before enabling the hyperlink.
3. Testing file download links in EverWeb’s Preview
   File downloads don’t always behave correctly in Preview. Test them by publishing to your server first, then clicking the live link.
4. Not setting Default Styles before you start
   If you add lots of links before setting up your Default Styles, you’ll end up with inconsistent colors across the project. It’s much easier to set them at the start.
5. Leaving the Visited state at the default blue
   If your site uses a non-blue color scheme, the default Visited color will look out of place. Set it to something that fits your design.

Putting It All Together
When using hyperlinks, a bit of upfront thought goes a long way. Setting up your Default Styles before you start building your site, making sure your Mouse Over state is distinct enough to be noticed, and testing any regular and file download links on your live server rather than in Preview will help make sure that everything works perfectly before you go live.

Do you have any questions about hyperlinking in EverWeb? If you do, just drop them in the Comments below! We’re happy to help!